わかりやすいHPとは？見やすいWebサイトを作ってユーザーのストレスを減らそう！

ウェブサイトの制作にこだわっていると、ついユーザーよりも業者側の目線になってしまうことが多いと思います。

手間をかけて作成した人ほどこの傾向にあるので、この記事で紹介している各項目に沿ってウェブサイトの見やすさを確認していくのがおすすめです。今回はウェブサイト制作において、見やすさのチェック項目を詳しく解説しました。

ユーザー目線になることが難しいと感じている人は、記事の内容と自社におけるウェブサイトのデザインを見比べてください。

見やすいサイトの特徴とは？ウェブサイト全体をチェックしよう

ウェブサイトを全体的にチェックすると、見やすいページであるかどうかが分かります。ユーザーにとって見やすいページとは、たとえば以下の項目があります。

情報が整理されている

ユーザーがウェブサイトに訪れる際は、目的を持っている場合が多くあります。なぜなら、検索エンジンは悩みを解決したい人や、何かの情報が欲しい人が利用するからです。

ページの閲覧中に「ここには欲しい情報がない」と判断すると、すぐにほかのウェブサイトに行ってしまいます。自分でウェブサイトの閲覧をしている場面を想像して欲しいのですが、5秒とたたないうちにほかのコンテンツに移動するのではないでしょうか。

ユーザーが求めている情報が分かりやすく記載されているウェブサイトは、ストレスが少ないため離脱されにくいです。以下のように、1ページをひとつのテーマで構成すれば、ユーザーが見やすいページになります。

サービス紹介のページなら・・

• サービスAの概要
• サービスBの概要

事業案内のページなら・・

• 関わっている事業一覧
• 事業に取り組むうえでのこだわり
• 事業に取り組む際の目的

ウェブサイト全体でテキストや画像を使いすぎないようにすると、ユーザーの負担が軽減するでしょう。

コンテンツの制作で気合いが入っていると、ついテキストや画像をたくさん使ったページを作りたくなることと思います。しかし基本的にユーザーが求めているのは、適度に空白があって読みやすいページです。

この記事でもユーザーのストレスやスマートフォンで見ることを考えて、適度に改行しています。

配色のバランスが考えられている

ウェブサイトのデザインにこだわりがあると、ほかにはない配色の目立つページを作りたい人もいるでしょう。

とくに「具体的な原因は分からないけれど見た目が寂しい」といった理由で、背景や文字に色を使いたくなった経験はありませんか。この状態で色を使うと、理由が曖昧なのでユーザーにとって見やすいウェブサイトにならないと考えられます。

目的を持ってウェブサイトに色を使うと、バランスが取れた分かりやすいページになるでしょう。ブログの記事などでよく言われているのは、テキストの装飾に使う色は多くても3色までということです。

ユーザーはテキストの色が違うと、その部分に注目して意味を見出そうとします。その分ストレスがかかってしまうので、色を多用するのはおすすめしません。

ウェブサイトが奇抜なデザインではない

配色や視線の動きとも関係がある内容ですが、基本のルールを採用しているウェブサイトは、奇抜なデザインではないのでユーザーにとって分かりやすいです。

競合他社との差別化ばかりに注力してしまうと、「ほかにはないデザインを作らなければ」と思うこともあります。しかし見慣れたレイアウトからかけ離れたデザインは、自社のルールをユーザーに押し付けてしまうでしょう。

それでもユーザーが滞在してくれるのならいいですが、離脱率が高ければ、いわゆる「痛いウェブサイト」になってしまいます。

離脱率とは個別のページビューにおいて、ユーザーが最後に閲覧したページになった割合を示す数値です。

ユーザーにおける視線の動きを意識している

ユーザーがウェブサイトを閲覧する際の視線の動きには、法則があります。無意識でその法則通りに目線を動かしている人も多いので、目線の動きを妨げるようなデザインであればストレスを感じてしまいます。

