【画像で解説】Web制作に欠かせない！AIを活用した爆速LPコーディング術

「もっとコーディングを効率よくできるようになりたい」
「デザインカンプの値を自動で取得して入力してくれるツールがあれば…」

そんな方に使ってほしいのが、今回ご紹介するVS Codeの拡張機能「Figma for VS Code」です。Figma for VS Codeを使うと、約90%のCSSを自動作成し、数百行分ものコーディングを効率化できます。

この記事では、FigmaのデザインカンプからFigma for VS Codeを使ってコーディングする様子を、実際の操作画面を用いて解説します。

Figma for VS Codeを使うか使わないかでコーディングのスピードにかなりの差ができるので、高い精度で効率よくコーディングしたい方はぜひ最後までご覧ください。

【講師プロフィール】
はにわまんさん（@haniwa008）
Webコーダー。コーディングを中心にディレクションからサイト運用・保守まで、Web制作全般の仕事に400件以上携わった経験あり。デイトラのマネージャーも務めている。

1：Figma for VS Codeを立ち上げる

まずは、Figma for VS Codeを立ち上げましょう！
立ち上げ方を解説しますので、一緒にやってみてくださいね。

VS Codeの画面上に表示されているデザインカンプの要素を選択すると、それぞれの値が確認できます。

2：Figma for VS Codeを使ってCSSを作成する

それでは、Figma for VS Codeを使って、CSSを作成していきましょう！

始めにHTMLのコードからクラスを抜き取り、CSSに入力します。

ただ、たくさんあるクラスを1つ1つコピーして、CSSに貼り付けしていくのは大変ですよね。

そこで便利なのが「ExtractionCssSelector」というプラグインです。

ExtractionCssSelectorを使うと、クラス名を一括で取得できます。

短時間でHTML上のクラス名を抜き出して貼り付けできるので、効率よく進めるためにもぜひ活用してみてください。

それでは、順にCSSを作成していきましょう！

1：ヘッダー

まず、ヘッダーを選択しましょう。

すると、コードのタブにヘッダー部分のCSSのプロパティと値が表示されます。

このままコピーして貼り付けてもOKですが、Figma for VS Codeの便利な補完機能を活用してさらなる時短を目指しましょう！

クラス名の波括弧の中にカーソルを当てると自動的に補完されます。

表示されたCSSで問題なければ、「Tabキー」を押して入力完了です。

必要のないものは適宜削除しながら、コンテナやロゴ、ボタンの部分も入力を進めていきましょう。

Figma for VS Codeの提案だけでは不完全な部分もあるので、表示を確認しながら必要なCSSを加えてください。

ここまでで、ぼくが自分でコードを書いたのは「margin-inline: auto;」「width: 100%;」のたった2行でした。
Figma for VS Codeを使うと、ほとんどFigmaが保管してくれるような形でCSSのコーディングを進められるのでとても便利です！

2：ファーストビュー

ファーストビューも補完機能を使って、CSSを作成していきましょう。

3：お知らせ

続いて、お知らせの部分もCSSを作成していきます。

どのレイヤーに当たっているかわからなくなった場合は、パンくずリストのような部分で確認できます。
困ったときは画像赤枠の部分をチェックしてみてくださいね。

4：導入事例

導入事例の部分もFigma for VS Codeで補完しながら、CSSを入力していきましょう。

5：フッター

最後にフッターもFigma for VS Codeで補完して、CSSを作成しましょう！

3：完成したLPを確認する

改めてデザインカンプと完成したLPを見比べて、デザインに違いがないかチェックしましょう。

また、これまでのCSS作成でレスポンシブの表現も一緒にできているので、デベロッパーツールを使って確認してみてください。

まとめ：Figma for VS Codeはコーダーを助けてくれる便利なツール！

今回のデザインカンプは、ほぼ自分でCSSを入力することなくFigma for VS Codeの補完機能によって実装を進めました。

FigmaにあるCSSのプロパティと値を自動的に反映させながらコーディングできるため、効率が大きく変わります。

また、通常はFigmaとVS Codeの画面を行き来しながらコーディングする必要がありますが、Figma for VS Codeを使うとVS Codeの画面上でFigmaのデザインカンプを表示できるのも便利なポイントです。

高い精度ですばやくCSSのコーディングができるFigma for VS Codeは、コーダーにとって大きなメリットがあります。

補完機能は有料プランから使える機能ではありますが、コーディングを最大限効率化したい方はぜひ活用をご検討ください！

未経験からコーディングを学ぶならデイトラWeb制作コースがおすすめ！

東京フリーランスは、1日1題のステップでWebスキルを身につけられる”デイトラ”を運営しています。

デイトラWeb制作コースは、実務レベルの本格スキルを学び、Web制作を仕事にしたい方におすすめのコースです。

HTML/CSSやjavaScriptを始めとした言語の基本からデザインカンプをもとにしたコーディング、WordPressのオリジナルテーマ作成まで、学習カリキュラムはなんと100日分！Web制作を網羅的に学べます。

また、中級・上級の最終課題はメンターによる課題レビューつき！品質を現場目線でチェックしてもらえるため、「自分は今どのくらいのスキルがあるのか」が客観的にわかります。

Web制作のスキルを身につけたい方は、ぜひデイトラWeb制作コースをチェックしてみてください！