見出し画像

初めてデザインデータを受け取ったら確認すること｜コーディング前に見るべきポイントを解説

コーディング犬

はじめに

Web制作の現場では、デザイナーからFigmaやAdobe XD、Photoshop、Illustratorなどのデザインデータを受け取り、
それをもとにHTML/CSSでコーディングしていくことがあります。

特に最近では、Figmaでデザインデータを受け取るケースが増えています。

しかし、初めてデザインデータを受け取ったとき、

「まず何を確認すればいいの？」
「どこから見ればいいの？」
「画像はどう書き出せばいい？」
「フォントや余白はどう確認する？」
「PC版とスマホ版の違いはどこを見る？」

と迷う方も多いのではないでしょうか。

デザインデータを受け取ったら、いきなりコーディングを始めるのではなく、まず全体を確認することが大切です。

最初の確認をしないまま作業を進めると、後から「スマホ版があった」「このデザインは古かった」
「画像が未確定だった」「フォントがWebで使えなかった」といった問題が起こることがあります。

この記事では、初めてデザインデータを受け取ったときに確認すべきポイントを、
コーダー・Web制作者向けにわかりやすく解説します。

まず最新データか確認する

最初に確認すべきなのは、受け取ったデザインデータが最新かどうかです。

実務では、デザインデータの中に複数の案が入っていることがあります。

例えば、

  • 初稿

  • 修正案

  • 確認用

  • 古いデザイン

  • 採用案

  • 没案

  • PC版

  • スマホ版

  • ワイヤーフレーム

  • 実装用デザイン

などが同じFigmaファイル内に残っていることもあります。

そのため、コーディングを始める前に「どのフレームを実装すればいいのか」を必ず確認しましょう。

特にFigmaでは、1つのファイル内にページが複数あり、その中に多くのフレームが並んでいることがあります。

「これが一番きれいに見えるから最新だろう」と自己判断するのは危険です。

必ず、ディレクターやデザイナーに、

「実装対象はこのフレームで合っていますか？」

と確認してから進めると安心です。

PC版とスマホ版があるか確認する

次に確認したいのが、PC版とスマホ版のデザインです。

Webサイトはレスポンシブ対応が基本なので、PCだけでなくスマホでの表示も考える必要があります。

デザインデータを受け取ったら、まず以下を確認しましょう。

  • PC版デザインはあるか

  • スマホ版デザインはあるか

  • タブレット版は必要か

  • PCとスマホでレイアウトが変わる箇所はどこか

  • スマホ版で非表示になる要素はあるか

  • スマホ版だけに表示される要素はあるか

PC版だけを見てコーディングを進めてしまうと、後からスマホ版で大きな手戻りが発生することがあります。

例えば、PCでは横並びだったカードが、スマホでは縦並びになることがあります。

PCではヘッダーのナビゲーションが横並びでも、スマホではハンバーガーメニューになることがあります。

また、PCでは表示されている画像が、スマホでは別画像に差し替わっている場合もあります。

そのため、最初にPC版とスマホ版の両方を確認し、どのようにレイアウトが変化するのかを把握しておきましょう。

ページ数と対象範囲を確認する

デザインデータを受け取ったら、コーディング対象のページ数も確認しましょう。

例えば、以下のようなページが含まれていることがあります。

  • トップページ

  • 会社概要

  • サービス一覧

  • サービス詳細

  • お知らせ一覧

  • お知らせ詳細

  • 採用情報

  • お問い合わせ

  • プライバシーポリシー

すべてのページをコーディングするのか、一部だけなのかを最初に確認しておくことが大切です。

また、WordPress案件の場合は、静的ページだけでなく、
投稿一覧や詳細ページ、カスタム投稿、カテゴリーページなども関係します。

例えば、

「トップページと固定ページだけ」
「お知らせ一覧と詳細も必要」
「カスタム投稿の詳細ページは不要」
「フォームは既存プラグインを使用」

など、実装範囲を明確にしておくと後のトラブルを防げます。

デザインデータに載っているからといって、すべてが今回の実装対象とは限りません。

必ず、契約範囲や指示内容と照らし合わせて確認しましょう。

フォントを確認する

デザインデータを受け取ったら、使用されているフォントも確認しましょう。

