Challenge
コーディング経験が限られている中で、モダンな技術スタックを使用した高品質なサイトを短期間で構築する必要がありました。また、デザイナーとしての審美眼を活かしながら、実装面でも妥協のないクオリティを目指しました。
ポートフォリオサイト Portfolio Website
デザインエンジニアを目指す自分自身のスキルを示すため、AIコーディングツールを活用しながら個人ポートフォリオサイトを構築。デザインから実装まで一貫して手がけた初の開発プロジェクトです。
Solution
Claude Codeを活用したバイブコーディングアプローチを採用。デザインの意図を自然言語で伝えながら実装を進め、細部の調整は自分で行うハイブリッドな開発フローを確立しました。
Process プロセス
01
デザインコンセプト
「海×日本×クリーン」をテーマにしたビジュアルデザインを策定
02
技術選定
パフォーマンスとDXを重視し、Astro + Tailwind CSSを選択
03
バイブコーディング
Claude Codeと対話しながら、イテレーティブに実装を進行
04
品質改善
アクセシビリティ、パフォーマンス、UXの継続的な改善
Results 成果
Lighthouse スコア 95以上を達成
デザインから公開まで2週間で完了
AIコーディングのワークフローを確立