LITERALLYスマートフォン用の表示で見るLITERALLY知っておくと楽しい知識をまとめて紹介2016-10-22全ての人が知っておくべきデザイン・レイアウトの基本ルールとテクニック15選デザインデザイナーでなくとも、デザインについてのいくつかのルールを知っておくと、日々の生活で何かと役に立つ。今回は、誰もが知っておくべきデザインの基本原則・テクニックを紹介する。1.デザインの基本原則を覚えよう1-1.「1/3ルール」を覚えようレイアウトや写真の構成を考えるときには、黄金比*1よりも「1/3の法則」が便利だ。上の図のように、全体を9等分割したとき、各線の交点(図の丸点)に主張したいモノを配置するようにする。これだけで、不思議とスッキリとしたデザインになる。技の1つとして覚えておこう。1-2.端をそろえて線をつくろう写真や文などの「要素の端」をきちんとそろえると、きれいに整理されて見える。これはデザインにおいてとくに重要な基本ルールだ。全てをそろえる必要はないが、縦にいくつか要素を並べる場合は常に意識しよう。1-3.視線の流れを意識したデザインにしよう情報がたくさん詰め込まれている横書きコンテンツの場合、見る人の視線は左上から右上へと流れていくことが多い。右上と左下は注目されづらいゾーンだ。そのため重要なメッセージは、左上もしくは右下に配置するのが良いだろう。Refinery強調の方法には、フォント種類を変える(種類・太さ)、色を変える、サイズを変える、アニメーションを加える、装飾を加える(下線など)、余白をうまく使うなどがある。効果的かつ、見る人が疲れてしまわないような方法を取るように気をつけたい。下にいくつかのパターンとその注意事項をまとめておく。強調例1)フォント色を変えるここで注意したいことはあまりにたくさんの種類の色を使わないことだ。強調例2)サイズを変える重要なのは、大胆に変えること。他の文字に比べて相対的にどれだけ違いがあるか、が重要だ。レイアウトが意図せず崩れてしまわないように注意。強調例3)下線など装飾を加えるただ、下線を引くだけでなく、蛍光ペンのようにカラーで表現するのも効果的。強調例4)余白をうまく使う余白をうまく使えば、同じフォントサイズやフォント色でも効果的に目立たせることができる。この場合も重要になるのは、かたまりをしっかりと作ること。当然だが、全ての行の間に余白が大きく入っていれば、強調効果は薄くなる。使う色の数は3〜4色におさえようデザイナーであれば、カラフルに美しいデザインができるかもしれないが、そうでないのであれば、使う色の数は絞るのがベターだ。配色についてよく分からないのであれば、次の3〜4色にするのが無難だったりする。白&黒メイン色(青系のデザインと決めたら青系メイン色)サブ色(メイン色と同系統の色。明るい水色など)差し色(アクセントで少し使う色。メインが青系ならオレンジや赤系で1つ)配色については、こちらの記事にまとめてある。2.すぐに実践できるデザイン・テクニック2-1.左右対称と非対称を使い分けよう左右対称のデザインは、見る人が情報を処理しやすい左右非対象のデザインは、見る人の目を引きつけやすいこれは少しテクニック的な話になる。ユーザーが素早く欲しい情報にたどり着けるようなWebサイトにしたければ、左右対称のデザインにしよう。逆に、見る人の目を引きつけるインパクトのあるデザインにしたければ左右非対称にしてみよう。「ユーザーに何を伝えたいのか」を考えた上でデザインを決めることが重要だ。Appleシンプルなデザインほど、1つ1つのコンテンツが記憶に残りやすい。見る人に伝えたいメッセージが明確なのであれば、それにフォーカスしたシンプルな表現をしよう。Watchの商品説明ページだ。キャッチフレーズはない。Appleが最も伝えたい「防水であること」は視覚的にすぐに理解できる。Gallery人は不自然なものに気をそそられる。不自然に、大胆にはみ出すことで、目を引きやすくなる。上の画像のWebサイトでは、文字が画面右端にはみ出し、左側からはみ出した部分がちょこっと見えている。違和感たっぷりで二度見してしまうようなデザインだ。注意したいのは、あくまでも他が綺麗に整列されている中ではみ出すことで効果的に違和感を感じさせられる。他もバラバラなら、おしゃれなデザインには見えないだろう。(テクニック)とことん大きくしてみようBehanceこちらもうまく使えば、斬新で力強い印象を与えられるデザインテクニック。上のデザインでは、1ページの半分以上を占めるほど大きく男性の顔が配置されている。何かの要素を他と比べてとことん大きくすることで、見る人にインパクトを与えられる。(テクニック)写真の上に文字をのせようOutpøstこちらは誰にでも簡単に実践でき、簡単にオシャレに見せることができる基本中の基本とも言えるデザインテクニックだ。写真上に白抜きなどで文字をのせると、美しく見える。上のWebデザインのように、写真のど真ん中に小さく、さりげなくのせれば、洗練された印象を与えることができる。Venturesとくに手書き文字を見ることの少ないインターネット上では、一部に手書きフォントを使うと目を引きやすい。丸い手書きフォントを使えばかわいく見せられるし、上のWebデザインのように流れるような手書きフォントを使えばおしゃれに見せることができる。図・写真・イラスト言葉による記憶は短期的にしか続かない。画像や映像、イラストによる記憶は、長期的に記憶される。記憶に残るインパクトのあるデザインをしたければ、文字をなるべく減らし、視覚的表現を増やそう。文章で伝えたいことでも、写真・イラストを1枚入れよう上の話と重なるが、写真や図を1枚でも入れておくと、文章情報まで記憶しやすくなる。長文の中に1枚写真を入れておけば、その写真に文章の内容を紐付けておき、後からキーとして文章内容を呼び出しやすくなるのだ。雑誌で読んだ内容は思い出しやすく、文字しかない文庫本の内容がいまいち思い出せない理由の1つがこれだ。3-3.デザインでも第1印象の大切さを知っておこうKinfolkデザインでも、第1印象はその後に影響し続ける。本の装丁(表紙)により人が感じ取った印象は、本の内容の理解にも大きな影響を与える。Webサイトでも同様だ。アクセスするといきなり広告が大きくポップアップ表示されるメディアが増えているが、これは長期的に考えるとリスキーと言える。Purearth上の話と重なるが、デザインは味覚まで錯覚させる。美味しそうな料理写真を載せたグルメ広告や、洗練されたデザインの食材パッケージを見た後に食べることで、実際の味より美味しく感じられる。参考にした本などノンデザイナーズ・デザインブックこのブログでしつこいほど取り上げてる名著。Indexデザインの法則について論文のように淡々と書かれている本。高いし買う必要はないかも。図書館なんかに置いてあるんじゃないでしょうか。1.618のとき美しく見える」「自然界や古代芸術でも取り入れられている」というような法則だ。1.618の比を測るのだろうか。»SEARCHスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。