【コーディングのチェックリスト】 納品前やポートフォリオ公開前に確認すべき基本項目です。 【表示・デザイン】 ・デザイン案と見比べて、文字サイズや色味に差がないか ・スマホ/タブレット/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(レイアウトシフト)を抑制 一つずつ丁寧にチェックすることで、完成度と信頼性が大きく変わるので、安心して公開できるように、品質管理を習慣にしましょう。