今回は、美しく見えるデザインのために知っておきたい概念であり、重要な要素の一つでもあるレイアウトについて学びます。レイアウトを組む際に何に気を配り、どのように扱えばよいのかを見ていきます。
レイアウトとは、デザインにおいて図形や文字などの要素を配置することです。伝えたいメッセージを効果的に伝え、視覚的に人を引きつけるものが、美しく見えるデザインであり、成功したレイアウトといえます。
まず、レイアウトを構成する原理である統一、変化、バランス、リズム、強調を学び、全体の流れの中でレイアウトを適用する過程を紹介します。
レイアウトの構成概念
レイアウトを組む際には、どのようなことを考慮すべきだろうか？
1) 統一感
統一とは、画面を構成するさまざまな要素に一貫性があり、全体として一つにまとまって見えることです。各要素は秩序と調和を保ちながらバランスが取れている必要があり、そのためにはオブジェクト、図形、文字などに反復性を持たせ、色彩などもよく調和させなければなりません。
ただし、統一感ばかりを強調しすぎると、単調で視覚的な面白みに欠ける印象になるため、統一性を土台に適度な変化を加える必要があります。
2) 変化
統一の主な目的が、安定した秩序を基に正確なメッセージを伝えることだとすれば、変化はレイアウトに面白みを加える役割を担います。最も大切なのは、節度を持って視覚的な面白みを加えながら、統一との適切な調和を図ることです。
変化が強すぎると、レイアウトが混乱し、散漫に見えることがあるので注意が必要です。
3) バランス感
バランスは対称型と非対称型に分けられます。対称型とは、画面を二分したときに左右が同じパターンになるよう、バランスよくレイアウトを構成することです。配置しやすく、秩序ある統一感を出せますが、保守的で単調なため、見る人が面白みを感じにくくなります。
非対称型とは、対称型に比べて左右のレイアウトが異なる形を指し、異なるオブジェクトを配置していても、視覚的にはバランスが取れていなければならないという考え方です。
つまり、両側の重みが等しくなければならないということで、片側に大量のテキストがあるなら、もう片側には大きな画像や色を強調した画像を配置するなどして、両側のバランスを取ります。非対称型は、デザイナーの感覚によってデザインが成功するかどうかが分かれるため、高度な技術と経験が必要です。
4) リズム感
リズムは、統一感のあるデザインに生き生きとした印象を与える役割を担います。画面を構成する要素の強弱の調整、段階的な大きさの調整、各要素が連続性を持って繰り返される動きなどを指します。デザインのよいアクセントとなる要素なので、まったく活用しないと、停滞した不自然な印象を与えることがあります。
5) 強調
強調とは、与えられた空間の中でメッセージを明確にするため、特定の要素を際立たせてほかの要素と明確に区別するときに使う概念です。先ほどほかの概念を説明した際にも触れたように、ここでも各オブジェクトがどれほど調和して配置されているかを考慮することが大切です。
強調は、主に大きさ、色彩、形に違いをつけることで実現でき、それによって視覚的な効果と明確なメッセージの伝達が可能になります。ただし、強調する要素が多すぎると力が分散して、かえって逆効果になることがあるので注意が必要です。
レイアウトの活用方法とヒント
1) レイアウトの目的と対象を決める
誰が見て、何を伝えるのか？
レイアウトを成功させるには、目的と対象を明確に定めてから取りかかる必要があります。どのようなコンテンツを扱い、デザインするかによって、強調すべきポイントが変わるためです。
教育コンテンツを作るときは、情報の階層と構造がよく分かるようにし、宣伝コンテンツを作るときは、伝えたいメッセージや画像を強調する必要があります。
また、デザインを見る人の年齢層や性別、関心事を明確に把握することで、それに合わせて色やフォントを決められます。
2) 空間と比率を適切に活用する
限られた空間の中に、どのように配置するのか？
レイアウトに使える空間は無限ではありません。紙面でも画面でも、一定の範囲内にオブジェクトを配置する必要があるため、その中で空間をいかに効率よく、調和を保って活用できるかを深く考える必要があります。
そのために活用できる考え方には、適切に余白を設けること、グリッドに沿ったレイアウト、視線の流れを計算した整列などがあります。
余白は、見る人に視覚的な休息を与えることで、読みやすさと統一感を生み出す役割を担います。グリッドは、オブジェクトを調和させて配置するために空間を水平・垂直に分割するもので、オブジェクトの配置に構造とバランスを与える役割を担います。最後に整列は、情報に集中できるよう、オブジェクトをどちらに寄せて配置するかを調整する役割を担います。
また、オブジェクトをレイアウトする際には比率も考慮すべき要素の一つで、黄金比を適切な箇所にうまく適用するだけでも、効果的な配置を実現できます。黄金比は1:1.618であり、別の整数で例えるなら、5:8ほどの比率といえます。
3. 色とフォントを慎重に選ぶ
どのような雰囲気を表現するのか？
デザインにおける色とフォントの使い方は、雰囲気や印象を決める非常に重要な要素です。色は、まず色彩学の理論をある程度理解したうえで、それぞれの色がどのようなイメージを伝えるかを把握し、意図を持って使う必要があります。
例えば、暖かいトーンの色は親しみやすく活気のある印象を与え、涼しげなトーンの色は落ち着きや信頼感のあるイメージを伝えます。フォントも同様で、ゴシック体はモダンで簡潔な印象を、明朝体は優雅で情緒的な印象を与えます。
色やタイポグラフィについては、以下に別の資料があるので、このレイアウトの資料と併せて読んでおくと役立つでしょう。
配色の方法
タイポグラフィのサムネイル
4. 画像とグラフィックを効果的に使う
何を強調し、伝えたいのか？
デザインで情報を補足したり強調したりするときには、画像やグラフィックも効果的に活用できる要素です。品質が高く、テーマに関連する画像を使えば、ほかのオブジェクトやメッセージを補い、連想を通じて理解しやすくすることができます。
そのため、適切な写真や背景を選ぶことや、アイコン、図形、チャートなどの要素を制作したり選んだりすることにも、十分に力を注ぐ必要があります。こうした画像やグラフィックを加えることで、伝えたいメッセージやオブジェクトをさらに引き立て、さまざまな雰囲気や感情を伝えられます。
ただし、画像やグラフィックの準備には時間がかかるため、インターネット上で手軽に入手する方法を選び、著作権の問題を起こしがちです。著作権フリーの素材サイトを把握しておき、必要なときにそこから素材を入手して使うとよいでしょう。
5. 先に述べたレイアウトの構成概念を理解して適用する
実践で活用するには、繰り返し練習する必要がある。
本資料では、レイアウトの構成概念として統一感、変化、バランス感、リズム感、強調を紹介しましたが、理論の習得だけにとどまらず、練習を通じて実践に取り入れ、使い慣れる必要があります。
デザインは経験と感覚から生まれるものなので、身についていなければアイデアが浮かびにくくなり、創作の苦しみに悩まされる時間が長くなるでしょう。
6. フィードバックと修正を繰り返す
フィードバックを通じて完成度を高めていこう。
デザインは主観的な領域なので、一度で完成度の高い成果物を生み出すことは簡単ではありません。ただし、フィードバックと修正を繰り返すことで改善できる領域でもあり、それを恐れず、ほかの人の評価や意見を聞く姿勢が必要です。
フィードバックは、自分がデザインした目的と対象に焦点を合わせて受け止め、修正するときは、そうしたフィードバックとデザインの原則を基に、レイアウトを一つずつ直していく必要があります。
以上、美しく見えるデザインのためにどのようにレイアウトを構成すべきか、その概念や原理、適用方法などを学びました。言葉だけを見れば、どのように「配置」するかということですが、その配置の仕方によって視覚的な美しさや情報の伝わり方が大きく変わることを心に留めておく必要があります。本資料で取り上げたレイアウトの概念と、リンク先で紹介した色やタイポグラフィなどの概念を調和させて活用し、美しいデザインを生み出すことにつながれば幸いです。
