FigmaのデザインカンプからHTMLになるまでの流れ

「デザインはできたけれど、これをどうやってWebページにするの？」

LP（ランディングページ）制作のご相談をいただくとき、よく出てくる疑問です。Figmaで作られたきれいなデザインカンプが、実際に動くWebページになるまでには、いくつかの工程があります。今回はその流れを、専門用語をなるべくかみくだいてご紹介します。発注する側として「いま何の作業をしているのか」がイメージできると、やり取りがスムーズになります。

■ そもそも「デザインカンプ」とは

デザインカンプは、完成イメージを描いた設計図のようなものです。Figmaというツールで作られることが多く、色・文字の大きさ・余白・画像の配置などが、ピクセル単位で決められています。

ただし、この時点ではまだ「絵」です。ボタンを押しても反応しませんし、スマホで見たときに自動で形が変わることもありません。ここに命を吹き込んで、ブラウザで表示できる状態にするのがコーディングという工程です。

■ ステップ1：カンプを隅々まで読み解く

最初にやるのは、デザインカンプをじっくり観察することです。使われている色のコード、見出しや本文の文字サイズ・書体・行間、要素どうしの余白、画像の書き出しが必要な箇所、そしてスマホ表示時にどう並び替わるか。こうした点を一つずつ確認します。

Figmaは数値を正確に読み取れるので、ここでの拾い漏れを減らすことが、後工程の手戻りを抑えるポイントになります。スマホ版のカンプが用意されていない場合は、この段階で「スマホではどう見せたいか」をすり合わせておくと安心です。

■ ステップ2：必要な素材を書き出す

写真やロゴ、アイコンなどの画像素材を、Webに適した形式で書き出します。最近はPNGやJPEGに加えて、容量が軽く表示がきれいなWebP、拡大しても劣化しないSVG（ロゴやアイコン向き）を使い分けます。

画像が重いとページの表示が遅くなり、見ている人が離脱しやすくなります。見た目の美しさを保ちながら、ファイルサイズをできるだけ抑えるバランスを意識して書き出していきます。

■ ステップ3：HTMLで「骨組み」を作る

ここからが本格的なコーディングです。まずHTMLで、ページの構造（骨組み）を組み立てます。

HTMLは「ここは見出し」「ここは段落」「ここは画像」といったように、各パーツの役割を決めていく言語です。見た目を整える前に、まず中身の意味を正しく組むことが大切です。役割を正しく指定しておくと、検索エンジンに内容が伝わりやすくなったり、読み上げソフトを使う方にも内容が届きやすくなったりします。

■ ステップ4：CSSで「見た目」を整える

骨組みができたら、CSSで色・余白・文字組み・配置を指定して、カンプの見た目に近づけていきます。この工程で、ただのテキストの羅列だったページが、一気にデザインカンプそっくりの姿になっていきます。

このとき同時に進めるのがレスポンシブ対応です。パソコン・タブレット・スマホと、画面の幅に応じてレイアウトが自動で切り替わるように作り込みます。いまはスマホからの閲覧が多いため、スマホで見たときの読みやすさは特に丁寧に調整します。

■ ステップ5：動きをつける

スクロールに合わせてふわっと表示される演出や、メニューの開閉、画像の切り替わりなど、ちょっとした動きをつけたい場合はこの段階で実装します。動きは多すぎると逆に読みづらくなるので、目的に合わせて控えめに添えるのがコツです。

お問い合わせフォームや、料金シミュレーター、予約機能といった「入力して送信する」仕組みが必要な場合も、ここで組み込んでいきます。

■ ステップ6：表示チェックと微調整

最後に、いろいろな環境で正しく表示されるかを確認します。パソコンとスマホの両方で崩れていないか、ChromeやSafariなどブラウザによって見え方が変わらないか、リンクやボタンがきちんと機能するか、表示の速さに問題がないか。こうした点を一つずつチェックします。

デザインカンプとブラウザでは、文字の見え方などにわずかな差が出ることがあります。その差を一つずつ詰めていき、違和感のない状態に仕上げて納品となります。

■ 発注する側として知っておくと役立つこと

この流れを知っておくと、制作を依頼するときに準備がしやすくなります。

まず、Figmaのカンプがあると話が早く進みます。手書きのラフやパワーポイントの資料からでも制作は可能ですが、デザインが固まっているほど、認識のズレが起きにくくなります。

次に、スマホ版のイメージを共有できると仕上がりが安定します。パソコン版だけだと、スマホでの並びを制作側で判断することになり、希望と違う見え方になることがあるためです。

そして、フォームや予約機能のように「入力して送る」仕組みが必要かどうかを、早めに伝えておくと見積もりがスムーズです。表示するだけのページと、機能が付くページとでは、作業のボリュームが変わってくるからです。

■ まとめ

Figmaのデザインカンプが実際のWebページになるまでには、「読み解く → 素材を書き出す → 骨組みを作る → 見た目を整える → 動きをつける → チェックする」という工程があります。

一見すると地味な作業の積み重ねですが、ここを丁寧に進めることで、デザインの良さをそのままブラウザ上に再現できます。LP制作をご検討の際に、この記事が全体像をつかむ助けになればうれしいです。ご相談はお気軽にどうぞ。