コーディング

デザインカンプ(カンプ / デザインカンプ)(完成見本の画像)をもとに HTML / CSS / JavaScript を書き起こし、ブラウザで実際に動く Web ページに仕上げる作業です。デザインの忠実な再現だけでなく、スマホ対応(レスポンシブ)、アクセシビリティ(誰もが使いやすい設計)、表示速度、SEOの基礎設定などを両立させる重要な工程です。

Web担当者の正しい立ち位置(検収のコツ)

発注側の担当者にとって大切なのは、具体的なコードの実装には踏み込まず、「納品物の品質チェック」に徹することです。コードを直接いじるとかえって事故を起こしやすいため、以下のポイントで確認すれば十分です。

Lighthouse スコア：Google の無料ツールでページの速度や SEO の基本をチェック(Lighthouse)。
実機・ブラウザ確認：実際のスマホや PC の代表的なブラウザで表示崩れがないか見る。
CV 経路テスト：お問い合わせや購入(コンバージョン(CV))までの導線が正しく動くかテストする。

担当者が「触っていい範囲」と「ダメな範囲」

【OK】触っても安全な範囲：CMS(WordPressなど)の管理画面からのテキスト・画像差し替え、文字色レベルの小さな CSS 調整、簡単な HTML タグ(<p> 段落、<a> リンク、<strong> 強調)の追加。
【NG】業者に依頼すべき範囲：クラス(class)名の変更、レイアウト構造の変更、JavaScript の編集など。「ちょっとだけ」と思って触ると、スマホ表示が崩れる、計測タグが消えるなどの大事故に繋がります。

初心者が陥りやすい罠(落とし穴)

CMS 更新でのルール無視：見出しの階層を勝手に変えたり、過剰な装飾を追加してサイト全体の統一感を崩してしまう。
雑な編集によるシステム破壊：HTML を直接編集して SEO の基本設定(meta / OGP など)を消してしまったり、計測タグや構造化データを壊してしまう。
CSS の !important 多用：無理やりデザインを変えようとして !important(最優先の命令)を多用し、後から誰もメンテナンスできないコード(保守不能)にしてしまう。

言葉をよく利用する人

コーダー / フロントエンドエンジニア
Web 担当者(発注側)
デザイナー
ディレクター

会話上での使用例

ボタンの色だけ自分で直していいか、ディレクターに確認する場面

Web担当者
ボタンの色を1箇所だけ変えたいんですが、コーディングを直接いじってしまっていいですか。
ディレクター
そこはCMS経由か、こちら業者経由でやらせてください。CSSを直接触ると、思わぬ箇所に影響が出たり、色の管理がバラバラになったりしがちなんです。色を変数で一括管理する作りにしておけば、1箇所変えるだけで全体に反映できますよ。
Web担当者
分かりました。じゃあ変数で管理する形にしてもらえると助かります。

納品されたページがスマホ実機で崩れていた場面

Web担当者
実機のスマホで見ると、料金表が縦並びになってカラムの幅が崩れています。確認してもらえますか。
コーダー
失礼しました。メディアクエリのコーディングでブレイクポイントの設定にミスがありました。テスト環境のブラウザでは再現しなくて、特定の端末でだけ出る問題でした。修正版をすぐ反映します。