Webページのレイアウトに役立つ20のデザインテクニック

ページのレイアウトをする時に全てが同じ大きさ・形・色だと、それは非常に退屈なデザインになってしまいます。要素を整理し、階層をつくり、重要な箇所にフォーカスがあたるようにするにはコントラストを効果的に使うことです。

レイアウトにビジュアルの興味を加え、デザインを生き生きとさせるコントラストの使い方を紹介します。

Designing with Contrast

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。

• 明度でコントラストをつくる
• 色相でコントラストをつくる
• 色温度でコントラストをつくる
• 色強度でコントラストをつくる
• 形(有機的と幾何学的)でコントラストをつくる
• 形(エッジとコーナー)でコントラストをつくる
• テクスチャでコントラストをつくる
• スケールとサイズでコントラストをつくる
• ビジュアルのウェイトでコントラストをつくる
• スペースと空白スペースでコントラストをつくる
• 構図でコントラストをつくる
• 意外な何かとコントラストをつくる
• 繰り返しとパターンでコントラストをつくる
• 位置と方向でコントラストをつくる
• 近接と分離でコントラストをつくる
• ビジュアル的なサインでコントラストをつくる
• 複雑と単純でコントラストをつくる
• フォントの組み合わせでコントラストをつくる
• コントラストをつくる時はタイポグラフィに注意を払う
• タイポグラフィのスタイルとウェイトでコントラストをつくる

明度でコントラストをつくる

色の値(value)とはカラーの明るさや暗さをあらわす用語で、ピュアブラックとピュアホワイトに最もコントラストがあります。だからといって高いコントラストのデザインをつくるために、白黒のカラーパレットにこだわる必要はありません。簡単な方法の一つは、そのカラーからより明るいカラーと暗いカラーをつくり、コントラストを加え、あなたのデザインの特定の場所を目立たせることができます。

シンプルな例として、下記のような暗い背景に明るいテキストは効果的にコントラストをつくっています。背景が写真で、テキストが読みづらい時でも、コントラスト(パープルとブルーの暗い背景の上にホワイトの明るいテキスト)をつかうことで読みやすくなっています。

色相でコントラストをつくる

色相(hue)は画家などのアーティストが色相環(color wheel)から特定のカラーをみつける時によくつかいます。しかしこのカラー理論は、グラフィックやWebデザイナーにも役立ちます。画家が高いコントラストの構成をつくるために何世紀にも渡り使用されてきた色相環から、典型的なカラーパレットをつくることができます。

補色(complementary)

レッドとグリーン、ブルーとオレンジ、のように色相環上で反対に位置するカラーを組み合わせます。非常に高いコントラストです。

下記のバッジのデザインはシンプルな補色のカラースキームで、見た目の美しさと実用性の両方を備えています。各セクションの区切りもうまく機能しています。

分裂補色(split complementary)

あるカラーとその補色の両隣の2つのカラーを組み合わせます。強いビジュアルのコントラストを持っていますが、補色の組み合わせほど劇的ではありません。

3色配色(triadic)

色相環上で3等分した位置のカラーを組み合わせます。

色相環上のカラーをそのまま使用しなければいけないという訳ではありません。デザインにあうようにカラーを少し明るくしたり暗くしたり抑えたりしても、素敵なコントラストを与えることができます。

色温度でコントラストをつくる

すべてのカラーはカラーがもつ温度にもとづいてグループに分けることができます。暖色・寒色・中間色の3つです。レッド・オレンジ・イエローは暖色、ブルー・グリーンは寒色と考えられています。ブラック・ホワイト・グレーは中間色で、ベージュやブラウンなども同様にこのグループに分類されます。デザインで色温度を組み合わせると、特に暖色と寒色で劇的なコントラストをつくることができます。

