レイアウトデザインを極める方法

ビジュアルデザインの基本を学ぶための完全ガイドです。

100万ドルの質問：良いデザインの秘訣は何ですか？

これは哲学的な話ですが、一般的に言えば、良いデザインの「秘訣」は、キャンバスとの関係や、お互いの関係において、ビジュアル要素をどのように整理するかにあります。 基本的には、レイアウトデザインを説明しました。 それは、考えてみれば、あなたが見るところ全てに当てはまります。

例えば、雑誌のレイアウトは、古典的なグリッドシステムに従っています（グリッドについては、これから学びます）。 すべてが左右と下に並んでいるのが普通です。 特に列は、独特のジャスティファイド配置で、ページを視覚的にアピールするだけでなく、読みやすく、権威あるものにします。 大きな見出しは、見る人の目を引き付けます。を注目させ、小見出しは大きさの対比として、情報の視覚的な階層を作り出します。

Linda Gaom, Behance

これらは、ページデザインをすっきりさせ、構造化し、読みやすくするものであり、次に説明するヒントと同調するものです。 その前に、レイアウトデザインそのものについて、より深く理解しておきましょう。

レイアウトデザインとは？

つまり、ここではロゴデザインの話ではなく、新聞や雑誌、ポスターなどの印刷物や、そのデジタル版のデザイン、さらにはWebやアプリ、あるいはUX/UIデザインなどのことを指しています。

レイアウトとは、ページ上にあらかじめ決められた要素を配置することであり、様々なヒントを与えてくれます。

レイアウトが効果的であれば、見栄えもよく、見る人にデザインのメッセージを伝えることができます。 そのため、レイアウトを理解することは、魅力的で効果的、ユーザーフレンドリーで心地よいコンポジションを作るための鍵となります。

レイアウトで伝えたいことがうまく伝わらない、つまり「読まれない」デザインは、どんなに流行に乗っても効果がありません。 レイアウトデザインの領域では、流行やギミックよりもコンテンツが優先されるのです。

レイアウトデザインの目的

メッセージを早く伝えるために

レイアウトデザインは、グラフィック資産間の関係を確立し、視線移動のスムーズな流れを実現することで、最大限の効果とインパクトを与えるものです。

バランスをとるために

レイアウトデザインの原則を使うことは、デザインプロジェクトで退屈することなくバランスとシンメトリーの感覚を生み出す最もわかりやすい方法です。

まとまりを持たせるために

レイアウトは、デザインを構成する多くの要素を、消化しやすく、まとまりのある、論理的な方法で配置することを支援します。

美を創造するために

レイアウトデザインが正しく行われていれば、見る人に自動的に視覚的に訴えることができます。 見る人がメッセージを理解するための努力が少なければ少ないほど、デザインは魅力的に見えるのです。

フランク・フィリピンによる著書「I Used to Be a Design Student: Then - Now」のためのデザイナー 出典：DesignBoom

レイアウトデザインに必要な要素

テキスト

本文や段落だけでなく、見出し、小見出し、ヘッダー、フッターなど、タイポグラフィや色、サイズの選び方によって、レイアウトが読者に伝わるかどうかが違ってきます。

イメージ

画像の種類としては、写真、イラスト、またはインフォグラフィックスが一般的です。

シェイプス

形には、角ばった幾何学的なものと、自然界を模した有機的なものがあります。 また、抽象的なものもあります。 この1年、ウェブデザイナーが複雑で広大な構成に取り入れた抽象形がとてもトレンディーでした。

シェイプは、画像を置き換えるだけでなく、ページにグラフィック要素を追加したり、テキストを強調したり、他のビジュアル要素間のスペースを区切ったりするために使用することもできます。

ホワイトスペース

どんなレイアウトデザインでも、ある程度の余白があることで、要素が呼吸し、単独で際立つようになります。

レイアウトデザインの黄金律

レイアウトデザインの原則は、色の使い方、タイポグラフィ、繰り返し、コントラスト、階層、バランスなど、デザインの基本原則を踏襲していることに気づかれるでしょう。

原則1.グリッドを使用する

グリッドは、テキストや画像などさまざまなデザイン要素を、首尾一貫して見やすいように配置するのに役立ちます。

グリッドは秩序を与え、要素が互いに影響し合うのを防ぎ、そして最も重要なことは、アライメントを修正することです。 あなたの作品をよりクリーンでプロフェッショナルなものにすることができます。

