カテゴリー：実践事例
🧐 のだまさ度診断
はじめに
最近、AI技術の進歩がすごいですよね。特にClaude Sonnet 4は、プログラミングの相談相手として本当に優秀なんです。
今回は、友人の「のだまさ」という人物をモチーフにした診断アプリを作ってみました。Claudeとのバイブコーディング（協働プログラミング）の様子をレポートします！
「のだまさ」って誰？
まず、診断の題材となった「のだまさ」について。これは私の友人の特徴を基にしたキャラクターで、以下のような特徴があります：
背が高い
やさしい性格
雨男
温和で穏やか
犬を飼っている
お酒をたくさん飲む
ゆっくり話す
しゃしゃり出ない控えめな性格
「こんな特徴の人、あなたの周りにもいませんか？」という親しみやすいキャラクター設定です。
Claudeとの対話から始まった開発
最初のリクエスト
私：「バイブコーディングで“のだまさ度診断”っていうのをつくって。いくつかの質問にこたえると、回答としてのだまさ度〇％みたいな感じででてくるやつ。」
このシンプルなリクエストから、Claudeは以下を理解して実装してくれました：
質問形式の診断アプリ
パーセンテージでの結果表示
「のだまさ」の特徴に基づいた質問設計
第一版の完成
最初に完成したのは、基本的な機能を持った診断アプリでした：
8つの質問（身長、性格、趣味嗜好など）
各質問3択の選択肢
スコア計算システム
結果表示
でも、この時点ではまだデスクトップ向けのデザインで、動きも少ない状態でした。
スマホ対応＋アニメーション強化のリクエスト
追加の要望
私：「いいね。スマホで使えるように画面の大きさを調整してあともっと動きがあったり面白い感じでブラッシュアップして」
このリクエストで、Claudeは大幅な改善を行ってくれました。
📱 スマホ最適化
レスポンシブデザインの実装
タッチ操作に最適化したUI
縦画面での見やすいレイアウト
🎨 ビジュアル強化
グラスモーフィズム効果
動的なグラデーション背景
3D回転エフェクト
光る境界線
⚡ アニメーション追加
選択時の絵文字浮遊効果
数字のカウントアップアニメーション
ホバー・タップエフェクト
結果発表時の派手な演出
🎪 インタラクティブ要素
振動フィードバック（対応デバイス）
質問番号の回転アニメーション
選択肢のパルス効果
エンターキー操作対応
Claudeとのバイブコーディングで感じたこと
良かった点
理解力の高さ
曖昧なリクエストでも意図を汲み取ってくれる
技術的な幅広さ
HTML/CSS/JavaScriptを組み合わせた複雑なアニメーション、レスポンシブ設計
改善提案力
要求以上の機能を提案（振動フィードバック、キーボード操作など）
驚いた点
一発で動作するコード（デバッグほぼ不要）
最新のWeb技術の活用（グラスモーフィズムやCSS Gridなど）
アクセシビリティやパフォーマンスへの配慮
完成した診断の特徴
技術仕様
フロントエンド：HTML5 + CSS3 + Vanilla JavaScript
デザイン：レスポンシブデザイン、グラスモーフィズム
アニメーション：CSS Animation + JavaScript
対応デバイス：スマートフォン・タブレット・PC
ユーザー体験
8つの質問に答える
リアルタイムで進捗が分かる
選択時に絵文字が舞い上がる
結果発表で派手な演出
パーセンテージで分かりやすい結果表示
まとめ
今回のバイブコーディング体験を通じて、AIとの協働開発の可能性を強く感じました。
特に印象的だったのは：
🧠 創造性：技術的な実装だけでなく、UXデザインまで考慮
🚀 効率性：数時間で完成度の高いアプリが完成
💡 学習機会：新しい技術や手法を知ることができる
今後の展望
この診断アプリは以下のような発展が考えられます：
結果のSNSシェア機能
より詳細な性格分析
他のキャラクター診断への展開
データ分析機能の追加
AIとのバイブコーディングは、プログラミング初心者から上級者まで、誰にとっても有益なツールだと感じました。
みなさんも、「こんなものを作ってみたい」というアイデアがあれば、ぜひAIと一緒に挑戦してみてください！
カテゴリー：実践事例
