：2012年04月27日　 ：レイアウトデザイン　 ：デザイン力 法則　 ：この記事は10分程で読めます。

以前私は、デザインの勉強を一切したことの無いデザイナー志望の新入社員に、webデザインを教える教育係を任されたことがあります。
教育なんて簡単なんじゃないの？と安易に考えた私は、案の定痛い目を見たわけです。この日から1ヶ月間、私は毎日3時間残業する羽目になってしまいました。
人に教えるのは意外と難しく、何から教えたら良いのかすらわかりませんでした。ただやはり最初なんで基本が大事だろうと思い、先輩達のアドバイスを受けながら、【デザインの基本原則】を教えることになったわけです！

今まさに新人教育に困っている人がいれば、まずこの記事を読んでもらって見てください！新人デザイナーに教える手間が1.2時間はぶけるかもしれません！(記事がわかりにくければ読ませないでください。その時はごめんなさい)

では、早速本題に入りたいと思いますが、まずは私が新人デザイナーに初めに教えることにした【レイアウトデザインにおける4つの基本原則の種類】から紹介させていただきます。その後、今回の本題である、基本原則の【整列】について詳しく紹介させていただきますので、よろしくお願いいたします。

レイアウトデザインにおける4つの基本原則の種類

デザイナーには、よく知られた4つのレイアウトの基本原則があります。ここでは各原則について簡単に紹介させていただきます。

1.整列

整列とは、各要素をきちんと整列して配置するということです。要するに小学校でやった「前ならえ」です。何らかの基準にあわせて揃えるということです。

2.近接(グループ化)

近接とは、関連する要素同士を近くに配置してグループ化し、関係の薄いものを遠ざけるということです。要するに小学校でやった「班になる」ということです。

3.コントラスト

コントラストとは、1つの要素と、それとは違う1つの要素の違いを、はっきり区別させることです。要するに体育の時間に使った赤白帽子と同じことです。

4.反復

色や形、テクスチャや画像など、視覚的に認識できる要素を、ページ全体を通して繰り返す事。(小学校ネタで反復の例を出したかったんですが、思いつきませんでした)

この4つを基本原則を理解することがデザイナーになるための第一歩です。今回はこの基本原則の中から【整列】について詳しく説明させていただきます。

整列させると、統一感が生まれ、美しく、ユーザーが認識しやすくなる

まず、整列をさせることで生まれる効果を、わかりやすく理解していただくために、以下の2つの名刺デザインを見てください。

左の名刺は、各要素を適当に並べただけのデザインです。右の名刺は、各要素を左揃えに整列させたデザインです。
この左と右を比べて頂ければ分かると思いますが、適当に並べた左の名刺に比べ、各要素を整列させた右の名刺は、デザインに統一感が生まれたことが分かると思います。また美しくなり、読みやすくなったんじゃないでしょうか？
整列させる事で、統一感のあるデザインになり、ユーザーに認識してもらいやすくなるんです。

整列の種類と効果

1.左揃え

まずはこの左揃えがレイアウトの基本であるということを覚えておきましょう。もっとも多く使われるのが左揃えです。人の視線は左から右に移動しますので、左に揃っていると安心感や引き締まった印象を与えることができます。下記の左・右・中央揃えの文章を見てください。

これを見ていただければ分かると思いますが、左揃えがもっとも読みやすいと思います。右・中央揃えだと、次の行に視線を移すときに階段のようにガタガタと視線を移動させなければなりません。そのため文章が読みにくくなってしまうんです。

2.中央揃え

上の例でも分かると思いますが、ユーザーに文章を読んでもらいたいコンテンツの場合、中央揃えにするのはNGです。中央揃えは、ユーザーの視線を集めたい時や、区切り、アクセントとして使うことが多いということを覚えておきましょう。

また中央揃えにすることで、伝統的で格式のあるエレガントな印象を与えることができます。たとえば、右の図のようにフレンチ料理店のメニュー表などでは、中央揃えにすると有効的です。また映画のエンドロールや、結婚式の招待状なども中央揃えになっている場合が多くあります。

3.右揃え

WEBデザインで右揃えを利用する機会は、ほとんどあまりありません。なので、始めのうちは使わないのが無難です。最初に述べたとおり、人は左から右へ視線を移動させるので、右揃えの場合、文章を読みにくくさせます。

もちろん右揃えをまったく使わないわけではありません。たとえば、右図のような代表挨拶のページで代表の署名があるサイトを見たことがあるかと思います。こういった場合に右揃えで署名を配置するのは、とても効果的です。人は左から右に視線を移動させて文章を読むので、右揃えで書名が書いてあると、文章を読み終わったあと、すぐに署名が目に入ります。そのため文章の終わりなどで注目を集めたいときに利用するといいでしょう。

見比べてわかる！効果的な整列の実例

上記の項目で種類と効果を学んだので、今度は実際にデザインの事例を見ることで、より理解を深めていただければと思います。これから皆さんには、私が作った、要素を適当に並べただけのダメダメな整列の名刺と、海外のすばらしい整列技術を用いた名刺をご紹介いたします。すばらしい整列とダメダメな整列を見比べてみてください。
※私が作ったダメダメな整列の名刺も、デザインの要素は、すばらしい名刺デザインに近づけて作っています。なので整列の仕方でデザインの印象が変わることがより理解できるかと思います。

