完璧なカラーパレットとフォントの組み合わせを選択する方法

ウェブサイトへの影響は、ブランドとその企業文化の視覚的表現にかかっています。 構成とは別に、色とフォントの組み合わせは、サイトや製品、サービスに対するユーザーの印象に無意識のうちに影響を与えます。 Web サイトのデザインでは、視覚的な階層構造により、フォント サイズ、太さ、スタイル、色を利用して特定の要素に注目を集めることで、特定の部分の重要性が強調されます。 最終的にはユーザー エクスペリエンスとエンゲージメントに影響を与えます。 目的は、色とフォントの組み合わせの適切なバランスを取得することです。

ブランドを代表する

あなたのブランドは何ですか? それは何を表しているのでしょうか？ その個性とは何でしょうか？ ターゲットとする視聴者は誰ですか? あなたの製品やサービスを購入するのはどのような人ですか? 主要な設計原則は、これらの質問の答えに役立つはずです。

ミニマリスト、マキシマリスト、それとも「ちょうどいい」?

会社のロゴといくつかのテキストのみを含む非常にクリーンでミニマルなインターフェイスが一般的で、洗練された雰囲気を醸し出すすっきりとした外観を与えます。 Apple は、数多くの書体やレイアウトを実験し、これを最もよく行っています。

通常、非常にシンプルな配色には、グレー、白、およびネガティブスペースの広い領域が混合されます。 しかし、多くのものを販売する場合は、画面の領域を最大化する方が効果的です。eBay や Amazon.com はその良い例です。 ウェブサイトのカラーパレットはシンプルですが、主要な色は製品から来ています。

季節性

冬は青と白、春は黄と緑、夏は赤と緑、秋はオレンジ、黄、赤の色合いは、ファッションやデザイナーアイテムなどの季節商品には適していますが、非季節商品には適さない場合があります。 。

ムードボード

すべてのキャンペーンやウェブサイトのプランのムードボードを使用すると、目指すスタイルやコンセプトを即座に視覚化できます。 要素を対話的に選択および変更して、アイデアや色、フォントの組み合わせをすばやくテストできます。

読書サイト

新聞などの閲覧サイト、執筆サイト、ブログなどは非常にテキストが多く含まれます。 ほとんどのブラウザは「zen-mode」読み取りモードを提供しているため、これも考慮してください。フォントを 2 ～ 3 つだけ選択するか、単一のフォント ファミリを選択してください。 画像やデザイン要素を組み込んで、テキストの長いセクションを分割します。

完璧なカラーパレットの選択

色は美しさやスタイルだけではなく、見る人の感情的な反応も呼び起こします。 色の象徴性は文化を超えて普遍的なものであることを忘れないでください。 色は考慮に値するデザイン要素の 1 つにすぎず、Web サイトには魅力的なカラー パレットがたくさんあります。

これらの色の原則は、Web サイトのデザインに加えて、顧客が独自の T シャツを作成する場合など、製品のカスタマイズにも適用できます。 さまざまな色から選択できるようにすることで、パーソナライズのエクスペリエンスが向上し、個人のスタイルの好みに合わせられます。

配色（カラーパレットの組み合わせ）

カラースキームは、1 つまたは複数のカラー パレットからいくつかの色を組み合わせて、特定のスタイル、雰囲気、または視覚的なメッセージを伝える何らかのデザイン目標を満たします。 いくつかの例を次に示します。

• 単色の配色 (単色) – 色相、色合い、色調、色合いを変化させます。 白、グレー、黒などのニュートラルはパレットの幅を広げ、平坦に見えるのを避けるために明るい色合いと暗い色合いを提供します。
• ニュートラルな配色 (無彩色の白、グレー、黒の色合いと、ベージュ、黄褐色、オフホワイトなどのほぼニュートラルの組み合わせ)。 彩度の低い色はニュートラルな美学を伝え、クラシックにもなり、派手な色とよく合います。
• 補色スキーム (カラーホイールの反対側) – 一般的なものは、青とオレンジ、赤と緑、黄色と紫です。
• 類似カラー スキーム (カラー ホイール内で隣り合う 3 つの色のグループ) – 日の出や日没のテーマを伝える赤、ピンク、オレンジの色合いのように、ベースの色相と隣接する 2 つの色相がよく調和します。
• 三極配色 (カラーホイール上で互いに等距離に位置する 3 つの色) – 例としては、青、赤、黄色を 1 つのセットとし、紫、緑、オレンジを別のセットとします。 色の衝突を避けるために、必ず色相を利用し、彩度を下げてください。

カラー パレットを作成するためのオンライン ツールはいくつかありますが、Coolors は人気のある無料サイトの 1 つです。 カラー パレットを迅速かつ正確に生成するのに役立ちます。

出典: Coolors.co、2023

色覚異常に配慮したデザイン

