Zenn
mentoテックブログPublicationへの投稿
🎢

EMConfの診断アプリ開発をClaudeと作った

h-takesue
2025/03/06に公開
Next.js
frontend
mpc
Claude
tech

こんにちは、株式会社mentoのフロントエンジニア 竹末です。

最近開催されたEMConf 2025で発表した「マネジメントスタイル診断」アプリの開発プロセスについて共有します。

このプロジェクトでは、「なるべくAIで作る」ことを目標に、Claude 3.5 Sonnetと連携したMPC（Machine-Programmer Collaboration）開発手法を採用し、通常の開発プロセスと比較して実装速度を大幅に向上させることができました。

MCPの設定方法についてはこちら
https://qiita.com/takurot/items/f683190de8f141844202

マネジメントスタイル診断アプリとは

マネジメントスタイル診断は、自分のマネジメント傾向を4つのタイプに分類し、自己理解を深めるためのツールです。一連の質問に答えることで、マネジメントスタイルの特徴が診断結果として表示されます。

アプリの主な機能要件：

  • スプラッシュページによる導入
  • 一問一答形式の質問UI
  • 質問間の分岐による個別化された診断フロー
  • 4つのマネジメントスタイルに対応した結果ページ
  • SNS共有機能とOGP対応

Claude連携による開発アプローチ

開発の全体的なフローは以下のようなステップで進めました：

  1. Next.jsプロジェクトの初期セットアップ
  2. 基本機能のClaudeによる実装
  3. Figmaデザインに基づくUI詳細の実装
  4. 画面遷移とロジックの実装

それでは、各ステップの詳細を解説していきます。

1. プロジェクト初期セットアップ

まずは、手動でNext.jsをinitします

npx create-next-app@latest management-diagnosis

2. 基本機能の実装：Claudeとのコラボレーション

次に、Claudeに基本的な要件を伝え、アプリケーションの骨格を実装しました。ここで使用したプロンプト

このNext.jsの初期状態に、以下の要件を足したい
Next.jsのapp routerを用いて、診断アプリを実装したい
以下の要件
- スプラッシュページあり
- 一問一答で、質問とラジオボックスの選択を1ページごとにする
- 複数の質問がある
- 質問の結果、4つの結果ページのどれかに遷移する
- 結果ページはogpが異なり、またSNSへのリンクボタンが存在するプロジェクトを用意して欲しい

このプロンプトに対して、Claudeは以下のようなプロジェクト構造と主要コンポーネントを提案してくれます。

プロジェクト構造

(実際の出力とは違いますが、この詳細度で実装が行われます)

/app
  /page.tsx (スプラッシュページ)
  /question/[id]/page.tsx (質問ページ)
  /result/[type]/page.tsx (結果ページ)
/components
  /SplashScreen.tsx
  /QuestionCard.tsx
  /ResultCard.tsx
  /SocialShare.tsx
/data
  /questions.ts (質問データ)
  /results.ts (結果タイプの定義)
/utils
  /calculateResult.ts (回答から結果を計算)

3. Figmaデザインに基づくUI詳細実装

基本的な機能が実装できたら、次はFigmaのデザインカンプを元に、UIの詳細を実装しました。ここでもClaudeの強みが発揮されます。

ClaudeにはFigmaのスクリーンショットを提供し、次のようなプロンプトで実装を依頼しました：

このアプリの詳細デザインがデザイナーより共有ありました。
詳細実装をしていきたいです。
アプリランディングから、一問目の表示までのデザインを共有しました。以下の内容を反映させたいです
* スプラッシュ表示を行いたい
   * ロゴ画像はこちらで上書きます
   * 1〜2秒表示後、フェードアウト
* オンボーディングモーダルを表示したい
   * 背景色　056CAB
   * 文字色 FFF
   * フォント　Zen Kaku Gothic New
* 質問画面のレイアウトは上部より
   * キー画像
   * ステップ -> 4ステップ
   * Q見出し
   * 質問文
   * 選択ラジオボタン
   * 次へボタン

Claudeはこのプロンプトと画像から、具体的なスタイル実装を提案してくれました：

当初、単なる画像ではなく何かしらの構造化されたデータでないと厳しいかと予想していたのですが、テキストのレイアウトまで読み切っているのは驚異的です

  • オンボーディングモーダル

  • 質問画面

4. 画面遷移とロジックの実装

基本的なUIが完成したら、最後に画面遷移と診断ロジックを実装しました。

質問の分岐パターンとして「3 -> 3 -> 3 -> 4」という構造を持たせるために、以下のようなプロンプトでClaudeに依頼しました：

一度、遷移実装ついて進めたい
現在、質問データがあるが、データの使用として、ステップごとに同一の質問があるわけでなく、それぞれの質問から新しい質問に遷移する形になる

3 -> 3 -> 3 -> 4　の質問項目がある

やはりこのようなロジックがある内容については強いです

  • 問題数、ステップ数が反映されています

5. アニメーションと細部の調整

アニメーションと細部の調整を行いました。

次に、オンボーディングモーダルについて対応したい
以下の内容を追加したい
* モーダル右上にバツボタンで閉じるを追加したい
* okボタンは必要ない
* 表示は0.3sかけてフェードイン
* 消える時も0.3sでフェードアウト

このようなプロンプトで細かい指示を出し、都度発生するエラーに対応してもらいながらアニメーションやインタラクションを実装していきました。