Figma上ではきれいに表示されていても、Webサイトでそのフォントを使うには、
Webフォントとして読み込む必要がある場合があります。

確認すべきポイントは以下です。

  • 使用フォント名

  • Google Fontsか

  • Adobe Fontsか

  • 有料フォントか

  • 日本語フォントか

  • Webで使用可能か

  • 必要な太さが揃っているか

例えば、Figmaで「Noto Sans JP」が使われている場合、Google Fontsから読み込めます。

一方、商用フォントや特殊なフォントが使われている場合は、Web利用ライセンスが必要になることもあります。

また、フォントウェイトも重要です。

デザイン上でRegular、Medium、Boldなどが使われている場合、実装側でも必要なウェイトを読み込む必要があります。

フォントが正しく読み込まれていないと、ブラウザ上では別のフォントに置き換わり、
デザインの印象が変わってしまいます。

コーディング前に、使用フォントとWeb利用の可否を確認しておきましょう。

文字サイズ・行間・文字間を確認する

フォント名だけでなく、文字サイズや行間も確認が必要です。

デザイン再現で重要なのは、以下のような情報です。

  • font-family

  • font-size

  • font-weight

  • line-height

  • letter-spacing

  • color

特に見落としやすいのがline-heightです。

フォントサイズが合っていても、行間が違うと見た目の印象は大きく変わります。

例えば、Figma上で本文が16px、行間が28pxだった場合、CSSでは以下のように書けます。

.text {
  font-size: 16px;
  line-height: 1.75;
}

また、見出しにletter-spacingが設定されている場合もあります。

日本語の見出しでは、少し文字間を広げることで読みやすくなる場合があります。

Figmaの数値を確認しながら、CSSに正しく落とし込みましょう。

色を確認する

デザインデータでは、色の確認も重要です。

確認する主な色は以下です。

  • メインカラー

  • サブカラー

  • アクセントカラー

  • テキストカラー

  • 背景色

  • ボタンカラー

  • リンクカラー

  • 線の色

  • hover時の色

Figmaでは、要素を選択するとカラーコードを確認できます。

ただし、似たような色が複数使われている場合には注意が必要です。

例えば、黒に見える色でも、

#111111
#222222
#1A1A1A
#333333

のように微妙に違う色が混在していることがあります。

これが意図的な使い分けなのか、作業中のズレなのか確認しましょう。

実装時には、主要カラーをCSS変数として管理すると便利です。

:root {
  --color-main: #005BAC;
  --color-text: #222222;
  --color-bg: #ffffff;
  --color-accent: #F5A623;
}

色をルール化しておくと、後から修正が入ったときにも対応しやすくなります。

余白を確認する

Webデザインの再現でとても重要なのが余白です。

余白には、以下のような種類があります。

  • セクション上下の余白

  • コンテンツ左右の余白

  • 見出しと本文の間

  • 画像とテキストの間

  • カード同士の間隔

  • ボタンの内側の余白

  • フォーム項目同士の間隔

Figmaでは、要素を選択した状態で、MacならOptionキー、
WindowsならAltキーを押しながら別の要素にカーソルを合わせると、要素間の距離を確認できます。

Auto Layoutが使われている場合は、右側パネルでpaddingやgapを確認できます。

実装では、確認した余白をmargin、padding、gapとしてCSSに落とし込みます。

例えば、カード同士の余白が32pxなら、以下のように書けます。

.card-list {
  display: grid;
  gap: 32px;
}

カードの内側の余白が24pxなら、以下のように書けます。

.card {
  padding: 24px;
}

ただし、Figmaで確認した余白をすべてmarginで処理するのはおすすめしません。

内側の余白はpadding、並びの間隔はgap、外側の余白はmarginというように、役割に応じて使い分けましょう。

コンテンツ幅を確認する

Webサイトでは、コンテンツの最大幅も重要です。

例えば、PC版で中央のコンテンツ幅が1120pxや1200pxに設定されていることがあります。

確認すべきポイントは以下です。

  • 全体幅

  • コンテンツ最大幅

  • 左右余白

  • セクションごとの幅

  • 背景だけ全幅か

  • 中身だけ中央寄せか

例えば、背景色は画面幅いっぱいに広がっていて、
中のコンテンツだけ1120pxで中央寄せになっているケースがあります。

CSSでは以下のように実装できます。

