Figmaからコーディングする方法を丁寧に解説！ピクセルパーフェクトにする方法も紹介！

実務でコーディングをする際は、Figmaなどのデザインツールで作ったデザインをもらうことがほとんどです。

そのデザインを忠実に再現することがコーダーの仕事です。また、例えば、下記の作業も基本的にコーダーが行います。

この記事ではFigmaで作った簡単なデザインを、実際の仕事と同じようにコーディングします。

👇 メンターやってます 👇

模写修行やこのメディアを作ったメンバー中心に、Web制作業界を目指す方のための学習支援サービス 『Hello Mentor』 を運営しています。

特にこんな方におすすめ！

• 基礎学習後にやるべきことがわからない...
• スクール卒だけど実力不足だと感じている...
• 自分のコードが正しい書き方かわからない...
• 未経験から1人で転職できる気がしない...
• 独立するためのノウハウがない...

まずは、下記リンクから個別ガイダンスへお越しください。

👆 メンターやってます 👆

記事構成とデザインデータ

この記事は、基礎編と実践編の2部構成にしています。

1. 【基礎編】Figmaの基本的な操作方法を紹介
2. 【実践編】実際にコーディングしてみる

基礎編では実践編で使うFigmaの機能に絞って紹介します。

デザインデータとコードはダウンロード出来るようにしたので、ぜひ一緒に手を動かしてみてください。

【基礎編】オブジェクトの選択方法

Figmaは画像やテキストなどのオブジェクトをグループ化することが出来ます。グループ化すると、画像の赤枠のように階層(レイヤー)化されます。

重なり合うレイヤーをクリックすると、1 回のクリックでは1番上のレイヤーが選択されます。ダブルクリックするとその下のレイヤー、そこでまたダブルクリックするとその下のレイヤー...といった具合に選択出来ます。

レイヤーが多いと、目的のオブジェクトへ辿り着くまでに、何度もダブルクリックする必要がありますが、ショートカットキーを使うと1回のクリックで選択できます。

【基礎編】画像の書き出し方法

画像の書き出し方法は2つあります。

• 1枚ずつ書き出す方法
• 書き出す画像を全て選択して一気に書き出す方法

一気に書き出してコーディングを進め、書き出し忘れや漏れがあれば、その都度追加で書き出すと良いです。

1 枚ずつ書き出す方法

書き出したい画像を選択し、赤枠のエクスポートから書き出しができます。

画像名はレイヤー名が入ります。レイヤーの名前をきっちり整理するかは、デザイナーによってはまちまちです。

書き出しフォーマットは、『PNG / JPG / SVG / PDF』に対応しています。サイズも『1x / 2x / ...』など、いくつか選択肢が用意されています。自分で入力することも可能です。

書き出す画像を複数選択して一気に書き出す方法

1. 『1枚ずつ書き出す方法』と同じ方法で書き出したい画像を選択し、フォーマットやサイズを指定（ここでエクスポートボタンを押して書き出さない）
2. 他にも書き出したい画像があれば、1と同じ作業をする
3. 下記の表のショートカットキーを押すと、今まで選択した画像が出てくる（上記の画像参照）

画像書き出し時に考えること

今回のデザインはサムネイル画像の横幅が上のようになっています。デザインはありませんが、画面幅768px以上で2カラム、1024px以上で3カラムにします。

この場合、画像が1番大きく表示されるのは2カラムに切り替わる直前(画面幅767px)です。この時左右の余白も加味すると、画像の大きさは横幅690px程度です。

昨今のデバイスを考えると、690 × 3 = 2070pxの画像まで用意すれば、多くの高解像度ディスプレイにも対応できます。

画像の最適化をちゃんとやる場合、srcset属性を使って最適な画像を出し分けることになります。下記の記事で解説しています。

srcset/sizes属性やpictureタグを使ったレスポンシブイメージを解説

※ 画像の最適化は中級者向けの内容なので、今回は2倍で書き出した画像を使っています。

基礎学習後...迷子になっていませんか？

Web制作業界を目指す方の多くが、基礎学習後にやるべきことがわからず、迷子状態になっています。あなたも下記のように感じていませんか？

• 基礎学習後にやるべきことがわからない...
• スクール卒だけど実力不足だと感じている...
• 自分のコードが正しい書き方かわからない...
• 未経験から1人で転職できる気がしない...
• 独立するためのノウハウがない...

そんな悩みを解決するために、模写修行やこのメディアを作ったエンジニア・デザイナー中心に、学習支援サービス 『Hello Mentor』 を運営しています。

転職成功者や副業・フリーランスデビューした方も出ています。

【基礎編】オブジェクトの距離を測る方法

2つのオブジェクトの距離を測る方法は、1つをクリックした状態で、Macはoptionキーを押しながら、WindowsはAltキー押しながら、もう1つのオブジェクトの上にカーソルを移動させます。

