LPは、見た目が近いだけでは完成ではありません。画面幅や操作方法が変わっても内容を読めて、リンクやボタンが正しく動くところまで確認します。
確認する画面幅を先に決める
自分のブラウザ幅だけで確認すると、特定の幅で起きる崩れを見落とします。最小幅、スマートフォン、タブレット付近、PC、広い画面を確認対象にします。
次の図では、「確認する画面幅を先に決める」の仕組みや関係を確認できます。
端末名だけを選ぶのではなく、DevToolsで幅を連続的に動かします。ブレークポイントの直前と直後で、要素が急に重なったり大きな空白ができたりしないか確認してください。
完成見本と大きな差から確認する
最初にページ全体の構成、コンテンツ幅、セクションの高さを見比べます。その後で文字サイズ、余白、色、枠線などの細部を確認します。
細部から直すと、親要素の幅を変更したときにやり直しが増えます。大きなレイアウトから小さな装飾へ進めてください。
完成見本との差を記録してから直す
修正前と修正後を並べると、どの調整が完成見本との差を小さくしたか判断できます。
見つけた差をその場で無計画に直すと、同じ親要素を何度も変更することになります。ページ全体、セクション、部品、細部の順に差を書き出し、関連するものをまとめて修正します。
- コンテンツ幅とセクションの順番
- 横並び・縦並びと要素の大きさ
- 見出し・本文・ボタンの文字
- 余白、境界線、背景、影
- 画像の切り抜きと位置
- ホバー、フォーカス、アニメーション
複数の画面幅で確認する
次の図では、「複数の画面幅で確認する」の仕組みや関係を確認できます。
- 320px前後で横スクロールが発生しない
- 文字やボタンが画面外へはみ出さない
- 画像が縦横比を保って縮小される
- 横並びから縦並びへ変わる位置が不自然でない
- 実機またはタッチ操作でもボタンを押せる
リンクとボタンを役割どおり確認する
別の場所へ移動する操作はリンク、画面内の状態を変える操作はボタンを使います。マウスだけでなくTabキーとEnterキーまたはSpaceキーで操作します。
次の図では、「リンクとボタンを役割どおり確認する」の仕組みや関係を確認できます。
リンク先のURL、ページ内リンクの到着位置、外部リンクの開き方、電話・メールリンクの値を確認します。見た目が同じでも、役割が違えば適切なHTML要素を使ってください。
JavaScriptの状態変化を繰り返し確認する
メニューやアコーディオンは、開く操作だけでなく閉じる操作、連続操作、画面幅を変えた後の状態も確認します。アニメーション終了後に操作できない透明な要素が残らないようにします。
次の図では、「JavaScriptの状態変化を繰り返し確認する」で押さえる違いを左右で比較しています。
JavaScriptが動かない場合でも、本文や主要リンクを読めるHTMLを基本にします。動きは内容を補助するものであり、内容へ到達する唯一の方法にしません。
操作とアクセシビリティを確認する
Tabキーでリンクとボタンを順番に移動し、現在位置が見えることを確認します。画像のalt、フォームのラベル、見出しの順番も確認してください。
ホバーだけで情報を伝えず、フォーカス時にも同じ操作ができる状態にします。
画像と読み込みを確認する
Networkで画像の容量と取得状況を確認します。表示幅に対して極端に大きい画像、同じ画像の重複取得、404、不要な形式がないか見ます。
- 内容を伝える画像に適切なaltがある
- 装飾だけの画像は読み上げの邪魔をしない
- 画像にwidthとheightを設定できる場合は指定する
- 画面幅に合わせて画像がはみ出さない
- 圧縮後も内容を判別できる画質を保つ
DevToolsでエラーと通信を確認する
Consoleに赤いエラーがないこと、NetworkでCSS、JavaScript、画像が正常に取得されていることを確認します。画像が必要以上に大きい場合は、表示サイズに合わせて縮小・圧縮します。
不要なものを削除して保存する
使っていないCSS、JavaScript、画像、確認用のコメントやconsole.logを削除します。最後にもう一度表示を確認し、Gitへ完成状態をコミットします。
公開できる完成状態を作る
確認用の文章、仮リンク、不要なconsole.log、コメントアウトした古いコード、未使用画像を取り除きます。削除後にもう一度ページ全体を確認します。
最後にgit statusと差分を確認し、完成状態をコミットします。STEP 03では、このコミットと同じファイルをサーバーへ公開します。