Stitch × Figma Make × Claude Code で個人サイトがすんなり完成した話

はじめに

AIを使えばデザインも簡単に作れる時代になりました。Figma Make、Stitch、v0 など、プロンプトを入力するだけでUIを生成してくれるツールがどんどん増えています。

ただ、実際に使ってみると「それっぽいもの」は作れるけど、自分が本当に納得するデザインにたどり着くのは意外と難しいと感じた方も多いのではないでしょうか。

いきなりAIに作らせても、漠然とした指示だと微妙なデザインが出てくる
何度も修正するうちにAIクレジットが足りなくなる
デザイン作成後に実装させる時にも手間がかかる

僕自身も個人サイト（sunagaku.com）を作る際に同じ課題を感じていました。

そこで今回は、Stitch でデザインの方向性を固めて、Figma Make で詳細を作り込み、Claude Code で実装するという流れで作成した方法を紹介します。ツールの役割を分けることで、クレジットの節約とデザインの一貫性を両立できたので、その全体の流れをお伝えします。

全体の流れ

要件を整理する - どんなサイトにするか、何を見せたいかを明確にする
Stitch でデザインの方向性を固める - 複数のバリエーションを作りながら、理想のデザインを探る
Figma Make で詳細なデザインを作成する - Stitch で固めた方向性を元に、精度の高いUIを作る
Claude Code + Figma MCP で実装する - Figma Make のURLを渡すだけで実装してもらう

それぞれのステップについて、実際にやったことを共有します。

1. 要件を整理する

最初のステップは、そもそも何を作りたいのか？を明確にすることです。

Claude や ChatGPTを使い、サイトに載せたい情報を洗い出します。僕の場合は、こんな感じで整理しました。

【ペルソナ】
- AI/開発ツールに興味があるエンジニア・デザイナー・経営者
- 20代〜40代、日本語話者

【コンテンツ】
- ヒーローセクション：キャッチコピー
- 活動紹介：登壇・コミュニティ運営
- イベント：AI駆動開発勉強会、AIエージェントユーザー会
- SNSリンク：X、Zenn、SpeakerDeck、GitHub
- Blog投稿

この段階では、完璧な要件を作ろうとしなくて大丈夫です。また実際に完成したサイトは、この要件と違う部分もあります。 AIを使ったデザイン作成の強みは、実物を見てから「やっぱりこうしたい」と方向転換しやすいところなので、まずはざっくりでも書き出しておくことが大事です。

2. Stitch でデザインの方向性を固める

要件が整理できたら、次は Stitch を使ってデザインの方向性を探っていきます。

Stitch で複数のデザインバリエーションを作成している画面 Stitch で複数のデザインバリエーションを作成

Stitch を使う理由は、無料でたくさんのバリエーションを作成できるからです。この段階では「どんな雰囲気のデザインにしたいか？」がまだ固まっていないので、何度も壁打ちしながら方向性を探っていく必要があります。ここで Figma Make を使うとクレジットがすぐになくなるので、壁打ちは Stitch で行うのがおすすめです。

デザインの方向性を言語化する

僕の場合は、Stitch にデザインの方向性を文章で書き出してもらうこともあります。「どんな色合いがいいのか」「どんな雰囲気にしたいのか」を言語化してもらうことで、自分の中のイメージがより明確になります。

Stitch でデザイン方針を壁打ちしている画面 デザイン方針書をStitchに書き出してもらい、認識を合わせる

実際のサンプルを見ながら「この要素は不要だな」「逆にこの要素は必要だ」と判断できるようになるので、要件の精度もここで上がっていきます。必要に応じて要件も書き直しましょう。

Design.md を流用する

Stitch の大きな特徴として、デザインを作成する際にそのサイトの特徴を示した「Design.md」というファイルを自動で作成してくれる機能があります。

Stitch が生成した Design.md の内容 Stitch が生成した Design.md — カラーパレット、タイポグラフィ、デザインコンセプトが記載されている

この Design.md には、カラーパレット、フォント、デザインコンセプトなどが構造化されて記載されています。これが次のステップで使う Figma Make との連携において、重要な役割を果たします。また Stitch で複数バリエーションを出すときも、Design.md を参照させれば、バリエーション間でも方向性を揃えやすいのでおすすめです。

複数バリエーションでも同じ Design.md を参照する例 Design.md を参照させた場合 — 方向性を揃えやすい

Stitch のデザインを Figma にコピーする手順

Stitch で作ったコンポーネントのうち、雰囲気やパーツの作りが良さそうなものがあれば、Figma のデザインファイルとして取り込めます。次の Figma Make で生成するときに貼り付けて参照させると、より具体的に「この方向性で」と伝えやすくなります。

More メニュー（⋯）の「Figma にコピー」をクリックすると、右側にエクスポートのダイアログが開きます。ダイアログで形式に 「Figma」 を選んで 「変換」 してください。

Stitch の More メニューから Figma にコピーを選ぶ（1） More メニューから「Figma にコピー」をクリックすると、右側にエクスポートのダイアログが開く

Stitch のエクスポートで Figma を選んで変換（2） 開いたダイアログで形式に「Figma」を選び、「変換」する

Figma に取り込んだ Stitch のデザイン（3） 貼り付けたデザインはレイヤーとして編集できます

