メニュー設定

メニュー設定では、アプリ画面下部に表示されるボトムナビゲーション（タブバー）のメニュー項目を自由にカスタマイズできます。ユーザーがアプリ内の主要な機能にすばやくアクセスするための重要なナビゲーション要素です。

メニュー設定画面へのアクセス

1. ダッシュボードにログインし、左サイドバーの 「構築」 をクリックします
2. 展開されたメニューから 「モバイルUI」 をクリックします
3. サブメニューの 「メニュー設定」 を選択します
4. メニュー設定画面（/build/mobile-ui/menu-settings）が表示されます

ボトムナビゲーションの基本構成

ボトムナビゲーションには最大 5つ のメニュー項目を配置できます。各メニュー項目は以下の要素で構成されます:

• アイコン: タブに表示されるアイコン画像
• ラベル: アイコンの下に表示されるテキスト
• リンク先: タップした際に遷移する画面やURL

メニュー項目の追加

1. メニュー一覧の下にある 「＋ メニュー項目を追加」 ボタンをクリックします
2. メニュー項目の設定パネルが開きます

アイコンの設定

1. 「アイコン」 エリアをクリックします
2. アイコン選択ダイアログが表示されます
3. 以下の2つの方法でアイコンを設定できます:
   • プリセットアイコン: 用意されたアイコンライブラリから選択（ホーム、検索、カート、お気に入り、プロフィールなど多数）
   • カスタムアイコン: 独自のアイコン画像をアップロード（推奨サイズ: 48×48px、PNG形式・透過背景）
4. お好みのアイコンを選択またはアップロードし、「決定」 をクリックします

ラベルの設定

1. 「ラベル」 テキストフィールドにメニューの表示名を入力します
2. 例: 「ホーム」「お知らせ」「ショップ」「マイページ」など
3. 推奨文字数: 4文字以内（長すぎると表示が切れる場合があります）

リンク先の設定

1. 「リンク先」 ドロップダウンをクリックします
2. リンクタイプを選択します:
   • アプリ内コンテンツ: トップ画面、お知らせ一覧、コンテンツカテゴリなどのアプリ内画面を選択
   • 機能ページ: チャット、予約、EC（ショップ）、スタンプカードなどの機能画面を選択
   • 外部URL: 任意のWebページURLを入力（アプリ内ブラウザまたは外部ブラウザで開く設定が可能）
3. 対象のリンク先を選択または入力します

メニュー項目の編集

1. 編集したいメニュー項目をクリックします
2. 設定パネルが開き、アイコン・ラベル・リンク先をそれぞれ変更できます
3. 変更後、「適用」 をクリックして反映します

メニュー項目の並び替え

メニューの表示順序はドラッグ&ドロップで変更できます。

1. 並び替えたいメニュー項目の左端にある ドラッグハンドル（⠿） をつかみます
2. そのまま上下にドラッグして、希望する位置に移動します
3. マウスボタンを離すと位置が確定します
4. 左端のメニュー項目がアプリのボトムナビゲーションの一番左に表示されます

メニュー項目の削除

1. 削除したいメニュー項目の右側にある ゴミ箱アイコン をクリックします
2. 確認ダイアログが表示されます
3. 「削除」 をクリックすると、メニュー項目が削除されます

ボトムナビゲーションには最低1つのメニュー項目が必要です。すべてのメニュー項目を削除することはできません。

プレビューで確認する

画面右側のプレビューで、ボトムナビゲーションの表示を確認できます。アイコンの視認性やラベルの読みやすさを確認し、必要に応じて調整してください。

設定の保存

すべてのメニュー設定が完了したら、画面右上の 「保存」 ボタンをクリックして変更を保存します。

メニュー設定の変更は、アプリの再ビルド後に反映されます。プレビューで確認し、問題がなければデプロイを実行してください。