【前編】Webサイトを定期的にチェックできていますか？押さえておきたいWebサイトのチェック項目

今やどこの企業も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サイトの機能
• ユーザーとのコミュニケーション
• プライバシーとセキュリティ

[/st-mybox] [st-div class=”” margin=”0 0 -5px -5px” padding=”0 0 0 0″ add_style=””][st-minihukidashi fontawesome=”fa-check” fontsize=”” fontweight=”bold” bgcolor=”#FFECB3″ color=”” margin=”0 0 0 0″ radius=”30″ position=”” add_boxstyle=””]こちらもCHECK[/st-minihukidashi][/st-div][st-card myclass=”st-card-minihukidashi” id=”4456″ label=”” pc_height=”” name=”” bgcolor=”#cccccc” color=”” fontawesome=”” readmore=”on” thumbnail=”on” type=””]

サイト内での行動

サイトの目的

サイトの目的およびターゲットが明確か

サイトで何が得られるのか、訪問者に対して明確にされているべきである。

特に新規ユーザーが製品・サービスページ、会社概要ページなどに遷移して、その会社がどういう会社なのか分かるようにする。

ユーザーがアクションをするリンクが分かりやすいか

製品・サービスを購入したり、問い合わせたり、サポート情報を見たりといった、サイトが提供する用途（運営者からみたコンバージョン）につながるリンクが分かりやすいことが重要です。

基本的にお問い合わせなどのボタンが目立つ位置に設置されているか確認します。

ナビゲーション

ナビゲーションのUIパーツは使いやすいか

シンプルなナビゲーションがトレンドですが、あなたのWebサイトのナビゲーションが使いやすいか確認します。

ページレイアウトがどのような構成か

カラム数や情報の見せ方などが、最近の見やすいレイアウトになっているか確認します。

様々なブラウザに対応する必要があるためリキッドレイアウトか

現在は様々な画面幅のデバイスが存在しているため、画面幅に合わせてレイアウトが変更されるリキッドレイアウトがよく採用されています。

グローバルナビゲーション・メガメニューに画像が入っているか

視認性を高めるためにも、ビジュアルが入っていることが望ましいです。

グローバルナビゲーションは全ページに一定の形、同じ位置に設置しているか

グローバルナビゲーションは全ページに一定の形、同じ位置に設置してあるか確認します。

ナビゲーションはセクションごとに一定の形、同じ位置に設置しているか

サイト全体のナビゲーションは常にわかりやすい状態で提示しておくべきです。
各セクション内のナビゲーションは、セクションごとに一定の形、同じ位置に設置してあるか確認します。

ナビゲーションは体系的にまとめられているか

グローバルメニューとメガメニューがあるか、またはどちらかがあるかどうか確認します。

分かりにくいリンク名がナビゲーションに使われていないか

ユーザー視点に立って、社内用語、認知度の低い製品名、内容が分かりにくいテキストなどがリンク名として使われていないか確認します。

パンくずリストは全ページに設置されているか

現在アクセスしているページが、サイト内でどの位置にあるか判断できるようにしておくべきです。

更新された内容が明示されているか

情報の新鮮さというのはユーザーにとって重要な要素です。

トップページにおいて新着情報や更新情報などの形で、サイトのどの部分が変わったか分かりやすい確認します。

問い合わせの多い項目をまとめたページが存在するか

ユーザーからよくある質問などのFAQを「よくある質問」といったコンテンツとしてまとめてあるか確認します。

ナビゲーションなどが画像ではなく、テキスト（デバイスフォント）になっているか

ナビゲーションなどが画像ではなく、テキスト（デバイスフォント）になっているか確認します。

サイトのデザイン上画像のみで作成されている場合、altテキストが正しく設定されているか確認します。

リンク構造

全ページに、扉ページへのリンクが設置されているか

サイトの規模が大きくなると、ユーザーはどこのページを閲覧しているのか分かりにくくなりやすいので、扉ページ（一覧）へのリンクが設定されていることが望ましいです。

提供コンテンツ／サービス一覧があるか

多くのサービスを提供している場合、サービス一覧ページがあることが望ましいです。

エラーページから他のコンテンツへ移動できるか

エラーページ（404ページ）からサイトのトップページやその他のページへの導線が設置されている必要があります。

リンク切れがないか

サイト全体でリンク切れがないか定期的に確認します。

スマートフォン対応

表示スピードに問題がないか

最近ではスマホでのサイトの閲覧数がパソコンを上回るようになっていますので、スマホでの表示スピードが特に重要です。

GoogleSpeed Insightなどを利用して、表示スピードに問題がないか確認します。

スマートフォン対応ができているか

スマホ対応ができていることは、当たり前の時代になっています。未対応の場合は早急に対応しましょう。

スマホサイトのメニュー設計は使いやすいか

スマホデバイスは画面幅がパソコンサイトと比べて、小さいためメニューの設計が特に重要になってきます。

ユーザー視点に立って、再度スマホサイトのメニューが使いやすいか確認します。

モバイルフレンドリーテストに合格しているか

スマホ対応が適切にできているかGoogleモバイルフレンドリーテストで確認します。

多言語

多言語対応できているか

企業のサイトであれば、多言語の対応が求められる時代になっています。特に英語や中国語の対応は一定の事業規模のサイトであれば必須なので、適切に対応できているか確認しましょう。

多言語ページデザインについて

多言語対応のページが1枚もののページになっているのか、それとも日本語サイトと同じページ数分、多言語のページが準備されているのか改めて問題ない設計になっているか確認しましょう。

サイトのデザイン

メインビジュアル

メインビジュアルには、どのようなデザインになっているか

メインビジュアルはサイトに訪れたユーザーが一番最初に目にする部分で、特に伝えたい情報や与えたい印象を左右する要素になります。

意図した形にデザインできているか確認しましょう。

視覚効果

動きのあるサイトデザインになっているか

パララックスなど、視覚効果を用いた動きのサイトになっているか確認しましょう。

動きがあることが必須ではないと思いますが、動きのある演出はユーザーの注意を集めることができるので、見て欲しい情報などに動きを付けることでアクセス数の向上に繋がります。

色

サイトカラーはアクセシビリティに配慮されているか

アクセシビリティ4.5：1に対応したサイトカラーとなっているか確認します。新着情報などの本文テキストと背景色を比較するなどが調べやすいです。

コンテンツのタイトル

コンテンツに合った見出しが全ページに付けられているか

各ページの内容を表す見出しを、全ページで異なる内容のh1要素があるかどうか確認します。

コンテンツに合ったタイトルが全ページに付けられているか

各ページの内容を表す見出しを、全ページで異なる内容のtitle要素があるかどうか確認します。

文字

文字のサイズは読みやすい大きさか

不必要に小さな文字サイズを設定するべきではないです。

本文の文字サイズは13px程度を下限としできれば16px程度で設定されているか確認しましょう。

文字の色はコントラストが明確で読みやすいか

文字の色は背景に対して、見やすい色に設定されているか確認しましょう。

リンク以外の文字に下線が使われていないか

訪問者がリンクと見間違えて混乱しないように、リンク以外には下線を付けないのが望ましいです。

行間を適切に確保しているか

行の高さは文字サイズの1.4倍〜1.6倍ほどに設定するのが読みやすいです。

機種依存文字は利用していないか

さまざまなOSやブラウザで正しく読めるように配慮したコンテンツ作りをするべきです。

文字サイズ変更機能は実装されているか

アクセシビリティのための文字サイズ変更機能は実装されているか確認しましょう。

リンク

リンクの色はコントラストが明確で読みやすいか

リンク部分の色は背景に対して、見やすい色に設定されているか確認しましょう。

クリック後のリンクはクリック前と異なる色で示されているか

訪問者が混乱しないように、訪問済みページへのリンクは、未訪問ページへのリンクと明確に区別できるか確認しましょう。