見やすいホームページを作るための手順は3つある
まずは、見やすいホームページを作る際の手順について解説します。各項目で、見るべきポイントは細かくありますが、大きく分けると見るべき点は、以下の3つです。
・ホームページのコンセプトや情報の設計を確認する
・ホームページ全体の流れを確認する
・ホームページ内のメニューやボタンの配置など細部を確認する
「見やすさ」を意識すると、ホームページの見た目を変えなければいけないと考えがちです。しかし見た目を再確認する前に、ホームページのコンセプトや設計に問題がないかを今一度確認し、場合によっては変更を加える作業が必要です。
コンセプトや設計が整ったら、その次にホームページの見た目を確認・改善していきます。
見た目を改善する際に意識すべき点や、やってはいけないポイントも詳細に解説しますので、しっかりと把握し、自社のホームページと照らし合わせてみましょう。
では、以下からそれぞれの詳しい解説に移ります。
ホームページのコンセプトや情報の設計を確認する
見やすいホームページが出来るかどうかは、設計の段階で決まると言っても過言ではありません。それほど設計は重要な部分です。ホームページのターゲットが明確に設定されており、ターゲットユーザーのためになる情報をしっかりと掲載出来ているかを今一度確認しましょう。
万が一、ターゲットが不明確であったり、ホームページのコンセプトが定まっていなかったりする場合は、一旦見直しを行い、それらが明確に定まった状態で先に進むことをおすすめします。
・ターゲットが明確に設定できていますか?
・ターゲットが求めている情報を把握できていますか?
上記2つの質問に明確に答えられる状態でホームページを整えていきましょう。
ホームページは、明確なターゲットが存在し、そのターゲットに役立つ情報を届けるためにコンテンツを更新・改善していくという前提のもとで制作や運用を行います。最も重要な部分ですので、おろそかにせず、しっかりと確認してから次の項目に移りましょう。
ホームページ全体の流れを確認する
ホームページのコンセプトや設計が明確に分かったら、次はいよいよ中身の確認に入っていきます。ホームページ全体の流れを見ながら、ユーザビリティの高いサイトになっているかを確認しましょう。
「ホームページ全体の流れを確認する」とは、サイトをストレスなく閲覧出来るかの確認です。ユーザーに「なんとなく見づらい」と感じられてしまうと、ホームページからの離脱に繋がってしまいます。具体的には、次の3点を確認しましょう。
・サイトの基本的な構成に準じ、ユーザーの視線の流れを意識しているか
・色やテキストを詰め込み過ぎていないか
・レスポンシブ対応か
サイトの基本的な構成に準じ、ユーザーの視線の流れを意識しているか
サイトの基本的な構成とは、リンク色を一般的な青色にしていたり、グローバルメニューをページの最上部に設置していたりといった部分です。多くのサイトが採用している構成は、多くのユーザーが見慣れているためストレスを感じることなく閲覧出来ます。
逆に、基本からずれた構成は、サイトのどこにどのような情報があるのかを判断しづらくなってしまい、離脱のきっかけになる可能性が高まりますので、十分注意しましょう。
また、ユーザーはホームページを閲覧する際、一定の視線の流れで情報を受け取るとされています。ユーザーの状況など、場合によってはこの限りでないこともありますが、大抵の場合当てはまるものです。
ユーザーの視線の流れとして「F型」「Z型」と呼ばれるパターンがあります。
F型は情報量が多いテキストを盛り込んだサイトに有効です。ユーザーはページの左端から縦方向に飛ばし読みをしつつ、自分が求めている情報を探します。そして求めることや気になる情報があれば、その箇所を右端へと読み進めていく。そしてまた左端を縦方向に…といった具合にホームページから情報を収集していくのです。
一方でZ型は、情報量がそれほど多くなく、画像とテキストがバランスよく配置されているホームページなどに適した視線の流れです。視線の始まりは、やはり左端でF型と同様ですが、左端の視線を右端に移し、その後斜めに視線を下ろしながら左端に戻し、また右に読み進めていく…といった流れです。
どちらの視線を意識するかは、ホームページの情報量や内容によりますが、ユーザーの視線が通る位置に重要度の高いコンテンツを置くことで、より読んでもらいやすくなり、ユーザーが情報を拾いやすい構造を意図的に作れます。
色やテキストを詰め込み過ぎていないか
色や情報が多すぎて整理されていないサイトは、ユーザーに「見づらい」と感じさせてしまうため、色も情報も詰め込みすぎないように心がけましょう。
・目立たせたい箇所を明確にする
・配色のバランスを考慮する
上記2点を念頭に置きながら、ホームページを見てみましょう。配色のバランスは、相性の良い色を選べるツールなどもあるため、必要に応じて活用していくことをおすすめします。
レスポンシブ対応か
ホームページは、PCやスマートフォン、タブレットなど様々なデバイスで閲覧されます。特に昨今は、スマートフォンでの情報収集の機会が非常に増えていますので、どのデバイスでもストレスなく閲覧できるようにしておきましょう。
ホームページ内のメニューやボタンの配置など細部を確認する
ユーザーの視線や情報の調整が完了したら、最後にもう少し細かい部分を確認して終了です。
ホームページ内の情報をユーザーにより分かりやすく、より伝わりやすくするために、メニューの数やボタンの配置とデザイン、マイクロコピーなどの調整を行いましょう。
見やすいホームページの共通点とは?【ルール遵守とユーザー目線】
ここまで、見やすいホームページのポイントを具体的に解説しました。自社のホームページと照らし合わせながら、確認作業は行えたでしょうか?
各項目を見ながら発見した問題点を1つずつ改善していくことで、より良いホームページが出来上がります。自社で確認を行っても、イマイチ問題が明確にならない場合などは、一度ホームページ制作会社に相談をしてみるのもおすすめです。
見やすいホームページは例外なく、ルールに沿った構成で出来ており、ユーザー目線で内容が考えられています。ポイントを抑え、より見やすいホームページを目指しましょう。
見やすいホームページの参考事例
見やすいホームページの実例を、ホームページのタイプ別に紹介します。本記事で紹介するのは採用サイトとECサイトの例です。それぞれ2例ずつ、計4例紹介しますので、業界や目的が近いものを参考にして、自社のホームページに活用しましょう。
見やすいホームページの参考事例①【採用サイト編】
採用サイトの実例として挙げるホームページは、次の2社です。
・タカラトミー(https://www.takaratomy.co.jp/company/recruit/)
・東大病院産婦人科(http://plaza.umin.ac.jp/tkyobgyn/recruit/)
どちらもコンセプトが明確で、サイトの構成も非常に見やすくなっています。実際見てみると分かりますが、どこにどのような情報が掲載されているかなども分かりやすく、ストレスなく閲覧可能です。
見やすいホームページの参考事例②【ECサイト編】
ECサイトの実例として挙げるのは下記の2社です。
・BOTANIST(https://botanistofficial.com/shop/default.aspx)
・銀座菊廼舎(https://ec.ginza-kikunoya.co.jp/)
両サイトともデザインに凝っており、お洒落なサイトであることが分かります。しかし、お洒落なだけでなく、非常にユーザビリティの高い構成になっており、迷うことなくサイトを閲覧できます。
業界や目的(採用や販促など)によってホームページの雰囲気は異なりますが、どのデバイスからでもストレスなく閲覧でき。スムーズに情報を受け取れるのは共通している点です。
「ユーザビリティを高める」意識はホームページを作る上で欠かせないポイントと言えるでしょう。
より見やすいホームページを作るために
自社のホームページをより良いものにしていくために、必ず行うべきことがあります。それは、「データを取ること」です。本記事で紹介したポイントを踏まえてホームページを制作、あるいはリニューアルした後、様々なツールを用いてデータを取りましょう。
具体的には、アクセス数の変化やユーザーがよくクリックする場所の把握、離脱するポイントの把握などが挙げられます。効果測定を行い、改善していくことで、ホームページのブラッシュアップが可能です。
また、数値を見るだけでなく、直接意見をもらう機会を作るのも非常に有効です。自社のホームページを知人やクライアントに見てもらい、感想をもらえると、改善を図る際、非常に役立ちます。
運営歴が長くなれば、それだけデータも溜まります。さらに、その時々でユーザーが求める情報が変化することもあるでしょう。データを元にして、さらに良いページを作っていきましょう。
見やすいホームページのポイントと実例まとめ
本記事では、見やすいホームページを作るうえで、抑えておくべきポイントの解説から実例紹介まで、非常に具体的に説明しました。自社のホームページ制作に活用できるところは多々あったのではないでしょうか?
自社のホームページと照らし合わせながら、何度も確認してみましょう。
万が一「自社では解決出来そうにない」「問題点が明確に分からない」などの不安がある場合は、ホームページ制作会社に相談することをおすすめします。
弊社では、ホームページ制作やITに関する相談を承っております。下記が弊社の実績です。
・年間5000サイト、2000アプリ以上の制作
・コロナ禍の中で5000社以上のIT相談を実施
「より見やすいホームページにしたい」とのご希望がある場合は、是非ともお気軽にご相談ください。