カフェメニュー作成ツール 使い方ガイド

画像とCSVデータから美しいメニューレイアウトを自動生成するツールです

← ツールに戻る

概要

このツールを使用すると、以下のことができます：

  • 商品画像を一括でアップロード・管理
  • CSVファイルからメニューデータを自動読み込み
  • 4種類のレイアウトスタイルから選択
  • カテゴリーごとにイメージ画像を設定
  • 完成したメニューを高品質な画像として保存
💡 ポイント

アップロードした画像はブラウザのIndexedDBに保存されるため、ページを再読み込みしても画像は保持されます。

ステップ1: 画像の登録

1-1. 画像のアップロード

  1. 「1. 画像を登録」セクションの「ファイルを選択」ボタンをクリック
  2. 商品画像を選択（複数選択可能）
  3. アップロードされた画像がサムネイルで表示されます

1-2. 画像の管理

  • 各画像の右上の「×」ボタンで個別に削除できます
  • 画像にはファイル名が表示されます
  • 画像は自動的にIndexedDBに保存されます
推奨される画像形式：
  • 形式: JPEG, PNG, WebP
  • サイズ: 800×800px以上推奨
  • アスペクト比: 正方形が最適ですが、どの比率でも対応可能

ステップ2: CSVファイルの準備と読み込み

2-1. CSVファイルの形式

以下の形式でCSVファイルを作成してください：

商品名,価格,説明,画像ファイル名,カテゴリー

2-2. CSVファイルの例

商品名,価格,説明,画像ファイル名,カテゴリー
ブレンドコーヒー,400,厳選した豆を使用した当店自慢のブレンドコーヒー,coffee1.jpg,ホットドリンク
カフェラテ,500,エスプレッソとスチームミルクの絶妙なハーモニー,latte1.jpg,ホットドリンク
アイスコーヒー,450,深煎り豆を使用した香り高いアイスコーヒー,icecoffee1.jpg,コールドドリンク
チーズケーキ,600,濃厚でクリーミーなニューヨークチーズケーキ,cheesecake1.jpg,デザート

2-3. CSVファイルの読み込み

  1. 「2. CSVファイルを読み込む」セクションの「ファイルを選択」ボタンをクリック
  2. 作成したCSVファイルを選択
  3. データが正常に読み込まれると、カテゴリー画像設定セクションが表示されます
💡 ヒント

画像ファイル名は、アップロードした画像のファイル名と一致させてください。大文字小文字も区別されます。

ステップ3: カテゴリー画像の設定（リスト表示用）

3-1. カテゴリー画像とは

リスト表示を選択した場合、各カテゴリーの左側に表示される画像です。カテゴリーの雰囲気を表現できます。

3-2. 画像の設定方法

  1. CSVを読み込むと、自動的に「3. カテゴリー画像を設定」セクションが表示されます
  2. 各カテゴリーの「画像を選択」ボタンをクリック
  3. 画像ギャラリーが開きます
  4. 登録済みの画像から選択してクリック
  5. 選択した画像がプレビューに表示されます
カテゴリー画像の活用例：
  • ホットドリンク → コーヒー豆の画像
  • デザート → ケーキの画像
  • モーニング → 朝食セットの画像

ステップ4: レイアウトと通貨の設定

4-1. レイアウトタイプ

グリッド

商品をカード形式でグリッド表示。視覚的にわかりやすく、モダンな印象。

リスト

カテゴリーごとに整理された一覧表示。カテゴリー画像を左側に配置可能。

カード

影付きの洗練されたカードデザイン。高級感のある表現に最適。

雑誌風

画像とテキストを交互に配置。ストーリー性のある表現が可能。

4-2. 列数の設定

グリッドやカードレイアウトでは、1〜4列まで選択できます。画面サイズや商品数に応じて調整してください。

4-3. テーマの選択

  • クラシック：伝統的で落ち着いた雰囲気
  • モダン：シャープで現代的なデザイン
  • ラスティック：温かみのある素朴な雰囲気
  • ミニマル：シンプルで洗練されたスタイル

4-4. 通貨設定

通貨単位

通貨単位は自由に入力できます。プリセットから選択することも可能です。

入力例：
  • 通貨記号：¥、$、€、£、₩
  • 文字：円、ドル、元、ウォン
  • ゲーム通貨：pt、P、G、Gold、コイン
  • カスタム：ポイント、クレジット、★
  • 空欄：通貨単位を表示しない

プリセット

よく使われる通貨単位をワンクリックで設定できます。

通貨位置

  • 価格の前：$100、¥500、★100など
  • 価格の後：100円、500pt、100Goldなど

ステップ5: メニューの生成と保存

5-1. メニューの生成

  1. すべての設定が完了したら「メニューを生成」ボタンをクリック
  2. 右側のプレビューエリアにメニューが表示されます
  3. レイアウトや設定を変更して、再度生成することも可能です

5-2. 画像として保存

  1. メニューが生成されたら「画像として保存」ボタンが有効になります
  2. ボタンをクリックすると、高解像度のPNG画像がダウンロードされます
  3. ファイル名は「cafe-menu-YYYY-MM-DD.png」形式で保存されます
💡 保存時の注意点
  • エクスポートには数秒かかる場合があります
  • 画像は2倍の解像度で出力されるため、印刷にも適しています
  • 幅1200pxの固定サイズで出力されます

便利な機能とTips

画像の永続保存

アップロードした画像はIndexedDBに保存されるため：

  • ブラウザを閉じても画像は保持されます
  • 次回アクセス時も同じ画像を使用できます
  • 「クリア」ボタンで全データを削除できます

効率的な作業フロー

  1. 最初にすべての商品画像とカテゴリー画像をアップロード
  2. Excelなどで商品データを管理し、CSV形式で保存
  3. 異なるレイアウトで複数バージョンを作成
  4. 季節やイベントに応じてテーマを変更

トラブルシューティング

Q: 画像が表示されない

A: CSVファイルの画像ファイル名と、アップロードした画像のファイル名が一致しているか確認してください。

Q: レイアウトが崩れる

A: ブラウザを最新版にアップデートするか、Chrome/Edge/Firefoxなどのモダンブラウザを使用してください。

Q: 保存した画像の文字が小さい

A: 画像は高解像度で出力されています。画像ビューアで拡大表示してご確認ください。