💬
複数のLLMを使って比較しながらフロント画面作成してみた
Railsアプリ開発の練習がてらに簡単なチャットサービスのサンプルアプリを開発しているのですが、どのLLMを使って画面設計した方が良いのか、複数のLLMを使って比較しながら実際にフロント画面を開発してみました。
ワイヤーフレーム作成
とりあえず最初はワイヤーフレームの作成に挑戦してみました
要件定義を元にワイヤーフレームを作成してください
要件定義
# オープンチャットサービス 要件定義書（初期）
## 1. 概要
オープンチャットサービス（opcha）は誰でも気軽に参加・閲覧できるチャットルームサービス。
ユーザー登録不要で、URLを共有することで他人と気軽に会話できることを目的とする。
## 2. サービスの目的（解決したい課題）
* 匿名で気軽にコミュニケーションできる場の提供
* 特定の話題やトピックについてフラットに語りたい
* 一時的な会話やイベント用に、匿名ですぐに会話を始められる環境がほしい
## 3. 想定ユーザー
* 登録不要で気軽ににチャットしたいユーザー
* SNSに疲れているが、ゆるく他者と交流したい人
* 同じ趣味・興味の人で、気が合う人と繋がりたい
## 4. 利用技術
* フロントエンド：Next.js
* バックエンド：Ruby on Rails
* データベース：PostgreSQL
* デプロイ：Google Cloud
* アプリ：Cloud Run
* DB：Cloud SQL
## 5. 機能要件
### 5.1 チャットルーム機能
* [ ] チャットルームの一覧表示
* [ ] 誰でもルーム作成可能（ランダムなURL生成）
* [ ] 誰でもルーム参加可能
* [ ] メッセージの送信・リアルタイム表示（Pusher）
* [ ] メッセージの削除（投稿者本人のみ）
* [ ] メッセージの一覧表示（最大50件まで保持）
* [ ] メッセージの簡易NGワードフィルター
### 5.2 匿名ユーザー機能
* [ ] ユーザー登録不要
* [ ] 自動で一時的なニックネームを割り当て（例: abc123）
* [ ] Cookieなどで同一ユーザーを識別（セッション維持）
### 5.3 UI/UX
* [ ] シンプルなチャットUI（吹き出し形式）
* [ ] モバイル対応（レスポンシブ）
* [ ] URLコピー・シェアボタン
## 6. 非機能要件
* 拡張性
* 将来的にユーザー登録や画像送信機能を追加可能な構成にする
* セキュリティ
* CSRF/XSS対策
* IPアドレスやUser-Agentの記録（運用保守用）
* パフォーマンス
* 24時間以上無操作のチャットルームがあれば自動削除（DB肥大化回避）
### 7. 補足事項
* SEO対応は不要（URL直打ち・SNSシェア前提）
* ガイドライン/利用規約は最低限設ける
GPT-4.1
GPT-4.1
要件定義書をもとに、オープンチャットサービス「opcha」の主要画面ワイヤーフレームをテキストで作成します。
（画面構成や要素はシンプルさ・匿名性・モバイル対応を重視します）
---
## 1. トップページ（チャットルーム一覧）
+------------------------------------------------------+
| オープンチャットサービス「opcha」 |
+------------------------------------------------------+
| [新しいルームを作成] [使い方] |
+------------------------------------------------------+
| ルーム一覧 |
| ┌───────────────────────────────┐ |
| | ルーム名A [参加] [URLコピー] | |
| | ルーム名B [参加] [URLコピー] | |
| | ... | |
| └───────────────────────────────┘ |
+------------------------------------------------------+
---
## 2. チャットルーム画面
+------------------------------------------------------+
| ルーム名: ○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○ |
| [URLコピー] [退出] |
+------------------------------------------------------+
| メッセージ一覧（最大50件・新しい順） |
| ┌───────────────────────────────┐ |
| | [abc123] こんにちは！ [削除] | |
| | [xyz789] よろしくお願いします [削除] | |
| | ... | |
| └───────────────────────────────┘ |
+------------------------------------------------------+
| [ふきだし形式で自分と他人のメッセージを区別] |
+------------------------------------------------------+
| [メッセージ入力欄] [送信] |
+------------------------------------------------------+
---
## 3. モバイル表示（レスポンシブ）
- 上記レイアウトを1カラムにし、ボタンや入力欄を大きめに配置
- ルーム名や操作ボタンは画面上部にまとめる
- メッセージ欄は画面下部に固定
---
## 4. その他要素
- 匿名ニックネームは自動割当（例: abc123）
- NGワードは送信時に自動フィルタ
- Cookieで同一ユーザーを識別
- ルームURLは「/chat/ランダムID」形式
---
このワイヤーフレームをもとに、画面設計やUI実装を進めてください。
図式化やMermaid記法での図示も可能です。ご希望があればお知らせください。
最初はテキストベースで出力されました。
追加でmermaidも出力してもらったもののどちらにせよちょっと分かりづらい・・
Claude Sonnet 4
Claude Sonnet-4
要件定義書を確認させていただき、オープンチャットサービス（opcha）のワイヤーフレームを作成いたします。主要な画面として、ルーム一覧画面、チャットルーム画面、モバイル対応を考慮した構成で設計します。
続いて、各画面の詳細な要素配置とユーザーフローを示すワイヤーフレームも作成します：
以下が要件定義に基づいたワイヤーフレームの主要なポイントです：
## 📋 ワイヤーフレーム設計のポイント
### 🏠 **トップページ/ルーム一覧画面**
- **シンプルなヘッダー**: サービス名「opcha」とナビゲーション
- **アクティブルーム一覧**: 参加者数表示で活発さを可視化
- **新規作成ボタン**: 目立つ位置に配置
- **検索機能**: ルーム名での絞り込み
### 💬 **チャットルーム画面**
- **ルーム情報バー**: 名前、参加者数、シェア、退出機能
- **メッセージエリア**: 吹き出し形式、投稿者識別
- **入力エリア**: 使いやすいテキストエリア
- **削除機能**: 投稿者本人のみ表示
### 📱 **モバイル対応**
- **縦スクロール中心**: タップしやすいボタン配置
- **コンパクトUI**: 画面を有効活用
- **スワイプ操作**: 直感的なナビゲーション
### 🔒 **匿名ユーザー対応**
- **自動ニックネーム**: abc123形式で表示
- **セッション維持**: Cookie使用
- **色分け**: 投稿者を視覚的に区別
### 🔗 **URL共有機能**
- **シェアボタン**: ワンクリックでURL取得
- **ランダムURL**: セキュリティ考慮
- **カスタムURL**: オプション機能
この設計により、要件定義で求められている「気軽で使いやすい匿名チャットサービス」を実現できます。実装時は、このワイヤーフレームを基に詳細なデザインシステムを構築していく予定です。
Claudeでもmermaidで出力されましたが、正直何が何だか分からない・・
どうやらLLMにワイヤーフレームを作らせようとするとテキストベースだったり、mermaid図にするのが限界でなかなかいい感じにワイヤーを作るのが難しいようでした。
ワイヤーを作るのは諦めて直接画面を実装してもらう事にしました。
画面実装
とりあえず下記の文章で各LLMに指示してみました
①
要件定義を元にいくつかサンプル画面を実装してください
②
要件定義を元にLINE風のデザインで画面を実装してください。
③
あなたは経験年数10年以上のプロのデザイナーです。
要件定義を元にLINE風のデザインで画面を実装してください。
GPT-4.1（Cursor版）
| ① |  |
 |
 |