例えば下記のWebページのレイアウトは、鮮やかなブルーとイエローのシェードで色温度のコントラストをつくりだしています。これはメインのイメージとアクションボタンをよく目立たせるのにも一役買っています。
さらに良い点は、このブルーとイエローの2色はグリーンを加えたクールな方向に調整されているため、高いコントラストでありながら、その組み合わせはばらばらにならず、まとまりがあるデザインになっています。

色強度でコントラストをつくる

カラーの強度とはいわゆる彩度(saturation)のことで、そのカラーにおける最もピュアで明るいカラーが100%の彩度になります。グレーに近づけると、彩度が減らされたということです。彩度が高い明るいカラーや彩度の低い落ち着いたカラーをそれぞれ（あるいは同時に）つかうことは、デザインで高い・低いコントラストの場所をつくるよい方法です。明るいカラーは常に注意をひきつけます（特にブラックとの対照で）。あなたのデザインの重要な部分を強調するために、このテクニックは小出しにつかうと効果的です。

下記のWebサイトのデザインでは、森林の落ち着いたグリーンに対して、明るいオレンジのテキストを配置しています。これは単にアイキャッチのための補色配色であるだけでなく、全体の印象を強めるために彩度でコントラストがつくりだされています。

形(有機的と幾何学的)でコントラストをつくる

形というのは、幾何学的(geometric)な形と有機的(organic)な形のどちらかに属します。幾何学的な形は長方形・三角形・円などで、有機的な形は液体など自然が生み出した形のことです。幾何学的な形にみられる一様性の角度は、有機的な形の特徴でもある非対称のカーブとコントラストをつくることができます。

下記のラベルのデザインは、ストレートなラインを使った幾何学的な文字とカラフルな有機的な形が美しいコントラストをつくっています。

形(エッジとコーナー)でコントラストをつくる

形を使ってできるもう一つの方法は、タイポグラフィやボックスやボタンなどにあるエッジとコーナーです。丸い形はソフトでカジュアルで、フレンドリーな印象を与え、鋭い形は整然としたシャープな印象を与えます。

これらを互いに対照させ、その特徴をつかってコントラストをつくることができます。下記のデザインは、タイポグラフィでハードとソフトの文字通りコントラストをつくったものです。

テクスチャでコントラストをつくる

形と同様に、テクスチャもお互いの質感が異なるときにコントラストをつくりだすことができます。ラフとスムーズ、ソフトとハード、隆起と平ら、など。あなたが使用するどんなテクスチャでもこのテクニックは利用できます、可能性は無限です。

例えばざらっとしたテクスチャは、クリーンなラインで並ぶロゴにヴィンテージの印象を与えます。テクスチャは、デザインを少し擦り切れたように見せる、あるいは素朴に見せる、あるいはヴィンテージ・レトロ風に見せるための素晴らしい方法です。

スケールとサイズでコントラストをつくる

コントラストはデザインにビジュアルの興味を加えることのほかに、異なるデザイン要素に優先順位をつけることもできます。もしあなたのデザインで要素のすべてが同じ大きさであるなら、階層がない状態です。ビジターは、最初に何を見るべきか？ あるいは何が重要なのか？ と考えるでしょう。効果的にスケールを使うことは単に、実用的な観点から重要であるだけではありません。ダイナミックで面白いレイアウトをつくり、デザインにドラマを加えることもできます。

下記の雑誌の表紙では、内容のテーマを強調するために強い写真をつかっていますが、他のデザイン要素を圧倒していません。それどころか、タイポグラフィのサイズ、形、カラーが写真のフォーカスを強めています。

ビジュアルのウェイトでコントラストをつくる

スケールと同様にビジュアルのウェイトは、デザインの一箇所を「ここは重要です」と伝えるもう一つの方法です。ビジュアルのウェイトは単にその要素が他の要素と比べて目立っている、つまり高いコントラストであるといことです。ビジュアルのウェイトが最もあるというのは、必ずしもデザインの中で最も大きいということではありません。目をひきつけるカラーやテクスチャや形などの特徴が際立っていれば、それを目立たせることができます。

