【コーディングのチェックリスト】 納品前やポートフォリオ公開前に確認すべき基本項目です。 【表示・デザイン】 ・デザイン案と見比べて、文字サイズや色味に差がないか ・スマホ／タブレット／PC、それぞれでレイアウトが崩れていないか ・意図しない余白や横スクロールが出ていないか 【ブラウザ・端末検証】 ・Chrome / Safari / Firefox / Edge で正しく表示できるか ・Windows・Mac・iPhone・Android・iPad など主要環境で実機確認を行ったか 【テキスト】 ・誤字脱字や不自然な改行がないか ・テスト用の文章が残っていないか 【画像】 ・デザイン通りのものが配置されているか ・JPG / PNG / SVG など形式が適切か ・透かしやダミー画像を使ったままになっていないか ・ファイルサイズは最適化されているか 【動作】 ・ボタンやリンクは全て正しく遷移するか ・ホバー時の変化やアニメーションが指示どおり動いているか ・フォーム入力 → 確認 → 完了まで問題なく進むか ・メール送信（管理者宛／自動返信）が正常に届くか 【ソースコード・SEO】 ・コンソールにエラーは出ていないか ・タグの閉じ忘れや不適切なタグ使用がないか ・見出し階層（h1〜h3など）が論理的に並んでいるか ・画像にはすべてalt属性が入っているか ・title / meta description が設定されているか ・OGPタグやファビコンが正しく設定されているか ・noindex の付け忘れ／消し忘れがないか ・不要なコメントやコードが残っていないか 【HTML/CSS の基本】 ・セマンティックなタグを優先（header / nav / main / section / footer など） ・クラス命名を統一（BEM や FLOCSS など方針を混在させない） ・不要なネストや !important の多用を避ける ・共通コンポーネント（ボタン・カード等）のスタイルが一貫しているか 【スタイル・スクリプトの読み込み】 ・CSS は上位（head）に、JS は原則 defer で読み込み、ブロッキングを避ける ・使っていないライブラリ・プラグインを読み込まない ・開発用の console.log やアラートの消し忘れがないか ・初期化処理は DOM 読み込み後に走っているか（DOMContentLoaded 等） 【パフォーマンスの基本】 ・画像の遅延読み込み（lazy-loading）を適切に設定 ・必要十分な解像度で書き出し、拡大表示での粗さが出ないか確認 ・可能ならモダン形式（WebP など）を併用しつつ、フォールバックを用意 ・CSS/JS のファイル数を最小限にし、重複読み込みを避ける 【フォームの使い勝手】 ・必須項目の明示と、未入力時のエラーメッセージがわかりやすいか ・入力補助（autocomplete、inputmode、type=email/tel 等）が設定されているか ・送信多重防止（連打抑止、二重送信ガード）があるか 【リンク・外部リソース】 ・電話やメールリンク（tel: / mailto:）がスマホで期待通り動作するか 【画像・アイコンの実装補足】 ・img に width / height を指定して CLS（レイアウトシフト）を抑制 一つずつ丁寧にチェックすることで、完成度と信頼性が大きく変わるので、安心して公開できるように、品質管理を習慣にしましょう。