ホームページで利用されている「色の種類」は３種類あり、それぞれの色の「使用面積の比率」によって分けられています。

ベースカラー

全体の色の約７０％を占める色で「ホームぺージ」の中で１番面積が広く、背景など「全体のベースとなる色」になります。利用面積が広いため「ホームページ全体の印象」への影響が大きいことが特徴です。

メインカラー

全体の約２５％を占める「ホームページの基準となる色」で、「ホームページのテーマを表す色」になります。お店であればお店の「メインカラー」を設定することで実際のお店との「色の統一感」を出すことができます。

アクセントカラー

全体の５％を占める「アクセントとなる色」で、「注意を惹けるような色」を選択します。「ベースカラー」や「メインカラー」と異なる彩度の色を選択します。

この３色を「ホームページの基本色」として選び、さらに「メイン色を分割する」こともあります。

そのため「ホームページ」の色数はイラストや写真・画像の色などを除くと「３～４色」で構成されることになります。

それでは、「色ごとに与える印象」の「ポジティブ」な部分についてお話をしていきます。

赤（レッド）

「赤色」は、

• やる気
• 元気
• 楽しさ
• 若さ
• 情熱
• 食欲

などの印象があります。

「ドリンク・フード・スポーツ」のホームページなどでの利用が考えられます。

黄（イエロー）

「黄色」は、彩度が高い色で

• 活発
• 楽しさ
• 幸福・裕福
• 知性・知的
• 積極的・ポジティブ
• 子供
• さわやか

などの印象があり、「子供・運動・ドリンク」などのホームページでの利用が考えられます。

青（ブルー）

「青色」は、

• 落ち着き
• 誠実
• 冷感
• 知性・知的

などの印象を与えることができます。

「コーポレート・ビジネス」などのホームページでの利用が考えられます。

緑（グリーン）

「緑色」は、

• 安心
• 自然
• 穏やか
• リラックス

のような印象があります。「健康関連・ドリンク」などのホームページでの利用が考えられます。

橙（オレンジ）

「橙（オレンジ）」の色は、

• 元気
• 親しさ
• 陽気
• 明るい

のような印象があります。「食品・子供」関連などのホームページでの利用が考えられます。

紫（パープル）

「紫色」は、

• 高価
• 上品
• 神秘
• 優美

のような印象があります。「宇宙・ファッション」関連などのホームページでの利用が考えられます。

桃色（ピンク）

「ピンク色」は、

• 美
• 若さ
• 可愛さ
• 女性的
• 愛情

のような印象があります。「女性向けファッション・アート」関連などのホームページでの利用が考えられます。

茶色（ブラウン）

「茶色」は、

• 自然
• 大人
• 落ち着き
• レトロ・懐古・伝統

のような印象があります。「男性向けファッション・家具」関連などのホームページでの利用が考えられます。

黒色（ブラック）

「黒色」は、

• 強さ
• 高級
• 威厳
• 主張

のような印象があります。「ブランド・機械」などのホームページでの利用が考えられます。

灰色（グレー）

「灰色」は、

• 穏やか
• 実用性
• 安定

のような印象があります。「調和性」が高い色のため、ホームページのさまざまな箇所でよく利用されています。

白色（ホワイト）

「白色」は、

• 清潔
• 無
• 純粋
• 信頼

のような印象があります。さまざまなホームページの「ベースカラー」としてよく利用されています。

ホームページの「配色」にはさまざまなパターンがあります。

いくつかのパターンと共に「ホームページが与える印象」についてご説明していきたいと思います。

パターン１

ベースカラー

白：#ffffff

メインカラー

ダークブルー：#00008b

アクセントカラー

ゴールド：#ffd700

「落ち着き・知性」をイメージする「青色」をメインカラーに使い、「活発・さわやかさ」を表す「黄色」をアクセントカラーに利用しています。

「清涼飲料水・ビジネス」などのホームページでの利用が考えられます。

パターン２

ベースカラー

白：#ffffff

メインカラー

ブラウン：#603813

アクセントカラー

ライトグリーン：#79cc81

「レトロ・自然」をイメージする「茶色」をメインカラーに使い、「安心・穏やか」を表す「緑色」をアクセントカラーに利用しています。

「伝統工芸・木工関連」などのホームページでの利用が考えられます。

パターン３

ベースカラー

白：#ffffff

メインカラー

オレンジ：#ff8c00

アクセントカラー

ダークブルー：#00008b

「明るさ・元気」をイメージする「オレンジ色」をメインカラーに使い、「自然・穏やか」を表す「青色」をアクセントカラーに利用しています。

「スポーツ・フルーツ、スイーツ」などのホームページでの利用が考えられます。

パターン４

ベースカラー

白：#ffffff

メインカラー

ピンク：#db37ed

アクセントカラー

グリーン：#79cc81

「可愛さ・女性的」をイメージする「ピンク色」をメインカラーに使い、「安心・リラックス」を表す「緑色」をアクセントカラーに利用しています。

「女性向けファッション」などのホームページでの利用が考えられます。

パターン５

ベースカラー

白：#ffffff

メインカラー

パープル：#800080

アクセントカラー

グリーン：#1ed823

「高価・上品・優美」をイメージする「紫色」をメインカラーに使い、「安心・穏やか」を表す「緑色」をアクセントカラーに利用しています。

「ブランド・高級ファッション」などのホームページでの利用が考えられます。

パターン６

ベースカラー

白：#ffffff

メインカラー

グリーン：#0bb492

アクセントカラー

オレンジ：#ff8c00

「自然・リラックス」をイメージする「緑色」をメインカラーに使い、「元気・陽気」を表す「オレンジ」をアクセントカラーに利用しています。

「健康食品」などのホームページでの利用が考えられます。

コンテンツ一覧