MBTI × ストレングスファインダーで作る、可愛い自己紹介ページ
アニメーション付きの文字＋認知機能バーで可視化
ドメイン別カラーで一覧表示
ドーナツグラフ＋レーダーチャート
資質の掛け合わせで分析
グラデーション背景のオシャレカード
資質ごとの実践アドバイス
バーチャートで全体像を一望
ブラウザ上でデータ編集→即反映
まず完成イメージを確認しましょう。下のURLをコピーしてブラウザの新しいタブで開いてね👇
※ タブ切替、チャート、編集機能など全部入り。このまるごとを自分用に作ります。
Claude Codeの使用を推奨！以下のプロンプトをコピペして送ってください。
Claude Code（推奨）
他のAIでも作れますが、クオリティに差が出ます。
AIが生成したHTMLコードを .html ファイルとして保存し、ブラウザで開けば完成！
my-profile.html という名前で保存作ったHTMLは、無料で世界中に公開できます！
GitHubにファイルを置いて公開。無料。
おけもんがClaude Codeで作ったオリジナルの共有ツール。HTMLを圧縮してURL化、サーバー不要！
https://○○○.netlify.app のURLが発行されます。お手本ページもこれで公開されています。完成したページの「✏️ 編集」タブから、ブラウザ上でデータを変更できます。
変更後「反映する」ボタンを押すと、すべてのタブがリアルタイム更新されます。
不要です！ AIがHTMLを全部書いてくれます。あなたがやるのは「自分のデータを伝える」だけ。
作れます！ MBTIだけでもOK。ストレングスファインダー部分を省いて、代わりに「好きなこと」「得意なこと」等のセクションに変えてもらうこともできます。
Claude Code（クロードコード）が一番おすすめです。長いHTMLコードも一発で出力＆ファイル保存まで自動でやってくれます。
通常のChatGPTやClaude、Geminiでも作れますが、コードが途中で切れたり、クオリティに差が出ることがあります。
AIに「お手本URLをもう一度見て、もっと再現度を上げて」と指示してみてください。
特に「タブ切替」「Canvas描画のチャート」「ポップインアニメーション」の3つが入っているか確認するのがポイントです。
HTMLはあなたのPC上にだけ存在します。公開しなければ誰にも見えません。
Netlify等で公開する場合は、載せたくない情報は省いてくださいね。
MBTIとストレングスファインダーの結果を用意して
AIにプロンプトを投げるだけ。5分で完成！