すべてのデザイナーが参考にするべき構成に関する10のルール

どんなに綺麗なグラフィックがあったとしても、その構成を間違えれば台無しになってしまいます。

構成とは、簡単に言えば『個別の要素が全体を成すということ』です。フォント、画像、グラフィック、色といったあらゆる要素が、一個のデザインとなることを意味します。

構成が優れているということは、デザインが整っていて、見た目にすっきりしており、要素が詰め込まれているということで、ただ見た目に良いだけでなく、機能的かつ効果的にもなっているということです。この構成をマスターするためのテクニックを、以下から確認していきましょう。

どんなときでも言われることですが、集中はとても大切です。優れた構成においても強い集中が発生する点は非常に重要で、これは見る人の視線をそのデザインの重要なポイントに自然に誘導することが必要となるからです。

どこに注目させるかということを決める上では、デザインの究極的な目的がメッセージの伝達にあるということを念頭に置くと良いでしょう。伝えたいのがアイデアであろうと何らかの情報であろうと、あるいは感情や感覚であろうと、そのデザインは何らかのストーリーを語っているに違いありません。つまり、このストーリーを最も力強く語るための注目点を見つけることが重要になるのです。

注目を特定の部分に集めるためのテクニックとして、大きさを変える、コントラストを利かせる、リード線を引くなどがあります。これらについては個別に記事の後半で触れるとして、ここでは例を分析してみましょう。

ファッションの小売業者であるNordstromにMatthew Metzが作成したデザインを例として考えると、注目するべき点はモデルとそのモデルが着ている服であると考えることができます。したがって、モデルは中央に配置され、丸く色を変えつつそこにフォントを配置することで、モデルの顔から着ている服に自然に目線が移動するようになっています。そしてそこから伸びているリード線に従うと、より詳しい情報が目に入るようになっているのです。

また別の例として、Shauna Lynn Panczyszynによりデザインされたポスターも見てみましょう。この場合の注目点は男性ということになります。男性を中心に据えて、彼をグラフィックでフレーミングしています。このグラフィックも落書きに近いようなタッチになっているため、更に男性に目線が行きやすくなっているのです。

