初心者・独学でもわかる！デザインカンプからのコーディング入門-Figmaの実践手順

1.コーディングとプログラミングの違いとは？【初心者向け用語解説】

プログラミングができる人を「プログラマー」と呼びますが、一般的にコーディングのみ行う人は「コーダー」と呼ばれています。ただ、IT業界では、下記のように認識されています。
コーディング：ブラウザで表示される部分を作る作業
プログラミング：利用者には見えない内部の仕組を作る作業

2.デザインカンプって何？形式・ファイルの違いを整理

⑴.PSD・AI・FIGなどネイティブ形式とは

PhotshopのPSDデータ（拡張子が「.pdf」）をネイティブ形式と言います。ネイティブ形式とはソフトウェア独自の保存形式のことです。イラストレーターであれば「.ai」、Figmaであれば「.fig」という拡張子が付くファイルです。

「.jpg」や「.pdf」、「.eps」などは一般的に流通しているファイル形式なので、ネイティブ形式とはいいません。

3.FigmaやPhotoshopからコーディングする手順

⑴.px単位からのスタートとレスポンシブ化の流れ

コーディングする際はpx（ピクセル）単位で行いますので、まずはデザインカンプのpxをベースにコーディングして、その後レスポンシブ対応のために%やvwなどに変換することが多いです。必要に応じて、px→%変換ツールなどを使って比率を計算することもあります。
Figmaなどのデザインツールは「コーディングの設計図」や「仕様書」として非常に優秀ですが、 「そのままコードになる魔法のツール」ではありません。

⑵.比率を変換するツール・手法の紹介

比率を変換する際に使えるツールや手法は、Web制作やレスポンシブ対応において非常に役立ちます。以下に代表的なものを整理して紹介します

ツール名

特徴

リンク

比率計算機 – instant tools	2つの値から整数比・割合・基準値に基づく比率を同時に計算できる	比率計算機
MiniWebtool 比率とパーセンテージ計算ツール	比率をパーセンテージに変換するのに特化	MiniWebtool
Calculator.io 比率計算機	比率の単純化・欠損値の検索・等価比率の比較が可能	Calculator.io
LUFT 比率計算	黄金比やアスペクト比など、定型比率の計算に便利	LUFTの比率計算

⑶.手法・考え方（Web制作向け）

• px → % 変換 デザインカンプの基準幅（例：1440px）に対して、要素の幅を割合で表す 例：width: 720px → width: 50%
• px → vw/vh 変換 ビューポートに対する比率で指定することで、画面サイズに応じた調整が可能 例：width: 144px → width: 10vw（1440px基準の場合）
• CSS clamp() 関数 最小値・理想値・最大値を指定して、柔軟なレスポンシブ設計が可能 例：font-size: clamp(14px, 2vw, 24px);
• Figmaの「距離・サイズ」情報を活用 デザイン上のpx値を元に、比率を手計算またはツールで変換 → Figmaの「Inspect」パネルでCSS情報を確認可能

4.Figmaが提供してくれる情報とは？【仕様書としての活用方法】

⑴.取得できるCSSデータ一覧

例えば、Figmaが提供してくれるものは、サイズ・余白・フォント・カラーなどのCSS情報、画像やアイコンの書き出し、コンポーネントやレイアウト構造の把握などです。

⑵.取得できない情報（JSの動き・アクセシビリティなど）

構造や意味づけ（セマンティクス）は人間が判断する必要があるし、レスポンシブ対応やアクセシビリティは別途設計が必要です。 JavaScriptによる動きやフォーム処理などもFigmaでは定義されません。

5.対策として知っておくべきコーディングの落とし穴

⑴.画像で文字を出力するのはNG？SEOとフォント実装の関係

フォントに関しては、画像として書き出さずに、なるべくコーディングで実装した方がいいです。なぜなら、Googleの検索エンジンが画像の文字

情報を読み取れずSEO観点でよくないためです。・・・

⑵.見た目重視だけでは通用しない検索エンジンの評価基準

検索エンジン、特にGoogleは「見た目が整っている」だけでは高評価を与えません。以下のような本質的な評価基準が重視されます：

1. E-E-A-T（経験・専門性・権威性・信頼性）
   • Experience（経験）：実体験に基づいた情報かどうか
   • Expertise（専門性）：その分野に精通した人が書いているか
   • Authoritativeness（権威性）：サイトや著者が業界で信頼されているか
   • Trustworthiness（信頼性）：情報源が明示されていて正確か。 検索意図との一致（Needs Met）
2. 検索意図との一致（Needs Met）
   • ユーザーが検索したキーワードに対して、本当に求めている情報が提供されているか
   • 表面的な説明やキーワードの羅列ではなく、課題解決につながる内容が必要
3. コンテンツの質
   • オリジナリティ：他サイトのコピーではなく独自の視点や体験があるか
   • 努力の量：情報収集・構成・表現に手間がかかっているか
   • 正確性：事実に基づいていて、誤情報がないか
4. ユーザビリティ（使いやすさ）
   • モバイル対応（MFI：モバイルファーストインデックス）
   • ページの読み込み速度
   • ナビゲーションの分かりやすさ
   • 広告やポップアップが邪魔になっていないか
5. 技術的な最適化
   • 内部リンクの構造
   • メタタグやタイトルの適切な設定
   • 画像のalt属性や軽量化
   • HTTPS対応などのセキュリティ

補足：見た目が良くても評価されない例

見た目が良いだけの例	なぜ評価されないか
おしゃれなLP風ページ	情報が薄く、検索意図に合っていない
画像中心の構成	テキスト情報が少なく、SEOに不利
フォントが画像化されている	Googleが文字情報を認識できない

＊検索エンジンは「ユーザーのためになるかどうか」を最優先にしています。 見た目の美しさはUXの一部として重要ですが、それだけでは通用しません。