【基礎編】テキスト情報を調べる方法

テキストを選択すると、赤枠の箇所でテキスト情報を見ることが出来ます。

【実践編】実際にコーディングしよう！

基礎編でやったことを使って、実際にコーディングしてみます。

Step0：画像を書き出そう

基礎編で紹介した方法で一気に書き出します。

Step1：HTMLを書こう

主要部分が下記になります。

<div class="container">
    <article class="blog-card">
        <a href="/post.html" class="blog-card-link">
            <div class="blog-card-thumbnail">
                <img src="img/thumbnail.png" alt="" width="720" height="492" decoding="async" />
                <time datetime="2024-09-05" class="blog-card-date">2024/09/05</time>
            </div>
            <h2 class="blog-card-title">朝からサクッと高尾山に登って日の出を見てきた！</h2>
        </a>
    </article>

    ...
</div>

今回はHTMLを全て書いてから、CSSを書きます。コーディングの手順に正解はないので、やりやすい方法で良いです。

フォントは、Google FontsのRounded Mplus 1c Boldを使っています。Google Fontsの使い方とheadタグの書き方は、下記の記事を参考にしてください。

webフォントの基礎と使い方を解説！Google Fontsの導入方法も紹介！ 【2026年版】HTMLのheadタグの書き方を全て解説！

Step2：リセットCSSとベーススタイルを書こう

ハード系のリセットCSS(ブラウザのデフォルトのスタイルをほぼリセットするもの)であれば、どれを使っても良いです。

ベーススタイル（カスタムプロパティとbodyのスタイル）は、下記になります。

:root {
    --color-base-text: #28322f;
    --color-black: #131313;
    --color-white: #f1f1f1;
    --color-primary: #126445;
    --color-primary-light: #a8c7bc;
    --color-primary-dark: #075538;
    --font-family-base: "M PLUS Rounded 1c", sans-serif;
}

body {
    line-height: 1.7;
    font-size: 16px;
    color: var(--color-base-text);
    font-family: var(--font-family-base);
}

@media screen and (min-width: 768px) {
    body {
        font-size: 18px;
    }
}

Step3：コンテナを作ろう

今回のデザインは下記のような特徴があります。

• SPのコンテンツは342pxに収まる
• PCのコンテンツは1160pxに収まる
• SPもPCも.postの上下に80pxの余白
• SPでは1カラム、PCでは3カラム
• カードのGAPは上下共に40px

SPのコンテンツは342px = 380px(フレームの横幅) × 90%と解釈して、各カードを囲うコンテナには、下記のように書きます。

.container {
    width: min(90%, 1160px);
    margin-inline: auto;
    padding: 80px 0;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 40px;
}

@media screen and (min-width: 768px) {
    .container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (min-width: 1024px) {
    .container {
        grid-template-columns: repeat(3, 1fr);
    }
}

1カラム→3カラムだと見栄えがイマイチなので、途中に2カラムも挟みました。

Step4：カードを作ろう

• サムネイルの左上に日付
• サムネイルの下にタイトル(サムネイルとの余白は8px)
• などなど

この辺りの数値を測り、下記のように書きます。

@media (any-hover: hover) {
    .blog-card-link:hover .blog-card-thumbnail img {
        scale: 1.05;
    }

    .blog-card-link:hover .blog-card-title {
        color: var(--color-primary);
    }
}

.blog-card-thumbnail {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
}

.blog-card-thumbnail img {
    object-fit: cover;
    aspect-ratio: 342 / 234;
    transition: scale 0.3s;
}

@media screen and (min-width: 768px) {
    .blog-card-thumbnail img {
        aspect-ratio: 360 / 246;
    }
}

.blog-card-date {
    font-size: 14px;
    position: absolute;
    left: 0;
    top: 0;
    background-color: var(--color-black);
    color: var(--color-white);
    font-weight: bold;
    padding: 2px 12px;
    border-radius: 0 0 16px 0;
}

.blog-card-title {
    font-size: 22px;
    font-weight: bold;
    margin-top: 8px;
    line-height: 1.6;
    transition: color 0.3s;
}

カードはリンクなので、hoverした時のアクションも設定してあります。

また、どんなサイズのサムネイルが入っても大丈夫なように、object-fitとaspect-ratioでトリミングしています。

もっと練習したい方のためのおすすめ教材

弊社で作ったUdemy教材では、Figmaからコーディングする方法を50パーツを作りながら学べます。

ベストセラー&かなり高評価もいただいています。下記リンクから飛べば、セール価格で購入できます。

他にもニッチだけど、Web制作を仕事にする上では必須の知識が学べる教材も作っています。ぜひご覧ください。

基礎学習後...迷子になっていませんか？