出典：hgmlegal.com

グリッドの解剖学

グリッドというと縦線と横線だけと思われるかもしれませんが、実はいくつかのパーツで構成されています。 ここでは、基本的なグリッドで知っておくべき最も重要な用語を紹介します：

• フォーマット つまり、印刷物のデザインであればページ、WebデザイナーであればWebページやブラウザのウィンドウがフォーマットとなります。
• 余白 は、フォーマットとデザインの間にある意図的な空白です。
• フローライン は、レイアウトを平行に区切る水平線です。 フローラインは、デザインの可読性を高め、読者がコンテンツを正しく追えるように誘導します。
• モジュール は、あらゆるグリッドの水平線と垂直線によって形成されるブロックです。 考えてみれば、これらはあらゆるグリッドの構成要素です。 すべての垂直モジュールは列を作り、すべての水平グリッドは行を作ります。
• 地域別 は、縦または横につながったモジュールのグループです。 これをどのように構成するかは、特に決まりはありません。

出典：ラドバシティ

グリッドの種類

レイアウトグリッドとは、手書きの文字を紙面に並べるために使われたのが始まりです。

その歴史は古く、13世紀にフランスの画家ヴィラール・デがグリッドシステムと黄金比を融合させ、余白のある印刷物のページレイアウトを作成したことに始まります。 現在でも、書籍や雑誌のレイアウトの大半は、このグリッドシステムによって証明されています。 出版社、編集者、デザイナーが標準グリッドを好んで使うのは、見た目が良いだけでなく、読者がこのグリッドに慣れているためです。は、特定のデザイン要素が特定の場所にあることを期待します。

グリッドは、左右対称と非対称の2つの方法で設計することができます。 シンメトリックグリッド 縦と横の領域が互いに等しく、列の幅が同じである中心線に従う。

でのことです。 非対称格子 その名の通り、マージンもカラムもすべて同じではありません。

この分類に基づき、世界中で使用されているレイアウトグリッドのうち、信頼できるものは主に5種類あります：

原稿グリッド ヘッダー、フッター、マージンを分離し、基本的にフォーマット（またはページ）内に長方形を作り、テキストの境界を提供するものです。 雑誌、新聞、書籍のベースとなっています。 そのため、最も馴染みのあるレイアウトと言えるでしょう。

出典：UXplanet

出典：ラドバシティ

カラムグリッド カラムグリッドは、雑誌のレイアウトでよく使われる手法で、文章を見やすく区切るためのものですが、Webサイトでもよく使われています。 2段から6段まで使うことができ、それ以上も可能ですが、一般的ではありません。 カラムグリッドで非常に重要なことは、カラムの間隔（ガター）がそれぞれ等間隔であること。のようなものです。

出典：UX Planet

出典：ラドヴァーシティ

モジュール式グリッド このタイプのグリッドは、レイアウトの様々な要素を整理する必要があり、カラムグリッドでは不十分な場合に必要となります。

出典：UX Planet

出典：ラドヴァーシティ

ベースライン・グリッド ベースラインとは、テキストを入力する際に、テキストを置く線のことで、リーディングとは、ベースラインとベースラインの間のスペースのことです。 見出しや小見出しの大きさはどうしたらいいのでしょう？

出典：UX Planet

出典：Fragaria

階層型グリッド 階層型グリッドは、モジュール型グリッドをベースにしたり、自分で作ったりすることもできます。 Webサイトではこのグリッドがよく使われ、特にデジタル雑誌や新聞は、カラムグリッドよりも階層型グリッドに移行する傾向があります。digitalになります。

出典：UX Plane

原則その2.ネガティブスペースを使う

私たちは、空虚や沈黙、色のないことを悪いことだと思いがちですが、それらがいかにコントラストの強固な基盤となっているかということは考えていないのです。

良いネガスペースと悪いネガスペース

ネガティブスペースは、デザイン内のさまざまな領域を区切り、レイアウトに息吹を与えます。 ビジュアルヒエラルキーとビジュアルバランスを助け、ユーザーのフォーカスをコアエレメントに向けさせ、注意散漫のレベルを下げ、最後にデザインにスタイルとエレガントさを与えます。

経験の浅いデザイナーは、テキストを拡大したり、ロゴや画像を大きくしたりと、キャンバスをできるだけ埋めようとする傾向があるかもしれません。 しかし、要素に余裕を持たせることで、見る人は特定の情報をより早く、より快適に拾い上げることができます。

