F字型レイアウト・三分割法・ジャンプ率の感覚を身につけよう

デザイナーの教科書

ここでは、デザインにすぐ活用できる「3つの構成テクニック」をご紹介しています。

  1. F字形レイアウト
  2. 三分割法
  3. 文字のジャンプ率

F字形レイアウト

Webページやグラフィックなどの情報誌を見る人の視線は、基本的にFの字の動き方をします。この視線の流れに沿って画像や文字などを配置するのが、F字形レイアウトです。

上の例だと、最初に左側に配置された写真のビジュアルに目が行きませんか?その後は自然と「SHOES ON SALE NOW!」のキャッチコピー、詳細テキストという風に視線が動いていくはずです。

このようなビジュアルを強調した構成は、商品画像を重視するECサイトなどでよく活用されています。反対に、ビジュアルよりもテキストを重視するニュースサイトなどでは、文字情報を左側に配置するレイアウトが多いです。

三分割法を利用する

三分割法は、写真撮影をする時によく取り入れられる手法です。画面の中央に対象物を収めるよりも、画面の縦横をそれぞれ均等に三分割した線の交点へ配置することで、よりバランスの良い印象を与えます。

三分割法はそれぞれのアートボードの大きさごとに交点の位置が調整されるので、縦横比の影響をあまり受けることなく、どんな場面でも比較的簡単に取り入れることができます。

また先ほど紹介したF字形レイアウトと組み合わせると、画面上の4つの交点との関係はこのようになります。

青い線の四分割の中の交点は、分割されたそれぞれの四角形の中心点ではなく、画面全体の中央に向かって少し寄っていますね。

これらのことより、相手に伝えたい情報は、文脈の流れもしくは優先度の順に①→②→③→④の付近に配置すると、より効果的なことがわかります。

文字のジャンプ率

文字のジャンプ率とは、見出しや本文などの文字サイズの比率のことです。

下の例を見てみましょう。同じようなグラフィクでも、左のデザインの方が言葉がスッと頭に入ってくる感じがしませんか?このように目立たせたい文字を他のテキストよりも大きく配置することで、画面全体にメリハリが生まれ、伝えたい情報をより印象的に見せることができます。

またこのジャンプ率は、見出や本文などの単位だけでなく、特定の日時や金額など一文の中でのキーワードの部分に利用するのも効果的です。電車内の広告などは数字部分にジャンプ率を活用しているものがたくさんあるので、観察してみるのも面白いかもしれませんね。

まとめ

今回紹介した3つのテクニックは、練習しなくともすぐに取り入れる事ができるものばかりです。少しの意識でグラフィックの見栄えは格段に変わります。ぜひ試してみてくださいね!