https://github.com/moonmile/webapi-sample-ai の order-tablet のコードをもとに、UI デザインを AI エージェントを使った模索します。方法としては、思いつきの実装を AI プロンプトと UI 設計で追加する試み https://www.moonmile.net/blog/archives/12159 のように、
- 数行のプロンプトでコードを模索する
ことにします。先のブログでは、数行のプロンプトの試行が１回だけだったのですが、UI デザインの場合は、複数パターンを試していきましょう。通常のウォーターフォール開発やアジャイル開発では、UI デザインを「試案」という形で出して貰うことが多いでしょう。
AI エージェントを使った、AI スパライル開発では UI デザインも「試案」という形ではなく、もう一歩進んだ形で実際に動作するところまでやることができます。通常の開発プロセスならば、UI デザインを動かすところまで組みこんでしまうと手戻りが発生してしまい工数が掛かってしまうのですが、AI エージェントを利用した開発では、動作までのコーディングの工数は限りなくゼロに近くなります。実際には、AI エージェントがコーディングをするので、ちょっとした時間とそれなりの課金が発生してしまいますが、まあ、開発者の工数よりも安く付くでしょう…と仮定します。
基準の画面からスタートする
まずは、前回までのスパイラル開発で、Web API 等が確認できる UI までができています。
この状態から UI デザインを改良するとき、プロンプトや別の UI デザインを重ねることになります。
画面設計.md の中で、ホーム画面の UI デザインは次のように記述されてあります。
## 画面 1：ホーム（`/`）
### 概要
来店時に最初に表示される画面。来店人数を設定して注文を開始する。
### レイアウト
┌─────────────────────────────────────────┐
│ （グラデーション背景: 赤→オレンジ） │
│ │
│ 🍣 日経寿司へようこそ │
│ 心を込めたお寿司をお楽しみください │
│ │
│ ┌────────────────────────────────────┐ │
│ │ テーブル番号: T-001 │ │
│ │ │ │
│ │ 何名様でお越しですか？ │ │
│ │ │ │
│ │ [−] 4 [+] │ │
│ │ │ │
│ │ [ 注文開始 →] │ │
│ └────────────────────────────────────┘ │
└─────────────────────────────────────────┘
### UI 要素
| 要素 | 内容 | 備考 |
|------|------|------|
| 背景 | 赤→オレンジのグラデーション | `from-red-600 to-orange-500` |
| テーブル番号 | `T-001`（ハードコード） | 実運用では動的取得 |
| 人数セレクタ | 1〜8名、デクリメント・インクリメントボタン | デフォルト 2 |
| 注文開始ボタン | 白背景・赤テキスト | クリックで `/categories` へ遷移 |
### インタラクション
1. `[−]` ボタン押下 → guests 減少（最小 1）
2. `[+]` ボタン押下 → guests 増加（最大 8）
3. 「注文開始」押下 → sessionStorage に `guests` 保存 → `/categories` へ遷移
この部分を変更するか、プロンプト少しずつ変更すれば UI デザインと実際の動作を確認することができるでしょう。
branch: ui-design-001
画面 1：ホーム（`/`）の修正
- 人数を 1～4人、5人以上のボタンに変更する
- ホーム画面のテーブル番号を動的に取得するようにする
GitHub Copilot で、画面設計.md を変更します。この部分は、手作業で 画面設計.md を変更しても構いません。
次に設計書からコードに反映させます。
フレームワークが React なので、ブラウザを表示したままで画面が変更されます。
## 画面 1：ホーム（`/`）
### 概要
来店時に最初に表示される画面。来店人数を設定して注文を開始する。
### レイアウト
┌─────────────────────────────────────────┐
│ （グラデーション背景: 赤→オレンジ） │
│ │
│ 🍣 日経寿司へようこそ │
│ 心を込めたお寿司をお楽しみください │
│ │
│ ┌────────────────────────────────────┐ │
│ │ テーブル番号: [動的取得] │ │
│ │ │ │
│ │ 何名様でお越しですか？ │ │
│ │ │ │
│ │ [1人] [2人] [3人] [4人] [5人以上] │ │
│ │ │ │
│ │ [ 注文開始 →] │ │
│ └────────────────────────────────────┘ │
└─────────────────────────────────────────┘
### UI 要素
| 要素 | 内容 | 備考 |
|------|------|------|
| 背景 | 赤→オレンジのグラデーション | `from-red-600 to-orange-500` |
| テーブル番号 | 動的に取得 | API またはパラメータから取得 |
| 人数セレクタ | 1〜4人、5人以上のボタン | デフォルト 2 |
| 注文開始ボタン | 白背景・赤テキスト | クリックで `/categories` へ遷移 |
### インタラクション
1. 人数ボタン押下 → guests 設定（1〜4 または 5以上）
2. 「注文開始」押下 → sessionStorage に `guests` 保存 → `/categories` へ遷移
元の画面設計書には「グラデーション背景: 赤→オレンジ」とあるのですが、ちょっと揺れが生じています。
このあたりを正確に反映するには、Figma AI とかを使った方がよさそうです。
最初のブランチは残しておいて、次のブランチを試していきます。
branch: ui-design-002
再び master に戻してから branch: ui-design-002 を作成しています。
このホーム画面ですが、メニューが表示されています。注文を開始した後のページであとメニューがあってもいいのですが、トップ画面は変ですね。このあたりを修正します。
画面 1：ホーム（`/`）の修正
- 人数を 1～8人、9人以上のボタンに変更する
- ホーム画面のテーブル番号を動的に取得するようにする
- ホーム画面のみメニューを外す。カテゴリ選択や注文のメニューはそのままにする
- テーマや背景の色を薄い緑色に統一する
ホーム画面は以下のように修正されます。
## 画面 1：ホーム（`/`）
### 概要
来店時に最初に表示される画面。来店人数を設定して注文を開始する。
### レイアウト
┌─────────────────────────────────────────┐
│ （グラデーション背景: 薄い緑） │
│ │
│ 🍣 日経寿司へようこそ │
│ 心を込めたお寿司をお楽しみください │
│ │
│ ┌────────────────────────────────────┐ │
│ │ テーブル番号: [動的取得] │ │
│ │ │ │
│ │ 何名様でお越しですか？ │ │
│ │ │ │
│ │ [1～8人] [9人以上] のボタン │ │
│ │ │ │
│ │ [ 注文開始 →] │ │
│ └────────────────────────────────────┘ │
└─────────────────────────────────────────┘
### UI 要素
| 要素 | 内容 | 備考 |
|------|------|------|
| 背景 | 薄い緑のグラデーション | `from-green-50 to-green-100` |
| テーブル番号 | 動的に取得 | URLパラメータから取得 |
| 人数セレクタ | 1～8人、9人以上のボタン | デフォルト 2、選択ボタン方式 |
| 注文開始ボタン | 白背景・緑テキスト | クリックで `/categories` へ遷移 |
| メニュー表示 | なし | ホーム画面のみヘッダーメニューを非表示 |
### インタラクション
1. 人数ボタン押下 → guests 設定（1～8 または 9以上）
2. 「注文開始」押下 → sessionStorage に `guests` 保存 → `/categories` へ遷移
メニューの形式が変わるので layout.tsx などがコード変更対象になります。
画面はこんな風に変更になります。
カテゴリーを表示したときに、メニューと「カート」の表示が分離されているので、これをひとつにします。
カテゴリー画面や注文履歴を表示したときに、ホームやカテゴリーなどのメニューと、「カート」や「お会計」をひとつのメニューになるように直して。
このあたりは、プロンプトから指示したほうがいいのか、Header.tsx や layout.tsx をコードで直したほうがいいのかわかりませんが、ひとまず、思った感じになるように修正していきます。
- 「日経寿司タブレット」のメニューだけ残して、「お寿司注文」のヘッダーは削除する
- 「日経寿司タブレット」に追加した「カート」には、注文数を表示して
メニューにある「カート」の数字が変わらないのですが、ひとまずデザインとしてはこのままにして、次の案を試していきます。
branch: ui-design-003
再びブランチを master に戻して ui-design-003 を作成します。
今度は、ホーム画面のデザインを大幅に変更します。ボタンの形を丸型にしてみましょう。
画面 1：ホーム（`/`）の修正
- 人数を 1～8人、9人以上のボタンに変更する。ボタンは大き目の丸型ボタン
- ホーム画面のテーブル番号を動的に取得するようにする
- ホーム画面の背景には今月のお薦めの写真を3枚入れる
という形で Git でブランチを分けて「数行のプロンプト」の結果を分けて保存していきます。全体的なデザインとかそれに追随する動きを確認するために、プロトタイピングの工数が減らせますよね…という進め方を考えていたのですが、
- ブランチが分かれてしまうので、相互の動作を比較しにくい
- 細かい修正をしたいときに、ブランチを切り替えないと直せないので結構面倒
という欠点があって、意外と比較して動かすことができません orz 同時に試してみたいのであれば、3つぐらいのブラウザで同時に動かすぐらいの芸当は見せたほうがいいので、試行錯誤ができるデザインプロセスとしてはいまいちですね。
まあ、それにしても、モックを手作業で作らずにクライアントのデザインができるのでは？の一歩としています。
あと、最初のホーム画面だけだと人数の入力のみで機能がすくないので、同じような実験として、カテゴリ表示と商品選択（お寿司の選択）のところを AI のプロンプトで組んでみます。
サンプルコード
https://github.com/moonmile/webapi-sample-ai
- branch: dev/order-tablet/ui-design-001
- branch: dev/order-tablet/ui-design-002
- branch: dev/order-tablet/ui-design-003
おまけ
という感じで、この本ブログは続くわけですが、技術ブログのひとつとして紹介してくださるそうなので、以下を見てくださると分かります。
スキルアップやキャッチアップにつながる！注目のITブログ・メディアまとめ その2 via レバレジーズ株式会社
https://freelance-hub.jp/column/detail/697/#bmf-tech
昨今、ChatGPT とか Copilot とかで技術情報の初手を探すことが多くなったので、なかなか技術ブログを直接みることが少なくなっているのですが、単なる情報ではなくて「実際にやってみたけど、うまくいかなかった」とか「初手の手順はわかったけど、もう一歩進めるための方向性がわからない」ってなときに、従来型の技術ブログが役に立ちます。
他のブログを見ていくと、本ブログよりも綺麗にまとまった情報が多くて恐縮なのですが…本ブログの形式としては、興味あるところにちょっとずつ踏み込んでいく過程を記録しておくことが多いので、ご勘弁ください。執筆する書籍のほうはどうしても一冊としてまとまりがあるもの（あるいは結論があるもの）にならざるを得ないのですが、バックグラウンドとしては、こんな風な思考錯誤と興味の網を張って試している備忘録なのです。
- フリーランスHub https://freelance-hub.jp
- フリーランスHub案件一覧 https://freelance-hub.jp/project/
