【翻訳】なぜある種のデザインは良く見えるのか？（Sarah Gibbons, Kelley Gordon, N/N group, 2021）

www.nngroup.com

概要：視覚的に美しいデザインは、一貫したタイポグラフィーを使用し、明確な階層を確立し、洗練されたカラーパレットを使用し、グリッドに整列させています。

フォント、色、配置などの視覚的なディテールは、使い勝手の良い体験を生み出し、ブランド特性（親しみやすさや信頼性など）を表現しましょう。

デザインを見て、それが良いものであることに気づくのは簡単です。しかし、なぜそう見えるのか、その理由を明確にするのは難しいものです。この記事では、3つのユーザーインターフェイスデザインを分析し、それらを魅力的にするビジュアルデザインの原則について説明します。

例1：タイポグラフィとスペーシング

最初の例は、Medium.comのものです。このデザインは、グリッド、ホワイトスペース、タイポグラフィシステムを活用し、快適で美しい読書体験を作り出しています。

Mediumのデザインは、シンプルでありながら魅力的です。配慮されたタイポグラフィシステム、スペーシング、一貫した左揃えのおかげで、ユーザーは読みやすく、追加情報は視覚的にまとまったサイドバーで表示されるようになっています。

3列のグリッドを使用したデザインです。各テキスト要素は、グリッドラインに合わせて配置されています。左サイドバーのアイコンの間には一貫したパディング（要素を区切る縦の余白）を使用し、グループ分けにも同じ単位を2回使用しています。WRITTEN BYの見出しは小文字で区別し、余裕のあるリーディングで風通しの良いデザインに仕上げています。

グリッドへのアライメント

手始めに、カラムグリッド（上の画像のピンクの線）があります。カラムグリッドは、オブジェクトが整列するための垂直なアンカーラインを提供します。サイドバーのコンテンツは、一番左のグリッド線に左寄せされているので、デザインはすっきりし、サイドバーのコンテンツはスキャンしやすくなっています。記事のテキストもカラムグリッドのラインに対して左寄せになっています。

デザインでは、カラムグリッドを設定し、さまざまなページや要素でアライメントを一貫させましょう。左寄せはスキャナビリティを向上させるということを忘れないでください）。

タイポグラフィの違い

Mediumでは、同じフォントファミリーの中で異なる書体（スモールキャップ、ボールド、イタリック、下線）や、色のわずかな変化（黒とグレー）を使って、異なるタイプのコンテンツを区別しています。あまりに種類が多すぎると、一貫性が失われ、無秩序なデザインに見えてしまいますが、Mediumのバリエーションは、一貫性があり、目的を持って適用されています。例えば、WRITTEN BYのスモールキャップは、セクションの見出しであることを示しています。このような差異があることで、デザインが平板なものにならず、かつ、他のテキストとのまとまりも感じられます。経験則として、タイポグラフィ・システムを特定し、デザインを1～2種類のフォントに限定しましょう。同じ目的には常に同じタイプのバリエーション（イタリック、ボールド、スモールキャップ）を使用しましょう（ウェブページやインターフェースのエリアを超えても）。

テキストの行間に余分なスペースがあります。段落の各行のベースライン間の距離であるリーディングは、デフォルトのスペーシング（通常、フォントサイズより2px大きいのです）よりわずかに大きくなっています。この場合、リーディングはフォントサイズより4～6px大きく、風通しの良いオープンなテキストブロックを作るのに役立っています。標準の行間を狭くすると、アセンダーとディセンダーがぶつかり合って不快になり、読みにくくなってしまいます。いくつかの段落のテキストがある場合、デフォルトの+2pxのリーディングを増やすと、視覚的に濃く重く感じられるかもしれないので、検討してみてください。

カーニングとトラッキングの調整

