生成AIより確実。「Layermate」で加速するUIデザイン構築
AIツールの理想と現実
LOG4では、薬剤搬送システム全体の画面リスト（UIスコープ）を定義し、何をどれだけ作るかの設計図が完成しました（以下、UI/UXデザイン画面リスト）
この設計図を元に、Figmaで実際のUIデザインを構築することです。
当初、この工程で、話題の生成AIサービスV0などを活用してラフデザインを生成しようと目論んでいました。
しかし、実際に手を動かし始めて、あるリアルな壁に直面しました。それは生成されたデザインをFigmaの実用的なデータとして取り込む手間です。
AIツールを試す時は、盲目的に新しいツールを使い続けるのではなく実務における作業効率を最優先に考え、Figmaネイティブな強力なプラグインLayermateを主軸に据えた、確実で高速なワークフローを選択しました。
なぜAI生成ではなくプラグインを選んだのか？その理由と、具体的な構築プロセスを公開します。
なぜV0ではなくLayermateを選んだのか
V0などの生成AIは、アイデア出しやコード生成においては非常に優れたサービスです。しかし、ことFigmaでのUIデザイン構築という文脈においては、現時点でまだ課題があります。
V0の課題点（Figma連携の壁）
最大のネックは、生成されたデザインをFigmaに持ち込んだ後の後処理です。 見た目は綺麗でも、レイヤー構造が複雑だったり、Auto Layoutが意図しない形で組まれていたりすることが少なくありません。
これを実用的な（エンジニアに渡せるレベルの）Figmaデータに修正するには、結局バラバラに分解して組み直す必要があり、かえって時間がかかってしまうという本末転倒な事態が起こりました。
Layermateを選んだ理由
対してLayermateは、Figma上での構築と整理を劇的に効率化してくれる強力なパートナーです。
Figmaネイティブで完結: 外部ツールとの行き来によるストレスがゼロ。
テキストプロンプトからの高精度生成: 2025年末の現在、Layermateはテキストの指示から、適切なAuto Layout、整理されたレイヤー構造、一貫したスタイルを持つ完成度の高いUIデザインを一瞬で生成してくれます。かつてのように手作業でラフを作ったり、一から構造を組んだりする必要はもうありません。
外部ツールで生成したラフをFigmaに持ち込んで修正する手間よりも、最初からFigmaネイティブな環境で、テキストから直接、高品質で実用的なUIデータを爆速生成する道を選びました。結果として、この方が圧倒的に早く、高品質なUIを構築できると確信したからです。
Layermateを駆使したUI構築ライブ
LOG4で作成した画面リストからロボット本体のタスク実行画面とWeb管理画面のダッシュボードをピックアップし、Layermateを活用して構築していく様子を紹介します。
以前は手作業でラフを作る必要がありましたが、Layermateの進化によりその工程は過去のものとなりました。
Layermateにプロンプトで指示を出す
まずは、Layermateを使いカラーパレットやフォントルール、既存のアイコンセットなどを準備します。Layermateではテキスト指示でカラーパレットやフォントルール、アイコンセットなども生成してくれるのもポイントが高いです。
LayermateではFigma上で四角形を描いたり、既存のアセットを配置したりする手作業でのラフ作成は不要です。代わりに、Layermateのプロンプト入力画面を開きます。
LOG3で定義したコンセプトや、LOG4の画面リストに基づき、具体的な指示を自然言語のテキストで入力します。
プロンプト入力例（ロボット本体UI）: 薬剤運搬ロボットの荷物受け取り、解除パス表示、集荷依頼、到着通知などに必要なスマホのUIデザインを作成したい。
このように、作りたい画面のイメージや要件をテキストで伝えるだけです。
Layermate発動！一瞬で高精度なUIが生成される
プロンプトを送信すると、LayermateのAIが指示を解析し、Figmaキャンバス上にUIデザインを一瞬で生成します。ページ毎に画面を生成する指示は必要ですが、実際のプロンプトはアプリの「配送状況」画面を生成してください。と簡易なプロンプトで十分です。
驚くべきはその完成度です。 生成されたデザインは、単なるラフスケッチではありません。
構造化されたレイヤー: 適切なAuto Layoutが組まれ、グループ化も完璧です。
整理された命名: レイヤーには意味のある名前が自動で付けられています。
スタイルの適用: 指示したカラーパレットやフォントルールが適切に定義・適用され、スタイルガイドまで同時に生成されることもあります。
整った余白: 一貫性のあるパディングやマージンが設定されています。
かつて人間が時間をかけて行っていた構造化や整理の作業が、生成の時点ですでに完了しているのです。これは劇的な効率化です。
詳細の詰めとコンポーネント化
Layermateによって、ほぼ完成品に近い強固な土台が一瞬でできあがりました。ここまで来れば、あとはデザイナーのこだわりを発揮する時間です。
微調整: AIの解釈が少し違った部分や、より洗練させたい細部のデザイン（角丸の微調整、エフェクトの追加、テキストの言い回し変更など）を調整します。構造が完璧に整っているため、修正作業も非常にスムーズです。
コンポーネント化: 生成された要素の中から、ボタンやカードUIなどをコンポーネント化し、他の画面へ展開するための準備をします。
AIの生成結果の尻拭いに時間を取られることなく、デザインの本質的なブラッシュアップに最初から集中できる環境が整いました。
ツールに踊らされないための視点
こうして、Layermateの支援を受けながら、主要な画面デザインが完成しました。
今回の教訓
新しいAIツールは魅力的であり、キャッチアップしていく姿勢は大切です。しかし、実務においては既存のワークフロー（今回はFigma）とスムーズに連携できるかがカギとなります。
「テキストから画像が生成される」ことだけが効率化ではありません。Layermateのように「プロの現場で発生する面倒な定型作業を、黒子のように支援してくれるツール」を選ぶことも、非常に賢い選択肢です。
結果として、ツール連携に悩む時間を削減し、その分をUIの使い勝手や見栄えといった、人間が考えるべき品質向上に充てることができました。これが今回の最大の成果です。
