品質を確認して完成させよう
コードを書き終えた時点は、制作の終了ではありません。完成見本、仕様、利用者の操作を基準に確認し、見つけた問題を修正します。
このLessonのゴール
- 表示・操作・コードを順番に確認できる
- 問題を再現し、原因を調べて修正できる
- 自分の制作物と確認内容を説明できる
1. 内容を確認する
- 見出しや文章に抜けがない
- 商品名、価格、日付、店舗情報が仕様と一致している
- 画像と代替テキストの内容が一致している
- リンク先が正しい
2. レイアウトを確認する
- 375px、768px、1024px、1440pxで崩れない
- 画像の縦横比が崩れていない
- 意図しない横スクロールがない
- 文章が読みやすい幅と行間になっている
- セクション間の余白に一貫性がある
3. 操作を確認する
- ページ内ナビゲーションが正しい位置へ移動する
- スマートフォンメニューを開閉できる
- Tabキーでリンクとボタンを順番に選択できる
- フォーカス中の要素を目で確認できる
- スクロール表示が途中で止まらない
4. 開発者ツールを確認する
Consoleにエラーがないこと、NetworkでHTML、CSS、JavaScript、画像を取得できていることを確認します。問題がある場合は、最初に表示されたエラーから1つずつ解決します。
5. 完成見本と比較する
「PC 1440px」「SP 375px」ボタンを切り替え、自分の制作物も同じ画面幅にして比較してください。
完全なピクセル一致だけを目標にしません。次の順番で差を確認します。
- 内容の抜け
- 大きなレイアウト
- 文字と画像の大きさ
- 余白
- 色や境界線などの細部
提出時にまとめるもの
- 制作物のURLまたはファイル一式
- 対応した画面幅
- 実装した機能
- 工夫した点
- 解決できなかった点
- 自分で行った確認内容
完了条件
- 内容、レイアウト、操作、開発者ツールの確認を行った
- 見つけた問題を1つ以上修正した
- PCとスマートフォンの両方で完成条件を満たした
- 制作物と確認内容を他の人へ説明できる
まとめ
With Caféの1ページサイトが完成しました。次のLevelではGSAPを使い、現在のCSSとJavaScriptだけでは作りにくい、滑らかで管理しやすいアニメーションへ発展させます。