個人開発アプリのWebデザインを考える際に、Figma Makeを使って壁打ちしてみました。
これまではVercelのv0を利用していましたが、無料プランの利用制限に引っかかってしまったため、代わりとなるAIデザインツールを探していました。
最初に思い出したのはGoogle LabsのStitchでしたが、レスポンス速度やデザイン精度、調整の自由度が今ひとつだったため見送りました。
そこで、以前少し触ったことのあるFigma Makeを再び試してみることにしました。
Figma Makeは、Figmaプラットフォーム上のツールだけあって、Figmaとの相性がとても良いです。
テキスト指示によるデザイン生成に加え、shadcnベースのコード生成や、Figmaデータのエクスポートにも対応しています。
さらに、既存のFigmaデータをインポートして活用できる点も魅力的です。
特に良かったのは、Figma Makeで生成したデザインをFigmaにエクスポートし、気になる箇所だけをコピーして再度Figma Makeに貼り付けることで、部分的な改善提案を得られることです。
デザイン全体を作り直すことなく、ピンポイントで修正できるのは便利でした。
v0とFigma Makeはいずれも、デザイン修正依頼やコンテキストの注入といった点で似ていますが、「Figmaとの連携」という明確な差別化ポイントがFigma Makeの魅力だと思います。
ただし注意点として、FigmaのStarterプランでは利用できる機能がかなり限られます。
途中で行き詰まることもあるため、継続的に使う場合はProfessionalプランなどの課金を検討したほうが良いでしょう。
-
タグ「フロントエンド」の記事
最近、ヒューマンインターフェース ガイドライン（HIG）という言葉を知りました。 「ヒューマンインターフェイスガイドライン」には、どのAppleプラットフォームでも優れた体験を設計できるようにするためのガイドとベストプラクティスが含まれてい
2026-01-24
主にWeb関連の個人開発をしている際に心がけていることを書きます。 月末に近づくにつれ、AIの利用上限に達してしまうことがあります。 その状況になった時、以下のいずれかの選択肢が私の中では残っています。 課金して利用上限を増やす 無料モデル
個人サイトをリニューアルをしています。 ノート風のデザインを目指して、スタイルを調整していました。 ノートの見た目は、現実にあるノートを再現しようとCSSを書いていました。 現在、以下の画像のようなノートになっています。 ノート風デザインの
2026-01-20