1. フォーカル・ポイントを決める

フォーカル・ポイント（Focal Point）とは、そのデザインを見た時に関心を抱き、惹きつけられるポイントのことです。

文章で言うとフック文章や導入文章にあたります。

以下の雑誌の写真を例にフォーカル・ポイントを解説します。

写真を見て、どこにまず目が行きましたか？

おそらく、食べ物の写真ではないでしょうか。

これはデザイナーが意図して作り上げた構図で、読者に見てもらいたいものを指定しています。

左のページはモノクロの中にカラーの写真を入れることで、写真をより引き立たせています。

さらに、左のページはテキストやモノクロ線で食べ物の写真を囲むようにデザインされており、読者の視線を中心にある写真に誘導しています。



制作するデザインは全てを強調することはできません。

最も重要な部分を決定し、そこをフォーカル・ポイントとなるようにデザインします。

人は最も強いヴィジュアルイメージに関心を抱くので、フォーカル・ポイントにしたい個所が強調されるように形、サイズ、背景、色、配置、テクスチャなどを調整します。


以下の画像では「5」という数字に目が行きます。

「5」は、この画像の中で最も太い線、大きいサイズの字で描かれているため、この部分が強調されるのです。

2. デザインに流れ（フロー）を作る

フォーカル・ポイントが決まったら、コンテンツを効率よく見てもらうためにレイアウトに流れ（フロー）を作り、視線を誘導することを考えます。

これには、配置するデザインのサイズや形を調整してできる「階層」を利用します。

「階層」を作ることで読み手はどこから読み始めてどのような流れで読むべきかを知ることができます。

デザインが流れを意識していない作りをしていると、読み手は視線があちこちに飛んでしまい、読んで欲しいコンテンツを正しく読んでくれません。

流れ（フロー）は、フォーカル・ポイントがなかったり（逆にあり過ぎたり）、階層がなかったり、デザインの配置が雑だと邪魔されてしまいます。

デザインフローは以下に挙げるポイントに注意することで改善できます。

反復を利用する

箇条書きで使う「・」や、「数字」、ラインなどを加えることで視線を誘導しましょう。

反復はデザインに統一感を生みます。


以下のイラストに使われている反復の要素が分かりますか？

イラストでは、水平に並んだ雲、奥まで続くヤシの木、波、女性の水着のストライプ、角張った岩などが反復パターンとなり、イラストに奥行や動きを与えています。

デザインをグループごとに分割する

デザインをグルーブごとに明確に分割します。

分割する時は、見出し、タイトル、フレーム枠、カラーなどを使ってデザインフローを強調します。

余白を十分に取る

十分な余白を取ることで、デザインフローを明確にできます。

余白が無いデザインはごちゃごちゃとしてフローをあいまいにします。


以下のサンプルは、余白を上手に使って明確な「階層」を作り出しています。

左側の黒背景のデザインでは、フォントサイズを変えて最も重要な情報であるイベント名、開催場所、イベント日時に目が行くようにデザインされています。

余白を十分に取ることで、見るべき項目が明確になっています。

また右側は背景色を変えることで全く違う情報であることが分かるように上手く「階層」を作り上げています。

3. デザインのバランスを整える

シンメトリー（左右の釣り合い）は、バランスを整える上で大きく影響する要素です。

人は左右の釣り合いが取れたものに美しさを感じるようになっています。

また、デザインのバランスを取ることで階層構造を作り出すことも出来ます。

以下のロゴには2つのシンメトリーが使われています。

ロゴは中心線から右側と左側のデザインがほぼ等しく、さらに中心から放射状に円と線を描き、シンメトリーを表しています。

シンメトリーを組み合わせることで、魅力的なデザインを作り上げています。



揃っていない要素はデザインのバランスを崩します。

文字、テキスト、図形、線などがきちんと揃っているか確認しましょう。

4. フォントをデザインに合わせる

フォントもデザインの中でメッセージを伝える重要な要素です。

下手な組み合わせは本来のメッセージ性を損ないます。

デザインとフォントを調和させる技術は簡単に身に着くものでは無く、文字の基礎を学んで試行錯誤を繰り返していくしかありません。



ファント選びで重要なのは、そのフォントとデザインの組み合わせが表現したい雰囲気や目的に合致しているかどうかです。

「現役デザイナーが実践している、フォント組み合わせ10個の黄金ルール」ではフォントの組み合わせついてより詳しく解説しています。

5. 文字は読みやすく

