「おばあちゃんでも使えるSNSアプリ」をFigma Makeで作ったら

はじめに：なんでこんなことやろうと思ったか

Figma Makeを試したいと思ったのがきっかけで、ふと考えました。
自分の世代が高齢になったとき、気軽に繋がれるSNSがあったとしたら？
自分が20年後、30年後に高齢になったとき、SNSはどうなっているだろう？

未来のことは誰にもわからないけど、今の状況で想像できる「高齢者向けSNS」をAIに作らせてみたら面白そう！
ということで、実験してみることにしました。

Figma Makeって？

Figma Makeは、自然言語のプロンプトからFigmaのデザインファイルとReactコードを同時に生成してくれるAIツールです。デザインからコーディングまで一気通貫でやってくれるのが特徴。

従来のUI生成AIと違って、Figmaとの連携が前提になっているので、デザインシステムやコンポーネントの管理もしやすそうです。まさに「FigmaにCursorが入ってる」みたいな感じですね。

パターン1：何も考えずにFigma makeに頼んでみた

やったこと

とりあえず最初は一番シンプルに、Figma Makeに「おばあちゃん向けSNSアプリ作って」ってお願いしてみました。

実際に使ったプロンプト

おばあちゃんでも簡単に使えるSNSアプリのスマートフォンUIを作成してください。
文字は大きく読みやすく、ボタンは押しやすいサイズで、操作は直感的で分かりやすくしてください。

結果

出てきたものの特徴

• その名も「ほっこりSNS」（ネーミングセンスがAIらしい）
• オレンジ色を使ったり、メニューがシンプルだったり、柔らかい印象や使いやすさを出そうとしている
• 一覧画面と投稿機能までは作ってくれた

パターン2：参考画像を見せてから作らせてみた

やったこと

自然言語プロンプトだけでは限界がありそうだったので、他の生成AI同様、参考画像があればより要望に忠実になるのでは？と考えました。参考になりそうなUI画像を複数提示しつつ、パターン1と同じプロンプトでUI作成してもらいました。

実際に使ったプロンプト

下記URLの画像を学習して下記リストの要素をインプットしてください。
・余白
・文字の大きさ
・ボタンやUIの大きさやレイアウト

---
参考URL
---

学習した内容を反映して下記プロンプトを実行してください。
おばあちゃんでも簡単に使えるSNSアプリのスマートフォンUIを作成してください。
文字は大きく読みやすく、ボタンは押しやすいサイズで、操作は直感的で分かりやすくしてください。

結果

出てきたものの特徴

• 名前が「らくらくSNS」に（よりストレートなネーミング）
• パターン1と比べてUIチックというか、テンプレチックになった
• 柔らかい感じはなく、SNSのUIをとりあえず生成した感じに

参考画像を与えたことで、逆に無難なUIになってしまったのは意外でした。
AIの創造性を活かすには、あえて制約を少なくした方が良いのかもしれません。

パターン3：UIガイドラインを設定してから作成

やったこと

Figma Makeで生成したUIはコード側も作り込まれていて、ガイドラインファイルも活用されているようです。そこで、UIガイドラインを先に生成させて、その後パターン1と同様のプロンプトでUI生成してみました。

ガイドラインの生成結果

UI部分は生成されず、ガイドラインがしっかり記述されていました。

結果

出てきたものの特徴

• 名前は「みんなのSNS」
• 「お友達の投稿を見てみましょう」など、行動を促すような文言が増えた
• できることも至ってシンプル：投稿を見る、投稿する、プロフィール設定する

事前にガイドラインを設定することで、一貫性のあるUIが生成されました。
本格的な開発では、このアプローチが一番実用的かもしれません。

パターン4：「LINEっぽいやつを高齢者向けに作って」って言ってみた

やったこと

「SNS」という名称がプロンプトに入っていることで、想像できるSNS UI以上のことはできなさそう。もういっそ「LINEやFacebookみたいなやつを、おばあちゃんが使いやすいように作り直して」って指示してみました。

結果

出てきたものの特徴

• LINEやMessengerのようなメッセージ送受信のアプリ風になった
• 電話、写真、気持ち、やることがわかりやすいボタンは高齢者向けを意識していそう
• 小さいコミュニティ（家族や親しい友人）向けの設計になっている
• 音声メッセージやビデオ通話機能も含まれている

具体的な既存アプリを参考にすることで、より実用的なUIが生成されました。高齢者にとって馴染みのある操作パターンを活用するのは良いアプローチですね。

そのほかFigma Makeでできそうなこと

今回は特に試していませんが、下記のようなこともできそうです：

• 修正を繰り返して作り込む
• Figmaライブラリを参照して指示だし
• 生成結果の部分指定した修正指示
• 外部サービスと連携してアプリを作り込む

やってみた感想

• 最初は参考をうまく使って生成しつつ、細かい修正は自然言語での指示がよさそう
• すでに成立しているUIを参考にした方が再現度が高い
• 「高齢者向け」など、作りたいもののイメージをどう定義して言語化するかが大事

現状のFigma Makeは「FigmaにCursorが入ってる」ような感じで、他のUI生成AIも同じことができます。でも、Figma連携がもっと密にできる未来が来ると思うと、今後の展開も期待できるかもしれません。