Pepabo Design

App Bar

App Bar は、アプリケーションの最上位に配置される Header です。アプリケーション本体のタイトル（またはロゴ）を表示してブランドの印象を表現するとともに、アプリケーションの主要アクションとナビゲーションを提供します。

1. 概要 (Overview)

説明

App Bar は Leading、Body、Trailing の3つの領域で構成されます。

  • Leading: Menu アイコンの Button による Navigation 系コンポーネント（Side Navigation / Navigation Drawer）の開閉を担う領域。
  • Body: アプリケーションの名前やロゴを左寄せで配置する領域。
  • Trailing: アプリケーションの主要アクションを促す Button や、横方向のナビゲーションを配置できる領域。

Header が逆方向の遷移のみ行えるのに対し、App Bar は Leading の Menu Button や Trailing に置いた Navigation で横方向のビュー遷移も行えます。

このコンポーネントは Web アプリケーションの場合のみ使用します。ネイティブアプリケーションでは、インタラクションの一貫性や実装コストに優れたプラットフォーム標準のコンポーネント（iOS: Toolbars、Android: App bars）を使用します。

リンク

2. 構成要素 (Anatomy)

背景色などが違う3種類のapp-barが並んだキャプチャ

app-barのキャプチャに3つの構成要素Leading, Body, Trailingを加えて示した図表

ALeading

Menu アイコンの Button のクリックイベントで Navigation 系のコンポーネント（Side Navigation または Navigation Drawer）を開閉し、横方向のビュー遷移を行えます。Bottom Navigation で代わりが効く場合は必ず設置する必要はありません。

必須/任意: 任意

BBody

アプリケーションの名前やロゴを左寄せで配置します。Title を常に表示してホームビュー（ホームスクリーン、トップページ）へのアクセスを容易にします。

モバイルサイズかつ Bottom Navigation でホームビューにアクセスできる場合は、常にロゴが表示されている必要はありません。その場合はロゴ以外の要素（色やアイコン）でブランドを表します。

必須/任意: 必須

CTrailing

アプリケーションの主要アクションを促す Button や、横方向のナビゲーションを配置できる領域です。

  • 一般的なアクションは Icon のみの Button を配置できます。一般的ではないアクションは、Icon だけではアクションの内容が伝わりにくいため、テキストが入った Button を検討します。表示領域との兼ね合いで、デスクトップとモバイルで Button のテキスト/Icon を切り替えることも検討します。
  • アクションが多くモバイルなどで収まりきらない場合、Ellipsis Vertical または Ellipsis Horizontal のアイコンを用いて優先順位の低いアクションを格納できます。AppBar では Avatar の Button でログインユーザーに関する項目を格納することもできます。格納したアクションはドロップダウンメニューで表示します。
  • 検索クエリを入力する Textfield を配置できます。検索アクションの優先順位が高い場合はデフォルトで表示し、低い場合は Magnifying Glass の Icon のクリックイベントで展開します。
  • Trailing に Navigation を配置して横方向のビュー遷移を行うこともできます。情報の閲覧が大きな比重を占めるウェブサイトでのナビゲーション設計に有用です。

必須/任意: 任意

3. 使い分け (Usage)

いつ使うか

Web アプリケーションの最上位 Header として、ブランドの表現と主要アクション・ナビゲーションへのアクセスを提供する場面で使います。

いつ使わないか

  • ネイティブアプリケーション: インタラクションの一貫性や実装コストに優れたプラットフォーム標準のコンポーネント（iOS Toolbars / Android App bars）を使います。
  • サブアクションのみを並べる場合: タスクの完了に必ずしも必要ではないサブアクションを並べる場合は Header を使います。App Bar はアプリケーションの主要アクションを置く場所です。

類似コンポーネントとの違い

  • Header: タスクの完了に必ずしも必要ではないサブアクションを並べる用途。App Bar はアプリケーションの主要アクションを配置できる点と、Trailing に Navigation を配置できる点が異なります。
  • Side Navigation / Navigation Drawer: 縦並びの最上位ナビゲーション。App Bar の Leading に置いた Menu Button から開閉します。

4. バリエーション (Variants)

Appearance

App Bar の見た目を指定できます。

Modifier class
White*.-appearance-white
Filled.-appearance-filled
Transparent.-appearance-transparent

推奨される選び方の判断基準:

  • White: 基本の見た目。背景が白く、文字色は暗色。
  • Filled: ブランドカラーなどで塗りつぶした見た目。文字色は白色。
  • Transparent: 背景が透明な見た目。ランディングページなどで背景にヒーローイメージがある場合に、スクロール前は Transparent、スクロール後は White/Filled に変化させる用途で使えます。

Brightness

背景が透明な Appearance（Transparent）では、App Bar を置く環境の輝度に応じた見た目を指定できます。

Modifier class
Light*.-brightness-light
Dark.-brightness-dark

Position

画面上での配置方法を指定できます。

Modifier class
Fixed*.-position-fixed

実装

Mixin-based

HTML
<header class="app-bar-component">
  <div class="_content">
    <div class="_leading">
      <!-- Menu Button などを配置 -->
    </div>
    <div class="_body">
      <!-- アプリケーション名やロゴを配置 -->
    </div>
    <div class="_trailing">
      <!-- 主要アクションの Button や Navigation を配置 -->
    </div>
  </div>
</header>
SCSS
@use '@pepabo-inhouse/components-web' as inhouse;

.app-bar-component {
  @include inhouse.app-bar-style(
    $option: (
      appearance: white,
      brightness: light,
      position: fixed,
    )
  );
}

Class-based

HTML
<header class="in-app-bar -appearance-white -brightness-light -position-fixed">
  <div class="_content">
    <div class="_leading"></div>
    <div class="_body"></div>
    <div class="_trailing"></div>
  </div>
</header>
SCSS
@use '@pepabo-inhouse/components-web' as inhouse;

@include inhouse.app-bar-export;

5. ステート (States)

Default

App Bar が通常表示されている状態です。各内部要素（Button など）のステートは個々のコンポーネントに準じます。

スクロール時の変化

ランディングページなどで背景にヒーローイメージがある場合は、スクロールイベントに応じて Appearance を Transparent から White または Filled に変化させることができます。

6. アクセシビリティ (Accessibility)

このコンポーネント固有のチェック項目です。コントラスト・フォーカス可視化など全コンポーネント共通の原則はアクセシビリティガイドラインを参照してください。

  • ルート要素に <header> を用いる
  • Leading の Menu Button には aria-label="メニュー" などの分かりやすいラベルを設定し、aria-expanded で開閉状態、aria-controls で対応する Navigation を伝える
  • Body のホームリンクは <a> 要素でマークアップし、aria-label="ホーム" などホームへ戻る意味が伝わるラベルにする
  • Trailing の Icon のみの Button にはそれぞれ aria-label でアクションの内容を伝えるラベルを設定する
  • Transparent Appearance を使う場合は、背景画像とのコントラスト比が WCAG 基準を満たすことを確認する

7. ライティング (Writing)

  • Body のラベルはアプリケーション名・サービス名を入れる
  • Trailing の Icon Button には aria-label でアクション名を補完する（例: 「検索」「通知」「お気に入り」）
  • Trailing のテキスト付き Button は短く明確な動詞・名詞を使う（例: 「ログイン」「新規登録」）