プログラミング

【模写コーディング】サイトURLからデザインカンプを作成するツール「Figma」

 

イケゾー
この記事は、こんな人におすすめ!
・HTMLとCSSの勉強中
・本格的な模写コーディングをしたい
・デザインカンプからの模写コーディングに挑戦したい

 

このようなお悩みにお答えします。

 

本記事の内容

  • URLからデザインカンプは作れる
  • Figmaの使用方法

 

筆者情報

Ikezooo

  • Web制作フリーランス
  • ブログ3年目。
  • 執筆記事数200本以上
  • ブログ実績:最高15万円
  • SEO検定3級保有
  • Twitterフォロワー3,100人

 

HTMLとCSSの基礎を勉強して、模写コーディングに挑戦している人は多いのではないでしょうか。

実務では、デザインカンプ通りにピクセル単位で再現する技術が求められます。

 

せっかくなので、より実務に近い形で取り組むことをおすすめします。

URLからデザインカンプを作成して、模写コーディングをする流れを体験してみましょう。

そこで今回は、無料ツール「Figma」の使用方法を解説します。

それでは、どうぞ!

 

 

当ブログでは、WordPressテーマ 「ACTION(AFFINGER6)」 を使用しています。

 

デザインカンプからの模写コーディングは実務に近い

Web制作の実務では、デザインカンプをもとにコーディングする場合がほとんどです。

実務は、下記のような流れです。

  1. デザインカンプを渡される
  2. デザインカンプから画像を書き出す
  3. デザインカンプ通りにコーディングする

 

デザインカンプとは、簡単に説明すると「完成イメージ」のことです。
クライアントと制作者との間で、色やフォントなどのイメージをすり合わせるために作成されます。

出典:デジハリオンライン

 

通常デザインカンプは、アドビのXDで作成されます。

顧客からデータを受け取り、画像の書き出し、コーディングをする流れが一般的です。

 

一方、スキルアップのための模写は、ブラウザを見本とする点で実務と異なります。

より実践的なスキルを身につけるためには、模写するサイトをデザインカンプに変換すると良いでしょう。

より実務に近いスキルが身に付くってことだね
イケゾー

 

サイトURLからデザインカンプを作成する方法

模写するサイトを、デザインカンプに変換する方法を解説します。

ここでは、無料の「Figma」を紹介します。

 

STEP1. Figmaに登録

「Figma」に登録しましょう。
>>公式サイトはこちら

「Sign up」をクリック

 

必須項目を入力して「Create account」をクリック

Googleアカウント情報でも登録可なので、そちらを利用しても良いでしょう。

 

下画面が表示されれば、無事登録完了です。

この画面をダッシュボードと呼びます
イケゾー

 

STEP2. プラグインをインストール

Figma上で、プラグインをインストールします。

 

右上のアカウント→「Plugins」をクリック

 

「Browse plugins in Community」をクリック

 

「Figma to HTML」を検索し、インストールする

 

「 Install plugin」をクリック

 

ここまでで準備は完了です
イケゾー

 

STEP3. デザインカンプを作成

デザインカンプを作成しましょう。

 

Draftsの横にある「+」プラスをクリック

下画面が表示されれば、無事登録完了です。

 

メニュー >> Plugins >> HTML To Figma をクリック

 

模写したいサイトURLを貼り付ける

ここで画面サイズを選択できます。(PC/タブレット/スマホ)

「IMPORT」をクリック

デザインカンプが作成できました
イケゾー

 

STEP4. 画像の書き出し

デザインカンプから、画像の書き出しも可能です。

ダミー画像よりも、正確な模写になるので、余裕があればどうぞ。

 

書き出す画像を選択する

書き出し形式を選択し、Export Rectangleをクリック

複数画像を一括ダウンロードもできるよ
イケゾー

 

STEP5. CSSの吐き出し

サイズや色など、さまざまな情報をCSSコードで取得できます。

 

Inspectタブをクリック

これだけでCSSを確認できるとは、コーディングがかはどりますね。

便利な機能は使いこなせるようにしよう
イケゾー

 

WordPressで高品質なホームページ制作します 初心者でも安心の「1ヶ月間無料サポート」付き!

 

まとめ

模写コーディングにおすすめツール「Figma」を紹介しました。

ポイント

・実務の流れ「デザインカンプ受取 → 画像書き出し→ コーディング」

・模写コーディング前に、サイトをデザインカンプに変換すると良い

・「Figma」は、URLを入力するだけで、デザインカンプを自動作成するツール

イケゾー
最後まで読んでいただき、ありがとうございました。
ご不明点やご意見は、コメントやTwitterにて、お寄せください 🙂
では、またお会いしましょう

  • この記事を書いた人

ikezooo

愛知県30歳のフリーランスエンジニア。 サイト制作とブログで生き抜く。 ブログでは、月10〜15万ほど稼いでいます。 SEO検定3級保有。

-プログラミング