.section {
  background: #f7f7f7;
  padding: 100px 0;
}

.section__inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 20px;
}

このように、背景と中身の幅を分けて考えることが大切です。

Figma上で見た目だけを見るのではなく、どの範囲が全幅で、どの範囲がコンテンツ幅なのかを確認しましょう。

画像の書き出し対象を確認する

デザインデータには、写真やイラスト、アイコン、背景画像などが含まれていることがあります。

コーディング前に、どの画像を書き出す必要があるか確認しましょう。

主な確認対象は以下です。

  • メインビジュアル

  • サービス画像

  • 人物写真

  • ロゴ

  • アイコン

  • 背景画像

  • 装飾画像

  • SNSアイコン

  • OGP画像

ただし、デザイン内にあるものをすべて画像として書き出すわけではありません。

例えば、単純な背景色、線、角丸、ボタン、テキストなどはCSSで再現できます。

一方で、写真、複雑なイラスト、ロゴ、アイコンなどは画像として書き出すことが多いです。

画像形式も使い分けましょう。

  • 写真：JPG、WebP

  • 透過画像：PNG

  • アイコン：SVG

  • ロゴ：SVGまたはPNG

  • 複雑な装飾：PNG

画像を書き出す前に、どの素材が必要か整理しておくと、実装がスムーズになります。

アイコンの形式を確認する

アイコンは、Web制作ではSVGで扱うことが多いです。

検索アイコン、矢印アイコン、電話アイコン、メールアイコン、
SNSアイコンなどは、SVGで書き出すと拡大縮小しても劣化しにくく、CSSでサイズ調整もしやすいです。

ただし、複雑なグラデーションや装飾が入ったアイコンは、PNGの方が扱いやすい場合もあります。

確認すべきポイントは以下です。

  • SVGで書き出せるか

  • PNGで書き出す必要があるか

  • サイズは統一されているか

  • 色はCSSで変更するか

  • hover時に色が変わるか

アイコンのサイズがバラバラだと、実装時に中央揃えやレイアウト調整が難しくなります。

Figma上で24px、32pxなど、一定のサイズに揃っているか確認しましょう。

hoverや状態違いを確認する

デザインデータには、通常状態だけでなく、hoverやactive、disabledなどの状態が用意されている場合があります。

特に確認したいのは以下です。

  • ボタンのhover

  • リンクのhover

  • メニューの開閉状態

  • フォームの入力状態

  • フォームのエラー状態

  • チェックボックスの選択状態

  • アコーディオンの開閉状態

  • モーダル表示

  • ハンバーガーメニュー展開時

通常状態だけを見て実装すると、後から「hover時はこの色にしてください」
「フォームエラー時の見た目が必要です」と追加修正になることがあります。

Figma内に状態違いがあるか確認し、なければ事前に確認しておくと安心です。

特にボタンやリンクのhoverは、実装時にほぼ必要になります。

デザインで指定がない場合は、コーダー側で自然なhoverを作ることもありますが、案件によっては事前確認が必要です。

コンポーネントや共通パーツを確認する

Figmaでは、ボタンやカード、ヘッダー、フッターなどがコンポーネント化されていることがあります。

コンポーネントとは、再利用できる共通パーツのことです。

デザインデータを受け取ったら、どのパーツが共通化されているか確認しましょう。

例えば、

  • ボタン

  • 見出し

  • カード

  • CTA

  • お知らせ一覧

  • FAQ

  • フォーム

  • ヘッダー

  • フッター

などです。

同じデザインが複数ページで使われている場合、CSSでも共通クラスとして設計すると管理しやすくなります。

例えば、共通ボタンなら以下のように実装できます。

.c-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border-radius: 999px;
  background: var(--color-main);
  color: #fff;
}

コンポーネントを確認することで、デザイン上の共通ルールを把握しやすくなります。

フォーム項目を確認する

お問い合わせフォームや予約フォームがある場合は、フォーム項目も必ず確認しましょう。

確認すべきポイントは以下です。

  • 入力項目

  • 必須項目

  • 任意項目

  • プレースホルダー

  • ラジオボタン

  • チェックボックス

  • セレクトボックス

  • textarea

  • 送信ボタン

  • エラー表示

  • 完了画面

  • 確認画面の有無

WordPress案件の場合、Contact Form 7などのプラグインを使うこともあります。

