制作物
京都レストランWebを Vercel へデプロイしました。
横幅は 393px を基準に設計しており、一般的なスマートフォンサイズで
見やすく表示されるように調整しています。
- 公開URL → 京都レストランWeb
- GitHub（実装コード） → kyoto-restaurant-mobile
デプロイ時の修正
デプロイエラー対応（Next.js）
Next.js 15.2.0 で作成していたプロジェクトを Vercel でビルドするとエラーが発生しました。
原因は Next.js のバージョン差（Vercel側のビルド環境と噛み合わない）と判断し、15.2.8 にアップデートして GitHub に push。再度 Vercel でビルドしたところ、正常にデプロイできました。
写真の表示速度改善（画像軽量化）
複数枚の画像が並ぶページ（Lunch / Dinner など）で、画像のロードが遅れて表示が崩れることがありました。
特に 4〜6枚の画像が同時に読み込まれる場面で、表示完了までタイムラグが目立ちました。
そこで、画像を以下の方針で軽量化しました。
- 画像サイズ：1200×800 → 600×400
- 形式：JPG → WebP（軽量で表示が速い）
Linux 環境で jpg → webp 変換のために ImageMagick をインストールし、画像ディレクトリで以下を実行しました。
for f in *.jpg; do
convert "$f" -resize 600x400 -quality 85 "${f%.*}.webp"
done
結果、画像のロードがスムーズになり、体感でも表示速度が改善しました。
写真を横幅いっぱいに表示（余白対策）
画像を固定幅 393px で配置している箇所で、端末や状況によって 左右にわずかな隙間が出るケースがありました。
そこで、親コンテナを w-full にして横幅の余白が出ないように調整しました。
<div className="w-full max-w-[393px] mx-auto flex flex-col gap-3">
<div className="relative aspect-[393/320] overflow-hidden">
<Image
src={src}
alt={name}
fill
className="object-cover object-center"
sizes="(max-width: 393px) 100vw, 393px"
/>
</div>
</div>
次やること
- デスクトップ版（またはレスポンシブ対応）に向けて、ブレークポイント設計を考える