下記の案内状のハガキを見てみましょう。建築のイラストは確かにそれぞれのハガキで最も大きい要素ですが、最も暗い「Enjoy More」のテキストに目がひきつけられます。このように最も目立つものイコール大きいものということではなく、特徴が際立っているものが目立ちます。

スペースと空白スペースでコントラストをつくる

あなたはページ上を多くの情報で満たす誘惑にかられるかもしれませんが、空白スペースはバランスがとれたレイアウトのためにデザイン要素を切り離したり、整理する重要な役割を果たします。レイアウトが賑やかだったり複雑だったりするときに、空白スペース(実際に白でなくても可)と一緒に周囲の重要な要素がその場所に対する注意をひきつけ、デザインの残りと効果的にコントラストをつくりだします。

下記のWebページでは、情報を整理するために空白スペースと細い区切り線の組み合わせが効果的に機能しています。ページは左と右の両方のコラムが十分な空白スペースで囲まれており、さらにもっと注目の的としてプロダクトの写真が目をひきつけています。

構図でコントラストをつくる

すべてのデザインである程度、バランスと緊張を保たせる必要があります。あなたはどのようにデザインのバランスをとりますか？ 退屈ではなく、ダイナミックで、しかし無秩序ではないように。この2つの規則に従う1つの方法は、良い構図を選択することです。そしてその課程で、デザインで良いコントラストを達成します。どのようにすればいいのかは、アーティストや画家がよく使用するテクニックを学ぶことで実現できます。

3分割構図(The Rule of Thirds): レイアウトを垂直と水平に3分割することをイメージしてみてください。分割した線が交差する4つのポイントの1つにフォーカスを与えます。これはダイナミックなレイアウトを達成するときにも役立ちます。ページの真ん中にすべてを配置することは退屈なデザインの近道になってしまいます。

下記のWebページでは、最初のヘッダイメージではバラと見出しの両方が3分割構図の2つのポイントをつかって配置されており、魅力的な構図をつくっています。もう一つの構図のテクニックは3人構図(Groups of three)で、ページの至るところに利用されています。

意外な何かとコントラストをつくる

構図のテクニックは、意外性があるという理由もあり、効果的です。よく見かけるような真ん中ではない、直線上ではないという驚きの要素はデザインでコントラストをつくる素晴らしい方法でもあります。意外な何かを加える、例えばニュートラルなデザインに鮮やかなポップなカラーを加えるのはどうでしょうか？ 単調なデザインの中に鮮やかなカラーが1つあると、ビジターはそこに目をむけるでしょう。

下記のランディングページでは、写真画像と相互に作用するタイポグラフィが通常のデザインではなく、シンプルで簡単ながらデザインに新鮮さを与えています。

繰り返しとパターンでコントラストをつくる

要素やパターンをデザインに繰り返して適用することは、構図のテクニックと同様にフォーカスやビジュアルの関心をつくることができます。あるいはビジュアルのテーマを繰り返すことで、デザインにより大きなインパクトを与えることができます。

下記のデザイナーの名刺デザインでは、タイポグラフィにフォーカスがあうようにパターンが組み合わされています。粋な計らいとして、パターンはそのブランディングを関係づけるためにデザイナーのロゴの形を反映しています。

位置と方向でコントラストをつくる

すべてのデザインは何らかの種類の組織構造を必要とします。例えばテキストはある特定の方法で一列に並べられ、要素はレイアウトにおけるある特定の位置に配置され、間隔が設定されます。整然としたデザインのためには一貫性が重要ですが、意味のある目的をもった方法でそれを壊すことは面白いコントラストを加えることができます。

下記のロゴは、タイポグラフィの重要なピースを直線(囲んでいる整然としたテキスト)に対して目立たせるために傾きを使っています。おまけのコントラストとして、スクリプトとサンセリフの組み合わせもあります。

近接と分離でコントラストをつくる

