ああ！ CRAP設計原則に関するこのインサイダーの秘密を共有しないでください

CRAPデザインの原則を使用することは、効果的なビジュアルデザインを作成するための素晴らしい方法です。

「WHAAAT ?!」 みんな言ったよね？ さて、これまでCRAPのことを聞いたことがないのであれば、これは確かに驚きでした。 多くのコンピューター関連の本を書いた素晴らしいアメリカ人作家のロビン・パトリシア・ウィリアムズは、彼女の著書「The Non-Designer's InDesign Book」で、一連のグラフィックデザインの原則について説明しています。 彼女はそれをCRAPと呼んだ。

（ここで彼女との簡単なインタビューを読むこともできます）。

では、CRAPとは何ですか？ もちろん、私たちが知っているものではありません！

効果的で人目を引くデザインを作成するには、一貫性を保つ必要があります。 一貫性には、常に必要とされる基本と基本の実装が伴います。 これらの基本は、設計者が常に考慮すべき非常に重要な要素です。

グラフィックデザイナーとしてのあなたの仕事は、ウェブサイトを離れることができない方法で視聴者を魅了する何かを生み出すことです。 視聴者はあなたのグリップするグラフィックデザインで彼らの席に接着する必要があります、そしてそのために、CRAPが来ます。

CRAPは、Contrast、Repetition、Alignment、およびProximityを表す頭字語です。

1. 対比

コントラストは、「芸術作品における異なる要素（色、色調、感情など）の並置」と表現されています。 コントラストは、要素を際立たせるものです。 それに入る前に、考慮すべき1つのヒントがあります。 コントラスト機能を何度も使用すると、コントラストを上げるのではなく、単に減らすことになります。 どうして？ コントラストとは、いくつかの要素を目立たせたい場合の意味を意味するからです。 すべてが目立つ場合、何も目立ちません！ がらくたの設計原則の重要な要素として、あなたはそれをうまく使う方法を知らなければなりません。 だから、それに取り掛かろう！

色

色の違いを利用してコントラストを作ることができます。 World Wide Web Consortium（W3C）は、テキストとその背景の間に必要な最小のコントラストに関するガイドラインを作成しました。 テキストと背景に関しては、コントラストを高くすることは必須ですが、さまざまな要素について話す場合、これは当てはまりません。 異なる要素間のコントラストが高いと、ユーザーの目を痛める可能性があります。 デザインのグレースケールバージョンを見て、最適なコントラストが使用されているかどうかを確認できます。

経験則として、目を痛めるような高コントラストを生み出さない補色の色合いを使用することは良い習慣です。

サイズ

特にテキストに関しては、要素のサイズの違いがコントラストの原因となる可能性があります。 要素のサイズを周囲の他の要素よりも大幅に大きく保つと、目を引くようになります。 召喚状（CTA）ボタンは、この大きなサイズにもメリットがあります。 あなたの視聴者は彼らにもっと気づき、彼らはあなたのCROを手伝ってくれます。 また、CRO戦略についてさらにサポートが必要な場合は、このガイドを確認してください。

形

さまざまな形を持つことで、探しているコントラストを生み出すことができます。 インフォグラフィックで使用されている形状のコントラストを効果的に見ることができます。 互いに異なる形状を使用すると、読者の心を引き付けるのに役立ちます。 四辺形に丸い角を追加したり、丸い円形の要素と一緒に正方形の要素を使用したりすることも、形状のコントラストの例です。

フォント

フォントをさまざまなグループに分類できます。 Serif、Sans-serif、script、monospaced、およびdisplayは、基本的なタイプスクリプトの分類です。 異なるフォントグループを使用すると、表示したいテキストのコントラストを作成できます。 また、さまざまなフォントの太さ（太字または通常）、フォントスタイル（斜体、不透明、または通常）、およびフォント装飾（下線、取り消し線など）を使用すると、ゲームを次のレベルに引き上げることができます。

2. 繰り返し