デザイン通りにフォームを作れるか、プラグイン側の仕様と合うかも確認が必要です。

また、フォームのエラー表示や送信完了メッセージがデザインに含まれていない場合は、
事前に確認しておくと後から慌てずに済みます。

アニメーションや動きの有無を確認する

デザインデータは静止画であることが多いですが、実際のWebサイトでは動きが必要な場合があります。

例えば、

  • スライダー

  • フェードイン

  • アコーディオン

  • タブ切り替え

  • モーダル

  • ハンバーガーメニュー

  • スクロールアニメーション

  • fixedヘッダー

  • hoverアニメーション

などです。

Figma上では見た目しか表示されていなくても、仕様書やコメントに動きの指示が書かれている場合があります。

実装前に、必要なJavaScriptの有無も確認しておきましょう。

特にスライダーやアコーディオン、モーダルはHTML構造にも関係するため、早めに把握しておくことが大切です。

コメントや修正指示を確認する

Figmaでは、デザイン上にコメントが残っていることがあります。

コメントには、クライアントやディレクター、デザイナーからの修正指示や補足が書かれている場合があります。

例えば、

  • この文言は仮です

  • 画像は差し替え予定です

  • このセクションは非表示になります

  • スマホ版は調整中です

  • リンク先未定です

  • ここはアニメーション予定です

といった内容です。

コメントを確認せずに実装すると、未確定の内容をそのまま反映してしまう可能性があります。

デザインデータを受け取ったら、コメントが残っていないか、解決済みかどうかを確認しましょう。

不明点をまとめて確認する

デザインデータを確認していると、不明点が出てくることがあります。

その場で何度も細かく質問するより、ある程度まとめて確認するとスムーズです。

例えば、

  • 使用フォントはWeb利用可能か

  • hoverデザインは指定ありか

  • スマホ版がないページはPC版から調整でよいか

  • 画像はFigmaから書き出してよいか

  • フォームの完了画面は必要か

  • このデザインが最新版で合っているか

  • このセクションは実装対象か

などです。

不明点を放置したまま進めると、後から大きな修正になることがあります。

「たぶんこうだろう」で進めず、早めに確認することが大切です。

コーディング前のチェックリスト

デザインデータを受け取ったら、以下のチェックリストを使うと便利です。

□ 最新デザインか確認した
□ 実装対象のページを確認した
□ PC版とスマホ版を確認した
□ ページ数と実装範囲を確認した
□ 使用フォントを確認した
□ 文字サイズ・行間・文字間を確認した
□ 色のルールを確認した
□ 余白を確認した
□ コンテンツ幅を確認した
□ 画像の書き出し対象を確認した
□ アイコン形式を確認した
□ hoverや状態違いを確認した
□ フォーム項目を確認した
□ アニメーションや動きの有無を確認した
□ コメントや修正指示を確認した
□ 不明点をまとめて確認した

このチェックを最初に行うだけで、コーディング中の迷いや手戻りをかなり減らせます。

まとめ

初めてデザインデータを受け取ったときは、いきなりコーディングを始めるのではなく、
まず全体を確認することが大切です。

最初に、どのデザインが最新版なのか、どのページが実装対象なのか、PC版とスマホ版が揃っているのかを確認しましょう。

そのうえで、フォント、色、余白、画像、アイコン、hover、フォーム、
アニメーション、コメントなどを順番に見ていきます。

デザインデータは、ただ見た目を再現するための資料ではありません。

Webサイトの構造、ルール、素材、動き、確認事項が詰まった重要な情報源です。

最初の確認を丁寧に行うことで、コーディングの精度が上がり、修正漏れや認識違いも減らせます。

特に初心者の方は、以下の流れを意識すると迷いにくくなります。

1. 最新データか確認する
2. PC版とスマホ版を見る
3. 実装範囲を確認する
4. フォント・色・余白を見る
5. 画像やアイコンを確認する
6. 状態違いや動きを確認する
7. コメントと不明点を確認する

この順番で確認すれば、初めてデザインデータを受け取ったときでも落ち着いて対応できます。

Web制作では、デザインを正しく読み取る力も大切なスキルです。

Figmaやデザインデータの見方に慣れていくことで、よりスムーズに、より正確なコーディングができるようになります


いいなと思ったら応援しよう！