[

特定の場所に注目してもらいたいときには、線や形を目線をコントロールできるように配置することで、自由に注目点を作り出すことができます。

リード線を使った例としては、フローチャートも挙げることができるでしょう。線によって次にどこに注目するべきかが直接的に分かりやすくなっています。Pater and ParcelのSave the dateカード（訳注：予め、参加者にイベントの予定日を抑えておいて貰うためのカード）では、フローチャートを使うことで情報をユニークに伝えることに成功しています。

リード線により、情報の深度や位置を複数示すことも可能になります。デザインを見たときに最初に目が行くポイントは、そのデザインの注目点です。そしてその後に目線がどこに移動するかは、リード線によりコントロールすることが可能なのです。一部に誘導するだけでなく、全体に誘導することも可能になります。

例えば、Design By Dayによる次のポスターを見てみると、強力なリード線によってまずタイトル（注目点）に目線を誘導しながら、それから様々な情報に自然に目線が流れるように配慮されています。

もちろん、あらゆるデザインでここまであからさまなリード線を使うことができるというわけではありません。しかし、デザインの中にそうしたリード線を配置する場所を見つけることができれば、見る人の目線を誘導することが可能であることは間違いありません。

また別の例として、1 Trick Ponyのポスターの例を見てみましょう。男性の左手で注目するべきポイントを示しながら、広がるようなデザインのロゴによって全体へと目線が移動するようになっています。このように、画像の形によって目線を誘導することも可能なのです。

大きさの変化（スケール）やビジュアルヒエラルキーは、デザインを生かしも殺しもする重要な土台であり、工夫のしがいがあるところでもあります。つまりここで確かなやり方を抑えておくことで、構成で失敗することはかなり少なくなると言えるでしょう。

簡単に言えば、ヒエラルキーとは、見た目で重要度を伝えるため、要素を配置したりデザインしたりすることです。より重要な要素は大きく太く、些末な要素は小さく細くする、といった具合になります。

ヒエラルキーが特に重要なのはフォントを扱う際です。詳細については、こちらの記事（https://learn.canva.com/learn/typeface-fonts/）をご覧ください。

スケールは、ヒエラルキーを表現する上で用いられる概念であり、特定の要素に注目させたり、逆に注目を逸らせたりすることができます。これにより、伝えたい内容の中で特に重要なことを強調することができるのです。

例えば、Jessica Svendsenがデザインしたポスターを見てみましょう。このデザインの中では画像が拡大されて最も大きな要素として用いられており、まず見る人の目線を引くことに成功しています。次にタイトルは太く大きなフォントで示されていて、これが文字情報の中では一番重要なものであることを伝えているのです。一方、ボディコピーはかなり小さくなっています。つまり、スケールの概念が注目点を伝えるためと文字情報のヒエラルキーの維持に用いられているのです。

デザイン全体のバランスやサイズ感を整える上でもスケールは役立ちます。非常に細かく表示したり、逆に大きく壮大に表示したりすることもできるのです。

例えば、Scott Hansenによるこのポスターでは、縮小したふたりの人間の小さなシルエットを用いることにより、彼らの前に広がる広大な光景を表しています。見る人に、その遠大な景色を感じさせることに成功しているのです。

小さい要素と大きな要素でコントラストを利かせることで、様々な効果を得ることができるという一例だと言えます。

どんなものでもバランスはとても重要です。デザインにおいてもそれは例外ではありません。ここでは、具体的にどうすれば最適なバランスを取ることができるのか、その秘訣について見ていきましょう。

バランスを取る方法として、対称にするという方法がまず考えられます。シンメトリーとしてのこのバランスは、上下あるいは左右で完璧な対称を作ることで整っているという印象を与えることができます。

対称的バランスを活用している例としては、Jennifer Wickがデザインした結婚式の招待状が参考になるでしょう。文字やグラフィックデザインの配置により、美しいシンメトリー感を表しています。

しかし一方で、敢えて非対称にする中でバランスを取るという方法もあります。このアシンメトリーの中のバランスを用いている例としては、Munchy Potatoのデザインを見てみると良いでしょう。要素を配置して大きさを変えることで、非対称でありながら全体として優れたバランス感覚を生み出しています。

上のデザインの中では、3つの円がデザインの中で最も大きな要素として用いられています。これとバランスを取っているのが文字情報と背景に引かれた線、左下に配置された複雑な画像を写した円なのです。

非対称の中でバランスを取るために必要なのは、それぞれの要素に『重さ』があることを意識することです。小さなオブジェクトは大きなオブジェクトより軽く、よりテクスチャが凝っているものはそれだけ単色の要素よりも重い、といった具合です。これらの重さでバランスを取ることで、効果的に均衡を生み出すことも可能になります。

補色という概念は知っていても、デザインによる補完というとピンとこないかもしれません。効果的なデザインを構成するためには、デザインの要素ひとつひとつを注意深くかつ目的をもって選び、それぞれの要素が全体を補完するようにしなければいけないのです。

構成でよくある間違いとしては、互いに補完しあっていないような画像を使ってしまうというものです。画像を複数使う場合には、それぞれの画像を組み合わせることで、全体として効果的かつ統一感があるように、見えるようにしなければなりません。このためのテクニックとしてはいくつか方法があります。

同じ被写体、同じ場所の写真を使う：たったこれだけで、全ての写真に画一感が生まれ、スタイルも統一されているように感じられるようになります。例えば以下の画像（Jekyll & HydeとElena Bonanomiによる雑誌）では、これを利用して美しいレイアウトを展開しています。

色の調子を合わせる：フィルターや画像を調整することがあるのと同様、色を調整して写真の見え方を変えることにより、一体感がある全体像を作り出すこともできます。以下のA is a Nameによるデザインのポスターでは、モノクロ風のフィルターを使うことでそれぞれの写真がより自然に解けあっているように感じられるようになっています。

似たような撮影をされた写真を使う：似たような良さやスタイルを持っている画像を使うのも良いでしょう。例えば、ある写真が非常にミニマルデザインを意識しているなら、それを補完するようにまた別のミニマルデザイン的な画像を使うといった具合です。この例としてFeintのウェブサイトを見てみると、見た目として要素が多く、テクスチャが強めの写真の中、木目や暗い色のトーンで統一されていることで全体としての調和が取れています。

統一感のあるレイアウトを作り出すということは、つまり互いに補完し合えるようなフォントや画像などをペアにするということです。一見するとバラバラのフォントでも、特定の状況下で使うことで互いに補い合うような効果を発揮し、それぞれのフォントが持つ効果をより高めることに繋がる場合もあるのです。

例えば、音楽イベントのために作成されたAdam Hillのポスターでは、よくあるビンテージ的な画像を使いながら、カーブの強いタイトルと太めのslab serifによるボディコピーを合わせて用いることで、互いに効果を補完し合う効果を生み出しています。仮に、クリーンで細く、ミニマルデザイン的なsans-serifのフォントを用いたとすれば、この躍動感のある画像や、この音楽イベントが持つ『激しさ』とは相容れることはなかったでしょう。

デザインの特定の要素を強調したり、逆に隠したりすることについて、コントラストは有用なツールです。コントラストを強くしたり、強いコントラストが生まれる色使いをしたりすることで、注意を引くように特定の要素を目立たせることもできますし、逆に背景に溶け込むようにすることもできるのです。

例えばThebault Julienのデザインを見てみると、コントラストが強い色を使うことにより、注目点となっているイメージをフレーミングかつハイライトすることに成功しています。また、太めのフォントを用いることで、重要な情報も見逃すことはありません。更に部分的に明るく細めのフォントを用いることで、逆にそれ以外の部分を目立たせる引き立て役にもしています。

上のふたつの例は躍動的な色使いをすることで要素を目立たせることを試みていましたが、逆に要素を目立たなくさせるためにそうした色使いをするという例もあります。

Melanie Scott Vincentによるポスターでは、黄色のペーパークリップが黄色の背景に配置されています。こうした色使いは通常であれば避けられるのが常ですが、このポスターが伝えているイベントは『無視される日々』ということで、むしろ気付きにくいデザインの方がメッセージ性が高いと言えるのです。

このように、コントラストを用いて要素を隠すことがデザインのメッセージ性を伝えるのに有効というパターンもあります。意識的にデザインにコントラストを盛り込むことで、要素を目立たせたり控えめにしたり、色々試してみましょう。

「繰り返しにより、優れた構成は生まれる」という考え方があります。

統一感があって全体として一貫しているレイアウトを維持する上では、ある部分の要素を取り出してそれを他のところに応用するというのも効果的です。それはもしかするとフォントのスタイルかもしれませんし、あるいは画像のモチーフが何度か使われることになるのかもしれません。つまり、デザインの中で要素を繰り返すということです。

特に複数のページにレイアウトを展開する上では、こうした繰り返しは重要なファクターになります。要素を繰り返すことにより、それぞれのページから次のページへの流れがはっきりし、全体として統一感が生まれるのです。

例えば、Mauro De DonatisとElizaveta Ukhabinaがデザインした雑誌を参考にしてみましょう。このデザインでは、それぞれのレイアウトの構成が似ていて、唯一の違いは文章による内容、色、そして使われている画像だけになっています。こうして同じ構成が繰り返されることにより、読み手はフォーマットを即座に理解し、情報を得る上でもより早く処理をすることができるようになるのです。

もちろん、単一ページの構成を考える上でも『繰り返し』は重要です。画像の要素を繰り返すことにより、デザインを力強く、かつ統一感のあるものにすることができるのです。

例えば以下のポスター（Jessica Hischeによるもの）では、フォントのスタイルやグラフィック、線の重さなどが全体として整えられていて、統一感があり効果的なデザインとなっています。仮にここに、太いピンクの直線的なグラフィックを入れるなどすれば、簡単にこの調和は崩れてしまうでしょう。このように、どういったフォントを組み合わせて使うか、どういった色使いをするかといったことを考えることで、デザインは美しく、力強いものになるのです。

デザインをする上では、フォントや、線の重さ、色など、どういったものを使ったか記録をとっておき、それを別のところでもう一度使うということを試してみると、全体的に統一感のあるデザインになりやすいと言えるでしょう。

空白部分には『何も無い』と言ってしまってはいけません。こうした空白や余白の部分を戦略的に用いることができれば、デザインをより分かりやすくし、複雑で乱雑な印象になりがちな構成も全体としてバランスが取れたものに仕上げることができるのです。

例えば、Cocorrinaによるデザインを見てみると、画像に対してバランスを取るようにして余白が多く取られています。質感やフォントも、デザイン全体をクリーンかつ洗練された印象に整えてくれています。

では、具体的にどうすれば空白部分を活用することができるのでしょうか。そのためのヒントを確認していきましょう。

グラフィック素材の大きさを小さくする：画像やフォント、その他グラフィックを小さくすることで、もともと注目させたい素材を損なうことなく、注目させたいポイントの周りにそれだけ余白を生み出すことができます。例えば、Serafini Creativeによるデザインのレシピカードを見てみましょう。中央のデザインをスケールダウンすることにより、余白部分でフレーミング効果を実現しています。

余白にコンテンツを詰め込みすぎない：余白や空白部分は、『空きスペース』ではありません。余白は余白として価値がある要素なのです。それを軽率に奪わないようにしましょう。

例えば、Creative Web Themesによるウェブサイトデザインを見てみると、商品を説明するために画像がひとつだけ用いられており、商品名も太いフォントで、コピーもたったの2行に収まっています。詳しく見るにはリンク先へ、というわけです。このシンプルなレイアウトによって、余裕のある余白が埋まれ、『息苦しくない』全体像が生まれているのです。

何かをデザインするときには、要素を加える前にその要素が本当に必要かどうかを一度再考するのが良いでしょう。不必要な要素を引き算していくことで、より力強く、余白部分が生きているデザインを作り出すことができます。

たくさんの要素が含まれるデザインの構成を考える際には、ただそれを散りばめて良しとするのではなく、少し整頓してみましょう。ただそれだけで、デザイン全体が小綺麗に、シックな見た目になるのです。

素材を並べるのに苦労するということであれば、Canvaの配置ツールを使ってみてはどうでしょうか。ページ上に要素をドラッグするだけで、その他の要素と揃えて配置することが可能です。

以下の例は、Huckによる『整頓された』レイアウトの雑誌です。綺麗に配置されているそれぞれの要素により、シャープかつ無駄のない、効果的なデザインが完成しています。見た目に綺麗なだけでなく、更に情報も読み取りやすくなっているのです。

たくさんの画像や文字、グラフィック要素があるのであれば、それをしっかりと整頓することによって、より見やすいデザインになるでしょう。

文字を扱う上でも、揃えるというのは重要なことです。右揃え、左揃え、中央揃え、等間隔、といったような文字のアラインメントオプションがありますが、文字量が多いなら基本的には左揃えにするのが良く、ぱっと見で『ちゃんとしたデザイン』のように見えます。

三分割法とは、縦横に3つに分け、合計で9個のブロックとして構成を捉えなおす技術です。それぞれの線の交差するところに注目点を置くと、全体としての収まりが良くなります。

デザイナーであるWilliam Beachyこのテクニックを活用し、以下のようなデザインを作り上げました。それぞれの交差点部分に、見事に注目点が置かれていることが分かるでしょう。「中央に重点を置いたデザインをしないようにすることで、全体に動きが生まれ、より面白いデザインになる」とBeachyは言っています。

また別の例も見てみましょう。以下はGajan VamathevaがデザインしたNational Geographicのウェブサイトです。どこに三分割法のラインが用いられているのか考えてみると、最初の画像では2人の登山者のところ、ふたつ目では大きな鳥のところが交差点になることが分かります。また、テキストボックスの周りにも交差点が来るようになっていて、自然にその部分に注目させることに成功しています。

特に三分割法を用いてデザインをするなら、グリッドを使ってみましょう。グリッドを使うことにより、要素をより整然と並べることができますし、どこに注目点を置くべきか、といったことも自ずと分かるようになります。Canvaでグリッドを使うなら、こちらをご参照ください。

効果的なデザインをしたいと考えるなら、頭の中でそれを分解し、その根底にある構造を見るようにしなければなりません。三分割法を使っているか。それとも特別なグリッドのレイアウトになっているのか。いずれにせよ、インスピレーションを感じるような作品を分析したり、作者のその他のデザインを研究したりすることで、色々と分かってくるでしょう。

デザインの構成を考える上では、色々なことに気をつけなくてはいけません。特に初心者にとっては、なかなか一筋縄では何をどうして良いのか分からないこともあるでしょう。しかし、とにかく実践あるのみです。