• サイトマップ

要素の配置

画面上にスペースをとり、 レイアウトの青写真が出来上がったら実際に要素を配置していきます。 しかし、ただ要素を並べるのではなくて各要素の関係、 全体のバランスを考えながら配置しなければ良いレイアウトは生まれません。 以下のポイントを参考にしてみてください。

• 要素はそろえる
• 余白をとる
• 一番目立つ要素に注目する

要素はそろえる

要素はできるだけそろえましょう。それだけでスッキリとした印象が生まれます。 これはレイアウトの原則、整列の原則を利用したものです。 要素をそろえることで画面上に基準線が生まれます。 この基準線とは実際の線ではありません。 要素の端が続くことで視覚的に意識できる線のことです。

基準線は2、3本に押さえるといいと思います。 この線が画面上に何本もあるとユーザに煩雑な印象を与えてしまいます。 あえて基準線をつくらないことでにぎやかな雰囲気を演出する方法もありますが、 それなりのテクニックと経験が必要なので初心者の方には進められません。 私も自信ありません(涙)

グリッドシステムを使った画面構成を考えておくと 非常に効率よくこのポイントを実行できます。

余白をとる

余白を意識してとり、全体のバランスをとることが大切です。 これは画面利用率に関係することですが、 余白のとり方だけで様々な印象をユーザに与えることが可能です。 初心者の人がよくやってしまう失敗が 余白はすきまだと勘違いして要素を画面いっぱいにとるレイアウトです。 1つ1つの要素が主張しすぎてうるさいだけになってしまうので適度に余白をとり、 要素を引き立てるようにしましょう。余白には意味があるのです。

1番目立つ要素に注目する

1番目立つ要素には注意が必要です。 何の意図もなく配置してしまうと他の要素とのバランスがくずれ、 全体としてのレイアウトのクオリティが下がってしまいます。 この目立つ要素を配置を配置するにあたり、 次のポイントに気をつけるとバランスがとりやすいので試して見てください。

• 要素の1番目立つ位置と対象となる位置に同じ程度に目立つ要素を配置する
• 目立つ位置を通る縦、または横のラインに同じ程度に目立つ要素を配置する