デザインの４つの基本原則

今に限った事でもないですが、大学が始まると時間流れるのが異様に早く感じますね。一週間前の事がつい昨日の事のように感じてしまって・・・上手く言えませんがやヴぁいです_(：3 」∠)_

さて、今までHTMLとかCSSの事が主でしたが、今回はデザインについて書いていきたいと思います。内容は、デザインの話でもとても大事な４つの基本原則、近接・整列・反復・コントラストについてです。

私自身、勉強を始めるまではデザインの知識なんて全くと言っていい程なかったので、色々と本を買ってみて勉強中です。・・・とはいえ、読むだけの本は暇な時間に読み進めているという現状なので、進みはあまり早くないですが・・・
現在一冊目、読んでいる本はこちらのノンデザイナーズデザインブックです。色んなサイトで勧められていた本でレビューも高評価が多かったので、デザインについて勉強する本として真っ先に購入しました。基本原則について知ったのもこの本です。

ノンデザイナーズ・デザインブック [フルカラー新装増補版]

近接

まず一つ目として、近接という原則があります。近接とは、関連している情報を近づけることにより結びつきを強くして、１つのグループにする事です。こうする事で、視覚的に整理されますし、似た要素間の繋がりがより強くなります。

私たちも普段ものを片付けたり整理する時、同じ種類のものだとか近い性質のものは同じ場所にしたりしますよね。例えば衣服なら、下着はこっち、上着はあっちといった具合に纏めたりとか。
こうしておくことで、周りの人から見ても整理されて綺麗な印象を持たれますし、目的のものを探す時に手間が省けます。逆に関連項目に一切近接の原則が適用されず、ごちゃごちゃでバラバラなままだとしたら、目的のものを探す時大変ですし、自分がちゃんとそれらの位置を把握できていたとしても他の人から見れば良い印象は持たれないでしょう。他の人に代わりに探してもらう時があったりしたら大変ですしね。

ことデザインにして言えば、上にも書いた様に近づけた要素同士の繋がりが強化されて、それらの要素たちで１つのグループが形成される事にもなります。先の例で言う上着のグループと下着のグループみたいなものですね。
この近接を適用する事で、読者が読んだ時に情報を整理しやすく、更に繋がりが強くなった事により要素同士も強調されていきます。

また、逆に関連性の無い要素間はしっかり離しておく事も必要で、これを怠って中途半端に近づけてしまうと、読者が「これはこちらの情報との関連性はどうなのだろう」と混乱してしまいます。

関連性のある要素は近づけてグループ化させ、そうでない要素（またはグループ）同士はしっかり離して配置する事が大事なようですね。

整列について

２つ目に、整列という原則です。これはそれぞれの要素の端を揃える等して要素たちを規則的に並べて、結びつきを強くするというもので、こうする事で離れている要素同士でも強い結びつきを生む事ができます。

先ほどの近接の原則で、関連性のない要素は離す必要があると言いましたが、そのまま離しっぱなしだとそれらの要素間の繋がりが小さくなり、そのページ上の全体的な団結のようなものも薄くなってしまいます。
そこで、この整列の出番。例えばある程度離れた二つの文章を整列させるには、まずそれらの文章を左（右）揃えにして、左（右）端を揃えます。

そうする事で、左（右）端は線を一本引ける様な綺麗に揃えられた端になります。読んだ本では、この線の事を「透明な線」と言い表して（実際のデザインで線を引くわけにはいかないでしょうしね）、離れた要素間の繋がりを強くする大事な要素の一つのように書いています。この透明な線を意識する事が、整列を適用させるに当たって大事な事のようですね。

また、先ほど「左（右）揃えにして」と言いましたが、これは中央揃えだと端を揃えて整列させる事が出来ない為です。本の著者さんによると、確かに中央揃えは小奇麗に見えて安定していますが、整列の原則を適用させるには不向きとのことです。
勿論絶対にダメというわけでもなく、意図的に整列を崩したりしてあえて中央揃えを使うのは大丈夫だそうですが、あくまで「意図的に」であって、とりあえず中央揃えに、というように使うのは非推奨としています。中央揃えは割と使いがちなので、注意ですね。（このブログのタイトル部分も中央揃えになってますが・・・意図的とはいえ、やっぱりダメかなぁとも思ってたり
また、この整列の原則を、本では「意識的に行わなければいけない」事だと述べています。特に最初は、ちゃんと意識してきちんと透明な線を作って整列を行うのが必要、という事ですね。

反復について

続いて３つ目、反復について。これは、要素に適用したあるデザインを繰り返し使う事で、全体の一貫性を高める事です。あるデザインというのは、簡単なものだと字を大きく太くしたり、下線を引いたり、ですね。そういったものを繰り返し使って、統一感を持たせるための原則です。

勿論これも無闇やたらに何にでも繰り返せば良いわけではないですが、この反復に関しては皆さんも何かを制作（今正に私が書いてるブログの記事とか）する時既に意識している事だと思います。この記事もそうしていますが、強調する部分は太字にするというだけでも、立派な反復になりますからね。要は、「強調したい部分」の様に、何かしら共通する要素がある部分に「太字にする」などの様に同じデザインを繰り返せばいいわけです。

簡単なもの以外にも、見出しにボーダーや背景色を弄った特徴的な装飾やフォントを施して全ての見出しに同じものを適用させるのもデザインを反復していますし、タイトルなどの背景色に使った色と同色のものをどこかの部分に適用させるのも色の反復になります。他にも一度使った画像を繰り返しほかの部分にも使うなど、単純な太字や下線のみならず、反復は様々な装飾要素に適用できます。

このように、反復は皆がやってるような太字や下線のみの単純なものだけでなく、もっと色んなものに適用させる事ができるみたいです。本を読むまでは、私も字のサイズを変える、太字にする、下線を引く程度のものしか反復させていなかったので、この事を知った時は「なるほど、こういうやり方もあるのか！」と思いましたし、もっと反復について意識するべきだなと思わされましたね・・・ｗ

コントラストについて

最後の４つ目、コントラスト。この原則は、ある要素のデザインに対して異なるデザインを適用させる事で、視覚的な面白さを作り出すものです。コントラストという単語自体はよく聞くもので、デザインにもこのコントラストが重要な項目の一つとなってきます。このコントラストをうまく強調させるだけで、作るデザインの見栄えが一層輝く、といっても過言ではないぐらいです。

 コントラストのつくり方もやはり単純で、二つの色や字の大きさなどの要素の対比を強めるだけです。つまり、本文に対して見出しやタイトルの文字を大きく太くしたり、背景色を暗めにして文字色を明るめにしたりなど、できるだけ二つの要素に差をつけます。

本の著者さん曰く「臆病になってはいけない」との事で、対比はできるだけ強くハッキリと作る必要があります。例えば12pxの文字と14pxの文字ではあまり強いコントラストが生まれず効果が薄いので、思い切り文字の大きさに差をつける為に8pxと18pxにしたり、ですね。

それ以外にも、罫線の色や太さ、フォントの字体など、先の反復と同様に色んな部分にコントラストを適用させる部分があります。これらの様々な場所にコントラストを適用させれば、作品の印象を強くさせて、読者を退屈させずに楽しませるような作品を作る事ができます。

とりあえず、私なりに４つの基本原則について纏めてみました。
デザインの世界では基本中の基本みたいなものでしょうし、全ての原則をしっかり扱えるようにしておきたいですが・・・こればっかりは色々デザインをやってみて覚えるしかないですね。頑張らないと・・・