-
AI技術を活用した動的アニメーションWebサイト（ポートフォリオ）の構築
体制： 1名（自主制作）
自身の役割：
企画・構成
フロントエンド実装（HTML5 / CSS3 / JavaScript）
AIプロンプトエンジニアリング（ChatGPT / Claude等を使用）
UIデザイン調整
■ 課題と乗り越えた方法（具体的な経験）
【課題】 限られた開発期間の中で、ユーザーの目を引く「物理演算を用いたサイコロのアニメーション」と、モダンな「グラスモーフィズム（すりガラス風）デザイン」を両立させること。特に、JavaScriptの複雑なロジック記述におけるバグ発生のリスクを抑える必要がありました。
【解決策：バイブコーディングの実践】 生成AI（LLM）を活用した開発手法「バイブコーディング」を採用しました。
ロジックの生成： 複雑な物理演算処理をAIに任せることで、コーディング時間を従来の約1/10に短縮。
品質管理： 自身のHTML/CSS知識を活かし、AIが生成したコードのレイアウト崩れや配色の微調整を手動で修正。
UXの向上： 「1が出た時のみ特別な演出を入れる」といった遊び心を加える際、自然言語でAIに指示を出し、即座にプロトタイプを作成・改善するアジャイル的な手法を取り入れました。
【結果】 通常であれば数日要する動的なWebサイト構築を、構想から実装まで短時間で完了。 「モダンなデザイン」と「複雑な動作」を両立させ、PC・スマホの両方でスムーズに動作するレスポンシブ対応サイトを完成させました。自身のスキルセットおよび「AI活用による高速開発」の実用性を提示するためのポートフォリオサイト制作。 静的な情報掲載だけでなく、JavaScriptを用いた物理演算（サイコロの挙動）や、動的な演出（パーティクルエフェクト）を実装し、**「見て楽しめるWebサイト」**を構築することを目的としました。