売れるホームページで効果的なデザインのポイントとは?【重要】 | 千葉で集客ホームページ制作はティーエスフォート
コラム

売れるホームページで効果的なデザインのポイントとは?【重要】

売れるホームページで効果的なデザインのポイントとは?【重要】

企業のWebサイトにおいて、見やすくて効果的なデザインは欠かせません。

「Webサイトのデザインが物足りないような気がする」「効果的なデザインのコツを知りたい」という方もいることでしょう。ホームページではユーザーへの印象や競合との差別化など、売れるデザインの重要性が叫ばれることも増えてきました。

ですが「売れるホームページとは何か」を理解することは、簡単ではないかもしれません。今回は「Webサイトのデザインについて知りたい」または「デザインを活かして売れるホームページを作りたい」という方に向けて、ホームページのデザインのポイントを紹介しましょう。

売れるホームページのデザインとは?

おしゃれなデザインが売れるホームページのデザインとは限りません。ただしデザインそのものがコンバージョンを左右する要素となっているので、ここでは売れるデザインの考え方についてポイントをシェアしたいと思います。リニューアルによってホームページのイメージを新しくしたり導線を改善したいと考えている方は、ぜひご参考にしてみてください。
  • カラーコンセプト
  • イメージ画像、商品画像
  • 動線と操作性

カラーコンセプト

ホームページのイメージを新しくするためにメインの画像を入れ替えたり、トレンドやコンセプトに合わせてベースカラーを入れ替えることがあります。ただしデザインの方向性を判断しなければならないときに、デザインの良い、悪いの基準が分からなくなってしまうことがあります。

その場合にはコンセプトに沿ったベースカラーやアクセントカラーを選んでいきますが、カラーで安心感や信頼感、重厚感などを出したり、色の与えるイメージから伝えたいことに近づけることができます。アクションをしてもらう箇所に使うカラーにも気を遣います。

業種、商品、ターゲットによって色の与えるイメージをどう活かすのかは売れる仕組みを作るためのコンセプトと言い換えることができるので、色の与える基本的なイメージは押さえておきましょう。

赤色の与えるイメージ


赤色の与えるイメージは活動的、情熱的、自信、活気などです。ネガティブなイメージは怒り、争い、攻撃的などです。

青色の与えるイメージ


青色の与えるイメージは信頼、誠実、冷静、知的などです。ネガティブなイメージは寂しさ、悲しみ、不安などです。

緑色の与えるイメージ


緑色の与えるイメージは自然、健康、安全、リラックス、調和などです。ネガティブなイメージは保守的、未熟などです。

黄色の与えるイメージ


黄色の与えるイメージは楽しい、幸福、希望、太陽の光などです。ネガティブなイメージは子供っぽい、軽率などです。

橙色の与えるイメージ


橙色の与えるイメージは親しみ、幸福、元気、明るい、ポジティブなどです。ネガティブなイメージはわがまま、八方美人などです。

白色の与えるイメージ


白色の与えるイメージは真面目、信頼、堅実、清潔、純粋などです。ネガティブなイメージは味気ない、冷淡などです。

黒色の与えるイメージ


黒色の与えるイメージは高級、洗練、落ち着き、信頼、重圧などです。ネガティブなイメージは暗い、重いなどです。

灰色の与えるイメージ


灰色の与えるイメージは中立、穏やか、落ち着き、信頼などです。ネガティブなイメージは地味、不安などです。

イメージ画像、商品画像

ちなみにイメージ画像や商品画像などは業種、商品、コンセプト、ターゲットに合わせてカラーを使うことで、高い効果が上がりやすくなります。しかし同じ業種でもコンセプトが違ったり、ターゲット、企業カラーなども異なるので確実に効果が見込めるカラーを論じるのは困難です。

とはいえ、業種におけるイメージやターゲット、セールスポイントなどからイメージを伝えやすくすることはできます。たとえば、画像やバナー、カラーの傾向の考え方としては業種、ターゲット、セールスポイントなどから判断することがあります。

不動産業の例


◆ターゲット:不動産の住み替えや売却を検討している人
◆セールスポイント:囲い込みはせずに高く、早く、安全に
→信頼、誠実、安全をイメージさせる青色や緑色を取り入れる

水回りのリフォーム業の例


◆ターゲット:水回りのリフォームを検討している人(特に戸建てにお住まいの方)
◆セールスポイント:水回りを快適に理想の空間に
→水をイメージさせる青色や水色を取り入れる

子供向け英会話教室の例


◆ターゲット:子供のいる20代~30代の女性
◆セールスポイント:楽しみながら英語のレッスンができる
→元気、明るい、楽しいをイメージさせる橙色を取り入れる

動線と操作性

Webサイト内の導線は使いやすさ、分かりやすさを考えて設計することが基本ですが、特にアクションを促すための問い合わせフォームや資料請求バナー、またはそれらにつながるページは、トップページの上部などの分かりやすい場所への配置をすることが肝心です。アクションを促すために使いたいカラーの選び方、設計については他社のカラーコンセプトや工夫している点をチェックして取り入れるようにします。

たとえば、多様なペルソナに対応させる業種の場合、導線の混乱を避けるため複数の色遣いで情報をカテゴライズしたり、導入や契約までの流れが分かりにくい場合、デザインや色遣い、インフォグラフィックスなどで情報が伝えることもできます。

売れるホームページのデザインまとめ

最後に他社との差別化を行う方法について触れておきましょう。

先に述べた通り、売れるデザインには「1.カラーコンセプト」「2.イメージ画像、商品画像」「3.動線と操作性」といった押さえておくべきポイントがありますが、ライバルとの差別化を行うためには、他社のデザインを参考にすることをおすすめします。

ホームページからの問い合わせを増やしたいという場合には、ターゲットや競合の調査は不可欠だからです。もし、似たようなターゲットを狙ってるときには同業種でなくても他業種からでもデザインの要素を真似ることができるので問題はありません。

例えば、印象がよいと感じるWebサイトの色遣いや立体感のあるボタン、見出しの見やすさ、真似したいメリハリのある背景、1番重要なリンクの目立たせ方など、参考にできる情報を集めておくとよいでしょう。

情報を集めたら与えたい印象があればコンセプトやセールスポイントなどをデザインで表現したり、逆にライバルが強調していない部分を強調することもできるので、自社では何を大事にしていきたいのか、どんな強みを表現したいのか、弱みを目立たせなくできないかなどのデザイン設計をしていきます。

これを機に、ホームページの効果的なデザインについて検討してみてはいかがでしょうか。
ページ先頭へ