模写コーディングとデザインカンプ

はじめに

Web制作のスキルアップにおいて、誰もが一度は通る「模写コーディング」。
ただ既存のサイトを目で見て真似るだけでなく、プロの現場に近い環境である「デザインカンプ（設計図）」からの模写を行うことで、実戦に直結する多くの気づきがありました。

今回は、自分が実際に取り組んだ際の手順や、つまずきやすいポイント、効率化のためのコツを「備忘録」としてブログにまとめました。
これからコーディングの練習を始める方の参考になれば幸いです。

まずは、今回扱う2つの重要な言葉の定義をおさらいしておきます。

「Design Comprehensive」の略で、Webサイトの「完成見本（設計図）」のことです。
主にデザイナーがFigma、Adobe XD、Photoshopなどのツールを用いて作成します。
文字の大きさ、カラーコード、余白（マージン）などがピクセル単位で厳密に指定されているのが特徴です。

実際のWeb制作の仕事では、デザインカンプを元に寸分違わず再現する「ピクセルパーフェクト」なコーディングスキルが求められます。
インターネット上のサイトを単に目視で真似るだけでは、正確な数値が分かりません。
カンプから直接数値を読み取って実装する練習こそが、実務に最も近いトレーニングになります。

デザイン全体の分析（構造把握）
- コーディングを始める前に、まずは全体のレイアウト（1カラム、2カラム、グリッド配置など）を把握します。
- 共通パーツ（ボタンのスタイル、見出しのデザイン、サイトのメインカラー、フォントなど）をあらかじめ洗い出しておきます。
HTMLのコーディング（骨組み作り）
- header、main、footer、sectionなどのセマンティックなタグを使い、正しい文書構造を作ります。
- CSSでレイアウトを組みやすくするために、クラス名の命名規則（BEMなど）を意識してマークアップします。
CSSのコーディング（装飾と配置）
- カンプ（Figmaの開発者モードなど）からカラーコードや余白の数値を正確に読み取ります。
- FlexboxやCSS Gridを積極的に活用し、デザイン通りの配置を行っていきます。
レスポンシブ対応（スマホ表示）
- PC表示が崩れないように注意しつつ、メディアクエリ（@media）を用いてスマートフォンやタブレット向けの表示を整えます。
検証とブラウザチェック
- デベロッパーツールを活用し、実機に近いサイズで崩れがないか、カンプとズレていないかを厳密にチェックして修正します。

実際に手を動かしてみて、特に重要だと感じた「つまずきポイント」と対策です。

「なんとなくこれくらいかな」と感覚で余白を空けるのは厳禁です。カンプの数値を測定すると、デザイナーが一定のルール（例えば8pxの倍数など）で余白を設定していることに気づきます。これらを共通のCSS変数（カスタムプロパティ）や共通クラスにしておくと、全体のコードがスッキリして管理しやすくなります。

カンプから素材を書き出す際、以下のルールを徹底することで、サイトの軽量化や画質保持に繋がります。

カンプで使用されているフォントが標準フォントでない場合、文字の幅が変わって全体のレイアウトが微妙にズレる原因になります。必ずコーディングの初期段階でGoogle Fontsなどの読み込み設定を済ませておくのが鉄則です。

デザインカンプからの模写コーディングを経験したことで、ただコードを書くだけでなく、「デザイナーがどういう意図でこの余白やフォントサイズを設定したのか」という視点を持てるようになりました。

今後は、さらなるコーディングのスピードアップを目指すとともに、JavaScriptを用いたアニメーション（動きのあるパーツ）の実装にも挑戦していきたいと思います！