MENU

伝わらない、問い合わせがない。中小企業のためのWebブランディングの考え方

Webデザインで「色やレイアウト」をどう考えるか　― なんとなく選んでいるようで、実はそうでもない話

ホームページの制作で、「色やデザイン」の話をすると…、
依頼主からは、「僕はセンスがないから」と自虐を聞かされ、
逆に、「好きなのはこうなんだよね」と熱く語られることのどちらかです。

ですが結局、イメージなどの具体的な話は、何もないまま丸投げされます。
それでも、最後はなんとかまとめきる。
デザインの仕事は、これの繰り返しです。

実際のところ、私たちには、パターンや型はなく、
これに当てはめれば、絶対に失敗しないというものはありません。
でも、あとから振り返るとちゃんと理由があることが多いと思います。

このページでは、デザインイメージについて話すのは難しいので、
Webデザインの「色」について、テクニックではなく、
こう考えるといいかな？の部分を整理してみます。

目次

色やレイアウトは「キレイに見せる」ためだけではない話

基本的にホームページは、
相手が「見てくれること」を前提に作るものではありません。

多くの人は、流し見をしたり、
途中で他のことをしたり、興味のない部分は飛ばしたりしながら、
「読むか」「次に進むか」「もう閉じるか」を決めています。

そのときの「色」の役割は、無意識の状態であっても

ここは読まなくてよさそう
ここは重要そう
次はここを見るのかな

といった判断を助けています。
つまり目線を誘導しているんです。

Webで色やレイアウトで、自然とやっている3つのこと

「色」を考える時、意識してできなければいけないことがあると思います。

視認性～多様な環境でも「見えるか」

文字が小さすぎないか
背景と文字のコントラストが弱くないか
スマホ（小さな画面）でも問題なく読めるか

色のこと以前に、見えてなければ、意味はないのです。
また、環境変化による炎天下など、
多様な環境でも読めるか？も、重要になってきたと思います。

可読性～読み続けられるか

一応は読めるけれど、読みにくい、疲れるということは多いです。
文字の量、行間、強調の仕方、色のコントラストは意識してますか？

「見える」と「読める」と「読み続けられる」は、別ものです。

ホームページの作り手は、若い人が多い。
→でも読む人は、シニア60代、70代もいます。年齢差、意識してますか？

視線誘導｜次にどこを見るか

大切な情報（ここ見てほしい）に自然と目が行くか
次にどこを見るか（見せるか）、直感的にわかるか
ボタン・リンクが、単なるバナーになってないか
※押してほしいのに、「押せる気がしない」になってないか？

色は、視線の流れをつくる目印としての役割もあります。
また、作り手側が、意図的に仕掛けるものでもあります。

なぜ「配色パターンのマネ」ではうまくいかないのか

「このサイトの色がきれいだから」
「SNSで見た配色がおしゃれだったから」

そう思って色を決めたくなる気持ちは、とてもよくわかります。

ですが、ホームページでは、それが失敗に終わることが多いと思います。
それは、その色が「その会社や商品」を表していないという違和感だと思います。
理由はこの3つです。

「その会社らしさ」「その商品らしさ」という目線がない
「売れる」「問い合わせをもらう」などの「目的（ゴール）」が設定できていない
どこを見ても「この会社だ、商品だ」と伝わる一貫性がないから

私たち制作サイドは、この「ゴール（目的）」を依頼主と共有し、色でも表すことが大切です。
→「なんだか信頼できそう」という、もやっとした感覚は、そうした全体設計から生まれます。

この「なんだか、うちらしくない」という違和感は、些細なことに思えますが、
実はホームページが公開されている間、ず～っと残り続けます。

クライアントは、「自分たちらしくない」「色が変、気持ち悪い、違和感がある」としか表現できません。
でも結局、納得できないまま諦めてしまいます。

そんな「気の毒なホームページ」を増やしたくないですよね？

まとめ：高級感のある色は、ブランディングには欠かせない

高級感のある色は、単に「華やかに見せる」ためのものではなく、
その会社がお客様に対して感じている「感謝」や「誠実さ」を表すから良いのです。
見る人は、この色を見た時に無意識に何かを感じ取ります。

落ち着いていて、品がある、ウソがなさそうに見える
細部まで「きちんとしている」と感じる
安っぽさにがなく、不安を感じさせない

こうした信頼できそう、整然としている印象で、お客様は「ここは、大丈夫だ」と感じます。
「高級感のある色」を選ぶということは、「仕事に対する姿勢」を、視覚で伝えるということです。

たとえば、「うちは安さが勝負だから、高級感は関係ない」と思う方もいるかもしれませんが、
たとえ手頃な価格の商品であっても、「いい商品である」という安心感は不可欠です。

ファストフード、早い・安い・うまいご飯、ファストファッションだって、
しっかりした印象がなければ買いませんよね？

ホームページは、その会社であり、お店でもあります。
色は、お客様を迎える「入り口や玄関」です。
ここの印象が悪かったら、その後の商売（事業）は、どうなるのか…
考えるだけでも心配になります。

もう少し詳しく知りたい方へ

このページでは、色についての考え方を書きましたが、詳細な内容は、各記事で書いています。
どの記事も「色やレイアウトの話」ですが、本質は 伝わり方の話 です。

「高級感のある色」の組み合わせ（配色・カラーコード）

高級感を表現しやすい色の組み合わせを紹介します。
季節の行事の色も作っていますので、ぜひお仕事にご活用ください。

【色の基本配色】RGB カラーコード・カラーチャート（Web用カラー）

Webブランディングを考えるうえで、「色の仕組み」を知ることは大切です。
私たちは、文字を読む前に、無意識のうちに色から印象を受け取っています。

イメージに合った色を感覚で選ぶのではなく、
「Webではどう表示されるのか」を知っておくと、
色選びの迷いは少なくなります。

このページは、RGBカラーコードやカラーチャートなど、
Webで使われる色の基本配色を整理しています。