| ② |  |
 |
 |
| ③ |  |
Calude Sonnet 4（Cursor版）
| ① |  |
 |
|
| ② |  |
 |
 |
| ③ |  |
 |
 |
Calude Sonnet 4（Claude Code版）
ultrathinkも使ってみました
④
あなたは経験年数10年以上のプロのデザイナーです。
要件定義を元にLINE風のデザインで画面を実装してください。 ultrathink
| ① |  |
 |
 |
| ② |  |
||
| ③ |  |
 |
|
| ④ |  |
 |
 |
gemeni-2.0-pro（Cusor版）
geminiも使ってみたんですが、そもそも最初に出力されたページのデザインが崩れている（tailwindが反映されていない）かつそれを指摘しても修正できない等あって最初で使うのをやめました。
| ① |  |
 |
gemeni-2.0-flash（Cusor版）
| ① |  |
 |
最終的なFix画面
最終的にはCalude Sonnet 4（Cursor版）の③をベースに良さそうなパーツを集めて実装しました
 |
 |
 |
 |
所感
- Claude Sonnet 4についてCursor版とClaude Code版それぞれ使ってみましたが、個人的には特に大きな違いは無いかなと感じました。（要件が複雑であれば体感Claude Codeの方が良さそうです）
- ある程度いろんなパターンのデザインをみたい場合はGPT-4.1、ある程度作り込まれたデザインをみたい場合はClaude Sonnet 4が良いのかなと思いました
- Claudeに関してultrathinkを使ってみたのですが、クオリティが上がるというよりは機能が増える方向で強化されました
- gemeniについてはそもそも完成品を作りきれないので、LLMの性能が上がらない限りもう使わないかなという感じです
- プロンプトについて
- 今回はあえてフワッとした指示にしたのでトップページがあったりチャット画面のみだったり、作るページにバラツキがありました。当たり前ではありますが、どんな画面を作るか決まっている場合はきちんと指示に含めた方が良さそうです。（トップページ、一覧・詳細画面の有無、モーダル等）
- 「LINE風のデザインで」とプロンプトに含めると一気にデザインがモダンかつイメージに近いものになったので、既存のサービスでイメージに近いものがあればそれをプロンプトに含めるのもありだなと思いました。
- ロール（役割）を与えた場合の効果について、明確な違いは分からないものの、デザインのクオリティは若干上がっている気がするので、ロールを与えないよりは与えた方が良いのかなと感じました
最終的な結論としては元も子もないですが、良いデザインを出すにはガチャを回すのが一番早いかなと感じました。
おまけ
Wireframe Designer使ってみた
最初はメッセージ内に全て要件定義の内容を貼り付けて指示しました
①下記の要件定義を元にワイヤーフレームを作成してください。
②下記の要件定義をチャット画面を作成してください。
途中「Background Context」という背景を追加できる欄の存在に気づいたので、そちらに要件定義を貼り付けて指示
③チャット画面を作成してください
④メッセージをやりとりする画面を作成してください
⑤LINE風のチャット画面を作成してください
最終的にできた画面がこちら。左から順番に上記の指示で作成されました。
具体的に指示を出しても全部似たような画面というか、一昔前のブログ兼SNSサイトのような画面になってしまうので今回は不採用になりました
Relume使ってみた
Relumeも要件定義を貼り付けてとりあえずgenerateしてみたんですが、LPページっぽい＆続きは有料課金が必要だったのでやめました
プロンプトジェネレーターを使ってデザインをnパターン作成してみた
Claude Code（Claude Sonnet 4）を使って複数のデザインを作成させてみました。
プロンプトジェネレーター
claude "prompt.mdを元に作業して下さい" --dangerously-skip-permissions
prompt.md
ウェブチャットアプリケーション用の複数のデザインを作成し、それらをまとめて提示するタスクです。タスクを完了するには、以下の手順に従ってください。
## 前提
- <COUNT>を3として下さい
- <メインプロジェクトディレクトリへのパス>は~/work/okdyy75/opcha-sample
1. プロジェクトの確認：
- docs/initial_requirements.md の要件定義を確認して下さい
2. 各デザインについて（このプロセスを <COUNT> 回繰り返します）：
a. 新しいブランチを作成し、そのブランチに切り替えます。
- コマンドを実行します：git worktree add ../opcha-design-sample/design-v<X> -b design-v<X>
- <X> を現在のデザイン番号（1、2、3 など）に置き換えます。
b. デザインを実装します。
- 新しく作成したディレクトリに移動します：cd ../design-v<X>
- Next.jsの初期PJであるfrontendディレクトリに移動します。
- このバージョンのチャットアプリケーションに固有のデザインを実装します。
- デザインが機能的で、他のバージョンと視覚的に区別できることを確認します。
c.デザインのテストとキャプチャ:
- ローカルサーバーを起動し、Webアプリケーションを実行します。
- Webブラウザでアプリケーションを開きます。
- 実行中のアプリケーションのスクリーンショットを撮り、チャットインターフェース全体をキャプチャします。
- スクリーンショットにわかりやすい名前を付けて保存します（例: 「design-v<X>.png」）。
d. 変更をコミットします。
- ファイルをステージングします。git add を実行します。
- 変更をコミットします。git commit -m "Implement chat design v<X>"
e.メインプロジェクトディレクトリに戻ります。
- cd <メインプロジェクトディレクトリへのパス> を実行します。
1. <COUNT> 個のデザインをすべて作成したら、作業内容のプレゼンテーションを作成します。
- 「design-showcase.md」という新しい Markdown ファイルを作成します。
- プロジェクトの目的を説明する導入部分を記述します。
- 各デザインについて、以下の内容を含むセクションを追加します。
* デザインのバージョン番号
* デザインの独自の機能またはスタイルの簡単な説明
* デザインのスクリーンショット（Markdown イメージ構文を使用）
- 採用した様々なアプローチとそこから得た教訓をまとめた結論を追加します。
最終的な成果物は design-showcase.md になります。
 |
 |
 |
