画面操作仕様をAIエージェントと一緒に考えるなら、FigmaよりもAstro+HTML+CSSが最高なのでは説

まえおき

最近、思い立ったスマホアプリのUI設計とか機能設計とかをClaude Codeでいろいろ試している。

ちょっと前までは、FigmaとかSketchとかで画面イメージを作ってからそれをAIエージェントになんとか読ませて実装する、という流れでやっていたわけだけど、なんかそろそろpencil.devみたいなイケイケツールも出てきたくらいだからAIエージェントと壁打ちしながらUI/UX設計をやりたいものだ。

FigmaのMCPを使うとできるのか？とかも考えていたが、なんかどうもしっくり来なかった。

AIに図を書かせるならHTMLが意外といいらしい

少し前に仕事でドキュメントをClaudeとChatGPTに書かせていたときの話。

Markdownベースで提案書を書いていく中で、

  • 業務フローの概要説明
  • メリットデメリットをいらすとやの絵も効果的に使って挿絵
  • GitHubフローの概念説明

みたいな図をラクして描けないかなぁと考えていたことがある。

GeminiのNano Bananaもだいぶ良くなってきたとはいえまだ「いかにもGeminiで作ったな」って感じの図なので微妙。SVGを生成させるか、Mermaidか、MCPで何かできるのか、 などいろいろ調べていたときに、たまたまこの記事を見つけた↓

tech-lab.sios.jp

そうか、iframeでHTML+CSSで図を描かせたらいいのか！と。確かにこの方法は速くて割と的確な図を描いてくれる。

言うなれば、 AIエージェントの思考回路をアウトプットするのに、HTML+CSSはとても素直な表現手段たりえる ということだ。

デザインシステムを食わせると、いい感じのドキュメント、いい感じの図になる

横道をさらにそれるが、Markdown形式でドキュメントを書かせていること自体にも疑問を持つようになった。AIエージェントが素直に表現できるのがHTMLなのであれば、それよりも表現能力の低いMarkdownをアウトプットしてPDFにする意味なくね？と。

そして、企画の提案書をAstro+HTMLで作らせてみると、意外とこれがいい感じだった。ただ、図のトーンや文書のトーンは、何も指示しないとBootstrapぽくなってみたり、謎の立体的な図がいっぱいになったりするので、流石にここはどうにかしたい。

◯◯のサイトみたいに、って指示を最初は使ってたけど、それはすなわちデザインシステムを指示してるわけなので、

note.com

こういうサイトから取ってきて、デザインシステムのコンポーネントのサイトURLをペタっとプロンプトに貼って、AIエージェントに指示すれば、だいぶ見た目がいい感じになる。

スマホアプリの画面操作仕様だって同じ

今回あらためて、

  • HTML+CSSでUIを書かせて, iframeでそれをそのまま埋め込む
  • 画面イメージの図はMaterial 3 webのコンポーネントで、ドキュメンテーション自体はAtlassianデザインシステムで、Astro製のドキュメンテーションサイトを作るように指示

ということを画面操作仕様でやってみると、これが思っていたよりだいぶ良かった。

何がよかったって、

画面操作を検討するときに、実際にUIがそのまま動くのだ。フロントエンド開発のStorybookみたいなもんではあるのだけど、コンポーネント単位ではなく画面操作単位でそういうことができる。

今までのやり方だと

  • Sketchで画面を作る
  • AIエージェント向けにドキュメントや長大なプロンプトを書く
  • AIエージェントに実装してもらう

だったので、画面を動かして試せるのは実装が終わった後になるので、実装指示が悪かったりすると全然UI議論に行き着かないというのが大きな問題としてあった。画面操作仕様をHTMLで書かせる今回のやり方なら、いわゆる前工程で画面のUIの壁打ちができるので、とても効率が良い。雰囲気だけで言うと、ProttってサービスがAIネイティブになった感じ。

UIの壁打ちのみならず、チューニングもできる

ちらっと書いた通り、このHTML+CSSで画面仕様を出すというのは、単なる利便性と言うよりは、 AIが考えていることを正確に効率よくアウトプット している側面が大きい。なので人間が考えることをより支援して、より正確にフィードバックが行える可能性を示唆している。

今回作ろうとしているアプリは、ドキュメントスキャナーのアプリなので、台形補正だったり画像の補正アルゴリズムあたりが大事だ。

いろんなパターンの画像でうまくできているかを、１こ１こ開くのはとても大変なので、こんな感じでサイトでそれぞれのstepの成果物を展示するようにしておくと、アプリの複雑な実装を入れる前に、macOSのOpenCVベースでどういう処理をするとどうなる、というのをいろんな画像パターンで見て、計画をかなり綿密にレビューすることができる。

ようするに、画面操作仕様をHTMLにしたことで起きた変化とは..

もともとなんでFigma MCPが微妙だなーと思ってたかというと、このあたりのAIが考えていることがより明確になるなどの実感が皆無だったことだろう。

MarkdownやConfluenceでドキュメントを書いているとき、 Claude Codeにいろいろ考えさせているはずなのに、 その思考の一部しかドキュメントにアウトプットされていない というのが意外と気づくのに時間がかかっていたわけだ。

もちろんMarkdownにも良いところはあって、「人間が読みやすい」というのは最大の利点だ。ただ、やはり百聞は一見にしかずで、テキストで全部を伝えるのはAIでも難しい。壁打ちをするにおいては、AIエージェントが自身の考えを正確に早くアウトプットできる＆人間が視覚的に簡単に理解できる方向に寄せたほうが、設計品質は上げることができるだろう。

繰り返しになるが、 AIが考えていることをほぼそのままdumpできる 手段こそ、HTML+CSSなわけだ。

このHTML+CSS / Astroという構成は、Markdownと同様にコンテンツはテキストベースなので、GitHubで同一のリポジトリで管理することは容易だ。仕様とUIが分離しないよう、ドキュメントと実装を行き来することも簡単にできるし、ドキュメンテーションサイトはVercelで簡単にデプロイできるので、他の人にこんなものを作ろうとしていると説明する材料としてもとても有用だ。

ところでこの文章はAIが書いてるの？

ChatGPTにXの投稿を要約させて書いてみました。でも全然だめだったので、結局 YusukeIwaki が手で書いていますw

AIに個人エンジニアブログを代行で書かせるのはまだ少し時代が追いついてないかなという感じする。