PR

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

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のWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

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