デザインの目的が文字を読ませることであれば、読みやすいデザインにしなくてはいけません。

以下の例では文字が読みにくくなるので注意しましょう。

フォントサイズが不適切

パソコンでデザインしていると、実際に印刷した時のフォントサイズがイメージと異なる場合があります。

例えば、名刺に大きなフォントは適しませんし、遠くから読ませる広告に小さなフォントでは意味がありません。

実際に印刷してイメージ通り読めるか確認しましょう。

色とコントラストが悪い

フォントの色と背景が似た色だと読みにくいです。

また、明るい灰色文字に白文字などのようにコントラストが低い場合も読みにくく、問題です。

フォントが悪い

フォントには読みにくいものと読みやすいものがあります。

しっかり読ませたい文章にはスッキリはっきりしたフォントを用いましょう。

ユニークでインパクトの強いフォントは大きなサイズで控えめに使います。

以下の例では筆記体フォントとサンセリフフォントを上手く組み合わせています。

6. 機能性と見た目のバランスを取る

グラフィック・デザインは美しいデザインでユーザーを魅了する一方で、メッセージ性も保持する必要があります。

以下のイラストは三角形のドリトス・チップスを山に見立て、色違いの山を作ることで様々な味付けやフレーバーがあることを表現し、ブランドイメージを強調しています。

7. コントラストを明確に

コントラストはデザインの中の特定の要素を強調できます。

コントラストは色だけでなく、形、サイズ、文字などの要素で作り出すことも出来ます。

以下のパッケージは、複数の要素がコントラストとなっています。

まず黒色が全体のアクセントになり、白い背景の上にイエローとオレンジ色が鮮やかです。

次に直線的に並べられた文字に対してイラストは曲線を中心に描くことで文字を際立たせています。

8. 余白を十分に取る

デザインは限られたスペースの中で作り上げるものですが、どんなに狭くとも余白を十分に取ることが大事です。

以下、適切な余白を取るためのポイントを示します。

近づける

関連するデザイン同士を近づけることで、余白が生まれ、レイアウトが自動的に整理されます。

適切な広さの余白

余白は広すぎても狭すぎてもデザインを損ないます。

美しく、機能的な余白を設定しましょう。

以下のサイトでは各項目ごとにフォーカル・ポイントが作られており、余白も適切に確保しています。

また、フォントに細字を用い、商品を中央に集めることでさらに余白を作り上げています。

9. デザインの雰囲気を合わせる

色やフォントによって、陽気さ、真面目さ、洗練などさまざまな雰囲気を表現できます。

従って選んだ色やフォントがデザインの目的とする雰囲気にマッチしているかは重要で、マッチしていないと間違ったメッセージを発信することになります。

以下のデザイン例は秋に開催された子供向けイベントの広告バナーです。

秋らしい茶系統の配色と可愛らしいポップなフォントで楽しげな雰囲気が伝わってきます。

10. 配色を調和させる

色には、感情、心理、文化など潜在的にさまざまな意味を内包しています。

以下の例では、水色、サンゴピンク色、黄色を用い夏っぽい雰囲気を出しています。



以下の例では、黒と金色を用いてエレガントさや洗練された印象を表現しています。



調和の取れない色の組み合わせはデザイン全体の調和を崩すので避けます。

「配色完全ガイド！カテゴリー別見本100個とカラーパレットの使い方まとめ」

「配色の基本原則」

で配色の選び方を学んでみましょう。


以下のデザイン例では上部にオレンジ色、下部に紫色が目立つように配色されています。

このデザイン手法はスプリット・コンプリメンタリー・カラーと呼ばれ、コントラストを強めることができます。

11. デザインブリーフに合わせる

デザインブリーフはデザインの指針のようなもので、「誰に、どのように、どのようなメッセージを届け、どのような結果を出したいのか」をまとめた文書のことです。

依頼で作成するデザインには目的があるので、クライエントの要望にきちんと応えられるようにデザインブリーフにデザインを合わせましょう。

デザインブリーフ用にテクニックや質問のポイントがまとめられたテンプレートをこちらからダウンロードできます。

12. 画像や最終ファイルは高画質で

自信を持って作り上げたデザインを印刷したりWEBで公開した結果、印刷物の配色がデザインと異なっていたりWEB上の画像がぼやけたりモザイク状になることがあります。

これは間違ったファイル設定やサイズ、解像度でデザインを作ってしまったために起こる現象です。

適切な設定とファイル形式を理解した上でデザインしないとこのような悲劇に見舞われますので気を付けましょう。