root
1,190 views

サイトのカラースキームを決めるための6つのポイント

ウェブサイトを構築するうえで、文字や背景などに使われる色は、ページ全体のイメージを大きく左右する、重要な要素になります。いくら時間をかけて仕上げても、色の使い方が適切でないと優れたデザインには見えません。ここではカラースキームを設定するうえで、覚えておきたいセオリーをご紹介します。ポイントをしっかり確認して、クライアントをうならせる色使いを目指しましょう!

色を効果的に使うための6つのポイント

1. 色の持っているイメージを意識する

カラースキームを決めるうえで最初に意識したいのは、それぞれの色が持っているイメージです。クライアント業種のイメージと合わない色を提案してしまうと、せっかくのデザインも台無しになってしまいかねません。

例えば、赤は血をイメージさせるとして、医療関係のサイトでは敬遠される傾向にあります。また、青は冷静で信頼できるというイメージがあるため、ビジネスのサイトでは好まれる傾向にあります。もちろん、こうしたイメージに反する色を斬新なものとして提案することも可能ですが、その場合はクライアントを納得させるロジックが必要になるでしょう。

2. 色を使いすぎないこと

あまりにも多くの色を混在させると、ページが締まらず、稚拙な印象を与えてしまいます。また、色が多いとユーザーの視点が定まらず、目立たせるべき要素が効果的に強調できないデメリットもあります。特殊な場合を除き、使用するカラーは、多くても3〜4色程度にとどめておいたほうがいいでしょう。

3. ときには予想外の色を使う

クライアントに新鮮な驚きを与えるためには、予想外の色を使うことも効果的です。例えば文字色をグレーや濃いグリーンにしてみると、それだけで斬新な印象を与えることがあります。もちろんその場合、可読性や色の持つイメージには十分に配慮しましょう。

4. 差し色として、写真を使う

使える色が少なく、ページが平坦な印象になってしまう場合は、写真を使ってみましょう。写真を載せることで、画面上に多くの色を与えることができます。ページの印象を明るくしたり、サイト全体を引き締めたりする差し色として効果的です。

5. 補色をうまく利用する

赤と緑、青と黄色など補色の関係にある色は、お互いを強く引き立てる効果があります(補色関係にある色の組み合わせは諸説あり、ここではおおまかな分類として紹介しています)。

例えば、青の背景に黄色の文字を配置してみるとその効果がよく分かるでしょう。ただ、かなりインパクトが強いため、使い方によっては「気持ち悪い」と感じるユーザーもいます。使用する際には十分に注意しましょう。

6. 文字と背景とのコントラストは適切に

可読性を確保するため、文字と背景の色はある程度コントラストに差をつける必要があります。いくらページのイメージに合っているといっても、オレンジの背景に黄色の文字を配置してしまったのでは、読むことができません。文字の下に写真を配置する場合、可読性を損なわないよう、文字色には特に気を使う必要があります。

隙のないカラースキームで、ページの印象をアップ

いかがだったでしょうか?
実際にウェブページをデザインするうえでは、クライアントのコーポレートカラーなど、様々な制限があります。こうした兼ね合いの中で、もともと設定していたカラースキームを変更しなければならないケースもあるでしょう。今回ご紹介したポイントを確認して、隙のないカラースキームを設定していきましょう

参考サイト:
10 Tips For Choosing The Right Web Design Colors
How To Choose The Right Color Scheme For Your Website

 新規事業・UXデザインのことなら私たちにご相談ください。

私たちは事業戦略に応じたプロダクトデザイン戦略策定からUXデザイン、人間中心設計に基づいたデザイン手法を実行することで事業の立ち上がりから成長までの過程を支援します。サービス開発、UXデザインのことでお困りの方は、rootまで気軽にご相談ください。

root

公式アカウント

root

公式アカウント

「芯を問い、成長に貢献する」をミッションに事業戦略に応じたプロダクトデザイン戦略の立案からUXデザイン、人間中心設計に基づいたデザイン手法を実行することで事業の立ち上がりから成長までの過程を支援します。

SNSをフォローする

人気の記事

問い合わせ

プロジェクトに関するご相談やお見積依頼はこちらからご連絡ください。社内で検討されたい方のために事業紹介をまとめた資料をお送りすることも可能です。

採用情報

rootのカルチャーに興味があり一緒に働きたいとお考えの方はこちらをご覧ください。正社員、パートナー、インターン等雇用形態に限らず受け付けております。