Studioから移行したサイトで、メニュー写真を自分で差し替えるにはどんな構成にすればよいですか？
「ホームページを新しく作り直したあと、季節の料理や新メニューの写真を自分でパッと入れ替えられるだろうか」と心配になる飲食店の店主もいるでしょう。日々の仕込みや接客で忙しいなか、写真1枚を変えるたびに制作会社へ連絡するのは手間がかかりますね。自分でメニュー写真を差し替えるためには、サイトの裏側に専用の管理画面を組み込んだ仕組みの導入が欠かせません。
たとえばWordPressを採用したサイトなら、WordPressの画像ブロックにある置換の操作から、保存済みの写真を選んだり新しい写真を直接アップロードしたりして手軽に差し替えられます。この方法であれば、専門的なプログラムの知識も不要です。
さらに、ヘッドレスCMSのmicroCMSを使うなら、メニューごとに画像の欄を作っておきます。管理画面では、アップロード済みの画像を選ぶか新しい画像を上げて、使う1枚を確定します。サイト側は、microCMSの画像フィールドから返ってくる画像のURLを読み込んで表示する作りにしておきましょう。
反対に、写真をサイトのファイルへ直接組み込んだ作りだと、お店の人が触れる場所がありません。管理画面のない部分は、作った人に直してもらうことになりますね。
なお、今のCMSの設定はそのまま引き継げません。移行先で「品名」「写真」などの欄をあらためて決める作業が入ります。
Studioにあるメニュー写真を移行先へまとめて移すにはどうしますか？
Studioからの移行では、ここに注意が要ります。Studioには他の環境へデータを一括で移す書き出し機能が備わっておらず、ページ内に配置した画像もまとめて外へ出力できない仕様になっているからです。そのため、メニュー写真は一枚ずつ集め直すことになります。
集める前に、写真が載っているページを洗い出しておきましょう。ページの一覧はStudioのサイトマップで確認できます。ダッシュボードの［設定］→［一般］→［サイトマップファイル］をオンにすると、/sitemap.xmlに静的ページと動的ページが並びます。ただし、モーダルとnoindexを設定したページは一覧に出ません。また、非公開のサイトでオンにしたときは、公開した時点でURLが使えるようになります。
ちなみに、Studioでは2025年5月のアップデートでアップロード画像の原本への自動圧縮・リサイズが廃止され、原本は元の画質・サイズで保持されるようになりました（画像の仕様変更の案内）。だから、過去にアップロードした元の写真が手元に残っているなら、画面から保存し直すよりも原本ファイルをそのまま使ったほうが綺麗に引き継げますね。ページ一覧ができたら、手元にある写真の原本と照らし合わせます。足りない写真だけを公開ページから補う形にすると、取りこぼしが減ります。ファイル名を料理名にしておけば、移行先で探すときに迷いません。
集めた写真をパソコンの1つのフォルダにまとめておくと、移行先へ入れるのは一度で済みます。移行先がWordPressであれば、手元のパソコンから複数枚の画像ファイルをまとめて管理画面へドラッグ＆ドロップするだけで一括登録が完了します。
メニュー写真の差し替えをスマホだけで済ませることはできますか？
「厨房や買い出しの合間に、手元のスマートフォンだけで新メニューの写真をパッと差し替えられたら便利なのに」と感じる飲食店関係者は少なくありません。できる仕組みはありますが、選ぶサービスによって使い勝手に差があります。
microCMSの管理画面は、スマホの最新版Safari（iOS/iPadOS）とChrome（Android）を推奨環境に含めています。一方で、画面幅の関係で一部の操作ができなかったり、パソコンより操作しにくかったりする部分もあります。写真の選び直しはスマホで済ませて、欄の追加のような込み入った作業はパソコンでする、と分けたほうが無理がありません。
WordPress.comで作ったサイトなら、Jetpackアプリを使ってスマホからサイトを編集できます。スマホのカメラでその場で撮った写真も、端末に保存済みの写真も追加できます。既存のページを直したときは、UpdateかSaveで保存しましょう。
スマホで撮った写真のサイズにも気をつけてください。実際、端末で撮影した高画質な写真をそのまま載せると全体のデータ量が増加し、ページの読み込みが遅くなって閲覧者の通信費に影響を及ぼす場合があります。メニュー写真が何枚も並ぶページなら、アップロードの前に写真を小さくしておくと表示が軽くなります。
メニューの価格や品名も写真と一緒に自分で更新できますか？
写真だけでなく、料理の値段や品名も季節の変わり目や仕入れ値の変動に合わせて自分で更新できるのでしょうか。品名と価格を写真とは別の欄に分けて持たせておけば、写真の差し替えと同じ画面で文字も書き換えられます。
StudioのCMSでも、移行先の候補になるmicroCMSでも、文字・画像・数値の項目を自分で決められます。管理画面側で「料理名（テキスト）」「価格（数値）」「説明文」「写真（画像）」というように項目を分けて設計しておけば、飲食店の現場スタッフでもフォームに入力する感覚で金額や名前を打ち替えられますね。
WordPressの場合は、「メディアとテキスト」ブロックで写真と文字を横に並べて載せる方法があります。文字は入力欄にそのまま打ち込めて、写真は置換ボタンで入れ替わります。ただし、価格専用の入力欄が付いているわけではありません。品数が多いお店では、価格を書き換えるときに見落としが出やすいでしょう。
つまり、価格や品名は、画像に焼き込まずに文字で載せておいたほうが扱いやすいです。文字なら、その場で数字を打ち替えるだけで終わります。