この章では、HTML/CSSで作ったページを公開前に確認するためのチェック項目を学びます。
ページが表示されているだけでは、完成とは言えません。
スマホ表示、リンク、画像、フォーム、見出し構造、アクセシビリティ、保守性まで確認します。
表示確認
まずは、基本的な表示を確認します。
確認したい項目は次の通りです。
- PCで大きく崩れていないか
- スマホで横スクロールが出ていないか
- タブレット幅でも読みやすいか
- 文字が小さすぎないか
- 行間が詰まりすぎていないか
- 画像が粗すぎないか
- 余白が不自然に広すぎないか
- 固定ヘッダーが本文を隠していないか
画面幅を変えながら確認します。
特定の幅だけ崩れることもあるため、スマホ、タブレット、PCの代表的な幅だけでなく、途中の幅も少し見ておきます。
HTML構造の確認
HTML構造も確認します。
見た目が合っていても、HTMLの意味が崩れていることがあります。
確認したい項目は次の通りです。
h1はページの主題として使われているか- 見出しレベルが自然か
- 画像に適切な
altがあるか - リンクテキストだけで行き先がわかるか
- 移動は
a、操作はbuttonになっているか - リストは
ulやolで書かれているか - フォームに
labelがあるか
HTMLは、見た目だけでは判断しづらい部分です。
開発者ツールやHTMLのコードを見て確認します。
CSSの確認
CSSは、保守しやすいかも確認します。
確認したい項目は次の通りです。
- 同じような指定が何度も出ていないか
- クラス名のルールが大きく崩れていないか
!importantを多用していないか- 固定幅が多すぎないか
- 余白の数値がばらばらすぎないか
- 不要なCSSが残っていないか
- hoverとfocusの状態があるか
CSSは、公開後にも修正が入ることがあります。
今だけ動けばよいのではなく、あとから直しやすいかも見ます。
リンク確認
リンク切れは、ユーザーの離脱につながります。
公開前に、クリックできる場所を確認します。
- ヘッダーナビゲーション
- フッターナビゲーション
- ボタンリンク
- 画像リンク
- SNSリンク
- 電話リンク
- メールリンク
- 外部リンク
- ページ内リンク
リンク先が仮の#や/dummy/のまま残っていないか確認します。
外部リンクを別タブで開く場合は、rel="noopener noreferrer"も確認します。
画像確認
画像は、表示だけでなく重さや代替テキストも確認します。
- 画像が表示されているか
- ファイル名やパスが正しいか
- 表示サイズに対して大きすぎないか
- ぼやけていないか
- 縦横比が崩れていないか
altが適切か- 装飾画像の
altが空になっているか - 利用権に問題がないか
画像はサイトの印象を大きく左右します。
写真の明るさやトリミングも確認します。
フォーム確認
フォームがある場合は、必ず実際に操作します。
確認したい項目は次の通りです。
- ラベルが表示されているか
- 入力欄がタップしやすいか
- 必須項目がわかるか
- エラー表示がわかりやすいか
- 送信ボタンが押しやすいか
- キーボード操作できるか
- 入力内容に合った
typeになっているか
HTML/CSSだけの段階では送信処理まで作らないこともあります。
それでも、見た目と入力しやすさは確認します。
アクセシビリティ確認
アクセシビリティは、特別な対応として後回しにするものではありません。
基本のHTML/CSSを書く段階から確認します。
- キーボードだけで操作できるか
- フォーカス位置が見えるか
- 色だけで情報を伝えていないか
- 文字と背景のコントラストが弱すぎないか
- リンクとボタンの役割が正しいか
- アイコンだけのボタンに名前があるか
最初から高度なチェックをすべて行う必要はありません。
まずは、基本的な使いにくさを減らします。
ブラウザ確認
ブラウザによって、見た目が少し違うことがあります。
最低限、主要ブラウザで確認します。
- Chrome
- Safari
- Edge
- Firefox
特に、Safariでの表示はChromeと違うことがあります。
MacやiPhoneで確認できる場合は、Safariでも見ておくと安心です。
公開前チェックリスト
公開前には、簡単なチェックリストを使うと抜け漏れを減らせます。
表示:
- PC表示を確認した
- スマホ表示を確認した
- 横スクロールが出ていない
- 文字サイズと余白が読みやすい
HTML:
- 見出し構造を確認した
- 画像のaltを確認した
- リンクとボタンを使い分けている
- フォームにlabelがある
CSS:
- 固定幅で崩れていない
- hoverとfocusを確認した
- 不要な!importantがない
- 余白ルールが大きく崩れていない
リンク・画像:
- リンク切れがない
- 仮リンクが残っていない
- 画像が表示されている
- 画像が重すぎない案件に応じて項目を増やします。
この章のまとめ
- 公開前には、表示、HTML構造、CSS、リンク、画像、フォームを確認する
- スマホ表示では横スクロール、文字サイズ、タップしやすさを見る
- HTMLは、見出し、alt、リンク、フォームラベルを確認する
- CSSは、保守しやすさと不要な上書きも見る
- チェックリストを使うと確認漏れを減らせる