デザインテンプレートの作り方

デザインテンプレートデータの概要

　デザインテンプレートデータはHTMLの文書構造にもとづいて作ります。デザインの必要性が高いパーツはすべて含めた形で作っておきます。

　必要なパーツはヘッダー、フッター、グローバルナビゲーション、サブナビゲーション、タイトル、見出し（h1,h2,h3）、テキストリング、テーブルなどです。サンプルファイルはこちらからダウンロード（http://www.thinkit.co.jp/images/article/101/1/10111.zip）できますので、テンプレートとしてご利用ください（10111.zip/151 KB）。

　デザインの振り分けですが、ジャンルごと（ニュートラル、ポップ、クール、女性的など）に作っておくとよいでしょう。汎用性が高いもののニーズは高いですから、ニュートラルなテンプレートデータは多く作っておいて損はないと言えます。

　あとテンプレートデータを作る上でルールを設定しておくことも重要です。例えばレイヤーフォルダ構造は分かりやすい名前にしておきましょう。私も大ざっぱな性格ですので、以前はレイヤーの名前をつけたりつけなかったりでした。レイヤー、フォルダを分かりやすい名前にしておくと、修正作業等もレイヤーを探さなくても済むため、結果的な作業時間は早いです。

　またスタイルの共有も重要です。スタイルをあらかじめ作っておいて、チーム内で共有しておきましょう。特にレイヤースタイルは作業を圧倒的に早くします。また、チーム内でクオリティーの均一化を図ることができるのは大きなメリットです。

デザインテンプレートの制作

　いよいよ実制作に入りましょう。

　今回は最も汎用性の高いニュートラルなイメージのデザインテンプレートデータを作っていきます。デザインの印象づけで大事なのが色ですが、今回はニュートラルなデザインですから、どんな色とも相性がよい白とグレーを使って組み立てていきます。

　デザインの方向性も決まったので、ナビゲーションから作っていきましょう。ナビゲーションの役割ですが、Webサイト内で共通で使うナビゲーションメニューで、ページの上部や左右に、Webサイト内で共通メニューとして使うことで、Webサイトに統一感を表現します。

　ビジュアルとしては、比較的大きな面積であることが想定されますから、ページの印象づけに影響があります。あくまでもケース・バイ・ケースですが、あまり重い色で作ってしまうと、ナビゲーションばかりに目がいってしまい、肝心のコンテンツが埋もれてしまう可能性がありますから、薄めのカラーで作ることをお勧めします。

　また当然ながらユーザーがサイト内を回遊して、どこにいるのか分かってもらうことが大事です。通常時、現在地表示、オンマウス時としっかり作り分けておきましょう。