より良いUXのための4つのCRAPデザイン原則

公開: 2022-10-11

優れたユーザー エクスペリエンスは、あらゆる Web サイトやアプリの成功の鍵です。 それを改善したい場合は、CRAP 設計原則の基本を習得する必要があります。 これにより、より直感的で満足のいくユーザー エクスペリエンスを顧客に提供し、今日の競争の激しい市場で成功を収めることができます。

統計よる、オンライン ショッピングを利用するユーザーの 88% は、ユーザー エクスペリエンスが悪い場合、その Web サイトには二度とアクセスしないと答えています。 さらに、ビジネス目的で UX をテストしている企業は 55% にすぎません。 UX は Web サイトへのトラフィックを増やすだけでなく、毎月の収入も増やすことができるため、無駄です。

優れた UX を作成するにはさまざまな要因が関係しますが、最も重要な要因の 1 つは、適切な設計原則を使用することです。 CRAP の設計原則とは何か、そしてそれらを使用して訪問者により良いユーザー エクスペリエンスを提供する方法を見てみましょう。

目次

CRAP 設計原則とは何を意味するのか?

完璧なデザインなどというものはありませんが、デザインをより良くする方法はあります。 たとえば、テキストの品質を向上させるために、 Best Writers Onlineなどのエッセイ レビュー Web サイトにアクセスできます 設計レイアウト自体を改善するには、専門家に相談するか、CRAP 設計原則を使用して問題を解決することもできます。

CRAP は Robin Patricia Williams によって造られた頭字語で、グラフィック デザインの 4 つの原則 (Contrast、Repetition、Alignment、および Proximity) を表しています。 CRAP デザイン原則を利用することで、Web サイト、バナー、ソーシャル メディア広告、ポスター、電子書籍などの魅力的なデザインを一貫して提供できます。

CRAP の設計原則は、Web サイトのユーザビリティを改善するために使用できる一連のガイドラインとして機能します デザイナーは、作成するすべてのデザインでこれらの原則を使用する必要があります。 4 つの CRAP 設計原則のそれぞれを詳しく見てみましょう。

1.コントラスト

良い対悪いコントラスト
コントラスト – 4 つの CRAP 設計原則の最初の原則。 画像ソース: https://www.lrswebsolutions.com/

この原則は、ページ上の要素には、互いに簡単に区別できるように十分なコントラストが必要であると述べています。 使いやすさとアクセシビリティの両方の理由から、これは不可欠です。

コントラストが低いと、ユーザーがテキストを読んだり、リンクをクリックしたりすることが困難になる可能性があり、視覚障害のあるユーザーに問題を引き起こす可能性もあります. Web サイトや製品の要素間に十分なコントラストを確保することで、すべてのユーザーがサイトや製品をナビゲートして使用しやすくなります。

また、色のコントラストだけでなく、さまざまな種類のコントラストがあります。

特定の要素を大きくしたり小さくしたりして、コントラストを作成できます。 他の要素からの距離を広げたり、周囲の空白を調整したり、デザインの残りの部分から目立つように形状を変更したりすることで、デザイン要素を強調することができます。 別のテクスチャを適用するだけでも、視覚的なコントラストを作成できます。

さまざまな種類のコントラスト
さまざまな種類のコントラスト。 画像ソース: www.duarte.com

コントラストとは、ページ上のさまざまな要素が互いに際立つようにすることです。 コントラストを使用して視覚的な関心を高め、重要な情報を強調します。

CRAP の 4 つのデザイン原則の最初の 1 つを習得しながら、明るい色と暗い色、さまざまなテクスチャ、さまざまな形状、交互に近接したフォント、対照的なフォントを組み合わせて試してみてください。

さまざまな要素の間に明確な違いがあり、他の CRAP 設計原則を犠牲にしない限り、正しく行っていることを忘れないでください。

2. 繰り返し

反復設計原理
反復 - 4 つの CRAP 設計原則の 2 番目。 画像ソース: ux360.design

繰り返しとは、デザイン内の特定の要素を意図的に繰り返すことです。 繰り返しは、ページに一体感を生み出すのに役立ちます。 それはすべてを結びつけ、一緒に属しているように見せます。 アイデアを表現するためにすべての単語が論理的に配置されているエッセイを書くことを思い出させるかもしれません。

ライティング タスクはライティング ジャッジの専門家に任せることができますが、将来素晴らしいデザインを作成したい場合は、CRAP デザインの原則をマスターすることを学ぶ必要があります。