デザイナーは、特殊な形状の結果、字体間に生じるぎこちない間隔も考慮しています。カーニングとトラッキングは通常、見出しのような大きな文字に適用され、スペースがより明確になります。例えば、「What Exercise Looks Like in Japan」というタイトルでは、WhatのWとhの間隔が少し縮まっています。ほとんどのフォントファミリーはカーニングを自動的に調整しますが（タイプスタイルに組み込まれています）、文字と文字の間のスペースが目立つ大きな見出しやロゴの場合は、手動でカーニングを調整することを検討してください。

このように、細部にまでこだわったデザインは、ウェブページの本来の目的である「読みやすさ」を実現しながらも、美しいデザインに仕上げています。

例2：階層と色

2つ目の例は、ビタミン剤の会社であるRitual.comのものです。このデザインは、階層、色、イメージを利用して、魅力的な視覚体験を作り出しています。

Ritualのデザインは、ページ階層を作るためにスケールとカラーを利用しています。

このデザインは、3本のアンカーラインにコンテンツを配置しています。各商品のタイトル、画像、説明文、ボタンは、そのうちの1行を中心に配置されています。カラーパレットは、青と黄色の原色で構成されています。このパレットにより、コンテンツ（青）とコールトゥアクション（黄色）のコントラストを明確にすることができます。

洗練されたカラーパレット

カラーパレットは、古典的な補色であるブルーとイエローの基本2色に限定しています。イエローは明るすぎず、ブルーは白地に映えるような濃さになっています。もし黄色と青がCMYKの原色（シアンと蛍光ペンの黄色）だったら、このデザインはこれほど洗練されていなかったでしょう（むしろ90年代前半のウェブサイトのようなデザインです）。デザインの色調を決めるときは、カラーパレットを作成し、さまざまな色を入れ替えたりして、何が似合うかを繰り返し確認しましょう。ハイライトに似たようなものは避けてください。原色からほんの少し色を調整することで、色選びが洗練されます。例えば、上のスクリーンショットは、原色を使用した場合のデザインのイメージに変更されています（下図）。

この画像は、オリジナルの彩度の高い色調ではなく、原色のパレットを使用した場合のデザインの様子を示しています。デザインが洗練されていないだけでなく、黄色のボタンが読みづらくなっています。

私たちは、カラーパレットのインスピレーションを得るために、Adobe Colorを使用することを好んでいます。他のWebサイトの色が気に入った場合、その理由を突き止めてみてください。カラーパレットを数色に絞ることで、考慮すべき要素が少なくなり、デザインに集中できるようになります（つまり、気が散ることも少なくなります）。その結果、より強力なブランド表現が可能になります。

明確なビジュアルヒエラルキー

ビジュアルヒエラルキーは、視線を誘導し、重要なページ要素を示すものです。この例では、まず最大のタイポグラフィ要素である「Essential for Women」という大きな見出しに目が行き、ユーザーにページ内容の概要を簡潔かつ迅速に伝えていることがわかります。次に、黄色の画像と「カートに入れる」ボタンに目が行きます。

見出しのタイポグラフィが混在していることに注目してください。「エッセンシャル・フォー・ウーマン」という見出しで、商品の重要性と女性向けにカスタマイズされていることの両方を強調しています。

あなたのデザインでも、タイポグラフィを混在させる場合は、次のことを心がけましょう。

1つの見出しに使用するフォント処理は最大2種類までとします。（1つの見出しに最大2種類のフォント処理を使用します（フォント処理とは、レギュラー、イタリック、複数のウェイトのボールド（それぞれイタリックのバリエーションがあります）を意味します）。最も重要な単語には太字または下線を、二番目の単語にはイタリックを使用します。例えば、「Women」に下線を引くと、無秩序なデザインになります。例えば、「Women」に下線を引くと、「Essential」の太字と競合し、読書の階層を乱すことになります。
ページ間でスタイルを統一しましょう。この見出しでは「Essential」が太字になっているので、「Essential for Men」カテゴリのランディングページでも太字にする必要があります。

見出しを読んだ後は、大きな商品画像と黄色の「カートに入れる」ボタンに注意が移ります。

高品質の画像を使用する

