CMS（管理画面）の「デザイン」＞「ナビゲーションバー」では、アプリ上部に位置する「ナビゲーションバー」エリアの編集が可能です。

「ナビゲーションバー」エリアでは、以下の項目について編集が可能です。

①レイアウト
②スタイル 

なお、ボディ部分〜下部タブバーの色やデザインについては、以下のサポートページをご確認ください。

参考：『共通スタイル - デザイン設定』
参考：『タブバー - デザイン設定』

レイアウト

レイアウト設定では、ロゴ画像の位置やナビゲーションバーに表示するアイコンを設定します。

①	表示項目	以下の3つから選択可能です。 ・ロゴ　※デフォルト 　全ての画面でロゴを表示します。 ・タイトル+ホームのみロゴ 　ホーム画面のみロゴを表示し、ホーム画面以外では各コンテンツ名を表示します。 　※ホームはアクティブの一番左の機能を指します。 ・タイトル 　全ての画面でタイトル（コンテンツ名）を表示します。 ご注意 ・v12.0.0以降のアプリのウェブビュー画面では、コンテンツ名ではなくウェブサイトのタイトルが表示されます。
②	表示位置	・以下の2つから選択可能です。 ・中央　※デフォルト 　ロゴまたはタイトルを中央寄せで表示します。 　アイコンは無視して端末の横幅の中央に配置します。 ・左 　ロゴまたはタイトルを左寄せで表示します。 　左にアイコンがある場合はアイコンの右から表示し、左にアイコンがない場合は左詰めで表示します。
③	ロゴ画像	・ヘッダーに表示されるロゴ画像を入稿できます。 ・ロゴの表示エリアに合わせて画像が収まるよう拡大縮小され表示されるため、推奨サイズの規定はありません。 ・ロゴの表示エリアはアイコンの数や揃えにより変動します。
④	アイコン	・トグルをONにすることで、左に1つ、右に最大2つのアイコンを設置することができます。 ・アイコン画像はコンテンツ一覧で設定されているもので表示されます。 ・リンク設定で表示する機能を選択してください。

リンクファインダーにて設定可能な機能

• リンク
• ボトムシート
• ポップアップ
• モーダル（従来のウェブビュー機能、ポイントカード機能の見え方）
• バーコードリーダー/QRコードリーダー

ご注意

• ナビゲーションバーにて、イントロ機能を設置すること、Shift+クリックでのURL直接入力（外部ブラウザ起動）を行うことは非推奨となります。
  参考：『リンク設定でウェブビューを通さず直接ブラウザを立ち上げる』

アイコン画像の変更方法

ナビゲーションバーに配置したアイコン画像を変更するには、通常のコンテンツ一覧画面での変更に加え、ナビゲーションバー画面でのリンク設定の再保存が必要です。

1. コンテンツ一覧にて、該当コンテンツの「アイコン変更」より編集します。
   参考：『コンテンツのアイコンを変更する』
2. ナビゲーションバー＞該当のアイコンにて、リンクファインダーをクリックし再度保存します。
   

ヒント

• ナビゲーションバーのアイコンは、SVG形式に対応しています。
• v12.0.0未満のアプリでは、SVGアイコンを設定しても空白で表示されますのでご注意ください。
  参考：『デザイン設定とは』

スタイル

スタイル設定では、背景画像やアイコン、通知バッジなどのカラー設定をします。

基本スタイル

通知バッジ

参考：『アプリ内の通知バッジのカラーを設定する』

カラー設定

カラーコードでの設定の他にも、カラー領域をクリックすると色を直感的にドラッグ＆ドロップで操作できるパレットが表示されます。イメージに合う色を選択してください。
また、右側のパーセンテージを変更することで透明度を変更することができます。
※0%が透明、100%が不透明です。

更新履歴

• 2026年6月24日 通知バッジのUI変更により、内容を更新
• 2025年9月3日 タブバー改善により、内容を更新
• 2025年6月5日 CMS（管理画面）でのナビゲーションバーの設定方法について、説明を追記
• 2025年4月22日 リンクファインダーにて設定可能な機能内に、イントロ機能設置が非推奨である旨ご注意に追記
• 2025年3月12日 リンクファインダーにて設定可能な機能内と、スタイル⑤「アイコンカラー」にご注意を追記
• 2025年2月12日 レイアウト①「表示項目」に、タイトル表示を選択している場合のご注意を追記
• 2025年2月5日 アプリナビゲーション改修に伴い、内容を更新