優れたビジュアルデザインのポイント
魅力的なデザインを生み出すには、文字や要素をグリッドに整列させ、明確な視覚的階層を構築し、意図的に色を用いて、デザイン上のあらゆる選択において一貫性を保つことだ。
「優れたデザインの構造分析」シリーズの3本目であるこの記事では、見た目の良いデザインに寄与するビジュアルデザインの原則について、実際のサイトの例を交えて解説する。見た目は、機能がどれほど優れているかという認識に影響を与える。
ビジュアル原則：グリッドの利用と整列
グリッドは、デザイナーがまとまりのあるレイアウトを作成するのを助け、エンドユーザーがインタフェースを容易に流し読みできるようにする。良いグリッドは、さまざまな画面サイズや向きに適応し、プラットフォーム間での一貫性を確保する。グリッドは、カラムとその間のガターで構成されている。理想的なガターサイズは存在しないが、目的によって、適したガターサイズは異なる。
例：ガターが狭い3カラムのグリッドベース
Flamingo Estateのこのページは、3カラムグリッドを使用しており、ガターが狭い。
商品画像とコンテンツはカラムに配置されており、予測しやすくわかりやすいショッピング体験をエンドユーザーに提供している。狭いガターは、商品同士を区別するのにちょうど良いスペースを提供している。また、このレイアウトがうまく機能している理由は、商品画像にかなり余白があるためでもある。
例：ガターが広い4カラムのグリッドベース
Figma Shortcutのこのページは、ガターの広い4カラムグリッドを使用している。この事例では、テキストや他の要素は複数のカラムにまたがることができ、その結果、1つの幅広いカラムのように見えている。コンテンツが複数のカラムにまたがるときに、ガターにまで広がるのはよくあることである。
本文は中央の2つのカラムに配置されていて、追加のテキスト（コールアウトなど）は左右のカラムに置かれている（下の画像では、左のカラムにコールアウトが配置されていないため、左側をトリミングしてある）。右側のコールアウトと中央の本文との間の十分な間隔が、読みやすいデザインを生み出すのに役立っている。
デザインでは必ずグリッドを用いて、ページや要素間で配置の一貫性を保つようにしよう。
ビジュアル原則：タイポグラフィシステムの利用
タイポグラフィは、あらゆるデザインの重要な構成要素である。タイポグラフィは、ウェブページの可読性（ひいてはユーザビリティ）を高めるだけでなく、デザインに洗練された印象をもたらすこともできる。2つの例で見ていこう。
例：タイポグラフィによる階層
この例は、プロバイオティクス企業であるSeed.comのものである。このデザインでは、1つのフォントファミリー（スモールキャップ、ミディアム、レギュラー）を用いて、文字色は白で統一されている。フォントはすっきりしていて読みやすく、タイポグラフィではなくコンテンツに集中できるようになっている。
テキストの色は1色のみで、レギュラーとミディアムのウェイトの見た目の違いも最小限のフォントファミリーを使っているにもかかわらず、このデザインはテキストの階層を実現している。それを可能にしているのはサイズである。
- 最も大きいサイズの「Most probiotics don’t survive digestion」（ほとんどのプロバイオティクスは消化に耐えられない）は最も注意を引き、したがって、最初に目に入る要素である。
- 中間のサイズは、中程度の重要性を示し、「Increases healthy digestion by 4.6x」（消化を4.6倍促進する）というテキストがそれに該当する。
- 最も小さい文字サイズは、カプセルの構造を説明するもので、ユーザーが読む必要性はそれほど高くない。
経験則として、デザインで使う文字サイズを3つに絞ると、デザインを煩雑にしたり、ユーザーに過度な視覚的負担をかけずに、明確な階層を確立することができる。
例：読むためのタイポグラフィ
前の例と同様に、Figma Shortcutのデザインには3つのテキストスタイルが存在する。それらは明確な視覚的階層を確立している：
- 記事の導入部で用いられている大きく太いテキスト
- 本文テキストのための中間サイズのテキスト
- キャプションとコールアウトのための小さいテキスト
しかし、この例でさらに重要なのは、タイポグラフィシステムが読みやすさを念頭に置いてデザインされ、用いられているという点である。行長を短めにしてちょうどよい行間（連続する2つのテキスト行のベースライン間の距離）にすることで、うっかり1行読み飛ばすこともなく、ある行から次の行へ視線がすばやく移動でき、読みやすくなっている。
テキストが多い場合は（複数の段落がある場合でも、段落が長い場合でも）、デフォルトの行間をわずかに広げることを検討しよう。テキストが壁のようになっていると、圧倒されると感じることがあるからだ。
ビジュアル原則：戦略的なカラーパレット
グリッドとタイポグラフィに加えて、色は最も重要なデザインツールの1つである。色は、ブランドのトーンを定めてブランド認識に影響を与え、ユーザーの注意を引き、感情に働きかけ、ユーザビリティを高めることができる。戦略的な色遣いは簡単ではない。色がどのように用いられるかを2つの例で見ていこう。
例：モノクロームのカラーパレット
Seed.comのカラーパレットは、緑の濃淡と白だけで構成されている。このモノクロームのカラーパレット（つまり、単一の色相のトーンや濃淡）は、コンテンツを際立たせながら、心地よく洗練された体験を生み出している。モノクロームのパレットは、扱うのも作成するのも最も容易であり、初心者のビジュアルデザイナーにとっても最も取り組みやすい（色を戦略的に選び、組み合わせる能力は、デザイナーではない人にしばしば過小評価される複雑なスキルである）。
緑の濃淡は上品で洗練されており、明るすぎず、彩度も高すぎない。デザインに用いる色の濃淡を選ぶとき、ネオンカラー（蛍光ペンの黄色のような）には注意が必要だ。そうした色はユーザーの注意を逸らし、デザイン全体の効果を損なう可能性があるからだ。
例：色は商品写真のために用いられる
Flamingo Estateの例でも、カラーパレットは同様にモノクロームで、主に白とクリームの濃淡をページの背景色や一部のボタンテキスト（たとえば、「Add to Basket」）に用いている。また、このパレットには、洗練された緑もあるが、それは主にテキストの背景やタイポグラフィ用である。
このデザインは、白と緑という2色のみをメインカラーにしているため、ユーザーに視覚的な負担をかけることなく、商品写真を主役として引き立てることができている。
皆さんのデザインでも、カラーパレットを2色に限定することで、バランスが生まれ、視覚的階層が明確になる。色について豊富な経験がある場合に限り、より複雑な色の調和を試すとよいだろう。
ビジュアル原則：有用な画像
ビジュアルデザインにおける画像の使用は、ユーザーを引きつけ、ブランドアイデンティティを伝えるうえで、極めて重要な役割を果たす。2つの例を見てみよう。
例：意図的な画像
Seed.comでは、画像が意図的に用いられている。
右カラムの画像は、販売中の商品について有用な情報を加えている。この画像は直接的で、商品から注意を逸らすような視覚的な煩雑さがない。背景画像は、顕微鏡で細胞を見たときを思わせるような興味深いパターンを作り出している。読むときに背景によって気が散りすぎないように、文字と背景画像の間にはグラスモーフィックな要素が配置されている。
こうした画像は、同社の商品は科学的研究に裏づけられているという、Seed.comのデザイナーが明らかに狙っている印象にさりげなく寄与している。
例：バランスの取れた、直接的な画像
Flamingo Estateの商品写真では、商品そのものが写真の中央に置かれている。注意を逸らしかねない煩雑な要素は一切ない。その結果、バランスの取れた直接的な画像になっている。商品写真はグリッドのカラム内で中央に配置されており、それによってバランスと対称性がさらに高められている。
マウスオーバーすると、画像が変化し、商品についての追加情報が表示される（この例では、トマトが出てくることで、石鹸の成分や香りを連想できるようになっている）。「Add to Basket」（買い物かごに入れる）ボタンも中央揃えになっており、デザインのバランス感をさらに高めている。
デザインの見た目の良さは偶然ではない
十分に確立されたビジュアルデザインの原則に基づき、意図的にデザイン上の判断を行おう。タイポグラフィやその他の要素をグリッドに整列させ、明確な視覚的階層を確立し、色を戦略的に用い、さまざまなデザイン要素の使い方に一貫性を持たせよう。こうした核となる原則こそが、美しく、ユーザブルなデザインの基盤を作るのである。
記事で述べられている意見・見解は執筆者等のものであり、株式会社イードの公式な立場・方針を示すものではありません。
