アパレルサイトに役立つカラーリングテクニック

アパレルサイトに役立つカラーリングテクニック

アパレルのWEBサイト制作をするにあたり、デザインは商品購入意欲を変えるとても重要な部分です。デザインは文字やレイアウト、配色などさまざまな要素がありますが、そのなかでもカラーリングの決定はサイトやそのブランドのイメージを左右する非常に重要な要素です。アパレルサイト制作に役立つ配色の知識や、もう図なカラーリングでの成功事例をご紹介します。

サイト制作に必要な基本的なカラーリングとは

WEBサイトをデザインするにあたって、主要なカラーリングは白を除いて3種類用意しておくのがベストです。そしてその3種類は目的によって使用する割合が異なります。

・ベースカラー

もっともサイトのなかで面積を広くするカラーです。割合としては全体の7割ほどをこのベースカラーで占めるのがよいとされており、割合が多いながらもメインではなく、背景や余白などに使用してメインカラーを引き立たせる目的をもっています。

・メインカラー

サイトの印象となるカラーです。割合としては2.5割ほどになりますが、まずこのサイト全体の印象につながるメインカラーを設定し、どうすればメインが引き立つかを考えてベースカラーを選定します。

・アクセントカラー

0.5割ほどの少ないものでありながらも、一番目立つ色となります。ベースカラーとメインカラーの2色だと全体的に印象が単調になってしまうため、このアクセントカラーにて引き締めるようにします。全体のなかで目立つ色となるのが一般的なので、問い合わせや購入ボタンなど重要な部分に使用されることも多いです。

カラーの特徴について考えてみよう

カラーを大きくわけると暖色系と寒色系の2種類となりますが、そのなかでも見た人がもつ印象は細かく異なります。
暖色系はその名前のとおり、レッドやオレンジなどの暖かみを感じるカラーです。暖色系のなかでもレッドは注意を引きやすく、購買意欲を引き立てる色となっており、お菓子などでもよく使用される色です。しかしその反面緊急時に使われる色であることから、サイトから離れやすくなってしまうデメリットもあります。使用するのであれば、アクセントカラーとしてポイントで使いましょう。
イエローやオレンジは活発的な印象で若い人向けのカラーとなります。若い年代に向けてアピールするときに使用しましょう。

寒色系はブルーやグリーンなどがあたり、そのなかでも青は安心感や親しみやすい印象があります。自然やエコ、落ちついているシーンを連想させたい商品がテーマのときに向いています。
レッド、ブルー、イエローは色の3原色なのでどの年代でも認識がしやすい色で、単色であればシンプルな印象となり、反対に混合色であるグリーンやパープル、またホワイトやブラックを使用する、あるいはグラデーションを活用することで、全体的に高級感やプロフェッショナルな印象に仕上がります。

サイトのイメージとカラーの決め方~アパレルブランドに合わせたカラーリング

ここからはアパレルにターゲットを絞って考えてみましょう。

まずは宣伝するべき商品がどのようなターゲットに向けているのか、またアピールしたい印象などからメインカラーを設定し、それに合わせたベースカラーを設定しましょう。
高級ブランドのBURBERRYでは高級感をあたえるようにベースをホワイト、メインはグレー、アクセントはブラックで構成されています。
日本の若者に人気のearth music&ecologyもベースはホワイトとしていますが、アイリスブルー系のさわやかなカラーをヘッダーや商品画像の背景に使用しています。またセール情報に関しては異なるイエローをピンポイントで活用し、差別化できるような工夫も取り入れています。
ホワイトは清潔さや、整頓されている印象もあたえるので、日本のアパレルサイトではホワイトをベースカラーとして設定されているケースが多いです。
国内でも人気の高いYohji Yamamotoの通販サイトでは、ベースはホワイトですが、商品ページによってはグレーやモノクロトーン、アクセントでレッドの中間色を加えることで、大人な印象をだしています。

写真を多用するアパレルサイトの特徴とカラーリング

アパレルサイトでは商品の写真画像も活用することが多くなりますが、その写真を載せる前提でカラーを選ぶことも重要です。写真に合わせる場合、同じような色を使って印象をそろえるケースもあれば、写真をしっかりと引き立たせるためにベースやメインを別の色を使用することもあります。

ひとつの商品を宣伝するというサイトであれば、その商品のカラーを考えてつくることができますが、複数ある商品を載せるECサイトであれば、写真を撮影する際に同じ系統で撮影することも重要です。しかしサイト設計の時点でどのような画像を掲載するのかが決まっていないケースや、場合によってはサイト完成後に撮影をするケースもあるでしょう。どのような計画や進行状況になっているのかも確認してカラーを設定しなければいけません。
またターゲットが異なる複数のブランドはそれぞれ別のサイトとして設計するのが好ましいですが、ひとつのサイトにまとめるのであれば、ブランドのページごとにカラーを変化させるなど、バナーやボタンを変化させてカラーをわけるという手法もあります。

まとめ

ウェブサイトにおけるカラーリングはアパレルなどのブランド力を大切にする業界では大変重要な要素といえます。WEB制作では重要なテクニックポイントのひとつですが、意外と細かいところまでは気がまわらないものです。ボタンやヘッダーのカラーなどを変えるだけでも大きく印象は異なります。基本的なカラーリングごとの印象を踏まえて掲載する画像もどのような写真となるかも考えて、サイト設計の段階から検討して設定しましょう。

デザインカテゴリの最新記事