意図的にオブジェクトをまとめることは、それらに関係性をもたせ、あなたのデザインを整理するのに役立ちます。同様に、オブジェクトを切り離すことはデザインを別のセクションに分けるのに役立ちます。コントラストもまた、その量で達成することができます。多数のオブジェクトのグループ間にある1つのオブジェクトは、確かに目立ちます。

例えば履歴書のようにテキストの量が多いデザインでは、良い構造をつくることが重要です。下記にあるように、近接、整列、カラーを組み合わせて情報を読みやすいようにデザインします。

ビジュアル的なサインでコントラストをつくる

一説によると人間は見たものの80%を記憶すると言われています。このことはデザインがなぜ重要であるかの理由の1つになります。しかしその注意持続時間は長くはなく、ビジターはすぐにあなたのデザインのどこにフォーカスを合わせるべきか考えます。そのタイミングが、ビジュアル的なサインが役に立つときです。

例えば矢印で文字通りデザイン要素を示したり、円や他の形でデザイン要素を囲んだり、それをハイライトするとよいでしょう。また、テキストのブロックでは下線を引いたり、黒丸をつけたり、情報を視覚化したアイコンをつけても効果的です。

複雑と単純でコントラストをつくる

デザインは単純(simple)と複雑(complex)をミックスさせたスタイルや個々の特徴でコントラストを増やすことができます。

下記は、この単純と複雑のお互いを強めるために使った例です。複雑なフローラルのパターンが、クリーンでシンプルなタイポグラフィを際立たせ、その異なる特徴がデザイン全体を劇的に魅力的にしています。

フォントの組み合わせでコントラストをつくる

タイポグラフィはたいていのデザインの基本で、コントラストを加える他に類をみない方法をもっています。
基本的なコントラストを加える方法はすべて説明しました。ここではタイポグラフィを使った応用テクニックを紹介します。

最後に3つのポイントを教えましょう。1つ目は、フォントの組み合わせです。もしあなたがデザインのために1つ以上のフォントを使っているなら、その選択はコントラストを十分に与える成功への鍵となります。フォントはビジュアル的にお互いが異なった見分けがつく必要があります。1つの書体は見出しやタイトル用、もう1つの書体は本文用かもしれません。これら2つに類似したフォントを選んでしまうと、紛らわしく、間違いの元になります。

フォントを選ぶ時の基本原則は、1つをセリフ、もう1つをサンセリフにすることです。これは補足的な組み合わせですが、よいコントラストをもっています。下記のタイポグラフィをつかったロゴは、スラブフォントと一緒に対になるサンセリフフォントで構成されており、コントラストをフォントに依存したパーフェクトなバランスがとれたデザインになっています。

コントラストをつくる時はタイポグラフィに注意を払う

フォントを組み合わせた際に期待するのはコントラストで、コンフリクト(衝突)ではありません。組み合わせる時に2つの異なるフォントをむやみに選択してしまうと衝突してしまい、良さそうには見えないでしょう。書体が一緒に機能するかは直感に頼るのではなく、しっかりとした規則があります。

下記のインフォグラフィックでは、異なる書体の組み合わせ方のヒントになります。フローチャートを進めるだけで、あなたのデザインの目的にあった書体を選択できるでしょう。

What Species Did You Evolve From?

タイポグラフィのスタイルとウェイトでコントラストをつくる

多くのフォントは、light, bold, italic, condensed, extended のようにいろいろなオプションを持っています。もしあなたがデザインでただ1つのフォントを使っているなら、あなたの作業をより簡単なものにします。まず書体を上記のようにウェイトやスタイルごとに整理し、タイポグラフィの異なる特徴によるコントラストを確認してみましょう。コントラストを特別に与える時には、サイズやカラーを変えてみてください。

下記のデザインは洗練された見栄えをつくるために、同じサンセリフフォントのlightとheavyを使用しています。また特別出演でセリフフォントを使い、さらにコントラストを加えています。