デザインをスムーズにするガイドライン: 第2回 サイト構造の理解とデザインデータの制作にガイドラインを活用する
前回は、以下の３つのガイドラインを紹介しました。
- 名前をつける
- 順番にならべる
- グルーピングする
今回は、上記の３つのガイドラインを活用して、Webサイトを分解してみましょう。
Webサイトの構造を考える
Webサイトは、1枚以上のページで構成されます。ページ数は、 掲載される情報の内容や量によって変動しますが、ここでは5枚程度のページ数で構成されるケースを考えてみます。
まず把握したいのが、Webサイトのページ構成です。ページの名前（タイトル）、ページの順番、ページのグループ（階層構造）というように、各ページが持つ、前述の３つのガイドラインに相当する情報を把握しましょう。
ページ内の構成を考える
続いて、ページの内容に注目してみましょう。
グルーピングの観点で見てみると、ページの内容は、いくつかのグループで構成されていることがわかります。
上記であげたグループを、種別ごとにグルーピングすると、このようになります。
グループ種別 該当グループ サイトにおいて共通 ヘッダー・グローバルナビ・フッター 特定のコンテンツグループに置いて共通 ローカルナビ ページ固有 コンテンツ
ページ内の各グループが、ページ固有のグループなのか、複数のページで共通するグループなのかを把握しておきましょう。
ページ内の要素の構成を考える
次に、要素という単位で見てみましょう。
要素とは、ページを構成するそれ以上分割できないもののことです。ページ内にはさまざまな要素が存在し、要素同士は親子関係や並列関係などの関係性を持っています。
例えば下の図のコンテンツグループは、見出しと2つのトピックで構成されています。2つのトピックは並列の関係です。
またそれぞれのトピックは、イメージと小見出しと本文で構成されている、という具合です。
つまりこのコンテンツグループ内には、3つの階層構造が存在していることになります。
同じ要素が複数の箇所で使用されている場合もあります。要素の名前、要素の順番、要素の構成を意識して把握しましょう。
さて、サイト内のページやページ内の要素の構造を、3つのガイドラインを活用して分解してきました。今度はこれらを、デザインデータを作成するためのガイドラインとして活用してみましょう。
デザインファイルの構成
デザインデータをPhotoshopで作成することを前提にしてお話しします。複数のページで構成されるWebサイトのデザインを作成する場合、1つのファイルにすべてのデザインをおさめるのは無理があります。
かと言って、やみくもに細分化しては、どの要素がどのファイルに含まれているかわからなくなったりと、取り扱いが大変になります。
そこで、デザインを始める前に、デザインファイルの構成を決めておきましょう。デザインファイルの構成は、Webサイトの構成と、ページ内のグループの種別を活用します。
まず、ページごとにファイルを作成します。このファイルでは、ページ固有のコンテンツグループの要素のデザインをおこないます。
さらに、サイト共通のグループや特定のコンテンツ共通のグループを、個別のファイルとして作成します。
このように、共通して使用されるグループを別ファイルにして、各ページファイル側では、共通グループファイルの要素を読み込ませるようすれば、簡単に各ページファイルに共通の要素を表示することができます。
また、共通グループのデザインに修正が発生した場合には、元であるグループファイルを編集するだけで、各ページファイルに修正が反映されるので効率的です。
さらに、繰り返して使用する見出しやアイコンなどの要素は、共通要素として別ファイルにまとめて作成しておくとよいでしょう。
デザインデータのレイヤーの構成
ページファイルのレイヤー構成も、3つのガイドラインを活用して考えてみましょう。
これも、要素の順番や階層構造に合わせて作成するとよいでしょう。階層構造の実現には、レイヤーグループを活用します。
HTMLでは、あとから追加されたものほど手前に表示されます。これにならい、デザインデータでも下から上に積んでいく順番で作るとよいでしょう。
デザインで上にあるものはレイヤーパネルでも上に並べるのが多数派だとは思いますが、下から積む方法は、構造の面でも矛盾が少なくオススメです。
ぜひ試してみてください。
このように順序を整理し、レイヤーグループを活用して構造化することで、グループ単位での複製や順番の入れ替えが簡単になるなど、さまざまなメリットがあります。
また、レイヤーやレイヤーグループには名前を付けるようにしましょう。結構骨の折れる作業ですが、自分以外の人が見ても分かりやすいデータを作成することで、デザイン作成後のコミュニケーションがとてもスムーズになります。
レイヤー名が付いていれば、任意のレイヤーや同種のレイヤーを見つけ出すことが簡単になるなど、作業上のメリットもあります。
ファイルもデータも構造化
実際のデザインやデザインデータを想定して、3つのガイドラインの活用方法を見てきました。いかがだったでしょうか。
デザインをはじめるにあたって、ファイルやデータ内を構造化して把握することで、複雑な処理に対応しやすくなります。
デザインのアイデアを考える際に同時進行でおこなうのはなかなか難しいと思いますが、構造化の意図を把握して、初期段階から意識して取り組んでいくと、効率的に制作を進めることができます。
ぜひ取り組んでみてください。