専門サイト制作日記02

前回のモックアップを基にして、業種の分類ごとに色分けをしてみることにしました。このサイトでも使っている手法です。
 
モックアップ総合

グローバルナビゲーションバーの文字も色分けしてみたのですが、これをWordPressで再現するのは難しそうなので、おそらくすべて白い文字になるかと思います。色については、下の方にある角丸のボックスやフッターにあるメニューからでもわかるでしょうし。ちなみに、メニューはあくまでも仮のものです。今のところ法人設立や在留関係の仕事については、あまり考えていません。
 
右下にある表は、スタイルシートを作るときに参照する色見本です。前回の作成時にはこういったものを用意していなかったため、色の設定をするのがけっこう面倒でした。出力して手元に置いておけば、すぐに調べられて作業の効率が上がるはずです。
 
そして、各ページのデザインはこんな感じになりそうです。
 
モックアップ各ページ

ポイントや注意点は、背景を塗りつぶして強調することにしました。ポイントだけは、ナビバーなどに合わせて色を変える予定です。右下が空いていたので、そこに見本を載せてみました。
 
各要素(ヘッダーなど)の範囲や余白についても、この段階でしっかり決めておくことにしました。要素を囲っている細い点線は、実際には表示されない境界線を視覚化したものです。また、細かい文字で書いてあるのは余白の数値などですから、こちらも表示はされません。
 
モックアップを使ってのデザインはこれで終わりにします。ここからCSSで再現できるのは8割くらいでしょうか。素直にホームページ作成ソフトを使って、内容に時間をかけたほうがよいのではないか……なんてことはなるべく考えないようにしています。
 

モックアップ総合

ブログから本が生まれました!


「相続を気軽に学べる解説書を」ということで、八王子の行政書士・社労士の井出さん(至誠法務労務サポート代表)と一緒にコツコツと書き溜めたブログが、1冊の本になりました。
 100の題材を「相続」「遺言」「成年後見」「終活」の4章に分け、各タイトルは五七五の川柳形式にしてあります。口語調の解説文が「わかりやすい!」と評判です。

ABOUTこの記事をかいた人

はちおうじ総務相談所の長岡です。

GONZOを名乗りながらも、当たり障りのない記事を書いています。
中小企業の経営に役立つ情報を発信していきたいと思っているのですが……