デザインカンプをコードへ落とし込むときの設計と実装の要点

デザインカンプは完成画面の見本ですが、そのままコードへ置き換えれば同じ結果になるわけではありません。画面に見えている余白、文字サイズ、画像の比率、視線の流れには、デザイナーの意図が含まれています。

実装では、見た目を再現するだけでなく、画面幅の変化やコンテンツ量の増減にも対応させる必要があります。静止画に合わせて固定値を積み重ねると、スマートフォンや別のブラウザで簡単に崩れてしまいます。

Webデザインと開発の記録をまとめたMimaの制作記録のように、制作過程を振り返れる形で整理しておくと、カンプから実装へ移る際の判断基準も蓄積できます。

カンプから読み取るべき情報

最初に確認したいのは、要素の配置そのものよりも、レイアウトのルールです。コンテンツの最大幅、左右の余白、グリッドの列数、セクション間の間隔を読み取り、どの値が共通化できるかを考えます。

見出しと本文の間隔がページごとに異なる場合、意図的な差なのか、単なる調整漏れなのかを判断します。分からない部分を推測だけで進めると、後からデザイン修正とコード修正が同時に発生します。

カンプ上の座標をそのまま position: absolute や大量のマージンで再現する方法は、短時間では整って見えます。しかし文章が一行増えたとき、画像が差し替わったときに後続要素との関係が崩れます。

基本は通常の文書フロー、Flexbox、Gridを使い、要素同士の関係で配置します。幅は max-width や割合、余白はCSS変数で管理し、ブレークポイントは端末名ではなくレイアウトが変わる地点で設定すると扱いやすくなります。

PC版とスマートフォン版のカンプが用意されていても、中間サイズの状態まで描かれているとは限りません。ナビゲーションが折り返すのか、メニューへ変わるのか、カードが何列から何列へ変化するのかを、実装前に決めておきます。

レスポンシブデザインでは、単純な縮小ではなく情報の優先順位を保つことが重要です。小さな画面で補足情報を非表示にする場合も、操作や理解に必要な内容まで削らないよう注意します。詳しい確認観点はレスポンシブ対応の記事にも整理されています。

カンプの視覚表現を、意味のあるHTMLと再利用できるコンポーネントへ分解します。見出しは見た目の大きさではなく文書構造で選び、ボタンにはボタン、リンクにはリンクを使うことが基本です。

次のように実装方法を比較すると、装飾と機能を混同しにくくなります。

コンポーネントを細かく分けすぎると、修正箇所の把握が難しくなります。見た目が似ているだけで共通化せず、構造と振る舞いが同じ単位で切り出すことが大切です。

フォントが変わると、同じ文字サイズでも文字幅や行送りが変化します。指定フォントが利用できない場合の代替フォント、ウェイト、行の高さまで確認し、見出しが折り返す位置も複数の画面幅で確認します。

Webフォントを使うときは、読み込み速度や表示前のちらつきにも配慮します。Webフォントの読み込み方法を参考に、必要なウェイトだけを読み込むと初期表示を軽くできます。

画像は表示サイズに合わせた圧縮や遅延読み込みを検討します。width と height を指定しておけば、画像読み込み前に領域が確保され、レイアウトのずれも抑えられます。

実装後は、ブラウザの開発者ツールだけでなく、実機に近い環境で確認します。カンプとブラウザを並べ、全体の印象から細部へ進むと、優先順位をつけて修正できます。

特に確認したいのは、見出しの折り返し、ボタンのタップ領域、長い文章、未入力状態、エラー表示です。完成データだけを使っていると、実際の運用で起きる崩れを見逃します。

デザイン調整のたびに複数ファイルを探す状態は、実装の負担を増やします。色、間隔、角丸、影などのデザイントークンを変数化し、命名から役割が分かるようにしておくと、変更範囲を予測しやすくなります。

カンプとの差分を記録するときは、「少し違う」ではなく、余白が何px違うのか、どの幅で折り返すのかを具体化します。デザイナーと開発者が同じ基準で話せれば、感覚的な修正の繰り返しを減らせます。

コードに落とし込む作業は、画像を似せる工程ではなく、デザインの意図を保ったまま動く仕組みへ変換する工程です。次の制作では、実装前のルール整理と複数画面での検証を取り入れ、再現性のあるフロントエンドを組み立てていきましょう。