デザイン全体で同じ色、フォント、または形状を使用すると、ユーザーが理解しやすいまとまりのある外観を作成するのに役立ちます。 段落が異なるページで同様にレイアウトされていると、関連する情報を検索して見つけるのがはるかに簡単になります。 また、ナビゲーション要素が予測可能で反復的であると、ナビゲーションがはるかに簡単になります。

正しく使用すると、繰り返しは特定の要素を強調し、デザインをより印象的なものにするのにも役立ちます。 たとえば、色、形、ロゴ、キャッチフレーズなどのブランド属性は、媒体が異なっていても、デザイン内で何度も繰り返されることがあります。

個々のデザインのコンテキストで使用できるだけでなく、関連するすべてのデザインを接続することもできます。 これが、すべての CRAP 設計原則の中で、この原則が最も広く使用できる理由です。

3.アライメント

線形設計の原則
アライメント – 4 つの CRAP 設計原則の 3 番目。 画像ソース: www.dribbble.com/MelTaube

配置とは、Web ページ上の要素を整理された方法で配置するプロセスです。 ページ上のテキストの配置から、画像やその他の視覚要素の配置まで、すべてが含まれます。

配置は、要素を中央、右、または左に配置するだけではありません。 また、個別のオブジェクト、テキスト ブロック、およびその他すべてのデザイン要素間の位置合わせも含まれます。 グリッドを使用して、正確な配置と順序を確保できます。

すべての CRAP 設計原則の中で、アライメント設計原則の違反を検出するのがおそらく最も簡単です。 私たちの脳は、わずかな視覚的不一致でも即座に検出します。 ごくわずかな異常に対するこの敏感さにより、設計者は設計内のすべてを適切に調整することに多くの注意を払う必要があります。 一方で、丁寧に並べられたデザインは、秩序と快適さを感じさせます。

適切に配置された Web サイトは、よりプロフェッショナルに見え、ユーザーがほんの数分で簡単にスキャンできるようになります。 その混沌と矛盾は、最も重要な要素から注意をそらすことさえあります.

それどころか、要素が細心の注意を払って配置されている場合、すべてに気付かず、最も重要なこと、つまりメインメッセージに注意が向けられます.

この原則に注意を払うことで、見た目に美しく、実用的なレベルで機能するデザインを作成できます。

4.近接性

近接設計原理
近接 – 4 つの CRAP 設計原則の 4 番目。 画像ソース: www.uxplanet.org

近接の原則では、ユーザーがそれらの関係を簡単に確認できるように、関連する要素は互いに近くにある必要があります。 逆に、関係のないものは距離をとることで区別できます。

この原則を正しく適用すると、ページの乱雑さを軽減し、ユーザーが探しているものを見つけやすくなります。 近接性は、空白、リスト、およびその他のデザイン要素を使用して関連するアイテムをグループ化することで実現できます。

ただし、この設計原則を適用しようとすると、意図しない結果が生じることに注意してください。 近接性は、残りの 3 つの CRAP 設計原則を圧倒する力があるため、CRAP 設計原則の中で特別な位置を占めています。 近接性は私たちの認識に深く根付いているため、色、形、明るさなどの他の視覚的特徴よりもはるかに強い影響を及ぼします。

下の画像で、非常に明確に異なる視覚的特徴を持っているにもかかわらず、グループとして接近しているオブジェクトを知覚することを確認してください.

近接性が他の機能を圧倒する
近接 – 4 つの CRAP 設計原則の 4 番目。 画像ソース: www.uxmisfit.com

デザインに近接感を組み込むことで、さまざまな情報間の関係を効果的に伝えることができます。 デザインを整理して理解するのに役立ちます。

これらの CRAP 設計原則を理解して適用することにより、デザイナーは魅力的な構成を作成できます。

CRAP 設計原則を使用する理由

CRAP デザインの原則は、効果的で目を楽しませる視覚的なデザインを作成する方法についてのガイダンスを提供するため、重要です。

  • コントラストは、視覚的な関心を生み出し、重要な要素を強調するのに役立つため、重要です。
  • 繰り返しは、統一感を生み出し、全体的なメッセージを強化するのに役立ちます。
  • 配置により、要素が論理的かつまとまりのある方法で配置されます。
  • 近接性は、関連する要素をグループ化し、要素間の関係を強調するのに役立ちます。

これらの CRAP デザイン原則を使用することで、デザインが視覚的に魅力的であり、最終的な消費者にとって理解しやすいものであることを確認できます。

AI によって生成されたアテンション分析を使用して、設計段階でコンセプトのパフォーマンスを検証します

7 日間無料でお試しください デモ通話を予約する

CRAP 設計原則を適切に使用する方法

