【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

ECサイト構築クラウド型プラットフォーム

【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

モバイルファーストマーケティングラボ

5分で学べる配色デザインの基礎! web制作者が色彩を操るためのコツ

5分で学べる配色デザインの基礎! web制作者が色彩を操るためのコツ

web制作全般に活かせる色彩の基礎

今回はWeb制作をするさいに活かせる色彩の基礎的な知識をご紹介します。

はじめに

サイトを作成される際、配色に悩まれている方は多いと思います。その内の多くが「考えてみたもののいい配色が思いつかないので、色を選ぶセンスが足りないのではないかと思っている」というものではないでしょうか。かく言う私も、こういったセンスに関してはあまり自信がありません。

(私が最初に作ったサイトは、同僚に「歯茎に生肉を挿したみたいな色」と言われてしまいました)

しかし多くのECサイトで、色はセンスのみで選ばれている訳ではありません。良いサイトほど、1つ1つの色に確固たる理由があって配置されています。

逆に言うと、デザインにおける配色は生まれ持っての才能が必要なものではないと言う事です。この記事では「スキルとしての配色」の基礎の部分を書いていきます。

テーマを決める

ⅰ)何を売るサイトなのか

最初に定義するのがこの部分だと思います。
今回は、チョコレートを売る事を想定します。

ⅱ)色の持つ抽象的な印象例

  • :果敢 情熱的 興奮
  • :楽観的 注意 派手
  • :親しみ 陽気 温かい
  • :賢さ 高貴さ 大人っぽさ
  • :信用 信頼
  • :平穏 若さと成長

等々です。
チョコレートを売るイメージに必要なものをざっと考えてみましょう。

  • のんびり食べたい
  • 甘い
  • チョコレート(商品)そのものの色

等々、橙色と茶色の中間くらいでしょうか。少しずつメインの色が見えてきました。

2.色彩の基礎

ⅰ)基礎の基礎

色には3つの要素があります。

  • Ⅰ 色相→:「色み」そのものです。
  • Ⅱ 明度→:色みの「明るさ」です。
  • Ⅲ 彩度→:色みの「鮮やかさ」です。

全体の色相を変える事で「寒暖」「進出・後退」を
明度を上下する事で「膨張・収縮」「軟硬」「軽重」を
彩度を上下げする事で「派手・地味」を表現できます。

(チョコレートは派手すぎるイメージではないので、彩度は低めにする方が良いかな・・・)の様に考えて行く事ができます。

ⅱ)使用色の割合

使用する色は、大きく分けて3種類に分け、以下の様な割合にするのがスタンダードな考え方です。

  • ベースカラー:70% 背景などになる色です。
  • アソートカラー:25% メインの色です。
  • アクセントカラー:5% アクセントを出す色です。

配色を図にすると(これをそのまま”配色図”と言います)以下の様になります。
配色図

ここで素敵な例を見てみましょう。
例)大地を守る会
月額会員制の野菜宅配サイトです。

大地を守る会top

配色図は以下の通り。
大地を守る会の配色図

ベースカラーを白、アソートカラーを深い緑、アクセントカラーをオレンジにしています。野菜そのものの色をうまく使っていますね。
配色における分割

アソートカラーが二種類になっているのは「分割」という方法です。同系色を使って、色のバリエーションを増やしています。
(余談ですがこのサイト、2011年時点で180万PV。す、すごい・・・!)
こういった色はどのように選んでいるのでしょうか。

3.色の選び方

まずアソートカラーを、1のⅱのようにテーマに沿って選びます。たたき台のようなものなので、思い切って選んでしまいましょう。コツは、見やすくするために明度の低い色を選ぶ事です。

今回は「洋色大辞典」を使ってそのまま「チョコレート」色を選びました。
チョコレート色の配色図

次にベースカラー。アソートカラーの明度を上げて彩度を少し落としたものを使うと、楽にまとまりのある配色になります。もしくは、白。
チョコレート色の配色図2

そしてアクセントカラー。色の考え方の図で「色相環」というものがあるのですが、

色相環
↑色相環 (情報科学・システム工学 教育向け フリー素材集 より)
配色図の完成例
そういったものを参考に、アソートカラーの逆に位置するものを選ぶと良いアクセントになります。
ひとまずはこのような配色図になりました。そして出来たのはこのテストサイト。

配色製菓TOP
配色製菓の配色図

ベースに黒を加えて、アソートカラーとアクセントカラーを分割しました。普通に作るとサイケなデザインになってしまう私のセンスでも、理論立てて作る事でそれなりに見られる配色になりました。

おわりに

今回書いたのは、あくまでも基礎の基礎です。配置したボタン一つでさえ、色を変える事でコンバージョン率が上がるケースも多いようです。

配色は「どこに大事な情報があり、どこがボタンになっているのか」をコンマ数秒でも早く認知してもらうためにできる事のひとつです。

これを機に、サイトの配色について気になった方は、以下のサイトも参考にしてみてはいかがでしょうか。

「COLOR NOTE 配色のコツ」
「【検証】クリックされるボタンの色は?」
「Color Hexa(英語)」(アソートカラーを入れると自動で配色を考えてくれるサイトです)

ここまで読んでいただき、ありがとうございました。

この記事がほんの少しでも、皆様の制作やディレクションの一助になれば幸いです。

井上

”スマホで売れる”ためには必須の「レスポンシブECサイト」とは?

CTA-IMAGE 2019年、ECサイトの利用者は今やスマ―トフォンからが7割を超え、市場のニーズは完全にPCからスマホに転換しました。
また、検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。 そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No.1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。

・レスポンシブECサイトがなぜ今選ばれるのか
・これまでのECサイトの課題とは何なのか
・どのようにすれば解決できるのか

といったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。
ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。
機能のご確認はお気軽にお問合せ、もしくは2週間無料お試し利用で。
aishipRの無料体験、お問合わせはお気軽に。説明会・資料請求も受付中。
0120-173-163
0120-173-163
無料体験
  • 無料体験
  • 問合せ
  • 説明会
  • 資料請求
  • 問合せ
  • 説明会
  • 資料請求
+