家業のカラオケ喫茶ホームページを作ってみた
技術スタックはこんな感じです。
- Next.js / TypeScript / Tailwind CSS v4
- ホスティングはCloudflare Pages
Next.jsを選んだのはReactベースで普段から使い慣れていることと、画像最適化やSEO対応が標準で備わっているのが理由です。
TypeScriptは型安全な開発ができるので個人開発でも必ず入れるようにしています。
Tailwind CSS v4は設定ファイルが不要になりCSSの一元管理がしやすくなったので採用しました。
問い合わせフォームや予約機能が不要なシンプルなHPなので
サーバーサイドの処理が必要ない静的エクスポート構成を選びました。
Cloudflare Pagesは無料で使えて配信も速いのでホスティング先として最適でした。
スクロールアニメーション
framer-motionを使ってスクロールアニメーションを実装
手軽に使えて実績も多いライブラリなので最初の選択肢として選びました。
アクセシビリティ対応
Lighthouseでアクセシビリティのチェックをしたところ
最初は87点でした。
主な改善点はこんな感じです。
- ハンバーガーメニューにaria-labelを追加
- GoogleマップのiframeにtitleA属性を追加
- テキストのコントラスト比を改善
対応後は100点になりました。
またアニメーションが苦手なユーザーへの配慮として
prefers-reduced-motionにも対応しています。
OSの「視差効果を減らす」設定が有効になっている場合は
アニメーションが無効化されるようにしています。
デプロイ
GitHubのmainブランチにpushすると
Cloudflare Pagesに自動でデプロイされるようにしています。
実際のサイトはこちらです。
やってみて
仕事では既存のコードベースに乗っかることが多いので
技術選定から設計・実装・デプロイまで全部自分でやるのは改めて楽しいなと感じました。
これからも個人開発で気づいたことを書いていく予定なのでよろしくお願いします！