
- 現役Webマーケター
(元Webディレクター) - 東証一部上場の不動産系企業で勤務
- 最高収益:月間30万円
今やどこの企業もWebサイトを持っており、Webサイト上で新しい商品を紹介したり、イベントやお知らせなどの情報を発信するなど活用している企業も多いはずです。
しかし、最初は更新していたけど、途中で他の業務が忙しくなりストップしていたり、成果が上がらず、更新が停滞しているなど、Webサイトが作ったきりの状態になっていませんか?
今回はそんな現状からWebサイト活用するための最初の一歩としてWebサイトをチェックする際に、押さえておきたいチェック項目をまとめたので、参考にしてもらえたらと思います。
[st-mybox title=”前編の範囲(太字)” fontawesome=”fa-file-text-o” color=”#757575″ bordercolor=”#f3f3f3″ bgcolor=”” borderwidth=”3″ borderradius=”5″ titleweight=”bold” title_bordercolor=”#757575″ fontsize=”” myclass=”st-mybox-class st-title-under st-list-circle” margin=”25px 0 25px 0″]サイトで何が得られるのか、訪問者に対して明確にされているべきである。
特に新規ユーザーが製品・サービスページ、会社概要ページなどに遷移して、その会社がどういう会社なのか分かるようにする。
製品・サービスを購入したり、問い合わせたり、サポート情報を見たりといった、サイトが提供する用途(運営者からみたコンバージョン)につながるリンクが分かりやすいことが重要です。
基本的にお問い合わせなどのボタンが目立つ位置に設置されているか確認します。
シンプルなナビゲーションがトレンドですが、あなたのWebサイトのナビゲーションが使いやすいか確認します。
カラム数や情報の見せ方などが、最近の見やすいレイアウトになっているか確認します。
現在は様々な画面幅のデバイスが存在しているため、画面幅に合わせてレイアウトが変更されるリキッドレイアウトがよく採用されています。
視認性を高めるためにも、ビジュアルが入っていることが望ましいです。
グローバルナビゲーションは全ページに一定の形、同じ位置に設置してあるか確認します。
サイト全体のナビゲーションは常にわかりやすい状態で提示しておくべきです。
各セクション内のナビゲーションは、セクションごとに一定の形、同じ位置に設置してあるか確認します。
グローバルメニューとメガメニューがあるか、またはどちらかがあるかどうか確認します。
ユーザー視点に立って、社内用語、認知度の低い製品名、内容が分かりにくいテキストなどがリンク名として使われていないか確認します。
現在アクセスしているページが、サイト内でどの位置にあるか判断できるようにしておくべきです。
情報の新鮮さというのはユーザーにとって重要な要素です。
トップページにおいて新着情報や更新情報などの形で、サイトのどの部分が変わったか分かりやすい確認します。
ユーザーからよくある質問などのFAQを「よくある質問」といったコンテンツとしてまとめてあるか確認します。
ナビゲーションなどが画像ではなく、テキスト(デバイスフォント)になっているか確認します。
サイトのデザイン上画像のみで作成されている場合、altテキストが正しく設定されているか確認します。
サイトの規模が大きくなると、ユーザーはどこのページを閲覧しているのか分かりにくくなりやすいので、扉ページ(一覧)へのリンクが設定されていることが望ましいです。
多くのサービスを提供している場合、サービス一覧ページがあることが望ましいです。
エラーページ(404ページ)からサイトのトップページやその他のページへの導線が設置されている必要があります。
サイト全体でリンク切れがないか定期的に確認します。
最近ではスマホでのサイトの閲覧数がパソコンを上回るようになっていますので、スマホでの表示スピードが特に重要です。
GoogleSpeed Insightなどを利用して、表示スピードに問題がないか確認します。
スマホ対応ができていることは、当たり前の時代になっています。未対応の場合は早急に対応しましょう。
スマホデバイスは画面幅がパソコンサイトと比べて、小さいためメニューの設計が特に重要になってきます。
ユーザー視点に立って、再度スマホサイトのメニューが使いやすいか確認します。
スマホ対応が適切にできているかGoogleモバイルフレンドリーテストで確認します。
企業のサイトであれば、多言語の対応が求められる時代になっています。特に英語や中国語の対応は一定の事業規模のサイトであれば必須なので、適切に対応できているか確認しましょう。
多言語対応のページが1枚もののページになっているのか、それとも日本語サイトと同じページ数分、多言語のページが準備されているのか改めて問題ない設計になっているか確認しましょう。
メインビジュアルはサイトに訪れたユーザーが一番最初に目にする部分で、特に伝えたい情報や与えたい印象を左右する要素になります。
意図した形にデザインできているか確認しましょう。
パララックスなど、視覚効果を用いた動きのサイトになっているか確認しましょう。
動きがあることが必須ではないと思いますが、動きのある演出はユーザーの注意を集めることができるので、見て欲しい情報などに動きを付けることでアクセス数の向上に繋がります。
アクセシビリティ4.5:1に対応したサイトカラーとなっているか確認します。新着情報などの本文テキストと背景色を比較するなどが調べやすいです。
各ページの内容を表す見出しを、全ページで異なる内容のh1要素があるかどうか確認します。
各ページの内容を表す見出しを、全ページで異なる内容のtitle要素があるかどうか確認します。
不必要に小さな文字サイズを設定するべきではないです。
本文の文字サイズは13px程度を下限としできれば16px程度で設定されているか確認しましょう。
文字の色は背景に対して、見やすい色に設定されているか確認しましょう。
訪問者がリンクと見間違えて混乱しないように、リンク以外には下線を付けないのが望ましいです。
行の高さは文字サイズの1.4倍〜1.6倍ほどに設定するのが読みやすいです。
さまざまなOSやブラウザで正しく読めるように配慮したコンテンツ作りをするべきです。
アクセシビリティのための文字サイズ変更機能は実装されているか確認しましょう。
リンク部分の色は背景に対して、見やすい色に設定されているか確認しましょう。
訪問者が混乱しないように、訪問済みページへのリンクは、未訪問ページへのリンクと明確に区別できるか確認しましょう。
https://nuko-blog.net/web/check-website-part2/