CRAP 設計原則を使用することで、ナビゲートしやすく、よりプロフェッショナルに見える、よりユーザーフレンドリーな Web サイトを作成できます。 これらの原則は、ランディング ページであろうと e コマース サイトであろうと、あらゆる種類の Web ページに適用できます。

効果的なデザインを作成するには、コントラスト、繰り返し、配置、および近接性がすべて重要な要素であることを覚えておいてください。 したがって、Web サイトのデザインのあらゆる面で、CRAP の 4 つのデザイン原則をすべて使用するようにしてください。 それらを使用して Web サイトのより良い UX を作成する方法を見てみましょう。

1.ハイコントラストデザインを作成する

良いCTAボタンと悪いCTAボタンのコントラスト
画像ソース: www.admiral.digital

コントラストの高い色を使用することは、Web サイトを読みやすくする最も簡単な方法の 1 つです。 ほとんどの Web サイトでは、白​​い背景に黒いテキストが標準ですが、他の色の組み合わせを試して、サイトに最適なものを確認することもできます。 ユーザーがテキストを読みやすいように、色間に十分なコントラストがあることを確認してください。

たとえば、行動喚起ボタンを強調したい場合は、Web サイトの背景色とはっきりと対照的な色を使用します。 コントラストを使用することで、ユーザーの目をページの最も重要な要素に向けることができます。これにより、ユーザーがコンテンツをよりよく理解できるようになります。

色を強調する 1 つの方法は、異なる温度色を使用することです。 暖かい温度の赤、オレンジ、または黄色を冷たい青や緑と対比することで、非常に劇的な効果を生み出すことができます. この手法は、下の画像のデザインで使用されています。

色温度コントラストの例 cta ボタン
色温度コントラストの例 cta ボタン ヒートマップ プレビュー

Web デザインとその注目ヒートマップ。 画像ソース: www.dribbble.com/NpaulFlavius

適切なテキスト間隔とサイズのコントラストにより、最小のテキストでも確実に表示され (注目のヒートマップ ビューを参照)、CTA ボタンの色のコントラストが高いため、見逃すことはほとんどありません。 注意ヒートマップのこれらの要素のホットスポットは、人々が最初に見る場所を示しており、それを裏付けています. 鮮やかな黄色は、涼しげな青みがかった背景に際立っており、CTA ボタンだけでなく画像にも注意を向けさせます。

さらに、画像とボタンの黄色のバランスと、両方の色がわずかに寒色側にずれているという事実により、デザインは依然として調和のとれたまとまりのあるものに見えます.

色のコントラストを作成するもう 1 つの方法は、色の彩度を調整することです。 彩度 100% の色は、最も明るく、最も強い状態です。 彩度の高い色と彩度の低い淡い色を組み合わせると、重要な要素に注目を集めることができます。 下の画像のこの Web デザインは、まさにその素晴らしい例を示しています。

彩度コントラスト設計例
バックワイルドウェブデザインのヒートマップ

Web デザインとその注目ヒートマップ。 画像ソース: www.dribbble.com/greenchameleon

森の淡い緑の風景に、非常に鮮やかで飽和した赤みを帯びた見出しを配置し​​ます。 この色のコントラストの例では、二重の効果が発揮されています。 これらの 2 つの色はそれ自体が補色であるという事実が、それらを大きく対比させます。 さらに、赤と落ち着いた緑の彩度を上げて劇的な効果を高めます。

注意ヒートマップでわかるように、赤い文字の上に大きな赤いホットスポットがあります。 これは、見出しが意図したとおりに、非常に多くの視聴者の注目を集めたことを意味します。 彩度を使用した色のコントラストは、特定の要素を完全に強調する役割を果たします。

コントラストを作成する方法は他にもあります。 明るい色と暗い色、さまざまな形状とテクスチャ、方向、タイポグラフィ、スケール、複雑さのレベル、およびその他の機能を使用して、要素間に望ましいコントラストを作成することもできます。

デザインのコントラストに関して安全な側にいることを確認するには、コントラスト比ツールを試すことを検討してください さまざまな色を試して、色の組み合わせのコントラストが推奨されるコントラスト比(少なくとも 4.5:1 ) を下回っていないことを確認してください

データドリブン デザインに興味がある場合は、作成されたコントラストが視聴者の注意に影響を与えるかどうかを再確認できます。 上記のような注意ヒートマップを生成するAI ヒートマップ ツールを使用すると、簡単に数秒でそれを行うことができます。 コントラストを使用してデザインの焦点を作成しようとする場合、注意ヒートマップは、その努力で十分かどうか、またはコントラストをさらに高める必要があるかどうかを明らかにすることができます.

2. ウェブサイト全体で同じ要素を使用する

