ちょっとした改善でここまで変わる!Webサイトのデザインテクニック

公開日:2015-03-02 更新日:2021-10-21 by SEデザイン編集部

目次

web_design.png企業のWebサイトをリニューアルする時、きれいに、分かりやすくデザインするのは当然のこと。
その企業にとってコアとなるビジネスは何なのか、企業風土として何を重視しているのかなどを把握したうえで、的確なデザインに落とし込んでいく必要があります。

苦心して作り上げたWebサイトでもなんとなく物足りなかったり、凝ったデザインなのに使いにくいこともあります。そんな時、ほんの少し手を加えるだけで、すっきり解決できるかもしれません。

今回は弊社SEデザインのトップページをサンプルに、ちょっとしたことで印象が変わるテクニックをご紹介します。(サイトをリニューアルしたため、デザインは旧サイトのものとなります。)

(1)フォントサイズにメリハリを

大きな画像や文字が使われることの多いトップページのキャッチコピー。特に訴えたいことを効果的に見せるには、どうしたら良いでしょうか。

[良くない例]

画面1キャッチコピーとそれに続くリードコピーのどちらも読んでほしい!という思いが強く出てしまって、全体的なバランスに欠け、どこを見ればいいのか分かりにくくなっています。

矢印マーク

[良い例]

画面2キャッチコピーを大きくし、リードコピーを少し小さめにしたもの。
フォントサイズに強弱がついたことで、キャッチコピーを読んでからリードコピーへと、順序よく見てもらうことができます。さらに右側にあるビジュアルもアイキャッチとしてしっかり機能するようになります。

(2)クリックできるボタンにはルールを決める

ページ内の要素が多いと、それがリンクなのか(クリックできるのか)そうでないのか分かりにくくなってしまいます。クリックしてほしい要素は、見た目やマウスオーバー時の効果などに統一ルールをもうける必要があります。

[良くない例]

画面3ぱっと見て、サイドメニューのボタンをクリックできそうなことは分かりますが、それ以外はどこがリンクになっているか瞬時には判断できないかもしれません。

[良い例]

画面3クリックしてほしいリンク要素に青色の「」マークを入れるようにルールを統一。
サイドメニューがはっきりリンクだと分かり、右側にクリックできる場所があることにもすぐに気付けます。

(3)意外性のあるアクセントを付け、離脱を改善

トップページにアクセスしてきた利用者がすぐにWebサイトから離脱しないようにするには、印象的な要素で興味を引くことが大事。時には意外性も必要です。

[良くない例]

画面5全体のデザイン統一のため、コピー部分のフォントを他の主要部分と合わせたもの。しかし、平凡な印象から目に留まることはなく、読み流されてしまいます。

[良い例]

画面6思い切って手書きのコピーにしてみた例。他の部分と差別化することで目が行きやすくなっただけでなく、選ぶフォントの種類によって企業のカラーも印象付けられます。今回は右側にある手書きイラストとの相性も考慮に入れました。

(4)テーマカラーを変えるだけでも印象が180度変わる

ここまで、わずかな工夫で見栄え、使い勝手が変わることを紹介してきましたが、Webサイトのテーマカラーの変更だけでも、利用者が受けるイメージは変わります。企業風土や商品イメージをうまく表すカラーを選びたいものです。

画面7ブルー主体からオレンジ・レッド系に変えてみました。とにかく目立たせたい、という狙いではありますが、暑苦しさも感じます。「お客様へ最適(COOL)な提案を」がモットーの弊社には合わないかもしれません。

画面8実際のWebサイトはブルー系で、落ち着いたイメージ、信頼性などを感じさせるデザインにしています。

まとめ

企業サイトのトップページは(Webサイトの目的にもよりますが)、その企業のことを知ってもらい、どんなビジネスをしているのか、という紹介がメインとなります。あれもこれもと入れる要素が増えると、見やすさが損なわれてしまいます。トップページに出す情報を整理することも大切です。

今回ご紹介したようなちょっとした工夫を施すことで、かなり見やすさを改善できます。現在のWebサイトで使えそうなテクニックがあれば、ぜひ試してみてください。

いますぐ使えるコンテンツ戦略マップ
Webサイトを外注する前に押さえておきたい4つのポイント

関連記事

コンテンツマーケティングで、
ビジネスの効果を最大化しませんか?

もっと詳しく知りたい方

ご質問・ご相談したい方