ここまででおおまかなアプリ実装が完了し、クロスフェードする形でエンジニアによる実装にシフトしていきました。

体感なのですが、ロジック修正３割、スタイル修正７割な感覚で細部のデザイン再現についてはエンジニアが受け持ったイメージです。

Claude連携開発の効果と利点

開発速度の大幅な向上

従来の開発方法と比較して、以下の点で開発速度が大幅に向上しました：

  1. プロトタイピングの高速化: 基本的な機能要件からすぐに動作するプロトタイプを作成できた
  2. コンポーネント実装の効率化: UIコンポーネントの初期実装を高速に行えた
  3. 分岐ロジックの複雑さへの対応: 複雑な質問分岐ロジックも効率的に実装できた

特に効果的だった点

  1. 静的コンポーネント実装の速さ: Claudeは基本的なUIコンポーネントを素早く生成できる
  2. 画像からのデータ抽出能力: FigmaのスクリーンショットからUIの詳細を理解し、実装に反映できる
  3. 説明的なコメント: 生成されたコードには適切なコメントがあり、後から修正する際も理解しやすい
  4. テキストデータを画像から取得: 診断データの指示書が画像だった場合でも、適切に読み取りデータにできる

課題と解決策

  1. アニメーションの実装: 複雑なアニメーションを実装する際は、タイムラインを詳細に指示する必要があり、必ずしもうまくいくとは限らない
  2. デザイン詳細の伝達: テキストと画像だけでは伝えきれない部分は、より具体的な指示が必要だったまとめ

結局エンジニアがどれくらいコードを書いたのか

コミットログのイメージ 上が新しい

b805a83 - H-takesue, 6 days ago : 戻る導線復活
 1 file changed, 3 insertions(+), 3 deletions(-)
bf415d7 - H-takesue, 7 days ago : 戻るUI一旦削除
 1 file changed, 3 insertions(+), 3 deletions(-)
0ad32ee - H-takesue, 7 days ago : 完了ページ戻る導線文言変更
 1 file changed, 1 insertion(+), 2 deletions(-)
5d6df18 - H-takesue, 7 days ago : 診断ページ戻る導線追加
 1 file changed, 4 insertions(+)
c3c3fb0 - H-takesue, 7 days ago : シェア文言修正
 1 file changed, 1 insertion(+), 1 deletion(-)
935818b - H-takesue, 9 days ago : Engineer Manager -> Engineering Manager、Xの投稿に emconfのハッシュタグ付与
 2 files changed, 2 insertions(+), 2 deletions(-)
f901912 - H-takesue, 2 weeks ago : シェアボタン調整
 3 files changed, 5 insertions(+), 10 deletions(-)
812e867 - H-takesue, 2 weeks ago : QA対応
 3 files changed, 4 insertions(+), 9 deletions(-)
39d8fab - H-takesue, 2 weeks ago : ogp変更
 4 files changed, 0 insertions(+), 0 deletions(-)
45e7e0b - H-takesue, 3 weeks ago : タイポ修正
 1 file changed, 1 insertion(+), 1 deletion(-)
afb44e2 - H-takesue, 3 weeks ago : デザイナーレビュー対応
 15 files changed, 37 insertions(+), 22 deletions(-)
a5db928 - H-takesue, 3 weeks ago : ファビコン設置
 9 files changed, 40 insertions(+), 22 deletions(-)

-- ↓ここまでが主にClaude側で生成 --

9539be0 - H-takesue, 3 weeks ago : 完了画面静的実装完了
 11 files changed, 61 insertions(+), 45 deletions(-)
361b4c4 - H-takesue, 4 weeks ago : 主要画像にpriority設定
 3 files changed, 6 insertions(+), 1 deletion(-)
929e60e - H-takesue, 4 weeks ago : 結果画面　テキスト関係修正
 5 files changed, 172 insertions(+), 148 deletions(-)
14c0d13 - H-takesue, 4 weeks ago : エラー修正
 5 files changed, 17 insertions(+), 106 deletions(-)
1a3f386 - H-takesue, 4 weeks ago : 基本機能実装
 36 files changed, 1080 insertions(+), 339 deletions(-)
f7c1fae - H-takesue, 4 weeks ago : topページ実装
 16 files changed, 769 insertions(+), 130 deletions(-)
-- init -- 
abb482f - H-takesue, 5 weeks ago : Initial commit from Create Next App
 18 files changed, 5854 insertions(+)

総変更数

エンジニアが主体 = 176

Claudeが主体 =2874

10%以下ですね、、！もちろんそれぞれで100%区切られるわけではありませんが、特に初期の段階で設計、要件が明確であればあるほど、エンジニアが主体になるタイミングは後にできるはずです。

まとめ

Claude 3.5 Sonnetとの連携によるMPC開発アプローチを採用したことで、マネジメントスタイル診断アプリの開発速度を大幅に向上させることができました。特に、プロトタイピングからUI実装、そして複雑なロジックの実装まで、全工程においてClaudeの支援が非常に効果的でした。

実装当時はClaude 3.5 Sonnetでしたが、2025/03/05現在3.7がリリースされています。さらにこのようなフロントエンド寄りのアプリケーションでも実装速度を向上させられると思います。

今後も、AIとの効果的な協業方法を模索しながら、より効率的な開発手法を追求していきたいと思います。

実際のアプリはこちらからお試しいただけます。ぜひチェックしてみてください！

mentoテックブログ
mentoテックブログPublication

Discussion