【経験談】当てはまると危険!ユーザーが離れる!ホームページのダメな例

ホームページの悪い例 WEB

ホームページを作ったけどあんまり集客出来てないな〜って悩んだことありませんか?無料で作れるホームページの登場などもあり、どんどんホームページが量産されてきました。そんな中で「自分のサイトをもっと見てほしい!」って思っている方は多いと思います。ボクはWEBディレクターとして働いているので、たくさんホームページを作ってきました。その経験から「これはダメだな〜」って思ったホームページの例をご紹介します。デザイン目線での解説もします。

スポンサーリンク

ユーザーのことを考えていない

最近こんなツイートをしました。

  • 車屋なのに会社概要がメイン
  • 写真に人がいない人材派遣会社
  • 深︎い階層に動画を配置(限定公開)
  • 商品よりも作り込まれた代表挨拶
  • お知らせの無限スクロール
  • カレンダー式予約フォームに第2・第3希望

少し皮肉っぽいツイートですが、共通していることは「全くユーザーのことを考えていない」ってところです。せっかく車を探しにきたお客さんに対して、「うちの会社はね〜」って言ったり、商品のことを知りたいお客さんなのに「いいから代表の話を聞いてよ!」って言ってるようなもんです。

ボクが一番びびったのは「カレンダー式予約フォームに第2・第3希望」をつけたやつです。

なんとなく想像できると思いますが、第1希望が埋まってた時点で、ユーザーは勝手に第2・第3希望で予約しますよね?ユーザーどころか管理者まで使い勝手が悪くなってますw

このようにユーザー目線で考えていないサイトはけっこうあります。

パーツを分けて解説します。

レイアウト

【良い例】

情報が整理されていて、操作しやすいレイアウトが好ましいです。必要な情報が整理されていて、しっかりとした導線が見えると、ユーザーの信用を高めることも出来て、あたえる印象もいいです。

東京都公式ホームページ
東京都庁の公式ホームページ。都政に関する最新情報、記者会見、都議会や各局の情報、統計、入札・契約情報、知事への提言など。

東京都のホームページは自治体のサイトの中でもかなり見やすいです。人口も多くて情報が多いはずなのに、レイアウトがシンプルなので目的のページに辿り着きやすいです。好みではありますが、無駄に大きな画像などないのでスッキリ見れます。東京都の人がみるサイトなので都庁がデカデカと載った写真とかいらないですからね。

レスポンシブにも対応しています。

おきわた
おきわた

同じ大きさのブロックが配置されてるからシンプルで見やすい!

【悪い例】

情報が詰め込まれすぎて、ユーザーが混乱してしまうようなレイアウトです。特にダメな例は、装飾のための画像などがボタンと混同していて、「どこクリックすんの?」って思わせるようなレイアウトです。

新型コロナウイルス感染症に関する各種情報について/沖縄県

沖縄県のサイトはめっちゃ見づらいです。まず最初に表示されるページはトップではなく、新型コロナに関する特設ページです。それから<通常TOPページはこちら>をクリックして、サイトのトップが表示されます。コロナ以外を見たいひとは手間が増えます。そしてサイト右側に表示されている装飾の画像もゴチャゴチャして見づらいです。

おきわた
おきわた

バナーのサイズなども統一されてないので見栄えがよくないですね!

画像

【良い例】

ユーザーが「他の写真も見たくなるような」高解像度の写真がよいです。しかも高解像度の写真を使うことで、たくさん画像を入れれなくなり(表示速度の問題)おのずとシンプルなデザインになりやすいです。クオリティの低い画像を使ってしまうと、それだけで安っぽくなってしまい、印象も悪いです。

おきわた
おきわた

「これだ!」って思う1枚を決めればOKだよ!

【悪い例】

同じページの中に、似たような画像をたくさん配置したり、解像度が低いモノを使っており、モザイク画像みたいになっているやつです。ユーザーに与える印象も悪いし、サイトを安っぽくしてしまいます。自分で首を絞めることになるので、画像にはこだわった方がいいですね。

おきわた
おきわた

良い画像がないとサイトのデザインも出来ないから、お金をかけてでも写真は撮った方がいいよ!

カメラマンを探すならコチラ!
ココナラ
ココナラ トップ画面
ココナラ

色・背景 

【良い例】

色の組み合わせがちゃんとしており、ブランドイメージを最大に引き出すカラーが使われていることです。オシャレなサイトなどをみると感じると思いますが、色使いがとても上手いです。配色には決まりのパターンがあるので、それを参考にするのもいいですね!

おきわた
おきわた

ボクが好きなサイトはエルメスのサイトだよ!ブランドイメージを崩さない配色とオシャレな動画がかっこいい!

【悪い例】

色の組み合わせがバラバラで、見せたい情報よりも背景に焦点がいってしまうようなモノです。最近だと背景に動画を入れたりする場合もありますが、素人が手を出すとけっこう痛い感じになります。それほど難しいジャンルなので、少しばかり勉強していたほうがいいかもです。

おきわた
おきわた

センスが問われる分野だからデザイナーに任せるのが一般的だよ!でも最低限の知識があると、デザインを見るのが楽しくなるよ!

まとめ

いかがだったでしょうか?今回は当てはまると危険!ユーザーが離れる!ホームページのダメな例を紹介しました。ユーザーはほんの少しのきっかけでページを離れてしまうから、なるべくその要因を取り除くことが大切ですね。これでお客さんにも喜んでもらえて、反響が出やすいホームページが増えると嬉しいです。

ここまで読んでいただきありがとうございました。

タイトルとURLをコピーしました