はじめに
「AIを使えばWebアプリが短時間で作れる」
そんな時代が、ついに現実のものになってきました。
今回は、「Figma Makeがすごいらしい！」という噂を耳にして、モバイルエンジニアの私がWeb開発に挑戦してみた体験記です。
▷ 対象読者：
- Figma MakeやClaude Codeに関心のある方
- AIを活用したWebアプリ開発の流れを知りたい方
▷ 私のスペック：
- モバイルアプリ開発歴：7〜8年
- Web開発経験：ほぼゼロ（趣味で少し触れた程度）
仕様書を書く
まずはじめに、どんなアプリを作るか考えます。
ChatGPTと会話を重ねながら、次のような仕様書をまとめました。
# 🎮 タイピングゲームモード UI仕様（英語学習アプリ用）
英語ライティング学習アプリにおいて、ゲーム感覚で没入できる**タイピングゲームモード**のUIを設計します。ユーザーが英語の文を正確にタイピングする体験を通じて、英語力とタイピングスキルを同時に向上させられるようにします。
## 🎯 目的
- 英作文力とタイピングスキルの同時向上
- 写経スタイルによる反復学習の支援
- 入力の正確さに対する直感的な視覚フィードバック
- ゲーム的なUIによる学習へのモチベーション向上
## ✨ デザイン要素
- **フォント**：等幅フォント（例：Courier New、Monaco）
- **文字の色分け**：
- ✅ 正しい入力：緑 `#22c55e`
- ❌ 間違った入力：赤 `#ef4444`
- ⏳ 未入力の文字：グレー `#9ca3af`
- ⌨️ カーソル：点滅する青 `#3b82f6`
- **背景色**：白または薄いグレー
- **アニメーション**：文字状態の変化時にスムーズなトランジション（例：正解時に緑色でフラッシュ）
## 🧩 機能とインタラクション
- 画面上部に日本語のお題文（今日のお題）を表示
- その下に正解となる英語文を表示
- ユーザーは英語文を下部のタイピングエリアで入力
- 入力状況はリアルタイムで色分け表示：
- 正解文字 → 緑に変化
- 不正解文字 → 赤で表示（次の文字に進まない）
- 対応キーボード操作：
- 英字・記号・スペース・バックスペース
- 画面下部に2つのボタンを配置：
- `次の文へ` → 新しいお題を読み込み
- `もう一度` → 現在のお題をリセットして再挑戦
Figma Makeでプロトタイプを生成
この仕様書をFigma Makeに入力すると、わずか1分足らずでプロトタイプが自動生成されました（今回は英語でプロンプトを入力しましたが、日本語でも問題なく使えそうです）。
見た目が整っているだけでなく、なんとUIが実際に操作可能な状態で動作します。
画面上部には「Preview」と「Code」のタブがあり、Codeタブをクリックすると自動生成されたソースコードが確認できます。
ローカル開発環境を構築
プロトタイプを動かすだけならFigma Make上でも十分ですが、本格的な開発を行うにはローカル環境とGitHubでのバージョン管理が欠かせません。
Figma Makeでは、生成されたコード一式をzipファイルとしてダウンロードできるので、次の手順でローカル環境を整えました：
- Figma Makeからソースコード（zip）をダウンロード
- 解凍して開発ディレクトリに配置
- Claude Codeを起動し、
claude initを実行 - Claudeに依頼して、開発環境を整備
この手順を終えると、npm run dev を実行してブラウザでアプリを表示できるようになりました。
作成したコードはGitHubにもPush済みです。
機能開発を進める
初期のタイピング画面が動作することを確認できたので、次は以下の機能を追加していきます：
- お題を生成する画面の作成
- 長文を1文ずつタイピングできる形式へのUI変更
UIまわりの変更については、Claude CodeよりもFigma Makeのほうが見た目の整ったデザインを素早く提案してくれるため、以下のような流れで進めました：
- Figma MakeにUI変更を依頼
- コードをダウンロードし、Claude Codeに統合作業を依頼
1. Figma MakeにUIの変更を依頼
Figma Makeに以下のような要望を伝えました：
お題生成画面を作成してください。 「ニュース」「日記」「日常会話」などのキーワード、「中学英語レベル」「高校英語レベル」「TOEIC700点レベル」などの難易度を選択すると、それに合わせたお題をAIで生成します。
その結果、メニュー画面とお題生成画面のプロトタイプが完成しました。
2. Figma MakeのコードをClaude Codeに統合
ダウンロードしたフォルダをClaude Codeに渡し、まず新しいコードの構造を理解してもらいます。
そのうえで、既存コードとの違いを洗い出し、統合計画を立ててもらいました。
npm run dev を実行した際の画面はこちらです：
メニュー画面は狙い通りでしたが、お題生成画面はFigmaのデザインとは異なっていたため、修正を依頼しました。
3. Figmaと異なるデザインを修正
デザインの違いを言葉で正確に伝えるのはなかなか難しいです。
Claude Codeは画像を参照できるため、Figmaのスクリーンショットを提供し、Playwrightを活用して差分を検出してもらいました。
⏺ デザイン差分テスト結果
期待デザイン（Figma）と実際の実装を6つの観点で比較した結果：
❌ 1. ステップ表示の一致性
- 期待: ステップ1、ステップ2、ステップ3の明確な段階表示
- 実際: ステップ番号なし、カード見出しのみ（📚トピック選択、📊難易度、📝文数）
- 差分: ステップ番号による進行状況の明示が不足
❌ 2. トピックカードの配置とスタイル
- 期待: 3列2行のグリッドレイアウト
- 実際: 1列6行の縦積み表示
- 差分: 横幅を活用できておらず、期待される視覚的な配置と異なる
❌ 3. 難易度レベルの表示形式
- 期待: 各レベルが個別カード形式で右側にレベルバッジ表示
- 実際: Select（ドロップダウン）形式
- 差分: 選択肢が一覧表示されず、バッジによる視覚的な区別がない
✅ 4. 文数選択の表示
- 期待: ドロップダウン形式
- 実際: Select形式で正しく実装済み
❌ 5. 全体レイアウト
- 期待: 単一カラムの縦流れレイアウト
- 実際: 左右2カラム構成（左：設定、右：プレビュー）
- 差分: 根本的なレイアウト構造が異なる
❌ 6. 最終ボタンの配置
- 期待: 最下部中央配置
- 実際: 右側パネル内配置
- 差分: ボタンの位置が期待される場所と異なる
結論: 6項目中5項目で期待デザインと差分があり、特にレイアウト構造とUIコンポーネントの表示形式で大きな違いがあります。
修正を依頼した結果、次のように改善されました：
細かい違いはまだ残っているものの、全体的なレイアウトはFigmaのプロトタイプにかなり近づいています。
このように「Figmaで設計 → Claudeで統合と調整」という流れを繰り返すことで、効率的に開発を進められることがわかりました。
おわりに
今回はモックレベルの開発でしたが、Figma MakeとClaude Codeを組み合わせることで、Web開発の経験が浅くても、想像以上に完成度の高いアプリを形にできることを実感しました。
もちろん、まだまだ改善の余地や別のアプローチもあると思いますが、この記事が一例として、誰かの参考になれば嬉しいです。 次はバックエンドにも挑戦してみたいと思います。