イメージ画像は、商品説明に貴重な情報を加えることができます。商品から目をそらす余分なものがない写真の直接的なスタイルは、全体のビジュアルデザインにも影響を与えています。画像の背景は、それが掲載されている商品カードの背景とシームレスに溶け合い、ページを洗練されたものに仕上げます。デザインに使用する写真は、単なる飾りではなく、ユーザーがプロダクトやコンセプトを視覚的に理解できるようにする必要があります。そのためには、画像の背景色を周囲の背景色と合わせることで、他のデザインに溶け込むようにしましょう。

例3：一貫性

3つ目の例は、Spotifyのモバイルアプリからです。このデザインでは、ビジュアル処理の一貫性を効果的に利用して、アプリ全体でまとまりのあるリスニング体験を作り出しています。

Spotifyアプリは、カスタムアートワーク、カラー、スペーシングに一貫性を持たせることで、アプリの複数のエリアにおいて、明快さを維持しながらまとまりを生み出しています。

視覚的な一貫性は、Spotifyの洗練された外観に大きく貢献しています。整列、タイポグラフィ、パディングの一貫性、そしてジャンルやアートワークの一貫性があります。この一貫性の例外は、人気プレイリストと下のタイルの間の間隔です。

一貫した視覚処理

ビジュアル要素が一貫していない、あるいは散発的に使用されている場合、デザインはプロらしくなく、洗練されていないように見えるでしょう。Spotifyでは、多くの視覚的要素がアプリのさまざまな領域で一貫性を保っています。まず、カラムとカラムの間隔（左右の溝）は、どの画面でも同じ大きさです。さらに、ジャンルごとに、上部のグリッド線（つまり、画面上部のヘッダーの配置と位置）やタイポグラフィの処理も一貫しています。また、グラデーションカラーはジャンルごとに変化しますが、色合いや彩度は統一されています。

2つ目は、各カテゴリーにカスタムアートワークを施したタイルがあることです。各カテゴリーの色やグラフィックは決まっていますが、タイルのレイアウトや階層は統一されています。例えば、各カテゴリーの名前（例：検索画面ではポップ、ロック、教育）は、各タイル上で同じ位置にあります。また、タイル内の画像（アルバムカバーアートなど）は、一貫して右側にあり、タイルからにじみ出るように配置されています。これらのディテールが、デザイン全体のまとまりと洗練を感じさせます。

デザインでは、ビジュアルシステムを作り、体験のさまざまな領域でそれを貫くことを目指すべきです。例えば、ウェブページの要素間の間隔を同じにするか、同じ単位の倍数にします（例えば、見出しと本文の間の基本間隔が5pxの場合、異なるセクションを分けるために基本間隔を2単位使用する、など）。

グループ分けをするためのスペース

近接性、つまり要素の周りの間隔は、グループの確立に役立ちます。この例では、トップジャンル（ポップとロック）のコンテンツタイルの間に最小限のスペースがあることで、これらのコンテンツが一緒になっていることを示し、教育やTrue Crimeはポッドキャストの人気カテゴリーに属していることを示しています。グループ分けをするときは、ヘッダーとコンテンツの間のスペースを少なくし、グループとグループの間のスペースを多くします。

まとめ

デザインは、偶然に良く見えるものではありません。デザインの各決定は意図的に行われ、理想的にはビジュアルデザインシステムによって裏打ちされるべきです。デザインの良し悪しを説明するものは一つではありませんが、いくつかの原則に従えば、その可能性は高くなります。

タイポグラフィ（およびその他のグラフィック要素）はグリッドに合わせます。タイポグラフィ（およびその他のグラフィック要素）をグリッドに合わせ、各要素をグリッドシステムの線に固定します。
明確な階層とカラーパレットを確立します。デザインの中で最も重要なものを決め、特定の視覚的処理（サイズ、色、配置）を意図的に適用することで、ユーザーが最初に目にするようにします。
一貫性を保ちましょう。明確な視覚的ルールを定め、デザイン全体に一貫して適用します。

これらのデザイン原則を適用することで、デザインは美しくなり、使いやすい体験に貢献します。