メニューレイアウトを編集・新規作成する

概要

Okage Goフリーレイアウト管理画面では、新管理画面で登録したメニューマスターをメニューレイアウトの画像に割り当て、フリーレイアウトの注文画面を作成することができます。

以下の手順で説明してまいります。


1.メニューレイアウト画像の作成

フリーレイアウトのモバイルオーダーのセルフオーダー画面のメニューレイアウトは店舗様にてご用意いただいております。 以下、画像サイズの仕様やデザインの注意点をご覧になり、制作をお願いいたします。

モバイルオーダー 画像の規定

スマートフォンの機種により画像サイズが異なります。
どの端末でも画像の横幅がいっぱいに表示されます。

推奨サイズ 横幅:750px
縦:1045~1200px
ファイル形式 jpgまたは png
ファイル容量制限
(1 ページあたり)
2MB
画面の向き 縦のみ

スマートフォン端末一例:

iPhone 横幅 縦幅
6・6s・7・8 750px 1045px
(横幅×約1.4倍)
X・Xs・11 Pro 1125px 1833px
(横幅×約1.6倍)
デザインの注意点

スマートフォンで表示される画面は小さいため 、閲覧性・タップのしやすさを考慮し文字や写真は大きめに配置してください。

画像の制作ができましたら、3.にて画像の割り当てを行っていきましょう。


2.フリーレイアウトの作成・編集(Okage Go管理画面)

1. Okage Go管理画面にログインします。
※端末はPCかタブレットをご利用ください(PC推奨)
※ブラウザはGoogleChromeかSafariをご利用ください。

2. メニューレイアウトをクリックします。

3. メニューレイアウトの編集にあたり、以下を行ってください。

A. 現状のメニューレイアウトにページを追加する場合

A-1. 該当のメニューレイアウトの「編集」をタップします。

B. 新規のメニューレイアウトを作成する場合

B-1. 右横の「新規作成」のテキストをクリックします。

B-2. メニューレイアウトの名前をつけます。

Inside Default Flagとは、店内モバイルオーダーでの初期設定の意味で、ONにすると常時このメニューレイアウトがハンディでQRコードを表示する際の初期値として設定されます。

Outside Default Flagとは、店外モバイルオーダーに関する設定ですのでここではそのままで結構です。

B-3. 作成したメニュー右「レイアウト編集」をクリックします。

4. いよいよメニューレイアウトの編集です。

〜編集画面イメージ〜

画像割り合ての仕様

現在のメニューレイアウトを編集する場合、すでに設定された背景画像にピンク色の四角いオブジェが乗っているのが確認できます。
このピンクのオブジェはモバイルオーダー 画面でのタップエリアとなっており、形は四角、または丸から選択して配置することができます。

それぞれのオブジェを選択すると、角に色のついた■が表示されます。それぞれの機能は以下の通りです。

  • 青■(右下)…押しながらサイズ変更
  • 緑■(右上)…押しながら回転
  • 赤■(左下)…クリックで削除
  • 黄■(中央下)…「売切れロック」画像を非表示に
メニューの紐付け

オブジェクトを配置後、ページ下部からそれぞれ該当するメニューラベルをピンクのタップエリアにドラッグ&ドロップし、メニューデータを紐付けます。

新規ページ作成

5. 既存のメニューレイアウトにページを追加する場合は、画面右横の「ページ移動」から一番最後のページへ行き、さらに「次へ」を押すと、背景が設定されていないページが開かれます。

6. 画面右手の「背景画像設定」にて、「ファイルを選択」、作成した画像を選択します。※アップロードに少々時間がかかります。表示されるまでそのままお待ちください。

「索引名」と書かれたテキストボックスにて、「ページ名」を編集できます。
メニューの割当て

7. 背景画像左上の記号から四角または丸のオブジェを選択し、背景画面上でリンクにしたい範囲にマウスでドラッグしながらオブジェクトを作図します。

【オブジェの編集】

  • 青■(右下)…押しながらサイズ変更
  • 緑■(右上)…押しながら回転
  • 赤■(左下)…クリックで削除
  • 黄■(中央下)…「売切れロック」画像を非表示に

9. オブジェクトを配置後、ページ下部からそれぞれ該当するメニューラベルをピンクのタップエリアにドラッグ&ドロップし、メニューデータを紐付けます。 縦長なので下の方がパソコンで表示されないことが多く、少し画面比率を小さめにすると使い勝手が良くなります。

【備考】メニュー数が多い時は検索窓やカテゴリ名から絞れます。

各ページへのショートカットリンク
「メニュー」の横の「索引」は、各ページへのショートカットリンクです。メニューレイアウト冒頭に目次ページを作りリンクを貼ったり、ページ内に導線を貼りめぐらせることで、注文数のアップが見込めます。

SNSのURLを貼り付ける
ページ下部「URL」のタブから、お店のSNSなどのリンクを貼ることができます。リンクを貼りたい場合は最初にページ上部「設定」>「URL設定」から、「新規登録」で利用したいURLを登録してください。※LINE@へのリンク設定はOkageへお問い合わせください。

詳しくは以下のマニュアルに記載しております。
基本設定/モバイルオーダー設定
上記ページの「URL設定」をご覧ください。

10. 編集後は必ず右側オレンジのボタン「このページを保存」をクリックしてください。

ページの並び替え

ページ右上の水色ボタン「ページの並び替え」から、ページ画像をドラッグしながら並び替えができます。

ページの削除

削除したいページの右側の赤ボタン「このページを削除」から削除することができます。

予備知識

画面右側の文字をクリックしてメニューリンクを割り当てることもできます。
※リンクエリアのオブジェクトを選択した状態でクリックしてください。

 一覧へ戻る