Anna：フォトグラファーのポートフォリオと予約

CMSや重いフロントエンドフレームワークを使わず、温かみのあるプレミアムな見せ方を作る。ページを閲覧しやすくし、重要な場面で予約導線を見せ続けることが課題だった。

実装内容

• 作品、プラン、プロフィール、レビュー、問い合わせを含むレスポンシブなワンページ構成。
• エディトリアルなタイポグラフィ、抑えた配色、実写へ置き換え可能なCSSビジュアル。
• 一般問い合わせとプラン情報を引き継ぐモーダル予約フォームの2導線。
• アクセシブルなモバイルナビゲーション、Escでのモーダル閉鎖、ブラウザ内のインラインフォーム検証。

役割: フロントエンド開発とUIデザイン。レイアウトシステム、インタラクション、レスポンシブ挙動、フォームUXを担当。

セマンティックなセクション、CSS Grid/Flexbox、Vanilla JavaScriptを用いた単一の自己完結型HTMLとして構築。スムーズなアンカー遷移、スクロール表示アニメーション、モバイルメニュー、予約モーダル、プランの事前選択、クライアント側検証を実装した。フォーム送信は意図的にプロトタイプであり、公開時に実際のendpointへ接続できる。