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

2008年7月7日(月)
土井 優

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

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

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

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

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

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

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

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

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

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

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

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

株式会社クリエイティブホープ
アートディレクター。広島県出身。デザインに興味を持ち印刷会社、Web制作会社に勤務し、2007年に株式会社クリエイティブホープに入社。http://www.creativehope.co.jp/

Think ITメルマガ会員登録受付中

Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。

Think ITメルマガ会員のサービス内容を見る

他にもこの記事が読まれています