1.左揃え

左のすばらしい整列のレイアウトデザインは、左下に文字を集中させているので、まとまった印象を受けると思います。また左揃えなので、文字が読みやすい、安心感を感じれるかと思います。左揃えが整列の基本です。困った時は左にそろえるだけで、デザインに統一感が生まれます。
右のダメダメな整列のレイアウトデザインはいかがでしょうか？どこにも基準のラインが無い(どこにも揃えていない)ので、要素がバラバラで、まとまりがまったく感じられないと思います。きちんと整列を行わないと、このように統一感を生むことができず、バラバラなデザインになってしまいます。

2.中央揃え

左のすばらしい整列のレイアウトデザインは、左右にあるピンク色の帯の上下に、見えないラインがあるように感じるかと思います。この上下のラインを基準に、ロゴと個人情報を中央揃えにまとめてあります。この結果、上下に余白が生まれ、すっきりした印象を与えています。
右のダメダメな整列のレイアウトデザインはいかがでしょうか？これも最初の事例と同じく基準となるラインが無いので、要素がバラバラです。すばらしい配列のデザインにあった余白すらなくなり、窮屈な印象に変わってしまったことが分かるかと思います。まずは基準となるラインを1つ決め、それをベースに整列させることがポイントです。

3.右揃え

左のすばらしい整列のレイアウトデザインは、最初にロゴに目がいくように、大きめのロゴを左上に置いてあります。また、ロゴを見終わった後、自然に個人情報に目が移せる様に、個人情報を右揃えに構成しています。左上と右下の対極となる位置に要素を配置しているので引き締まって見えます。
右のダメダメな整列のレイアウトデザインはいかがでしょうか？まず右下の余った余白が気になりませんか？さっきまで気にならなかった左下の余白も気になってくる気がします。無意味に中央揃えに個人情報を配置しただけなので、このように違和感を感じるんです。素人は中央に揃える癖があるといわれています。中央揃えはどっしりとバランスがよく見えますが、気をつけて使わないと、素人感が丸出しになってしまいます。この場合、中央揃えにするのであれば、ロゴも一緒に中央にそろえるべきでしょう。

いかがでしたでしょうか？レイアウトデザインにおいて整列がいかに重要か、ということが少しは理解していただけたんじゃないでしょうか。

整列に関する簡単なテスト

ここまで読み終えれば、整列についての理解がぐっと深まったんじゃないでしょうか？そこで、おさらいの意味もこめて簡単なテストを用意しました。
以下の画像は、どのようにしたら、正しい配列となるでしょうか？あくまでも整列の理解を確かめるテストですよ。
ヒント：2箇所間違っているところがあります。

問題

答えは下です。

　　↓

整列していない所が2箇所あります。

　　↓

答え

どうでしたか？簡単だったでしょ？整列はみんな自然と行っているの事なので、何も難しいことではないんです。ただ、「デザインをしよう！」と意気込むと、なぜか意味も無く中央揃えにしたくなったり、左揃えと中央揃えと右揃えを組み合わせた複雑なものを作ったりと、変な方向に走ってしまうことがあるんです。整列は小学校の「前ならえ」です。難しく考えず、とにかくシンプルに整列させましょう！奇抜でカッコいい複雑な整列のデザインはその後です！

最後に

この記事を読んだだけで整列について真に理解できるかというと、NOです。整列について本当に理解するには、沢山のデザインを見て、実際に自分で整列を意識したデザインを何度も何度も作る事で、真に理解できるようになると思います。
■整列させると、統一感が生まれ、美しく、ユーザーが認識しやすくなるという項目でお話したように、整列は【統一感のあるデザインにするため】と、【読みやすくユーザーに認識してもらいやすくするため】にあるということを忘れないでください。

余談ですが、この整列の原則を学ばずとも自然と理解できている人がいます。そういう人は、寝室や台所がきれいに片付けられる人に多い気がします。綺麗好きで、整理整頓が得意な人は、勉強せずとも整列の原理が身についていることがあり、本棚の本を大きさ別に順番に並べていたりします。これも整列の原理の1つです。
また、こういったデザイナーは【シンプルで分かりやすいデザイン】を得意としている場合が多い気もします。

もし新人デザイナーのあなたの部屋がきれいに片付いているのなら、この整列の原則が自然と身についているのかもしれません！
もし部屋が汚かったら、この整列の原則を勉強して部屋を片付けてみましょう！　あっ、違いますね。整列の原則を学んで美しいWEBデザインが作れるように頑張りましょう！

参考書籍：ノンデザイナーズ デザインブック 著者 Robin Williams
私がデザインの基本原則について最初に勉強したのはこの本でした。とても分かりやすく素人目線で解説してくれているので、導入には優れていると思います。この記事とリンクする箇所も結構あると思うので、より理解を深めたいという人にはオススメの一冊です！
ノンデザイナーズ・デザインブック [フルカラー新装増補版]
Amazonへ飛びます。アフィリなので抵抗があれば【ノンデザイナーズ・デザインブック】で検索してください！

この記事が新人デザイナーの皆様のお役に立てば幸いです。また新人教育に悩んでいる人の、教育時間の削減にこの記事が有効に働けば、なおうれしく思います。

では、この辺で！