- アーロン・ウォルター「Design for emotion

ネガティブスペースを決めるには、モジュラーグリッドを使うのが簡単です。 それをデザインの上に置くことで、どのモジュールを空けるべきか、どのモジュールを埋めるべきかを簡単に視覚化できます。

デザイナー by Brunswicker、出典：Codesignmag.com

原則3.フォーカルポイントを1つに絞る

クライアントから「ロゴを大きくしてください」「見出しをもっと大きくしてください」と言われたことはありませんか？

時間と同じように、フォーカスは相対的なものです。 ある要素を目立たせるためには、別の要素が背景となり、ある要素が他の要素を支配することで、デザインは視覚的な階層を持つことになります。

フォーカルポイントは、あなたのデザインにおける視聴の旅がどこから始まるかをオーディエンスに告げるものです。 つまり、あなたが語るストーリーの始まりなのです。

これは、大きな画像や大きなタイポグラフィーを使うことで実現できます。 以下のフォーカルポイントがいかに効果的であるかに注目してください。

デザイン：Braulio Amado for Bloomberg Businessweek, 出典：It's nice that

しかし、フォーカルポイントは聴衆の注意を引きつけるものですが、次のルールはそれを誘導するものです。

原則その4.近接と流れを考える

近接の原理は単純で、互いに関連性のある要素を確実に配置することです。

そのため、互いに関連性のあるデザイン資産だけを集め、デザイン上の情報のポケットを利用して、オーディエンスが消費する必要のある関連コンテンツの一部へと誘導します。 これはフローの原則とも呼ばれています。

出典：Satori Graphics

フローデザインとは、見る人の視線を各要素から各要素へとスムーズに誘導することであり、視線を引き寄せるフォーカルポイントと、方向性を示す他の要素からなるレイアウトのことです。

例えば、当社のWebサイトを例にとるとわかりやすいのですが、グラフィックとテキストが明確に分離されており、また、コールトゥアクションも明確に分離されているため、見る人の意識は、ある情報群から次の情報群へと移動することになります。

原則5.コントラストを利用する

デザインに十分なコントラストを持たせてください。

また、コントラストを上手に使うことで、デザインにメリハリをつけることができます。 すべてが同じ大きさ、同じ形、同じ色のレイアウトは、退屈に見えてしまいます。 コントラストは、物事のスパイスになります。

暖色と寒色、暗色と明色、青色とオレンジ色など、色のコントラストを思い浮かべるかもしれません。 しかし、色はコントラストの非常に重要な原理ですが、タイプ、配置、サイズのコントラストもあります。 また、コントラストは他の要素と並置して初めて意味を持つ、相対的なものであることも忘れないでください。

タイポグラフィ、色、そして要素間のサイズのコントラストに注目し、このルールをスマートに、そして美しく使っているレイアウトの例を紹介します。

出典：IAG 復縁アクションプラン

原則その6 繰り返し、パターン、リズム

繰り返しというと、同じ要素を何度も繰り返すことを思い浮かべます。

しかし、デザインは違います。 繰り返しを正しく使うことで、デザインに力を与えることができるのです。

デザインにテーマ性を持たせるために、レイアウト全体でモチーフを特定し、再利用するようにしましょう。 要素を繰り返すことで、オーディエンスの期待に応えるだけでなく、ユーザー体験も向上します。 一貫性があると、ユーザーはより快適に感じるのです。

図形や記号の繰り返し、あるいは配色や書体、全体的に同じスタイルにすることで、その効果を発揮します。

パターン、線の太さ・太さ、色の種類を限定し、全体的に繰り返す。 また、画像やグラフィックは、同じアーティストのイラストを使うなど、スタイルを統一するようにする。

出典：Thepentool.co

以上、デザインを整理して、よりきれいでプロフェッショナルな、バランスのとれたレイアウトを実現するための6つの原則をご紹介しました。

しかし、あなたの旅はここで終わりません。 グラフィックデザインは厳密な科学ではないので、ヒントや原則に限定されるべきではありません。 創作のあらゆる分野で言えることですが、確固たる経験則はありません。 これらのヒントから微妙に脱却することが、あなたのデザインに深みや多様性を与えるでしょう。

しかし、これらは素晴らしい出発点であり、ぜひ試してみてください。 そして、それらがどのように機能したかを私たちに教えてください！

Vectornatorをダウンロードして始める

あなたのデザインを、次のステージへ。