CMS（管理画面）の「デザイン」＞「タブバー」では、アプリ下部のタブバーのデザインについて編集が可能です。

アプリ上部〜ボディ部分の色やデザインについては、以下のサポートページをご確認ください。

参考：『ナビゲーションバー - デザイン設定』
参考：『共通スタイル - デザイン設定』

スタイル

背景

テキスト

ご注意

• テキストの表示・太さのご利用にはアプリバージョン要件を満たす必要がございます。
  参考：『デザインを設定する前に』
• 古いバージョンのアプリで閲覧した場合、テキストの太さ「選択時のみ太字」は古い値（標準 / 太字）で表示されます。

ヒント

• アイコンの名称の文字数が多い場合の挙動は以下の通りです。
  ・v12.23.0未満：iOSは貫通して全文表示、Androidは2行で表示
  ・v12.23.0以降：両OSともにフォントサイズを小さくし、全文を表示します。
  これにより、タブバーのコンテンツ名ごとに文字サイズが揃わない場合があります。

アイコン

ご注意

• アイコンアニメーションのご利用にはアプリバージョン要件を満たす必要がございます。
  参考：『デザインを設定する前に』

ヒント

• タブバーに配置するアイコンは、SVGアイコンに対応します（その他機能を除く）。
• 古いバージョンのアプリで閲覧した場合、SVGアイコンを設定しても、iOS v12.23.0未満 と Android v12.0.0未満は表示されず（空白になる）、Android v12.0.0以降は表示されます。

中央のタブ

ご注意

• 中央のタブご利用にはアプリバージョン要件を満たす必要がございます。
  参考：『デザインを設定する前に』
• 古いバージョンのアプリで閲覧した場合、設定しても反映されません。

ヒント

• 「中央のタブを強調」を有効にした場合、円形のタブがコンテンツの一部に重なり、隠れてしまう領域が発生します。
  そのためPreview Yappli にて全画面で表示をご確認いただくことをお勧めします。

更新履歴

• 2025年9月3日 タブバー改善により、内容を更新
• 2025年3月7日 テキスト表示や太字設定について追記