• サイトマップ

要素をグループ化する

要素をグループ化して作り込むことでまとまりのあるサイトを制作しやすくなります。 要素を作るとき、配置するとき、どうしてもバラバラに作業してしまうものですよね。 でも関連のある要素をまとめておくと統一性をもたせやすかったり、すっきりとした レイアウトが実現できたりします。

関連のある要素とは例えば、ロゴとタイトル、メニューまわり、 サイトのイメージを表現する画像、文字情報などです。

グループで要素を調整し、全体を調整する

グループで要素を調整することであとの画面全体の調整がしやすくなります。

例えばロゴとタイトルの高さを調整する、 メニューまわりは同じフォント・文字サイズ・カラーに統一、 一体感を持たせるために位置を詰めるなど、グループで作り込んでおきます。 すると全体でレイアウトを調整する場合、 グループ間の位置や大きさの調整だけに集中できますよね。 全体を見ているのに要素を一つ一つにかまう必要が最小限に抑えられます。

グループ化することによるメリット

グループ化することにより以下のようなメリットが生まれます。

• 要素の意味を強調できる
• レイアウトの指針が立てやすい

要素の意味を強調できる

要素をグループにまとめることで各要素の意味が強調されます。

例えば、サイトのイメージを伝える画像など、 画面上にバラバラに配置してしまうと各画像の印象が薄れ、 意味が希薄になってしまいます。しかしこれらの画像をグループ化し、 まとめることで画像の印象がアップします。 それによってその画像の持つ意味がユーザに伝わりやすくなるのです。

レイアウトの指針が立てやすい

要素をまとめることによって関連した要素に対するレイアウトの指針が立てやすくなります。

各要素をバラバラにレイアウトすると要素間のバランスだけを見てしまい、 その要素の意味を考えたレイアウトにまでなかなか気を配れなくなってしまいます。 要素には意味があり、目的や機能があります。 その意味を最大限に生かしユーザに伝える表現がレイアウトには必要です。

グループ化することで要素の意味をきちんと頭に置き、その意味に あったレイアウトの指針をたてやすくなるのです。 グループ内でレイアウトができれば、 後は全体で調和のとれた完成度の高いレイアウトを実現するだけです。