レイアウトの基礎知識-02
レイアウトの基礎知識2つ目の投稿です。前回は読む側の視線を考慮しよう！グループ分けをしっかりしよう！というような感じの内容でした。まだ見ていない方は「レイアウトの基礎知識-01」からご覧ください。
では続きです。
3. 整列の原則を知る
整列の原則とは、各要素の形状、大きさ、色などを揃えることを言います。前回ご説明した近接の原則と同様、ユーザーが直感的に構成を理解できるようにします。
上の例でご説明しますと、要素が揃えてあることで、１人目に目を通したとき２人目３人目はどこにどんな内容が書いてあるか把握した状態で読めるはずです。これがもし構成がバラバラで並んでしまっていては、都度どこに何が書いてあるのかを読まなければ理解できず、面倒になり読むことを止めてしまうかもしれません。
ちなみに、各要素を揃えていくと「見えない力線」というのが生まれます。これは、線がなくても、そこに線があるように感じる「線」です。これにより見栄えが良くなるのはもちろん、効果的に使うことで秩序をもたらしユーザーが理解しやすくなる効果も期待できます。
4.対比の原則を知る
対比の原則とは簡単に言ってしまえばメリハリをつけることです。「近接の原則」「整列の原則」により並びはきれいに整ったとしても、今度は単調になりすぎてしまいがちです。タイトルなどの重要な要素を色や大きさで目立たせることでメリハリをつけましょう。ここで重要なのが前回ご説明した「視線の動きを考慮する」です。人の視線は上から下、左から右（新聞など逆な場合もある）に流れて行くのでしたね。
では左上をページのタイトルにして、一番目立つデザインにします。中の各要素のタイトルも目立つデザインにしましょう。当たり前ですが各要素は読んでもらいたい順番で並べます。こうすることで何となくの流し読みがしやすくなります。初めは各要素のタイトルのみ読んでみて、興味がありそうなところは本文に目を通す、そんな読み方ができるかと思います。
今回はここまで！
少しマニアックな話しになってしまいましたがいかがでしたか？「○○の原則」なんてカッコつけて紹介しましたが、私はまったく覚えていません（すみません）。でもやっていることは同じです。私の普段のやり方は、まずグループを考える。その並び順を考える。そしてとにかく揃える！びっちり揃えて、要素と要素、グループとグループをいい具合に離す（上下左右の空白を意識 ※これ重要です）。離す距離を他のグループと統一する。そしてメリハリをつける。です。
私も学校で習った訳ではないので偉そうに語れる身ではないのですが、レイアウトを意識して整えるとぐっとプロっぽくなることは間違いありません。まずは簡単なところから、要素をビシッと揃えて「見えない力線」を作ってみてはいかがでしょうか。
「パソコン教室わかるとできる」は教室数トップクラスのパソコン教室なので安心して通っていただけます。全国に約200教室展開していますので、まずはお近くの教室までお気軽に無料体験をお申し込みください！
・無料体験のお申し込みはこちら