目線の動きには主にF型とZ型があり、F型は文章が始まる部分を縦に読む型です。そして、求めている情報がある場合に視線を横に動かします。

これに対してZ型は左上から右上を読み終えたら、斜めに移動してまた左下から右下、といった目線の動きです。視線の動きを理解しているだけでもユーザーはウェブサイトをスムーズに閲覧できるので、離脱が減るでしょう。

メニューボタンが多すぎない

メニューボタンが多すぎるうえに全て英語で表記されているウェブサイトは、ユーザーが混乱してしまいます。

反対にメニューボタンを7つまでにして日本語表記にしていると、ユーザーにとって分かりやすいウェブサイトになっています。

デザインの視点からメニューを英語表記にしたい場合は、マウスをのせたりタップしたりした際に日本語で表記される工夫があれば、分かりやすいのではないでしょうか。

スマートフォンから見てメニューが分かりやすい

ウェブサイトのデザインによっては、メニューボタンが小さくなるケースが多くあります。

スマートフォンでメニューをタップしづらいデザインになっていると、ユーザーがストレスを感じるでしょう。

ページを移動していてメニューボタンを見失う状態を避けるには、それぞれのページに「TOPに戻る」ボタンを配置します。

また、スマートフォンのデザインではヘッダーに表示するのではなくナビゲーションメニューを設置すると、スクロールしてもユーザーがメニューを確認できるようになります。

ナビゲーションメニューには「ハンバーガーメニュー」といったものがあり、タイトルの右上に三本の線が入ったボタンを見たことがある人もいるでしょう。

三本の線がハンバーガーに似ていることから、ハンバーガーメニューと名付けられました。

第三者にウェブサイトの意見をもらおう

社内の人間だけでウェブサイトを作っていると、自己満足なデザインに仕上がってしまうことがあります。とくに試行錯誤して作成したウェブサイトほどそのようになりがちなので、第三者に見やすいかどうか確認するのがおすすめです。

見やすさや伝わりやすさを尋ねる際は、自社におけるターゲット層に近い人が本音を言いやすい環境を作ると良いでしょう。

アンケートに答えてくれた人にプレゼントを渡す形にすると、人によっては「プレゼントをくれたのだから」といって良い回答をしてしまいます。

まずは従業員の家族や部署が違う人に尋ねて、ウェブサイトの本当の価値を見極めるといいでしょう。無料で使えるアンケートフォームが豊富に揃っているので、フォームの作成には手間がかからないはずです。

おしゃれが必要かどうかを見極めるには

ウェブサイトを作成するときは、そのサイトにおしゃれが必要かどうかを見極めるのがおすすめです。

ウェブサイトを作成する前に、自社でペルソナを設定しているところも多いと思います。

ペルソナとは自社の商品やサービスを使用する典型的なユーザー像で、設定していると発信する情報に一貫性を持たせられるものです。一貫性を持たせられるのはテキストだけではなく、ウェブサイトのデザインも関わります。

たとえばおしゃれに興味がない男性に向けたウェブサイトなのに、おしゃれなデザインにするのはペルソナ設定と合っているとは言えません。

自社が発信する情報の内容によってはこの限りではありませんが、設定したペルソナに合わせてデザインするといいでしょう。

ホームページの作成・更新なら「BARIYOKA」がおすすめ！

当サイトを運営している「BARIYOKA」はサブスク型のホームページ作成・更新サービスを提供しています。BARIYOKAでは保守管理費用の5,280円(税込)/月のみでホームページの作成から更新までをお任せいただけます。初期費用をかけずにハイクオリティーなホームページを持てるとお喜びの声をいただいております。

ホームページの新規制作、リニューアルを検討されている方の中には個人事業主、経営者の方もいらっしゃるのではないでしょうか。ホームページの作成、集客などを全て丸投げすることで、やらなければいけない業務に集中して取り組むことが可能です。皆様からのお問い合わせをお待ちしております。