2019.03.08 Fri

コーディングで考えるストレスフリーなWebサイト

こんにちわ。
米田です。

サイトを見ていて何らかの要因でイライラしてブラウザバックした経験はありませんか?
または使いづらさを感じたことはありませんか?

もし自分のサイトでそんなことが起きていたら危険です。
貴重な見込み客が離脱してしまいます。

どんなデバイスでもストレスなく使えるWebサイトを考察します。

表示速度

見たいサイトを開いたとき、数十秒待ってもロード画面がぐるぐるぐるぐる・・・
皆さんはどれだけ待てますか?

自分は10秒も待てないですね。
それが目的のサイトではなく、たまたまヒットしたものならなおさらです。

表示速度が1秒から6秒に落ちるだけでも、直帰率は100%以上も上昇するそうです。

表示速度が落ちる原因としては画像サイズやサーバースペックなど様々ですが、
自分のサイトの表示速度を一度確認した方が良いでしょう。

リンクポジション

突然ですが、下の2つのボタンどちらがクリック、またはタップしやすいですか?

See the Pen GerVQx by epauoh (@epauoh) on CodePen.dark

実は上のボタン、見た目は同じなのですがクリックできる範囲が違います。
ボタン1はテキストだけですが、ボタン2はボタン領域全体がクリックできます。

今回の例はかなり極端ですが、リンクポジションはとても大事です。
実際にパソコン、スマホで確認して押しやすいボタンを作成しましょう。

ページ内での動きをスムーズにすることでストレスのないサイトにつながります。

フォーム

部分的な話になりますが、フォームの入力も重要なポイントの1つです。

See the Pen eXgqwZ by epauoh (@epauoh) on CodePen.dark

フォームを2つ用意しましたが、使いやすさは明白ですね。
左側は全て入力しなければなりませんが、
右側は郵便番号を入力するだけで以降の項目が自動で出力されます。
また、都道府県もセレクトボックスになっています。

フォームはWebサイトのゴールになっていることも多いので、ここで離脱させてしまうのは非常にもったいないです。

最後に

Webサイトを作成、運用する際はいかにユーザー目線になれるかだと思います。
自己満足で終わってしまうのが一番危険です。
ストレスのないWebサイトになっているかどうか、今一度見直してみるのもいいでしょう。

それでは。

WRITERこの記事を書いた人

米田

米田

大阪オフィスで、フロントエンドを担当しています。

大阪オフィスで、フロントエンドを担当しています。

FREE DOWNLOAD

顧客獲得に成功した24社の成功事例を1冊にまとめました。
顧客獲得にお困りの方も、そうでない方も、一度お読みいただくことをお勧めします。

MORE VIEW