「美味しそう」を伝える画像最適化 & メニュー管理 - Vol.6

料理写真が「遅い」と、味も落ちる？

今回のような飲食店サイトにおいて、最も重要なコンテンツは何か。 間違いなく 「料理の写真」 です。

しかし、高画質な写真をたくさん載せれば載せるほど、サイトの表示速度は遅くなります。 表示が遅いと、ユーザーは「イライラ」します。そのイライラは、無意識に 「お店へのネガティブな印象」 に繋がってしまうのです。

最高のシズル感（画質）と、爆速のパフォーマンス（速度）。 このトレードオフを、Astroの astro:assets 機能が解決してくれました。

1. 魔法のコンポーネント <Image />

Astroには画像を最適化するための専用コンポーネントがあります。 使い方は普通の <img> タグとほぼ同じですが、裏側で行われている処理が凄まじいです。

---
import { Image } from "astro:assets";
import kaisenDonImg from "../assets/img/kaisen-don.jpg";
---

<Image
    src={kaisenDonImg}
    alt="特上海鮮丼"
    width={800}
    loading="lazy"
/>

たったこれだけで、ビルド時に以下の処理を自動で行ってくれます。

1. 次世代フォーマット変換: 多くのブラウザで軽量な WebP 形式に変換。
2. サイズ調整: 表示サイズに合わせて適切な大きさにリサイズ。
3. CLS防止: width と height を自動計算して埋め込み、読み込み時のレイアウトシフト（ガタつき）を防ぐ。

結果として、画質を落とさずにファイルサイズを 1/10以下 に圧縮できることも珍しくありません。 例えば、kaisen-don.jpg は Before: 2.1MB → After: 180KB になりました。

2. メニュー画像の動的インポート

今回作成したお品書きページには、数十種類のメニュー写真が並びます。 これを一つ一つ import して書くのは大変です。

そこで、Vite（Astroのビルドエンジン）の機能である import.meta.glob を活用しました。

// 画像フォルダ内の全ての画像を一度に取得
const images = import.meta.glob<{ default: ImageMetadata }>(
    "/src/assets/img/*.{jpeg,jpg,png,gif}",
    { eager: true }
);

// ファイル名だけで画像モジュールを引き出せるようにする
const imagePath = `/src/assets/img/${item.image}`;
const imageModule = images[imagePath];

こうすることで、メニューデータ（JSON）には "image": "kaisen.jpg" とファイル名を書くだけで済みます。 画像が増えてもコードを書き換える必要がなく、運用が非常に楽になります。

3. 「見やすさ」を作るグリッドレイアウト

画像が綺麗でも、レイアウトが崩れていては台無しです。 メニュー一覧は CSS Grid を使って、画面サイズに応じて柔軟に変化するように組みました。

.menu__grid {
    display: grid;
    /* スマホ：2列 */
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (min-width: 768px) {
    .menu__grid {
        /* PC・タブレット：3列 */
        grid-template-columns: repeat(3, 1fr);
    }
}

さらに、カードにホバーした時のマイクロインタラクション（ふわっと浮き上がるアニメーション）を加えることで、「選ぶ楽しさ」も演出しています。

Antigravityへの指示例 (Prompt)

この画像最適化の実装に活用したプロンプト例です。

Image Component Prompt: 「astro:assets を使って、画像を最適化して表示したいです。 src/assets/img/kaisen-don.jpg をインポートし、<Image /> コンポーネントを使って表示するコードを書いてください。 alt 属性は『特上海鮮丼』とし、width は800px、loading は lazy に設定してください。」

Dynamic Import Prompt: 「src/assets/img/ フォルダ内にある全ての画像ファイル（jpg, png）を import.meta.glob で一度に取得するコードを書いてください。 また、メニューデータのJSON配列（image プロパティにファイル名を持つ）をループし、対応する画像を動的に <Image /> コンポーネントに渡して表示するReact/Astroのロジックを提示してください。」

特に import.meta.glob のような最新の機能をAIに実装してもらう場合は、具体的なAPI名（import.meta.glob）を含めることで、的確なコードスニペットが得られます。

終わりに：技術は「想い」を届けるために

全6回にわたってお届けした「Project Dev.Log」、いかがでしたでしょうか。

• Astroによる高速な動作
• GASによる無料の予約システム
• AIペアプログラミングによる効率化
• そして、こだわりのデザインと画像最適化

これら全ての技術選定は、「お店の美味しい料理を、一人でも多くの人に届けたい」 という想いからスタートしています。

技術は目的ではなく、手段です。 しかし、適切な手段を選ぶことで、その想いはより強く、より遠くまで届くようになります。

このブログが、あなたのWeb開発や、ビジネスの課題解決のヒントになれば幸いです。

さて、あなたが「届けたい想い」は何ですか？ その想いを実現するための技術を、次はあなた自身で選んでみてください。

最後までお読みいただき、ありがとうございました！

🤖 Antigravity Prompt

この記事の成果物を作成するために、実際に使用した（または推奨される）プロンプトです。

あなたはWebパフォーマンスチューニングの専門家です。Astroプロジェクトにおいて、画像の読み込みを最適化し、LCP (Largest Contentful Paint) を改善する方法を教えてください。
- astro:assets (Imageコンポーネント) の使用方法
- WebPフォーマットへの自動変換
- 適切なwidth/height/loading属性の設定基準
コード例を交えて解説してください。