トップコンテンツの設定

トップコンテンツ設定では、アプリのホーム画面（トップページ）に表示されるコンテンツの構成やレイアウトを自由にカスタマイズできます。ユーザーがアプリを開いたときに最初に目にする画面であるため、魅力的で使いやすい構成を心がけましょう。

トップコンテンツ設定画面へのアクセス

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

レイアウトタイプの選択

トップコンテンツのメインビジュアル部分には、以下の3つのレイアウトタイプから1つを選択できます。

カードリスト

1. レイアウトタイプ選択エリアで 「カードリスト」 をクリックします
2. コンテンツが縦方向にカード形式で一覧表示されます
3. 各カードにはサムネイル画像・タイトル・概要文が表示されます
4. 情報量が多いアプリや、ニュース・ブログ形式のコンテンツに最適です

ヒーロー

1. レイアウトタイプ選択エリアで 「ヒーロー」 をクリックします
2. 画面上部に大きなヒーロー画像が1枚表示されます
3. キャンペーンバナーやメインビジュアルを大きく見せたい場合に適しています
4. 画像の下にコンテンツセクションが続きます

カルーセル

1. レイアウトタイプ選択エリアで 「カルーセル」 をクリックします
2. 複数のバナー画像が横スワイプで切り替わるスライドショー形式になります
3. 自動再生の有無や切り替え間隔も設定できます
4. 複数のキャンペーンやお知らせを目立たせたい場合に最適です

コンテンツセクションの構成

メインビジュアルの下に表示されるセクションを追加・編集します。

セクションの追加

1. 画面下部の 「＋ セクションを追加」 ボタンをクリックします
2. セクションタイプの選択ダイアログが表示されます
3. 以下のようなセクションタイプから選択できます:
   • お知らせ: 最新のお知らせ記事を表示
   • コンテンツ一覧: 特定カテゴリのコンテンツをリスト表示
   • バナー: カスタムバナー画像とリンクを表示
   • クーポン: 利用可能なクーポンを表示
   • 商品: EC機能の商品を表示
4. タイプを選択すると、設定パネルが開きます
5. セクションタイトルや表示件数などを設定します

セクションの編集

1. 既存セクションの右側にある 鉛筆アイコン（編集） をクリックします
2. セクション設定パネルが開きます
3. タイトル、表示件数、表示スタイルなどを変更できます
4. 設定を変更したら 「適用」 をクリックします

セクションの並び替え（ドラッグ&ドロップ）

セクションの表示順序はドラッグ&ドロップで自由に変更できます。

1. 並び替えたいセクションの左端にある ドラッグハンドル（⠿ アイコン） にマウスカーソルを合わせます
2. マウスの左ボタンを押したまま、移動先の位置までドラッグします
3. 目的の位置でマウスボタンを離すと、セクションがその位置に移動します
4. 最上部のセクションがアプリのホーム画面で最初に表示されます

リアルタイムプレビューの確認

画面右側にスマートフォン型のプレビューが表示されます。

• レイアウトの変更やセクションの追加・並び替えがリアルタイムで反映されます
• プレビューを確認しながら、ユーザー目線で最適な構成に調整しましょう
• プレビュー内をスクロールして、画面全体の見え方をチェックできます

セクションの削除

1. 削除したいセクションの右側にある ゴミ箱アイコン をクリックします
2. 確認ダイアログが表示されるので 「削除」 をクリックします
3. セクションが一覧から削除されます

設定の保存

すべての変更が完了したら、画面右上の 「保存」 ボタンをクリックして変更を保存します。

トップコンテンツの変更はプレビューにすぐ反映されますが、公開中のアプリへの反映にはビルドの再デプロイが必要な場合があります。