デザイン品質
ウェブサイトをスマートフォン、タブレット、デスクトップの幅でスキャンして、レイアウト、コントラスト、ラベル付けの問題を検出し、すべてのスキャンを承認済みのベースラインと比較します。
このページは英語から翻訳されたものです。内容に相違がある場合は、英語版が優先されます。 英語版を読む
Atlas は、開発環境のウェブサイトを実際のブラウザーで幅 375、768、1440 ピクセルで開き、デザイン上の問題を検出して、スキャンごとに 0 から 100 のスコアを付けます。また、承認したベースラインとスクリーンショットを比較するため、想定外の見た目の変化が目立ちます。
スキャンを実行する
Section titled “スキャンを実行する”-
Search & health → Website health を開き、Design quality タブを表示します。
-
Scan website をクリックします。Atlas は最大 5 ページをチェックします。No Development website address と表示された場合は、先に Open settings からアドレスを追加してください。
-
Latest scan で結果を確認します。Blockers、Warnings、Pages、Changed from baseline です。Screen width と Page を選ぶと、そのページの問題が表示されます。
-
Baseline と This scan を並べて比較します。各問題には Suggested fix (not applied automatically) が付きます。
-
スキャンの結果が問題なければ、Accept as baseline をクリックします。以降のスキャンは、それと比較されます。
チェックする内容
Section titled “チェックする内容”- 画面より幅の広いコンテンツ、切れたテキスト、重なり合った要素。
- スマートフォンでタップ対象が小さすぎるもの。
- コントラストが不足しているテキスト。
- アクセシブルなラベルのないボタン、リンク、フィールド。
Recent scans には、過去のスキャンが、スコア、問題の件数、ベースラインかどうかとともに表示されます。
- 環境ごとに同時に実行できるスキャンは 1 つ、1 時間あたり最大 6 回。
- 開発環境のウェブサイトのみ。
- 修正は提案です。Atlas がウェブサイトを変更することはありません。