UI 設計書に従って、BLE-chat ツールに画面を追加

投稿日: 2026/04/30 作成者: masuda

再びコードをもとに戻して、BLE-chat ツールに「設定」と「著作権表示」の画面を追加してみます。
あらかじめ、UI 設計書を用意して、これで一気に追加できるかを試していきます。

Claude Code で UI 設計書通りに追加する

UI 設計にしても、後から画面を追加することはよくあるわけで、そういうときに最初に用意した仕様書だけでなく、後付けができるほうが便利です。これもコードが多くなるとどうなるかわかりませんが。

暫くすると、設定画面等が再現できます。

この場合、UI 設計書通りになるので、何度やっても同じ画面が生成されるはずです。プロンプトの場合は、同じプロンプトを入れても微妙に違う画面になることが多いのですが、UI 設計書があればそれに沿った画面が再現できるというわけです。

同じパターンで、設定や著作権表示の画面以外のログ出力やデバッグ設定などの画面も作成できるようになるでしょう。

GitHub Copilot で UI 設計書通りに追加する

同じことを GitHub Copilot でもやってみます。

agents/UI設計書_設定_著作権.md に従って画面を追加して。

実に Claude Code と同じ画面ができあがります…が、右上の歯車ボタンが「・・・」になっているのが、ちょっと違いますね。画面遷移自体は「設定」→「著作権表示」となっているのですが。

このあたり UI 設計にある

## 2. 画面遷移

```mermaid
flowchart LR
    A[チャット画面] -->|メニューから設定| B[設定画面]
    B -->|戻る| A
    B -->|著作権情報| C[著作権情報画面]
    C -->|戻る| B
    B -->|送信者ID編集| D[送信者ID編集ダイアログ]
    D -->|保存| B
    D -->|キャンセル| B

の部分で「メニューからの設定」の解釈の違いっぽいです。

考察

このように後から UI 設計書を追加して、それに従って既存のコードに画面を追加することは可能です。プロンプトでちまちま追加するりも、設計書.md のようにまとめて AI に渡していたほうが効率的なのは確かです。

が、じゃあ、UI 設計書はどこまで作ればいいのか？という問題があります。今回のように、数行のプロンプトで作った場合、Claude Code と GitHub Copilot では異なる画面ができてしまいます。個人開発ならばそれでもいいのですが、会社のシステムのような場合はこれでは困ります。となると、なんらかの画面設計書を作った上で、その画面フォーマットンに合わせて、どちらの AI を使っても同じ画面できるのが望ましいのです。

さて、ここで作成している「UI設計書_設定_著作権.md」は、Claude Code で作成した画面を元にして、GitHub Copilot が逆作成したものです。

本来ならば、

1. 画面設計書を作成する
2. 画面設計書に従って、Cluade Code あるいは GitHub Copilot で画面を作成する

という２手順になるところですが、

1. 数行のプロンプトで Claude Code で画面コードを作成する
2. 画面コードから、GitHub Copilot で画面設計書を作成する
3. 画面設計書に従って、Cluade Code あるいは GitHub Copilot で画面を作成する

という３手順になっています。

前者のほうは、ウォーターフォール開発のようなもので、設計からコードという一方向の流れがあります。ある意味で、仕様書駆動開発も似たようなものです。流れが一方向になってしまうので、初手である画面設計書をしっかり作り込むことが必要になってきます。

後者のほうは、アジャイル開発…というよりも、スパイラル開発やプロトタイプ開発に近いです。最初にざっくりとした動作する画面を作っておいて、実際に動かしながら再び設計書を見直しあるいは追加していきます。

従来型のスパイラル開発の場合は、スパンを1か月程度にする場合が多く（アジャイルのスプリントとは違って、設計書からコード作成、テストまでを通すので）、このようなやり方は時間が掛かってしまうのですが、AI を使うことでコード生成部分や設計書作成部分を大幅に短縮できます。

1. 最初のスパイラルとして、数行のプロンプトを書く
2. 画面コードを生成する
3. （ここではないが、実際にテストを実行する）
4. 画面の動作を確認する
5. 2回目のスパイラルとして、画面コードから画面設計書を生成する
6. （ここではないが、画面設計書を見直す）
7. 画面設計書に従って、画面コードを生成する
8. （ここではないが、再びテストを実行する）

というイテレーション開発のサイクル廻っていると考えられます。

これを人間の開発者やるならば、2 と 7 の部分で時間が掛かってしまってやりきれないのですが、この部分を AI に任せてしまいます。そうなると、スパイラル開発のサイクルを高速に回す≒スパイラルの期間を短縮することが可能ですよね。

また、画面設計書も、数行のプロンプトを元にしてコード生成した後に逆生成することにすれば、追加機能や追加画面を作るときの設計の作成の手間も省力化できるかもしれません。
これは、3回目のスパイラルをいれて試してみます。

コード

https://github.com/moonmile/BLE-chat

  • branch: dev/add-setting-ui-claude : 設計書から Claude Code で 追加
  • branch: dev/add-setting-ui-copilot : 設計書から GitHub Copilot で 追加


カテゴリー: 開発 パーマリンク

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

CAPTCHA

*