ブランドコンポーネント

ブランドコンポーネント機能では、ヘッダー・フッター・バナーなどのデザイン要素を再利用可能なコンポーネントとして作成・管理できます。一度作成したコンポーネントは複数のアプリで共通利用でき、ブランドの一貫性を保ちながら効率的に運用できます。

ブランドコンポーネント画面へのアクセス

1. ダッシュボードにログインし、左サイドバーの 「構築」 をクリックします
2. 展開されたメニューから 「モバイルUI」 をクリックします
3. サブメニューの 「ブランドコンポーネント」 を選択します
4. ブランドコンポーネント管理画面（/build/mobile-ui/brand-components）が表示されます

ブランドコンポーネントの種類

以下の種類のコンポーネントを作成できます:

• ヘッダー: アプリ画面上部に表示されるヘッダーバー。ロゴ画像やブランドカラーを設定
• フッター: 画面下部のフッター領域。リンクやコピーライト表記などを配置
• バナー: プロモーションや告知に使用するバナー画像。タップ時のリンク先も設定可能
• カスタムブロック: 自由にデザインできる汎用コンポーネント

新しいコンポーネントの作成

ステップ1: コンポーネントタイプの選択

1. 画面右上の 「＋ 新規作成」 ボタンをクリックします
2. 作成するコンポーネントタイプを選択します（ヘッダー / フッター / バナー / カスタムブロック）
3. 選択すると、コンポーネント編集画面が開きます

ステップ2: 基本情報の入力

1. 「コンポーネント名」 フィールドに管理用の名前を入力します（例:「メインヘッダー 2024春」）
2. この名前はダッシュボード上の管理用であり、アプリには表示されません
3. 必要に応じて 「説明」 フィールドにメモを追加します

ステップ3: デザインの編集

コンポーネントタイプに応じた編集オプションが表示されます。

ヘッダーの場合

1. ロゴ画像: 「画像をアップロード」 をクリックしてロゴ画像を設定します
2. 背景色: カラーピッカーでヘッダーの背景色を選択します
3. テキストカラー: ヘッダー内のテキスト色を設定します
4. 高さ: ヘッダーの高さをピクセルで指定します（推奨: 56〜64px）

バナーの場合

1. バナー画像: 表示するバナー画像をアップロードします（推奨サイズ: 横幅1080px以上）
2. リンク先URL: バナータップ時の遷移先URLを入力します
3. 表示期間: バナーの表示開始日と終了日を設定できます（オプション）
4. 代替テキスト（alt）: アクセシビリティのための説明テキストを入力します

フッターの場合

1. フッターリンク: 表示するリンク項目を追加します（利用規約、プライバシーポリシーなど）
2. コピーライト: コピーライト表記を入力します
3. 背景色: フッターの背景色を設定します

ステップ4: プレビューと保存

1. 右側のプレビューでデザインを確認します
2. 問題がなければ 「保存」 ボタンをクリックします
3. コンポーネント一覧に新しいコンポーネントが追加されます

コンポーネントの適用

作成したコンポーネントをアプリに適用する手順:

1. コンポーネント一覧で適用したいコンポーネントを見つけます
2. コンポーネントカードの 「アプリに適用」 ボタンをクリックします
3. 適用先のアプリを選択するダイアログが表示されます
4. 対象アプリにチェックを入れ、「適用」 をクリックします
5. 選択したアプリにコンポーネントが反映されます

コンポーネントの一括更新

ブランドコンポーネントの最大のメリットは、一括更新機能です。

1. コンポーネントを編集して 「保存」 します
2. 「適用先すべてに反映」 ボタンが表示されます
3. このボタンをクリックすると、そのコンポーネントを使用しているすべてのアプリに変更が自動反映されます

一括更新後、各アプリで変更を公開するにはそれぞれ再ビルドが必要です。

コンポーネントの削除

1. 削除したいコンポーネントの 「⋯」（その他メニュー） をクリックします
2. 「削除」 を選択します
3. 確認ダイアログで 「削除する」 をクリックします

コンポーネントを削除すると、そのコンポーネントを使用しているすべてのアプリから自動的に除去されます。削除前にどのアプリで使用しているか確認してください。