design-showcase.md
# オープンチャットアプリケーション - デザインショーケース
## プロジェクト概要
このプロジェクトでは、オープンチャットサービス「opcha」のユーザーインターフェースに対して、3つの異なるデザインアプローチを実装しました。各デザインは異なるスタイルとユーザーエクスペリエンスを提供し、様々な利用シーンや好みに対応できるよう設計されています。
## Design v1: シンプル・ブルーテーマ
### 特徴
- **カラーテーマ**: ブルーベースのクリーンなデザイン
- **レイアウト**: 従来的な吹き出し形式のチャットUI
- **特色**:
- 右寄せ（自分）、左寄せ（他人）の分かりやすい配置
- ブルー系統の統一されたカラーパレット
- レスポンシブ対応でモバイルにも最適化
### デザインコンセプト
最もオーソドックスなチャットアプリケーションのスタイルを踏襲し、初心者でも直感的に操作できるインターフェースを目指しました。
## Design v2: ダークテーマ・モダン
### 特徴
- **カラーテーマ**: ダークモードベースのモダンデザイン
- **レイアウト**: パープル・インディゴのグラデーション効果
- **特色**:
- 目に優しいダークモードUI
- グラデーション効果による視覚的な美しさ
- オンライン状態表示とアニメーション効果
- 丸みを帯びたモダンなボタンデザイン
### デザインコンセプト
夜間や長時間の利用でも目に優しく、かつ視覚的にも美しいモダンなインターフェースを提供します。若いユーザー層に特に人気が高いと予想されるデザインです。
## Design v3: ミニマル・エレガント
### 特徴
- **カラーテーマ**: ホワイトベースのクリーンデザイン
- **レイアウト**: 余白を活かしたスッキリしたレイアウト
- **特色**:
- アバターアイコンによる視覚的なユーザー識別
- 境界線を最小限に抑えたフラットデザイン
- タイポグラフィを重視した読みやすさ
- シンプルで洗練されたインターフェース
### デザインコンセプト
無駄な装飾を排除し、コンテンツに集中できるミニマルなデザインを追求しました。ビジネス利用や長文のやり取りに適しています。
## 技術的実装について
### 共通技術スタック
- **フロントエンド**: Next.js 15.3.3 (React)
- **スタイリング**: Tailwind CSS
- **開発環境**: Turbopack
- **言語**: TypeScript
### 実装のポイント
- 各デザインは独立したgit worktreeとして管理
- レスポンシブデザインに対応
- リアルタイムメッセージ送信機能を実装
- 状態管理にReact Hooksを使用
## 学んだ教訓と考察
### デザインアプローチの多様性
3つの異なるアプローチを実装することで、以下の知見を得ました：
1. **ユーザビリティの多様性**: 同じ機能でも、デザインによってユーザーの印象と使いやすさが大きく変わる
2. **ターゲット層の重要性**: 各デザインは異なるユーザー層に訴求する可能性がある
3. **技術実装の柔軟性**: Tailwind CSSを使用することで、迅速に異なるデザインを実装できる
### パフォーマンスと保守性
- git worktreeを使用することで、複数のデザインバリエーションを効率的に管理
- 共通のコンポーネント構造により、将来的な機能追加が容易
- 各デザインが独立しているため、A/Bテストなどの実験も実施しやすい
## 今後の展開
このデザインショーケースを基に、以下の展開を検討できます：
1. **ユーザーテスト**: 各デザインでユーザビリティテストを実施
2. **A/Bテスト**: 実際のユーザーに対して複数デザインでテスト
3. **テーマ切り替え機能**: ユーザーが好みに応じてテーマを選択できる機能の実装
4. **アクセシビリティ向上**: 各デザインでWCAGガイドラインに準拠した改善
---
*このプロジェクトは、ユーザーインターフェースデザインの多様性と可能性を探求することを目的として作成されました。*
全く異なるデザインをnパターン作成させたかったのですが、同じデザインの色違いができてしまいました・・。なかなか思ったようにAIで作らせるのはムズカシイ
Discussion