京都のNPO法人 CRA(クリエイター育成協会)が発信するブログです。Web業界、Webデザイナー・Webプログラマー・Webマーケターの育成。

お問い合わせ
075-353-3711 受付時間:10:00〜18:00(土日・祝日除く)
menu close

CRAブログ- Web/IT・教育・福祉業界の情報を、スタッフ&インターン生が配信中

シック、爽やか、清涼感!青色のECサイトデザイン

2015年05月28日cra
Pocket

【こちらの記事は、約4分程でお読みいただけます。】

おはようございます!木曜日のテーマはECです。

突然ですが、みなさんは「青」という色を見て、どのようなイメージを連想しますか?

青

海、空、水、雨、爽やか、涼しさ、清潔・・・などあると思います。
青には集中力を高めて、気持ちを落ち着かせる心理効果があります。

最近、ますます暑くなってきて、「気分だけでも爽やかに、涼しくいきたい!」という時期ですね。

なので、今日は「青」を使った、ECデザインを紹介します。

AGATHA E-SHOP

AGATHA E-SHOP

http://www.agatha.jp/

「チープなアクセサリーをシックに変身させること」を目的に作られた、フランス・パリのアクセサリーブランドです。

このサイトで使われる青は、青の中でも落ち着いた色合いのものです。

このブランドは、高級ブランドと巷にあふれる小売り業者チェーンとの間を埋めるべく、創立されました。(ブランドストーリーより)
高級すぎず、安すぎない立ち位置のブランドイメージを、青を使うことで最大限に表現しています。

———-

ヘッダー・フッターにvery dark blue (#0B2345)が使われています。
これは「濃紺」や「藍色」に近い色です。
http://www.color-sample.com/colors/0b2345/

タカミ 化粧品公式通販

タカミ 化粧品公式通販

http://www.takami-labo.com

東京・表参道の美容皮膚科のタカミクリニックと共同開発した、スキンケア商品を販売するECサイトです。

サイト全体で優しい青色と、淡いベージュが色をなしています。

「肌に良いスキンケア商品」というイメージを伝える色づかいです。

随所で使用される青色が、少しずつ色に差をつけて、違う青色が使われているのも要チェックです。

———-

メニュー部分にdark moderate blue(#3b689a)が使われています。
これは「Pervenche」「Bleu Grise」と呼ばれる青と近い色です。
http://www.color-sample.com/colors/3b689a/

sodastream

sodastream

https://www.sodastream.jp/

家庭用炭酸水マシンを生産・販売するメーカーのサイトです。

水を扱うサイトだけに、みずみずしい青がふんだんに使われています。

青の中でも、水をイメージする明るい色の青(水色)です。

使用されている水の画像も、よりみずみずしい色合いになっています。思わず炭酸水が飲みたくなるデザインです。

———-

ヘッダー部分にpure (or mostly pure) blue(#00bcff)が使われています。
これは「Indaco」「露草色」と呼ばれる青色と近い色です。
http://www.color-sample.com/colors/00bcff/

洋服の青山オンラインストア

洋服の青山オンラインストア

http://store.y-aoyama.jp/

スーツ・紳士服を企画・販売する洋服の青山のオンラインストアです。

一見すると、背景色がグレーなので、そちらの印象が強くなりがちですが、背景色以外で目に付く色は、青です。

シックな青から、清涼感あふれる青まで、幅広い青が使用されています。

洋服の「青」山という企業名と合致するサイトデザインです。

———-

随所に light brilliant cyan(#4ed7f5)という色が散りばめられています。
これは「Bleu de Provence」「Bleu Turquoise」と呼ばれる、明るい青と色が近いです。
http://www.color-sample.com/colors/4ed7f5/

FUTURE DAYS

future days

http://futuredays.jp/

ヨーロッパ(特にイギリス)のヴィンテージ古着・雑貨の通販を行うECサイトです。

白背景に映える青が、まるでヴィンテージジーンズのようで、背景と調和しています。

使われている青は、ほぼ一色です。(#00468c )

とことんシンプルさを追求した、美しいデザインです。

———-

このサイトで使われている青はdark blue(#00468c )です。
これは「Blu Armani」「紺青」と呼ばれる落ち着いた青と色が近いです。
http://www.color-sample.com/colors/00468c/

おわりに

今回は、暑い夏にふさわしい、涼しいイメージを持つ、青色 のECデザインを紹介しました。

「青」という一括りの中でも、暗めのシックな青から、明るいみずみずしい青まで、幅広い青がありました。

みなさんは、どの青色のECデザインがお好みでしたか?

参考

http://iro-color.com/episode/about-color/blue.html「青色のイメージ効果と意味」

 

Pocket

CRAが運営する就労移行支援事業所 ワークサポートセンターはこちら