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にて全画面で表示をご確認いただくことをお勧めします。

通知バッジ

ご注意

• 対応アプリバージョンを満たしていない場合、設定しても反映されません。
  対応アプリバージョンについて、詳しくは以下のサポートページをご参考ください。
  参考：『デザイン設定とは』

更新履歴

• 2026年6月24日 通知バッジのUI変更により、内容を更新
• 2025年9月3日 タブバー改善により、内容を更新
• 2025年3月7日 テキスト表示や太字設定について追記