こんにちは、タツキ(@tatsuki_desuyo)です。
今回はブログなどの、WEBサイトをデザインする上で欠かせない「色」についてお話したいと思います。
人間の情報の約55％は、視覚情報に頼っているという「メラビアンの法則」はご存知だと思いますが、それくらい色を含めた視覚情報は重要です。
そこで本記事では、WEBに関わる人なら絶対に抑えておきたい色に関するポイントを、初心者の方でもわかるように説明したいと思います。
◆WEBサイトのデザインに悩んでいる
◆色の重要性について知りたい
こういった方の少しでも参考になれば幸いです。
WEBデザインにおける色の役割
冒頭で、「色を含めた視覚情報は重要である」ということをご紹介しましたが、その理由をもう少し詳しく説明したいと思います。
WEBデザインにおいて色が重要な理由としては、
◆サイトにアクセントが付き読者のストレスを減らせる
◆色によって違ったイメージを与えることができる
主にこの二つの理由が考えられます。
本を読むときのことを思い出してみてください。
同じ大きさで同じ色の文字だけがずらずらと並んだ本は、読みにくいはずです。
逆に、
◆適度に改行されている
◆重要なポイントには下線が引かれている
◆色が変わっている
こういった本は読みやすいと思います。
また、WEBサイト内で色を使い分けることによって、読者の方に様々なイメージを与えることができます。
それぞれの色が与えるイメージについては、次の章で紹介していきます。
WEBデザインで色が与えるイメージ
続いては色が与えるイメージについてご紹介していきます。
赤のイメージ
僕が個人的に好きな色である赤。
赤には以下のようなイメージがあります。
◆情熱・熱気
◆アクティブ・エネルギー
◆警戒色
このサイトでも文中で使っていますが、「より強調したい」、「注意してほしい」こういった際に使用することが多いです。
また、「Coca-Cola」のサイトのようにメインカラーとして使用することで、「アクティブ」、「エネルギー」、「情熱」といったイメージを与えることができます。
青のイメージ
クールで涼しい印象の青。
青には以下のようなイメージがあります。
◆清潔さ・爽快さ
◆クール・落ち着き
こういったポジティブな場面で使われることが多いですが、逆に「不安」を表す色でもあるため、使う際には注意が必要です。
ポカリスエットやアクエリアスなどの清涼飲料は、「清潔さ・爽快さ」を与えるために、青を基本としたカラーを使っていることがほとんどです。
黄色のイメージ
何かと目立つ黄色、でも背景が白だと目立たない。。。
黄色には以下のようなイメージがあります。
◆明るい・元気
◆ポジティブ・ユーモア
うまく使用できればこういったイメージを与えることができる反面、子供っぽさを与えてしまうこともあるので注意が必要です。
うまく黄色を使えば、こんな感じでインパクトのあるサイトを作ることもできます。
緑のイメージ
自然や心地の良さをイメージさせる緑。
緑には以下のようなイメージがあります。
◆ナチュラル・クリーン
◆調和・癒し
自然体で飾らないイメージを与えることができますが、反面、今一つ印象に残りづらいことも。
(https://nic.niccachemical.com/より)
こんな感じで白との相性も良いので、色の配色や割合には十分注意して使用するようにしましょう。
白のイメージ
当サイト、YOKI-LIFEでもメインに使用している白。
白には以下のようなイメージがあります。
◆純粋さ・シンプル
◆公正・正義
また、白をメインに使用することによって、写真などの装飾がとても際立ちます。
(当サイトYOKI-LIFE)
◆サイトをシンプルに作りたい
◆写真を綺麗に見せたい
こういった方には、白を基調としたサイトを作ることをおすすめしています。
黒のイメージ
白とは違ったシンプルさと洗練されたイメージの黒。
黒には以下のようなイメージがあります。
◆洗練・権威
◆プライド・シック
反面、物静けさや暗いイメージを与えることもあります。
こんな感じで、クリエイティブ系のサイトに多いイメージがあります。
基本的には黒を基調とした場合は、白を上手に組み合わせて暗すぎないイメージを与える必要があります。
WEBサイトに合った色を見つけるためには
続いては、WEBサイトに合った色を見つける方法についてご紹介します。
ステップとしては、
①自分が作りたいサイトをイメージする
②参考にするサイトを決める
③似たようなテーマを探す
こんな感じで進めていきます。
自分が作りたいサイトをイメージする
まず始めに、
◆そもそも自分がどんなサイトを作りたいのか
◆誰に向けて情報を発信したいのか
こういったことを考える必要があります。
例えば当ブログは、
| テーマ | 旅や暮らしを彩るWEBメディア |
| 購読層 | 旅行やちょっと良い生活に興味のある20代前半から30代の若者 |
| ペルソナ | 無印良品が好き、シンプルだけど機能性の高いものが好き、独身or共働きで旅行を楽しむ余裕がある |
こういったことを想定してサイトをデザインしています。
◆シンプルだけど良いものを
◆モノ消費よりコト消費を
こういった方向けの情報を発信しているつもりです。
例えばこうった方向けに、可愛らしいイメージのピンクを使ったサイトを作ってみたらどうでしょうか。
おそらく、記事の内容には目を向けずにサイトを閉じると思います。
「何を発信するか」と同じくらい、「誰に発信するか」ということが重要で、それに合ったWEBサイトの配色だったり、デザインが重要になります。
※ブログのコンセプトの決め方に関しては以下の記事で紹介しているので、併せてご覧ください。
ブログを始める際にコンセプトを考えるとけっこううまくいく
参考にするサイトを決める
誰にどのようなことを発信するかを決めたら、次は参考にするサイトを決めましょう。
自分一人で、一からWEBサイトをデザインするのは本当に大変ですし、他にもやることがあります。
他のサイトを参考にする際に役に立つのが、「SANKOU！」というサイト。
色ごとにサイトを紹介しているので、自分のイメージに合わせて参考にするサイトを見つけることができます。
テーマを探す
作りたいサイトのイメージが決まって、参考にするサイトが何となく決まった。
そうしたら、最後にそれを実現するためのテーマを探しましょう。
世の中にはたくさんのWordPressのテーマがありますが、おすすめは僕も使用している「THE THOR」です。
沢山あるおしゃれなテンプレートから、自分のイメージに近いテーマを選ぶことができますし、デザインも簡単でボタン一つでレイアウトの変更などを行えます。
※詳しくは以下の記事で紹介しているので、併せてご覧ください。
【使用者の評判付き】THE THORを使った感想
ブログもWEBデザインを考えよう
以上が、WEBサイトをデザインする際に重要な色に関するお話でした。
簡単にまとめると、
◆色ごとに異なった印象を与えることができる
◆誰に発信するかを考えてデザインする
こういったことが重要であるとご紹介しました。
もう少し詳しく勉強したい人は、「Web Design Standard」という本がとても参考になるので、ぜひご覧になってみてください。
WEBデザイナーとして、基礎的なことを学ぶことができます。
今日はここまでです。
最後までお付き合いいただきありがとうございました！！