サイト制作実践 ― 「動く」と「仕事になる」の差

1. ラベルと入力欄を正しくつなぐ

   <label for="email">メールアドレス (必須)</label>
   <input type="email" id="email" required>

   for と id をそろえると、ラベルのクリックで入力欄が選ばれ、読み上げソフトにも正しく伝わります。
2. typeとrequiredを使い切るtype="email" は形式チェックを、required は必須チェックを、ブラウザが無料でやってくれます。電話は type="tel"、日付は type="date" です。
3. 送信を受け止める

   document.querySelector("form").addEventListener("submit", (e) => {
     e.preventDefault(); // ページの再読み込みを止める
     // ここで追加の検査と「送信しました」表示
   });

4. エラーメッセージを「直し方つき」にするお名前が空のときは、欄のそばに「お名前を入力してください (例: 山田太郎)」。どこを・どう直すかまで言うのが親切なフォームです。
5. 成功も伝える送信できたら「送信しました。3日以内に返信します」。利用者を結果がわからないまま放置しないのが、最後の品質です。

お題: 自分のフォームに対して「空のまま送信 / メール形式の誤り / 全部正しい」など、試す操作の一覧表 (検査ケース表) を作り、1つずつ実行して結果を記録します。

1. 検査する自分の過去作品 (模写LPなど) を開き、F12 → 「Lighthouse」タブ → カテゴリで「Accessibility」を選んで「Analyze page load」をクリックします。
2. 指摘を読む100点満点の点数と、減点の理由が一覧で出ます。よく出る指摘は「画像にaltがない」「コントラスト不足」「ラベルのないフォーム部品」です。
3. altを書く<img src="pan.png" alt="焼きたてのメロンパン"> ― 画像が見えない人に読み上げられる説明文です。飾り画像なら alt="" (空) にして「読み飛ばしてよい」と伝えます。
4. キーボードで一周するマウスを置いて、Tab キーだけでページの全リンク・全ボタンにたどり着けるか試します。たどり着けない部品は、divをボタン代わりにしている場所です。button タグに直しましょう。
5. 再検査する直したらもう一度Lighthouseを回します。点数が上がる体験は、純粋に楽しいです。90点以上を目指しましょう。

お題: ユニット1〜3で公開した自分の作品すべてにLighthouseのアクセシビリティ検査をかけ、90点以上にそろえます。直した内容はコミットメッセージに残しましょう。

1. 現状を測るLighthouseの「Performance」で自分の作品を採点し、画像関連の指摘を確認します。
2. サイズを合わせる幅400pxで表示する画像に、幅4000pxの写真はいりません。無料ツール「Squoosh」(squoosh.app、ブラウザで動きます) で、表示幅の2倍程度にリサイズ + 圧縮します。1枚やってみて、ファイルサイズが何分の1になるか記録しましょう。
3. 遅延読み込みをつける画面の下の方にある画像には <img loading="lazy" …> をつけます。スクロールで近づくまで読み込まれなくなる、1単語の最適化です。
4. 幅と高さを書く<img width="400" height="300" …> のように寸法を書いておくと、読み込み中にレイアウトがガタッとずれる現象 (これも減点対象です) を防げます。
5. 再計測するLighthouseをもう一度回して、点数とファイルサイズの変化を記録します。数字で語れる改善は、ポートフォリオの良い材料になります。

1. フォルダ構成を決める定番はこの形です。

   mysite/
     index.html
     menu.html
     access.html
     contact.html
     css/style.css
     js/app.js
     img/ (画像は全部ここ)

   CSSとJSは全ページでこの1つずつを共有します。
2. 共通部品を最初に完成させるヘッダー・ナビ・フッターを最初の1ページで完成させ、他のページへコピーします。後から直すときは全ページ直すと決めておきます (ナビの正本はindex.htmlと宣言しておくと迷いません)。
3. 命名規則を3行で決める例:「クラス名は英小文字とハイフン (menu-list)」「ページ固有の装飾には接頭辞 (contact-form)」「色とサイズはCSS変数 (:root) にまとめる」。決めたらメモとしてリポジトリに入れます (README.mdの始まりです)。
4. リンク総点検の習慣ページを足したら、全ページのナビから新ページへ行けるか・新ページから帰れるかを一周して確かめます。