デザインで特定の要素を繰り返すことで、Web サイトに統一感のあるルック アンド フィールを与えることができます。 たとえば、すべての見出しに同じフォントを使用すると、すべてのデザインがつながっているように感じられ、ユーザーはそのフォントをブランドに関連付けるようになります。

実際のところ、視覚的な階層、リズム、統一などの原則は、繰り返しに大きく依存しています。 同じサイズの要素や類似の構造の一貫した繰り返しがなければ、Web やその他のデザインで視覚的な階層を確立することは非常に困難です。 すべての要素が異なっていて独自のものである場合、視聴者は階層構造に気付くのに苦労します。

要素を繰り返し使用すると、Web サイトの外観に一貫性が生まれ、ユーザーがナビゲートしやすくなります。 フォント、アイコン、ロゴ、画像、色、パターン、ページ レイアウトなどの要素を繰り返すことができます。 やり過ぎないようにすることが重要ですが、控えめに使用することで、サイトのさまざまな要素をすべて結び付けることができます。

いくつかの例を見てみましょう。 以下のインフォグラフィックでは、反復の非常に微妙な使用法を見ることができます。 異なるセクションには、見出しを含む同じリボン グラフィックがあります。 見出しは、同じタイポグラフィとフォントの色を維持します。

業績予測のインフォグラフィック
画像ソース: www.venngage.com

また、インフォグラフィック全体で同じ色が繰り返されています。 その結果、各セクションは非常に異なって見えますが、これらの類似性によってすべてが統一された方法で結び付けられます。 このようにさまざまなレイアウト、形状、サイズが調和して機能しているように見えます。

色の繰り返しだけはどうですか? それはどのように見えるでしょうか? コカ・コーラがどのように定番の赤い色をページ全体に繰り返しているかを見てみましょう。

コカ ・ コーラ ウェブ デザイン アメリカ
Coca-Cola の Web サイトのスクロール セクションの下の部分のスクリーンショット。

赤は、バナー、テキスト、ボタン、およびボトルのラベルに表示されます。 このように同じ主要なブランド カラーを繰り返し使用することで、すべてのデザインにブランドの統一性が生まれます。 このような戦略により、無意識のうちに赤い色とそのブランドをますます関連付けるようになります。

色の繰り返しもより微妙に行うことができます。 説明のために、以下の非営利団体ヒロインズの Web デザインを見てみましょう ウェブサイトの配色として、ブランドと同じフェミニンな色合いのパレットを選びました。

スクロールせずに見えるヒロインのウェブサイトのスクリーンショット
ヒロインの Web サイトのスクロールせずに見える部分のスクリーンショット。

この柔らかな色の一貫性により、ページは強い非対称性やスクロール バナーなどの大胆なデザイン決定を行うことができます。 最終的に、それは注目を集めると同時に、プロフェッショナルな外観で穏やかです.

繰り返しを使用する方法は他にもたくさんあります。 どれがあなたの設計に最も適合するかを実験して見つけてください。また、他の CRAP 設計原則も忘れないでください。

3. ウェブサイトを整理する

ウェブサイトの配置
画像ソース: www.uxengineer.com

Web サイトのすべてが適切に配置されていることを確認すると、整然とした感覚が生まれ、ユーザーはサイトをより快適に閲覧できます。 Web サイトで何かを見つけようとしているときに迷子になったり混乱したりするのが好きな人はいません。そのため、時間をかけてすべてを正しく調整すると、ユーザー エクスペリエンスの面で成果が得られます。

Web サイト内のテキストを適切に配置することで、読者はテキストをすばやくスキャンできるようになり、必要な情報をより迅速に見つけることができます。 一方、不適切な位置合わせは、訪問者にとってこの作業を困難にします。 このアマチュアアライメントの例を見てみましょう。

アマチュアのテキスト配置のウェブページ
アマチュアのテキスト配置を使用した Web ページの例。 画像ソース: www.vanseodesign.com

ページをすばやくスキャンするのはそれほど簡単ではありません。 テキストのブロックが大きい場合、中央揃えは適切な選択ではありません。 テキストの各行は、異なる場所から始まります。 この空間的な不一致により、私たちの目はよりさまよってしまい、各行、段落、またはセクションの開始点を別の場所で見つけようとする脳に、より大きな認知負荷が生じます。

テキストを左揃えにし、すべてのセクションが互いに一列に並ぶようにきちんと整理すると、私たちの脳が行う作業が少なくなります。

テキストが適切に配置されたウェブページ
テキストが適切に配置された Web ページの例。 画像ソース: www.vanseodesign.com

