デスクトップとモバイルの間にある幅
ナビゲーションバーが広いデスクトップ画面には収まり、スマートフォンではコンパクトなメニューに切り替わっても、その中間の幅では不自然に折り返すことがあります。2列のフォームでも、ブレークポイントが切り替わる前にラベルが窮屈になるかもしれません。両端のスクリーンショットだけでは、この間の状態は分かりません。
コンテンツが使いにくくなる境目の幅まで画面を変えてみましょう。よくある端末の幅で問題がないかではなく、コンテンツが収まらなくなったときにレイアウトが適切に対応できるかを確認します。
理想的なラベルを実際にありそうな内容に置き換える
長い組織名、翻訳されたラベル、画像がない状態、サンプルより大幅に大きい値を試してみましょう。どれも特別な例外ではなく、通常起こり得るコンテンツの状態です。短いテキストや完全なデータに依存していた箇所を見つけられます。
テキストを折り返すか、省略するか、別の行へ移すかを意図的に決めましょう。装飾的な説明文を省略しても問題ない場合はありますが、2つのアカウント名を区別する部分が隠れると、正しいアカウントを選べなくなることがあります。
段組みが縦に並んでも要素の関係を保つ
画面が広いときは、説明文が対象のコントロールの横に配置されているかもしれません。縦に並べた結果、別のセクションが間に入ることがあります。すべての要素が画面内にあるかだけでなく、狭い画面を上から下へ読み進めて確認しましょう。
文字を拡大した状態やズームも確認しましょう。固定ヘッダーや画面に固定された操作バーによって、使える領域が狭くなることがあります。コンテンツがすべて存在するだけでは、読めることや次の操作に進めることの証明にはなりません。
ブレークポイントだけでなく、問題の内容を説明する
意図的に横スクロールする比較表と、ページ全体を横へ押し出す段落は別の問題です。どの領域がはみ出すのか、何が使いにくくなるのか、再現に使ったコンテンツを説明しましょう。そうすれば、「はみ出しを隠す」という変更で重要な情報まで見えなくなるのを防げます。
具体的な引き継ぎには、たとえば「この幅で組織名を省略せず表示すると、アカウント選択欄が保存ボタンに重なる」と書けます。次の担当者は「モバイル表示が崩れる」という曖昧な説明から推測せずに状態を再現し、要素同士の関係が直ったか確認できます。