TitleBar モバイル表示が刷新：プライマリアクションがアイコンボタンへ

8月 16, 2026

APP BRIDGE

TitleBar モバイル表示が刷新
プライマリアクションがアイコンボタンへ

ボトムバーが廃止され、ヘッダー内アイコンに一本化。2026年4月15日から全埋め込みアプリに適用。

2026年4月15日より、Shopify埋め込みアプリのモバイル表示において、TitleBarのプライマリアクションがヘッダー内のアイコンボタンとして描画されるようになります。これまで画面下部に表示されていたActionBar（ボトムバー）は廃止され、セカンダリアクションはオーバーフローメニューへ移動します。TitleBarにプライマリまたはセカンダリアクションを定義している全ての埋め込みアプリが対象です。

1変更内容の詳細：Before / After

2業務に活かせる具体ユースケース

課題: 商品登録アプリでプライマリアクションに「保存」ボタンを配置しているが、アイコンを指定していないため、変更後は「＋」アイコンが表示されてしまい操作意図が伝わらない。
打ち手: TitleBarのプライマリアクションに icon: SaveIcon（App Bridgeが提供するアイコントークン）を明示的に渡すよう実装を修正する。
効果: モバイルユーザーがヘッダーのアイコンを見た瞬間に「保存操作」と直感できるようになり、誤タップ・操作ミスが減少する。
技術メモ: icon プロパティは App Bridge の TitleBar コンポーネントの primaryAction オブジェクトに渡す。未指定時は自動的に + アイコンにフォールバックされる。

課題: 受注管理アプリでセカンダリアクションを3〜4個定義しており、モバイルのボトムバーに並べていたが、廃止後はユーザーが操作を見つけにくくなる可能性がある。
打ち手: セカンダリアクションが自動的にオーバーフローメニューへ移動することを前提に、アクションのラベル文言を「メニュー内でも分かりやすい短文」に見直す。
効果: オーバーフローメニュー内でも操作が直感的に理解でき、UXの一貫性を保つことができる。
技術メモ: セカンダリアクションの定義コード自体の変更は不要。ラベル・icon の見直しのみで対応可能。

課題: 既存の埋め込みアプリでプライマリアクションが「新規作成」「インポート」など複数のシナリオで共有されており、コンテキストに応じたアイコンが異なる。
打ち手: 画面（ルート）ごとに TitleBar をレンダリングする際、primaryAction.icon をそれぞれのコンテキストに応じた値（例: ImportIcon / PlusIcon）に切り替える実装を行う。
効果: モバイルユーザーが現在の画面で何ができるかをアイコンで即座に把握でき、タスク完了率の向上が期待できる。
技術メモ: App Bridge の TitleBar はルートごとに再定義可能。React ベースの場合は条件分岐で icon プロパティを動的に切り替えることができる。

3技術者向けチェックポイント

破壊的変更

ActionBar の廃止

モバイルのボトムバー（ActionBar）は2026年4月15日をもって廃止。別途 ActionBar コンポーネントを使用しているケースも確認が必要。

要確認

icon 未指定時のフォールバック

primaryAction に icon を渡さない場合、自動的に「＋」アイコンが表示される。プライマリアクションが「保存」「削除」「エクスポート」など＋以外の意味を持つ場合は必ず icon を明示すること。

影響範囲

対象アプリ

TitleBar にプライマリアクションまたはセカンダリアクションを定義している全ての埋め込みアプリ（embedded apps）が対象。管理画面非組み込みのアプリは影響なし。

対応不要ケース

＋アイコンで問題ない場合

「新規追加」「作成」など＋アイコンが意味的に適切なプライマリアクションであれば、コードの変更は一切不要。

UX変化

セカンダリアクションの移動

セカンダリアクションはオーバーフローメニュー（⋮ メニュー）へ自動的に移動する。コードの変更は不要だが、ラベルや icon の見直しを推奨。

確認推奨

適用日と即時反映

変更は2026年4月15日に全対象アプリへ一斉適用。ステージング環境での事前動作確認を強く推奨。元記事にロールバック手段の記載なし。

項目	変更前	変更後
プライマリアクション（モバイル）	ボトムバーにアイコン＋テキスト表示	ヘッダー右側にアイコンボタンのみ表示
セカンダリアクション（モバイル）	ボトムバーに並列表示	オーバーフローメニュー（⋮）へ移動
icon 未指定時	テキストラベルで表示	「＋」アイコンにフォールバック
コード変更の要否	—	icon 未指定かつ＋以外の意味なら要修正
適用日	—	2026年4月15日（全アプリ一斉）