Tweet
- 玉井 昇
- Webプロデューサー
注目の専門家コラムランキング
対象：ホームページ・Web制作
- 原島 洋
- （Webプロデューサー）
- 井上 みやび子
- （Webエンジニア）
ステップ4 「デザインを決める」
そろそろホームページを形にする作業です。
１枚の紙を机に広げてください。
その紙に、作りたいホームページの下書きをします。
まずは、縦長の四角を書いてみて
それはホームページの外枠です。
書けた？
そしたら次は上のほうに横線を引きます。
外枠の1/10位の位置に
それがヘッダーのタイトルバーになります。
次に左から1/4位の位置に縦線を引きます。
これが左側のナビゲーションを配置するエリアになります。
こんな感じに仕切ります。
参照 http://www.softplanning.com/
┏━━━━━━━┓
┃ 1 ┃
┣━┳━━━━━┫
┃2 ┃ ┃
┃ ┃ ┃
┃ ┃ 3 ┃
┃ ┃ ┃
┃ ┃ ┃
┃ ┃ ┃
┣━┻━━━━━┫
┗4 ━━━━━━┛
１の位置にステップ２で用意した素敵な素材を配置します。
色を２と３のエリアと変えます。
２の位置にメニューボタンまたはメニューリンクを配置します。
ここは３のエリアと色を変えるといいです。
３の位置にステップ３で書いたメインの原稿を配置します。
４の位置には各ページへのリンクや著作権表記を配置します。
色を１のエリアと同じにします。
色は、お好みの色で構いません。
ただし、たくさんの色を使わずに
２、３色にしましょう。
１色ベースになる色を決めて
トーンを変えて何色かバリエーションを持たせます。
例えば、紺系なら、濃い紺、やや濃い紺、薄い紺、明るい紺
これだけで同系色の４色という変化をつけることができます。
ボタンが作れなければテキストリンクでよいのです。
各ページ名を縦に並べてみてください。
それが、メニューになります。
どうですか？
悩まずにサクサクやると簡単でしょう。
今回もたったこれだけ。
大したことないですよね。
詳しいことは、私の著書が参考になります。
⇒ http://www.tamainoboru.info