3. Figma Make で詳細なデザインを作成する

Stitch でデザインの方向性が固まったら、Figma Make で具体的なデザインを作り込んでいきます。

Design.md を Guidelines.md に貼り付ける

先ほど Stitch が生成した Design.md の内容を、Figma Make の Guidelines.md にそのまま貼り付けます。

Figma Make の Guidelines.md に Design.md の内容を設定した画面 Stitch の Design.md を Figma Make の Guidelines.md に貼り付ける

こうすることで、Stitch で決めた色合いやデザインの雰囲気を Figma Make にも引き継げます。Guidelines.md については、以前書いた記事でも詳しく紹介しているので、気になる方はぜひ見てみてください。

https://zenn.dev/sunagaku/articles/6ffe29e6f271bb

デザインを作成・調整する

作りたい機能要件も合わせて伝えると、Design.md の方針に沿った、色合いや雰囲気が一貫したデザインが出来上がります。

Stitch から取り込んだフレームを Figma Make のチャットに添付したり、キャンバス上に置いた状態で生成を依頼したりすると、Guidelines.md だけより視覚的な参照になります。

初期の出力は次のとおりでした。

Figma Make で作成した初期デザイン Figma Make の初期出力 — Stitch で定めた方向性が反映されている

もちろん、一発で完璧なデザインが出てくることは少ないです。ここから何度か修正を重ねて、納得のいくデザインになるまで仕上げていきます。

Figma Make で修正を重ねた最終デザイン 修正を重ねた最終デザイン

デザインファイルへの書き出しと複数画面の展開

Figma Make のメリットとして、作成したデザインをFigma のデザインファイルに書き出せる機能があります。

Figma Make からデザインファイルに書き出した全体像 デザインファイルに書き出した全体像

さらに、書き出したデザインファイルをそのまま Figma Make で別の画面を作る時の参考として添付できます。

既存デザインを添付して別画面を作成 既存デザインを添付して、同じ雰囲気の別画面を作成

これにより、ブログ詳細ページやプロフィールページなど、複数の画面を同じデザインシステムで統一して作れます。

Figma Make で作成した複数画面のブログ詳細ページ 同じデザインシステムで作成したブログ詳細ページ

複数ページのデザインを一覧で確認 作成した複数ページのデザイン一覧

既存のデザインを参考にしつつ、Guidelines.md に記載した Design.md も効いているので、一貫性のあるデザインを効率的に量産できるのが Figma Make を活用する大きなメリットだと感じています。

4. Claude Code + Figma MCP で実装する

デザインができたら、最後は実装です。ここでは Claude Code と Figma MCP を使いました。

Figma Make の URL を渡すだけ

Figma MCP を Claude Code に繋いでおけば、Figma Make のファイル共有URLを渡すだけで、デザインの情報を自動で取得してくれます。

Figma の共有リンクをコピーする画面 Figma のリンクをコピー

Claude Code が Figma MCP 経由でデザイン構造を自動取得して実装

URLを渡して「これを実装して」とお願いするだけで、デザインを読み取って実装してくれます。セクション構成やカラーコードなども Figma から直接取得してくれるので、かなり効率化できます。

完成したサイト

こうして出来上がったのが、僕の個人サイトです。

完成した sunagaku.com のトップページ 完成した sunagaku.com

実際にアクセスできるので、よかったら見てみてください。

https://sunagaku.com/

補足：なぜ直接 Figma Make で全部やらないのか？

「最初から Figma Make で壁打ちすればいいのでは？」と思う方もいると思います。僕も最初はそうしていたのですが、2つの理由から Stitch との併用に切り替えました。

1つ目は、AIクレジットの問題です。 要件が固まっていない段階では壁打ちの回数がかなり多くなります。Figma Make でこれをやるとクレジットがすぐに足りなくなり、本当に精度が必要な場面で使えなくなることがありました。Stitch なら無料で何度でも試せるので、壁打ちフェーズに最適です。

2つ目は、Stitch が生成する Design.md の品質です。 デザインコンセプト、カラーパレット、タイポグラフィなどが構造化されたファイルとして出力されるので、これをそのまま Figma Make の Guidelines.md に貼り付けるだけでデザインの一貫性を保てます。この連携がかなりスムーズなので、わざわざ自分でデザイン方針を文章にまとめる手間が省けます。

まとめ

今回の流れをまとめると、以下のようになります。

Stitch は壁打ちフェーズ。無料で大量のバリエーションを試しながら、デザインの方向性と Design.md を生成する
Figma Make は仕上げフェーズ。Design.md を活用して、一貫性のある精度の高いデザインを作成する
Claude Code + Figma MCP は実装フェーズ。URLを渡すだけでデザインを読み取って実装してくれる

それぞれのツールの得意なところを活かして組み合わせることで、デザインから実装まで一貫した流れで進められます。

Stitch も Figma Make もかなり強力なツールです。ぜひこの組み合わせを試して、素敵なサイトを作ってみてください！

参考情報

https://zenn.dev/sunagaku/articles/6ffe29e6f271bb

https://zenn.dev/sunagaku/articles/figma-make-screenshot-to-design

Xフォローしてくれると嬉しいです

Xでも情報発信しているので、フォローしていただけると励みになります！

https://x.com/suna_gaku