世界中で約 3 億人が何らかの色覚異常 (ほとんどが赤緑色) を抱えています。 これは、Web サイトの要素の一部またはほとんどを表示できない可能性がある非常に大きな潜在的な顧客ベースです。 赤緑色覚異常の主な形態は次の 4 つです。

• 色覚異常: 赤の色合いは知覚できず、黒として認識されます。 色は青または金の色合いとして見えます。 ダークブラウンは、赤、オレンジ、緑などの他の色の暗い色合いと混同されます。
• 第二盲: 緑は知覚できません。 ブルーとゴールドがよく見られます。 赤と緑の色合いは交換可能に認識されます。 黄色と明るい緑の色合いは同じように見えます。
• 原色異常: 赤が濃い灰色に見えます。 すべての赤は明るさが低くなります。
• 第二色: 主に青、黄色、および一般的に落ち着いた色が見られます。

他のタイプには、青黄色覚異常などが含まれます。 幸いなことに、いくつかのオンライン ツールは、安全なテーマを設計し、カラー パレットを調整するのに役立ちます。

Adobe Color のアクセシビリティツールを使用すると、スライダーをドラッグして正しい色の値を取得できます。 テーマを Web サイトにドラッグ アンド ドロップして、現在のパレット スキームを確認することもできます。

フォントペアリングテクニック

多くのオンライン グラフィック デザイン学位プログラムで教えられているように、タイポグラフィの 4 つの基本原則は、コントラスト、スペース、階層、サイズです。 主な目標は、デザインの読みやすさとスタイルのバランスをとることです。 フォントの組み合わせに関する重要なアイデアをいくつか紹介しますので、試してみてください。

• ライト、通常、ボールドのフォントウェイト (同じフォント) を試してみます。
• さまざまなフォント ファミリと書体を組み合わせます。
• 単語、語句、文にカーニングや個々の文字の間隔を組み込みます。
• 本文の最初の文字が大きく、多くの場合様式化されており、あらゆるデザインに対応できるドロップ キャップを使用します。 古い本などで使われている古典的な手法です。
• フォントの美しさは、全体のデザインとバランスをとる必要があります。
• 興奮や新しさを伝えるために、一部のフォント領域を奇抜にしたり、奇抜に見せたりしますが、シンプルさが必要な場合はシンプルにしてください。
• CJK フォント (中国語、日本語、韓国語のスクリプト) を組み込んでセンスを加えます。 翻訳の微妙なニュアンスについてはネイティブ スピーカーに相談してください。
• プライマリ書体に必要なスタイルやインパクトがない場合は、セカンダリ書体を使用します。

いくつかの例を次に示します。

• アブリル・ファットフェイスとポピンズ
• アレグレヤ (太字と普通)
• バーロー・コンデンスとモントセラト
• 鵜のガラモンドとプロザ・リブレ
• DM Serif ディスプレイと DM Sans
• 『エピローグと誰でも』エトセトラタイプカンパニー著

• IBM Plex Sans Condensed および IBM Plex Sans
• カルラとインコンソラータ
• カーラとメリウェザー
• リブレ・バスカヴィル (太字と普通)
• リブレ・バスカヴィルとソース・サンズ・プロ
• ロブスター 2 匹とカウシャン文字、Impallari Type 著
• モンセラートとハインド
• ヌニートとPTサンズ
• Nunito Sans (太字と普通)
• オズワルドとソース・サンズ・プロ

• オズワルドとソースセリフプロ
• プレイフェアのディスプレイとLato
• Playfair ディスプレイと Source Sans Pro
• クアトロチェントとローラ
• クアトロチェントとクアトロチェント・サンズ
• 流砂 (太字と通常)
• Roboto Condensed と Roboto
• スティント ウルトラ エクスパンデッドとポンターノ サンズ
• ウルトラとPTセリフ
• ワーク・サンズとメリウェザー
• イェエバ・ワンとジョセフィン・サンズ

フォントをペアリングするためのツール

1. Google Fonts は、フォントの組み合わせを選択するための一般的なアイデアについては必見のサイトです。 すべてのフォントはオープンソースであり、無料で使用できます。
2. FontPair を使用すると、インタラクティブなフォントのペアと、無料で使用できる Googe フォントのフォントを確認できます。

フォントを開発する

自分でフォントを作ってみませんか? Apple は Helvetica Neue から San Francisco という社内で作成したフォントに変更しましたが、これはうまくいきました。 無料のオンライン ツールはオープンソースの Birdfont です。フォントを作成してテストしてください。

色もフォントも不要！

上記のテクニックは、メッセージと UX に次ぐものです。 設計はフィードバックに依存し、反復的です。ユーザーと顧客の少数のサンプルに対して A/B テストを行うため、いくつかの設計変更が予想されます。 想像力を働かせて方法を作りましょう！