デザインからコーディングまで一気通貫で請け負える
「〇〇さん、デザインデータ送りますね。ギガファイル便で2GBあるんで、ダウンロードお願いします」
このチャットが届くたびに、私は天を仰いでいました。
数年前までのWeb制作の現場って、本当にこんな感じだったんですよ。
送られてきたのは、レイヤーが数百枚重なった巨大なPhotoshopデータ（PSD）。開くだけでMacBookのファンが離陸しそうな勢いで回り出し、メモリ不足でPhotoshopが固まる。
やっと開いたと思ったら、テキストをコピーしようとするだけで「フォントが見つかりません」と怒られる。画像の書き出しをするために、非表示レイヤーを探してオンオフを繰り返すあの虚無感。
「私はコードを書きたいんだ。スライス作業で一日を終えたくないんだよ…」
そんな地獄のような日々を過去のものにしてくれたのが、Figmaです。
初めてFigmaを触った時の衝撃は忘れられません。ブラウザで動く？ URLひとつで共有できる？ 動きがサクサク？
何より感動したのは、「CSSの概念がそのままデザインツールになっている」ことでした。
今、Web制作の現場でFigmaを使えないというのは、エンジニアにとって「Gitが使えない」のと同じくらい致命的になりつつあります。
逆に言えば、Figmaを使いこなせるエンジニアは、デザインと実装の間の「翻訳コスト」をゼロにできるため、市場価値が爆上がりします。副業でも、デザインからコーディングまで一気通貫で請け負えるようになれば、単価は一気に倍以上になりますからね。
今回は、デザインセンスに自信がないエンジニアの方に向けて、「現場で使えるFigmaの操作手順」と「エンジニアだからこそわかる効率的な設計思想」について、私の実体験を交えながらガッツリ解説していきます。
お絵かきツールだと思って敬遠していたなら、それは大きな損失です。Figmaは、コードを書かずにUIを構築する「ビジュアルコーディングツール」なんですから。
なぜエンジニアこそFigmaを学ぶべきなのか
具体的な使い方の前に、どうしても伝えておきたいことがあります。
「デザインはデザイナーの仕事でしょ？」って思ってませんか？
もちろん、美しいグラフィックを作ったり、ブランドの世界観を構築するのはプロのデザイナーの領域です。
でも、WebサイトやアプリのUI（ユーザーインターフェース）を作る作業は、今やエンジニアの領分と重なりまくっています。
思考回路がCSSそのもの
PhotoshopやIllustratorは、あくまで「絵を描くツール」でした。
だから、コーディングのことなんて考えずに、自由な位置にオブジェクトを配置できました。これがエンジニア泣かせだったんですよね。「この微妙なズレは意図的なの？ ミスなの？」っていちいち確認しないといけなかった。
でもFigmaは違います。後で詳しく説明しますが、「オートレイアウト」という機能なんて、完全にCSSのFlexboxそのものです。
パディング（余白）やギャップ（隙間）を数値で管理する。
これは、デザイナーよりも普段からCSSを書いている私らエンジニアの方が、圧倒的に理解が早いんですよ。
「あ、これ display: flex; justify-content: space-between; だな」って直感的にわかる。
Figmaを覚えることは、新しいツールを覚えるというより、「知っているCSSの知識をGUI（画面操作）で再現する」だけの話なんです。
副業案件での無双状態
副業でLP（ランディングページ）制作や、小規模なアプリ開発を受ける時、Figmaが使えると最強です。
クライアントから「こんな感じのサイト作りたいんだけど」と言われた時、その場でFigmaを開いて、ササッとワイヤーフレーム（構成図）を作って画面共有する。
「ここをクリックしたら、こう画面が遷移します」ってプロトタイプを見せる。
これだけで、クライアントの信頼度は爆上がりです。「この人は話が早い」ってなる。
テキストベースや手書きメモでやり取りするより、認識のズレが圧倒的に減るし、何より「手戻り」という最大のリスクを回避できます。
アカウント作成と「ブラウザかアプリか」問題
まずは環境構築から始めましょう。といっても、GitやDockerの環境構築に比べたら、赤子の手をひねるようなものです。
Figmaの公式サイトにアクセスして、「Sign up」するだけ。Googleアカウントがあれば一瞬です。
ここでよく聞かれるのが「ブラウザ版とデスクトップアプリ版、どっちがいいの？」という質問。
私の答えは「普段の作業はデスクトップアプリ版一択」です。
ローカルフォントの罠
ブラウザ版の手軽さは魅力なんですが、最大の弱点は「PCに入っているローカルフォントが使えない（設定が必要）」ことです。
Webデザインでは、OS標準のフォント（ヒラギノ角ゴシックとか游ゴシックとか）を使うことが多いですよね。
アプリ版なら、PCにインストールされているフォントをそのまま認識してくれるので、余計なトラブルがありません。
あと、ブラウザのタブに埋もれて「あれ、Figmaどこいった？」ってなるのを防ぐためにも、アプリとして独立させておくのが作業効率的にもおすすめです。
もちろん、クライアントに確認してもらう時はブラウザ版のURLを送ればOK。この「作る人はアプリ、見る人はブラウザ」という使い分けができるのが、Figmaの素晴らしいところです。
アートボードじゃなくて「フレーム」を使え
Figmaを開いて、最初にやる操作。それは F キーを押すことです。
これで「フレームツール」が選択されます。
PhotoshopやIllustrator出身の人は「アートボード」と呼びたくなりますが、Figmaでは「フレーム（Frame）」と呼びます。
フレーム ＝ divタグ
ここがエンジニアにとって最初の重要なポイントです。
Figmaのフレームは、HTMLでいう <div> タグだと思ってください。
ただの画用紙ではありません。入れ子（ネスト）にできる「箱」なんです。
画面右側のプロパティパネルから「iPhone 14」とか「MacBook Pro」とかのプリセットを選べば、そのサイズのフレームがドーンと作られます。
これがWebページの大枠、つまり <body> タグみたいなものです。
その中に、ヘッダー用のフレームを作って、さらにその中にロゴ用のフレームを作って…というふうに、マトリョーシカのように箱を入れ子にしていく。
これがFigmaでのデザインの基本です。
グループ化の罠
初心者が必ずハマるのが「グループ化（Cmd + G）」と「フレーム化（Cmd + Opt + G）」の違いです。
Illustratorに慣れていると、つい要素をまとめて「グループ化」したくなりますが、Webデザインにおいては極力「フレーム化」を使ってください。
なぜなら、グループ化は単に「まとめて移動できるだけ」の機能ですが、フレーム化は「独立した座標系を持つコンテナ」になるからです。
フレームなら、背景色をつけたり、クリッピング（はみ出しを隠す）したり、後述するオートレイアウトを適用したりできます。
CSSで <div> で囲ってスタイルを当てるのと同じ感覚です。
「グループ化は使うな、フレームを使え」。これを付箋に書いてモニターに貼っておいてもいいレベルです。
最強機能「オートレイアウト」はFlexboxそのもの
FigmaをFigma足らしめている機能。それが「オートレイアウト（Auto Layout）」です。
これを理解していないと、Figmaを使う意味の9割を捨てているようなものです。
逆に、これさえマスターすれば、レスポンシブデザインなんて怖くありません。
操作は簡単。フレームを選択して Shift + A を押すだけ。
すると、そのフレームは「オートレイアウトフレーム」に進化します。
エンジニアなら一瞬で理解できるプロパティ
オートレイアウトのパネルを見てください。書いてあることがCSSそのままなんですよ。
- 方向（↓→）: これは
flex-direction: column;かrow;かです。 - 間隔（Gap）: これは
gapプロパティです。要素間の隙間を一括指定できます。 - パディング: これは
paddingです。上下左右の余白を指定します。 - 配置: これは
justify-contentとalign-itemsです。中央揃えとか、端寄せとか。
これを見た時、私は震えました。「これ、コーディングしてるのと同じじゃん！」って。
例えば、ボタンを作るとします。
テキストを入力して、Shift + A でオートレイアウト化。
背景色をつけて、パディングを 16px 32px に設定し、角丸をつける。
これでボタンの完成です。
すごいのはここからです。テキストを「送信する」から「メッセージを送信する」に打ち替えてみてください。
文字数に合わせて、ボタンの横幅が勝手に伸びるんです。背景も追従するんです。
昔のPhotoshopなら、文字を変えたら背景の長方形も手動で伸ばさないといけなかった。あの虚無の作業が、Figmaなら全自動です。
レスポンシブ対応も爆速
さらに、「横幅を固定（Fixed）」から「コンテナに合わせて拡大（Fill container）」に変えれば、親フレームの幅に合わせて中身が伸縮します。
これはCSSでいう width: 100%; や flex: 1; の挙動です。
これを使えば、スマホ版のデザインを作った後、フレームの横幅をグイーッと広げるだけで、PC版のレイアウトに変形させることだって可能です（設定次第ですが）。
「レスポンシブデザイン？ ああ、オートレイアウトで組んであるから勝手に可変しますよ」
クライアントの前でこれを実演すると、魔法使いを見るような目で見られますよ。
コンポーネントで「修正地獄」から脱出する
Web制作の現場で一番恐ろしい言葉。「やっぱこの色、全部変えてくれない？」
ページ数が30ページあったら、30ページ分のボタンの色を一つひとつ変えて回る。深夜2時にそんな作業をしていると、人間としての尊厳が削られていく気がします。
Figmaの「コンポーネント（Component）」機能は、そんな修正地獄からの脱出ポッドです。
ReactやVue.jsを使っているエンジニアなら、説明不要でしょう。「再利用可能な部品」のことです。
親を変えれば子も変わる
よく使うパーツ（ボタン、ヘッダー、アイコンなど）を作ったら、画面上部のひし形アイコンを押してコンポーネント化します（Cmd + Opt + K）。
これが「メインコンポーネント（親）」になります。
そして、それをコピーして配置したものが「インスタンス（子）」になります。
デザイン作業中は、この「インスタンス」を使って画面を作っていきます。
もしクライアントから「ボタンを青から赤にして」と言われたら？
メインコンポーネントの色を赤に変えるだけです。
すると、配置されている100個のインスタンスが一瞬で全部赤になります。
この快感。もはや中毒になります。
バリアント（Variants）で状態管理
さらにエンジニア心をくすぐるのが「バリアント」機能です。
ボタンには「通常時」「ホバー時」「無効（Disabled）」といった状態（ステート）がありますよね。
また、「プライマリー（塗りつぶし）」「セカンダリー（枠線のみ）」といった種類もある。
これらをひとつのコンポーネントグループとして管理できるのがバリアントです。
プロパティパネルで、まるで変数を切り替えるように「Type: Primary」「State: Hover」みたいにプルダウンで選べるようになります。
これはまさに、ReactのProps（プロパティ）設計そのものです。
「このボタンコンポーネントは、type と disabled というPropsを受け取るんだな」
デザイン段階でここまで設計できていれば、実装時に迷うことがなくなります。
プロトタイプで「動く紙芝居」を作る
静止画のデザインカンプだけでは、画面遷移やアニメーションのイメージは伝わりにくいものです。
「ここを押したら、ふわっとモーダルが出てきて…」と口で説明しても、クライアントは「？」という顔をしている。
実装した後に「イメージと違う」と言われるのがオチです。
そこで使うのが「プロトタイプ（Prototype）」タブです。
画面と画面を線でつなぐだけで、実際のアプリのように動くデモが作れます。
画面遷移だけじゃない
単にページが変わるだけでなく、「オーバーレイ（モーダルウィンドウ）」や「スマートアニメート」という機能が強力です。
特にスマートアニメートは、画面遷移前と遷移後で同じ名前のレイヤーがあれば、自動的にその間を補完してアニメーションさせてくれます。
例えば、リストの項目をクリックすると、その画像が拡大されて詳細画面のヘッダー画像になる、といったiPhoneアプリのようなリッチな動きが、コードを1行も書かずに作れます。
プレゼンの勝率が変わる
私は副業案件で提案する時、必ず簡単なプロトタイプを作っていきます。
「百聞は一見にしかず」とはよく言ったもので、動くスマホ画面を共有して「触ってみてください」と渡すと、クライアントのテンションが明らかに変わります。
「おお！もうアプリできてるじゃないですか！」って（まだ絵だけなんですけどね）。
これで案件獲得率が倍増しました。エンジニアこそ、この「動くハッタリ」を使いこなすべきです。
現場で必須の「神プラグイン」厳選3選
Figmaは素の状態でも強力ですが、世界中の開発者が作ったプラグインを入れることでさらに化けます。
VS Codeに拡張機能を入れる感覚ですね。
ここでは、私が現場で「これがないと仕事にならない」レベルで愛用している3つを紹介します。
1. Unsplash
ダミー画像を入れる時、いちいちフリー素材サイトに行ってダウンロードして貼り付けて…なんてやってられません。
このプラグインを使えば、Figma上でキーワード検索して、クリック一発で高品質な写真を挿入できます。
「とりあえずいい感じの風景写真入れといて」と言われた時の救世主です。
2. Iconify
アイコン素材も、わざわざ外部サイトからSVGを探してくる必要はありません。
Material Design IconsやFontAwesomeなど、有名なアイコンセットが全部ここに入っています。
ドラッグ＆ドロップでベクターデータとして配置できるので、色変えもサイズ変更も自由自在。
エンジニア的には、開発時に使うアイコンライブラリと同じものを選んでおけば、実装時の手間も省けます。
3. html.to.design
これが最強のチートツールです。
既存のWebサイトのURLを入力すると、そのサイトのデザインをFigmaデータとして取り込んでくれます。
レイヤー構造やフォント、画像まで、かなり高い精度で再現されます。
サイトのリニューアル案件などで、現行サイトの素材やレイアウトをそのまま流用したい時に、これを使うとトレース作業が秒で終わります。
初めて使った時は「これ犯罪じゃないの？」と心配になるくらい便利すぎて笑ってしまいました。
エンジニアへのハンドオフ（Dev Modeの活用）
さて、デザインができたら、いよいよコーディングです。
自分で実装する場合はもちろん、チームの他のエンジニアに渡す場合も、Figmaは強力な機能を持っています。
それが「Dev Mode（開発モード）」です。
（※現在は有料プラン限定の機能になってしまいましたが、課金する価値は十分にあります）
CSSは「書く」のではなく「コピーする」
Dev Modeに切り替えて、要素をクリックすると、右側のパネルにその要素のCSSが表示されます。
色コード、フォントサイズ、パディング、シャドウ…。
これをコピーして、VS Codeに貼り付けるだけ。
もう「スポイトツールで色を取って、定規ツールで余白を測って…」なんてやる必要はありません。
特にオートレイアウトで組まれたデザインなら、Flexboxのコードもそのまま使える形で出力されます。
変数（Variables）との連携
さらに進んだ使い方として、Figmaの「バリアブル（変数）」機能があります。
色のコード（#3B82F6とか）に「Primary-Color」みたいな名前をつけて管理できる機能です。
これを設定しておくと、Dev Modeのコードにも var(--primary-color) のようにCSS変数として出力されます。
デザインデータと実装コードで「変数名」を統一しておけば、デザインシステムとして強固な連携が可能になります。
ここまでやっている現場はまだ少ないですが、だからこそできると「こいつ、できる…！」と思われます。
副業案件で「デザイン＋実装」を売る戦略
最後に、このFigmaスキルをどうやってお金に変えるか、という話をしましょう。
エンジニアがFigmaを覚える最大のメリットは、「上流から下流まで全部私がやる」と言えることです。
単価の壁を突破する
コーディングだけの案件（デザインデータ支給）だと、LP1本で3～5万円くらいが相場です。
競合も多く、価格競争になりがちです。
でも、「構成案の作成からデザイン、実装、サーバーアップまで全部やります」と提案できれば、単価は一気に10～20万円、内容によっては30万円以上も狙えます。
クライアントにとっても、デザイナーとエンジニア別々に発注して調整する手間が省けるので、多少高くても頼みたいんです。
ポートフォリオ自体の質が上がる
エンジニアのポートフォリオって、どうしても「デザインが素人っぽい」ものが多くなりがちです。
技術力は高いのに、見た目で損をしている。
Figmaでちゃんとデザインの基礎（整列、余白、配色）を押さえたポートフォリオを作れば、それだけで他のエンジニアと差別化できます。
「この人は、ユーザーが見る画面のことをちゃんと考えてくれる人だ」
そう思わせることができれば、案件獲得のハードルはぐっと下がります。
ツールはあくまで手段、でも思考を変える手段だ
ここまでFigmaの使い方を熱く語ってきましたが、勘違いしないでほしいのは「ツールを覚えること自体がゴールではない」ということです。
大事なのは、Figmaというツールを通して「コンポーネント指向」や「構造的なデザイン思考」を身につけることです。
Figmaでオートレイアウトを組んでいる時、あなたの頭の中はすでにコーディングをしています。
「ここは可変にしよう」「ここは固定幅で」と考えている時間は、そのまま実装設計の時間になっています。
だから、Figmaでしっかり作られたデザインは、実装で迷うことがないんです。
私自身、Figmaを覚えてから、エンジニアとしてのコードの質も上がりました。
CSSの設計がきれいになり、手戻りが減り、結果として仕事が楽しくなりました。
かつてPhotoshopのローディング画面を見ながら「帰りたい」と嘆いていたあの頃の私に教えてあげたいです。
「お前、未来ではブラウザでサクサクデザインして、そのままコードコピペしてるぞ」って。
食わず嫌いでFigmaを触っていないエンジニアの皆さん。
騙されたと思って、まずは無料アカウントを作って F キーを押してみてください。
そこに広がる真っ白なフレームは、あなたのエンジニアとしての可能性を広げる、新しいキャンバスなんです。
さあ、マウスを握って、最初の長方形を描いてみましょう。そこから、あなたの「デザインもできるエンジニア」としてのキャリアが始まります。