各行の開始位置がより予測しやすくなったため、私たちの目はより短い距離をカバーする必要があります。各行の開始位置は左側に配置されています。 また、私たちの脳ははるかに楽な時間を過ごすことができるため、不要な作業に余分なエネルギーを浪費する必要がなくなります。 これにより、この Web サイトをスキャンして読むことがより快適になります。

同じ原則が細かい部分にも当てはまります。 以下の次の例でそれを証明します。 左側のオプションはひどいものでも悪いものでもありませんが、何かがおかしいと感じます。

証言の一致 - 良い点と悪い点
証言の一致の良い例と悪い例。 画像ソース: www.balsamiq.com

テキストが引用符とハイフンで揃えられているためです。 右のオプションでは、テキストは他の記号ではなく、テキストに揃えられます。 この小さな調整により、視聴者にとって少し読みやすくなり、見栄えも少し良くなります.

すべてを視覚的に整理するこのタスクに役立つツールは、グリッドです。 これらは、配置プロセスを容易にする機能としてデザイン アプリで見つけることができます。 最も人気のあるものの 1 つは、12 列のグリッドです。

WeWork のホームページ
WeWork のグリッド付きホームページ

グリッドのない WeWork のホームページ (左側) と、グリッドがあり、要素とセクションの境界が強調表示されている (右側)。 画像ソース: www.uxdesign.cc

上の例では、WeWork のホームページの 2 つのスクリーンショットを見ることができます。1 つはグリッドのないもので、もう 1 つはオーバーレイされたグリッドと要素とセクションの境界です。

このページは、この 12 列のグリッドを使用して設計されていることがわかります。 すべてが美しく整理され、調和のとれた雰囲気を作り出します。 これは、デザインにおける適切な位置合わせの効果です。

4. 類似したアイテムをグループ化する

アイテムを正しくグループ化すると、ユーザーが探しているものをすばやく簡単に見つけやすくなります。 これは、ユーザーが不満を抱かずに迅速かつ効率的に製品を見つける必要がある e コマース Web サイトにとって特に重要です。

電子商取引における近接原理のサンプル
製品グリッドに近接性を適用する方法の例。 画像ソース: www.uxmisfit.com

上の画像の左側には、サムネイル、タイトル、その他すべてが空白なしで詰め込まれた e コマース ページのワイヤーフレームが表示されています。 どのボタンがどのサムネイルに関連しているかを目で識別するのは困難です。

ただし、右側では、近接原理が正しく適用されると、すべてがより明確になります。 所属する要素を持つ各サムネイルは、空白を使用して他のサムネイルから分離されます。

タイトル、説明、および関連するボタンを含む各サムネイルは、個別のグループとして機能するようになりました。 私たちの脳は、これらのグループの要素が関連していることをはるかに迅速に認識できます。 不必要な精神的摩擦を取り除き、ユーザーエクスペリエンスをよりスムーズにします。

ただし、近接設計の原則の恩恵を受けるのは、e コマース Web サイトだけではありません。 適切に適用された近接原理は、各タイプの設計で価値があります。

類似したアイテムをまとめることは、サイトの混乱を減らし、視覚的に魅力的なものにする優れた方法です。 複雑さを軽減し、より長く複雑な Web ページの処理を容易にすることができます。

たとえば、Web サイトにさまざまな種類のコンテンツがある場合、それらをページ全体にランダムに分散させるのではなく、カテゴリ別にグループ化します。 次の 2 つのワイヤフレーム (下の画像) で、正しく適用された近接原理の例に気付くことができます。

ワイヤーフレームの近接原理
近接原理の使用を示す 2 つの Web ページのワイヤーフレーム。 画像ソース: www.medium.muz.li

これらは、類似したアイテムをグループ化することによって、異なるタイプのコンテンツをページ上に配置する方法について考えられる 2 つのオプションです。 関連するオブジェクトは互いに近くに配置され、個別のセクションを形成します。これらのセクションは空白で区切られます。

目はこのページを簡単にナビゲートできます。 この構造がなく、要素間に空白がない場合、すべての要素が散らばっているとしたら、どんなに混乱するか想像してみてください。 CRAP 設計原則により、このような結果を回避できます。

CRAP 設計原則の要約

CRAP 設計原則は、Web サイトの使いやすさを改善し、全体的なユーザー エクスペリエンスを向上させる優れた方法です。 コントラストの高い色を使用し、サイト全体で特定の要素を繰り返し、すべてを適切に配置し、類似したアイテムをグループ化することで、ユーザーがサイトをブラウジングする際にポジティブなエクスペリエンスを確実に得られるようにすることができます。ロングラン。