「Figmaでデザインしてからコーディング」が当たり前？
Web制作の一般的な流れはこうです。
- Figmaでデザインを作る
- デザインをコーディングする
- クライアントに確認してもらう
- 修正があればFigmaを直してからコーディングし直す
でも私はこの流れをやめました。 最初からNext.jsで直接コーディングしながらデザインを作るスタイルに変えた結果、 制作スピードが大幅に上がりました。
なぜFigmaをやめたのか
理由1: 二度手間が発生する
Figmaでデザインを作り、それをコードに落とし込む作業は本質的に二度手間です。
同じものを2回作っているようなものです。 Figmaで完璧に作り込んでも、コーディングで再現するのに時間がかかります。
実際の時間比較
Figmaあり Figmaデザイン: 2日 + コーディング: 3日 = 計5日
Figmaなし（コード直書き） コーディング（デザイン込み）: 2〜3日
→ 約2日の短縮
理由2: アニメーションが確認できない
Figmaはあくまでも静止画です。
このポートフォリオサイトで使っているような スクロール連動アニメーション、ホバーエフェクト、モーフィングアニメーションは Figmaではほとんど表現できません。
コードで直接作る方が、実際の動きを確認しながら調整できます。
理由3: 修正が圧倒的に速い
コードで作っていれば、修正は1箇所変えるだけで即反映されます。
Figmaがあると「Figmaを直す → コードを直す」という2ステップが必要です。
実際のデザインプロセス
Figmaを使わない代わりに、こういう流れでデザインを作っています。
参考サイトを集める
デザインの方向性を決めるために、まず参考サイトを5〜10個集めます。
- どんな色使いが好きか
- レイアウトの雰囲気
- アニメーションの感じ
この段階でイメージを固めます。
Tailwindでラフを作る
最初は見た目を気にせず、コンポーネントの構造だけを作ります。
// まずは構造だけ
<div className="flex flex-col gap-4">
<h2>タイトル</h2>
<p>説明文</p>
<button>ボタン</button>
</div>
Tailwindのユーティリティクラスを使えば、 デザインの調整がCSSファイルを行き来せずに済みます。
ブラウザを見ながら細かく調整
ローカルサーバーを立ち上げて、ブラウザを見ながらリアルタイムで調整します。
余白・色・フォントサイズを少しずつ変えながら、 「いい感じ」になるまで繰り返します。
この作業が一番楽しい部分です。
Vercelで仮公開してスマホ確認
Vercelにデプロイして、実機（スマホ・タブレット）で確認します。
DevToolsのレスポンシブモードでは気づかない タッチ操作の挙動やフォントの見え方が確認できます。
このポートフォリオも、実機確認で何度もレイアウトを修正しました。
コード直書きのデメリットも正直に言う
もちろん、デメリットもあります。
Figmaなし開発のデメリット
クライアントへの事前共有が難しい コーディング前に「こんなデザインです」と見せるものがありません。 口頭やスケッチで方向性を共有する必要があります。
大規模チーム開発には向かない デザイナーとエンジニアが分かれているチームでは、 Figmaなしでの連携は難しいです。
デザインの引き渡しができない クライアントにデザインデータを納品する場合、 Figmaファイルがないと対応できません。
つまり、この方法が向いているのは 1人でデザインからコーディングまで担当する場合に限ります。
チーム開発や、デザインデータの納品が必要な案件では 素直にFigmaを使う方が賢明です。
このポートフォリオで実践したこと
このサイト自体がFigmaなし開発の実例です。
いくつか具体的な実装を紹介します。
ServiceSectionの円形カード
サービスを紹介する円形のカードUIは、 コードを書きながらサイズ・位置・アニメーションを調整しました。
Figmaで設計してからコーディングすると、 動的なアニメーションの再現が難しかったはずです。
コード直書きだからこそ、 「クリックで大きく広がる」モーフィングアニメーションを 自然に思いつき、実装できました。
HeroSectionの3Dグラフィック
Three.jsを使ったグリッドメッシュのアニメーションは、 マウスの動きに連動してリアルタイムで変化します。
これはFigmaでは絶対に表現できないUIです。 コードファーストで考えたからこそ生まれたデザインです。
まとめ
Figmaを使わない開発スタイルは、万能ではありません。 でも、1人でデザインとコーディングを担当するフリーランスには かなり有効なアプローチだと感じています。
向いているケース
- 1人で全部担当する案件
- アニメーション・インタラクションが多いサイト
- 修正サイクルを速くしたい場合
向いていないケース
- チーム開発
- デザインデータの納品が必要な案件
- 事前にクライアントへのデザイン確認が必要な案件
自分のワークスタイルに合わせて、 ツールを柔軟に使い分けるのが一番大切だと思います。
💬 Web制作の進め方、一緒に考えます
「どんな流れで制作を進めればいいか分からない」 「ツール選びで悩んでいる」
そんな相談もお気軽にどうぞ。 実際の制作現場の話を交えてアドバイスできます。