人間として、私たちの心は好みのパターンにプログラムされています。 私たちはどこでもそれらを検索します。 パターンを作成するものは何ですか？ 繰り返し！ また、物事の繰り返しに遭遇したとき、私たちはアイデンティティの感覚を生み出します。 メインテーマが繰り返されない曲を考えてみてください。 あなたは道に迷うでしょう。

まったく同じことが設計でも起こります。 一貫性を保ち、ある種のアイデンティティを与えるために、デザインで色、形、テクスチャ、サイズ、およびその他の属性を繰り返す必要があります。 また、企業はブランド認知度を高めるためにデザインの繰り返しを使用しています。 事前定義された色とフォントのセットを繰り返して、さまざまなプラットフォームとチャネルに一貫性をもたらします。

設計の繰り返しは、設計の4つのCRAP原則のもう1つの重要な原則です。 ユーザーは、迷子になるのではなく、安全であると感じる必要があります。 それはあなたのウェブサイトのUXを最適化するのに役立ちます。

3. アラインメント

配置は、CRAP設計原則のもう1つの重要な要素として、設計内の要素の配置を指定します。 それがデザインにまとまりと秩序感を与えるものです。 要素に関しては、エッジまたは中心に基づいて配置できます。 ただし、テキストは左、右、中央に揃えることも、単に揃えることもできます。 使用するテキスト言語に応じて、LTRまたはRTLである左右の配置が最も人気があります。 短いテキストスパンには中央揃えを使用できます（ただし、長いテキストでは読みにくいです）。 位置揃えは、行の長さが長く、フォントサイズが小さく、単語が短い場合に適しています（長い単語で構成される細い行で使用すると、読みやすさが低下します）。

各デザインには、水平方向の位置合わせガイドとして機能するいくつかの垂直線が必要です。 ページのいたるところに浮かぶテキストは、視聴者を混乱させるだけです。 視聴者は、ページのすべての部分の相互関係を簡単に理解できる必要があります。

4. 近接性

最後になりましたが、近接性はCRAP設計で重要な役割を果たすもう1つの原則です。 設計の近接性は、相互に関連し、相互に密接に関連する要素を配置する必要があることを示しています。 それは理にかなっていますね。 ナビゲーションバーで読んでいる記事に関連するリンクを探したくないですか？ また、要素をページ全体に均等に配置すると、デザインを理解しにくくなります。 視聴者が目的の情報を見つけやすくするために、関連する要素を可能な限りグループ化します。

3秒ルール

「恋に落ちるのにたった3秒かかります。」

したがって、CRAP設計が非の打ちどころがないかどうかを確認するために行うことができる最後のテストは、3秒で有効かどうかを確認することです。 あなたは自分の心をクリアにして目をそらし、そしてそれに戻ってくることによってそれを自分で行うことができます。 また、3秒後に友人や親戚に意見を求めることもできます。 何かが私たちを惹きつけるかどうか、そしてそれをたった3秒で続けたいかどうかを決定します。

関係

これらの原則を単独で使用するべきではありません。 繰り返しと位置合わせが連携して「通常の」状態を提供します。これにより、テキストの形状や位置を変更してコントラストを生成できます。 さらに、繰り返しと近接性が連携して、箇条書きなどの効果的な形式を生成します。箇条書きの繰り返しは、ポイントの近接性を強調します。

結論

オスカー・ワイルドは、彼の最も有名な本「ドリアン・グレイの肖像」の序文で、次のように述べています。「芸術家は美しいものの創造者です。 アートを明らかにし、アーティストを隠すことがアートの目的です。」

最後に、目的は、ドキュメントを作成して消えて見えなくなるようにすることです。これにより、読者や視聴者は、テキスト内で直接、または非常に微妙に、伝達しようとしているアイデアに無制限にアクセスできるようになります。設計コンポーネントの選択。 この点で、デザインの品質についてコメントする（または気付く）人はほとんどいないので、それはありがたい仕事ですが、メッセージに気づき、それに基づいて行動します。 それがすべてではありませんか？