メインコンテンツにスキップ

サイト診断でサイト内の問題を確認する

サイト診断を使うと、HTML構造・リンク先設定・代替テキストの問題をデザインエディタ上で一覧で確認できます。指摘された要素への移動方法と、対処方法を確認して修正する手順を説明します。

サイト診断は、公開サイトで不具合の原因になる設定を検知して一覧で表示する機能です。HTML構造、リンク先設定、画像の代替テキストの3つの観点で、サイト全体を確認できます。

一覧の指摘をクリックすると該当する要素へ移動でき、対処方法もその場で確認できます。

サイト診断で確認できること

サイト診断では、デザインエディタ上では気づきにくい次の3種類の問題を検知します。

診断項目

主な検知内容

HTML構造

見出しレベルの飛び、リストやランドマーク要素の誤った構造など

リンク先設定

リンク先の未設定、存在しないページやIDへのリンク、非公開ページへのリンクなど

代替テキスト

代替テキストが設定されていない画像

これらの問題は、スクリーンリーダーや検索エンジンがページの内容を正しく読み取れない原因にもなります。

各項目の内容と対処方法は、サイト診断で検知される項目と対処方法を参照してください。

サイト診断を開く

サイト診断は、デザインエディタの左パネルから開きます。

  1. デザインエディタ左側の[サイト診断]をクリックします。

  2. サイト診断のパネルが開き、診断結果が一覧で表示されます。

指摘を確認する

一覧には、ページごとにまとめられた指摘が表示されます。必要に応じてページやブレイクポイントを切り替えて確認します。

ページとブレイクポイントを切り替える

サイト診断は、ブレイクポイント(デフォルト/タブレット/モバイルなど)ごとに別々に診断を行います。

  1. パネル上部の〔ブレイクポイントの選択欄〕から、確認したいブレイクポイントを選びます。

  2. 特定のページだけを確認する場合は、〔ページのフィルタ〕から対象のページを選びます。

注意: 一覧には、選択中のブレイクポイントの指摘だけが表示されます。ブレイクポイントごとに要素の表示・非表示が異なると、指摘の内容も変わります。公開前には、すべてのブレイクポイントで一覧を確認してください。

指摘された要素へ移動する

一覧の指摘をクリックすると、該当する要素がスクリーン上で選択されます。

  1. 一覧から確認したい指摘をクリックします。

  2. 該当する要素が選択された状態で、スクリーンに表示されます。

別のページやコンポーネント内の要素も、同じ操作で選択できます。表示中のページは自動で切り替わります。

対処方法を確認して修正する

各指摘には、問題の内容と対処方法の候補が表示されます。

  1. 一覧の指摘から個別の項目を選択します。

  2. 該当箇所へ自動で遷移します。

    1. 個別の項目の端から[対処方法を確認]で対象方法を確認することができます。

  3. 右パネルやレイヤーパネルで対処方法に従って設定または変更を行ってください。

  4. 公開パネルでサイトを更新します。この操作を行うまで、公開サイトへは反映されません。

診断結果の更新

修正後は、自動で再診断して解消を確認し、問題が解消されると一覧から指摘が消えます。

診断中も、デザインエディタでの編集は続けられます。

関連記事

こちらの回答で解決しましたか?