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