Figma使わずにNext.jsで直接デザインする理由

デザインツールを使わない開発スタイル

（以下既存の内容そのまま） 「デザインはFigmaで作ってからコーディング」 これが一般的なWeb制作のワークフローです。

しかし、私はFigmaを使わず、 Next.js + Tailwind CSS でコードを書きながら直接デザインを作っています。

「非効率では？」と思われるかもしれませんが、 実はこの方が速く、柔軟で、クライアントにも喜ばれています。

1. なぜFigmaを使わないのか

理由 1: 二度手間を避ける

Figmaでデザインを作ると、その後コーディングで「再現」する必要があります。

理由 2: 動くものを見せられる

Figmaは静的な画像。 実際の動作（ホバー、アニメーション、レスポンシブ）は確認できません。

コードで作れば、仮ドメインで公開して、 スマホでもタブレットでも実際に触ってもらえます。

理由 3: 修正が速い

クライアントから「ボタンの色を変えて」と言われたとき：

2. 実際の開発フロー

3. 使っている技術スタック

Next.js 14（App Router）

高速で、SEOにも強く、サーバーサイドレンダリングも簡単。 React の最新機能も使えます。

Tailwind CSS

ユーティリティファーストのCSSフレームワーク。 HTML内にクラス名を書くだけでデザインできます。

<button className="bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded-lg">

Framer Motion

アニメーションライブラリ。 スクロールに応じた動き、ホバー時の変化など、 簡単に実装できます。

TypeScript

型安全で、バグを減らせます。 大規模なプロジェクトでも安心。

4. デメリットと対処法

❌ デメリット 1: 初期のビジュアルが弱い

Figmaなら最初から綺麗なモックアップを見せられますが、 コード直書きだと最初は粗削りです。

対処法： 「最初は粗削りですが、実際の動作を確認しながら 一緒に作り上げていきましょう」と事前に説明。 むしろクライアントは参加感があって喜ばれます。

❌ デメリット 2: デザインスキルが必要

Figmaなら「デザイナー」と「コーダー」が分業できますが、 1人でやる場合は両方のスキルが必要です。

対処法： 参考サイトを見る、Tailwind UI などのコンポーネント集を使う、 AI（v0.dev）に生成してもらう。

❌ デメリット 3: 大規模プロジェクトには不向き

大手企業案件など、複雑な承認フローがある場合は、 Figmaでのモックアップが求められることが多いです。

対処法： 必要な場合は Figma も使います。 ただし、小〜中規模案件では基本的にコード直書きで進めています。

5. どんな人に向いているか

逆に、Figmaを使った方がいい場合

• デザイナーと分業する場合
• 大手企業案件で承認フローが複雑
• コーディングが苦手な人
• 事前に完璧なビジュアルを見せたい場合