アプリのトップページのデザイン

Shopper App は、柔軟なユーザーインターフェースと汎用テンプレートのセレクションでアプリ構築プロセスを効率化します。テーマの更新はリアルタイム同期を通じてアプリにシームレスに統合されます。

この記事では、Shopper Appの事前構築されたパーツを活用して、顧客に魅力的で視覚的に優れたトップページをデザインする方法をご案内します。

トップページエディターへのアクセス

アプリのトップページのデザインとカスタマイズにアクセスするには、以下の手順に従ってください：

1. SHOPLINE管理画面から、チャネル > Shopper App > アプリデザイン に進み、デザイン をクリックします。

   

2. 上部のドロップダウンメニューから トップページ を選択します。

   

3. 左側のサイドバーメニューを使って、トップページの各セクションの設定を構成します。各機能は以下のセクションで紹介しています。

   

トップナビゲーション

トップナビゲーション モジュールでは、トップページのヘッダーに表示されるパーツをカスタマイズできます。これらの設定はアプリ内のすべてのページに適用されます。

このモジュールには、左上アイコン、中央、および 右上アイコン の3つの設定可能なセクションがあります。各セクションはナビゲーションを強化し、ユーザーのエンゲージメントを向上させるよう設計されています。

各セクションで利用可能なパーツ

トップナビゲーションパーツの設定方法

トップナビゲーション モジュールは、以下の手順で設定できます：

1. トップページに移動し、次にトップナビゲーションをクリックしてメニューを開きます。

2. 設定したいセクションを選択します：左上アイコン、中央、または右上アイコン。

   

3. パーツタイプのドロップダウンから、追加したいパーツタイプを選択します：

• アイコン：＋追加 アイコンをクリックして、最大3つの定義済みオプションを挿入します。
• ロゴ：ストアのロゴをアップロードします。最適な結果を得るには、4:1のアスペクト比または384×96ピクセルの画像を使用してください。
• 検索バー：定義済みの検索バーを追加して、顧客がサイトを便利に閲覧できるようにします。

4. 保存または公開をクリックして設定を適用します。

お知らせバナー

お知らせバナーはトップナビゲーションバーのすぐ下にあります。トップページにはお知らせバナーを1つだけ表示でき、削除や並べ替えはできません。4つの表示スタイルが利用可能です：左右にスライド、上下にスライド、点滅切替、および間隔を空けて中央揃え。バナーの背景色とテキスト色をカスタマイズしたり、アナウンスのスケジュールを設定したりできます。

最大3つのお知らせを同時に表示できます。各お知らせについて、タイトルの修正、リダイレクトリンクの追加、カウントダウンの有効化が可能です。カウントダウンの位置と色もカスタマイズできます。カウントダウンが指定された終了時間に達すると、00:00:00:00と表示されます。

検索バー

検索バーセクションでは、お知らせバナーの下に検索バーを表示するかどうかを決められます。これにより、顧客は探している商品を素早く簡単に見つけることができます。

検索バーは位置を変更できませんが、目のアイコンをクリックして非表示にすることができます。

ページネーションパーツ

ページネーションパーツはお知らせバナーの下にあり、削除や並べ替えはできません。ウェブサイトのトップページの異なるタブを設定するには、以下の手順に従ってください：

1. デフォルトでは、ページネーションパーツは無効になっています。ページネーションパーツをクリックして有効にします。
2. 各セクションをクリックしてタブの名前を修正します。最大10個のタブを追加するには、ページネーションパーツを追加をクリックします。
3. デザインしたいページを選択し、各タブに希望のパーツを追加して必要に応じて設定を行います。右側のプレビューパネルは動的にタブを切り替え、適用された効果をリアルタイムで表示します。

本文パーツ

本文セクションには2種類のパーツがあります：

• デフォルト：ベーシックパーツ、商品パーツ、カテゴリパーツ、アプリパーツの4種類のパーツをサポートします。

• カスタム：カスタムパーツの開発をサポートし、トップページに埋め込んでブランドアプリのデザインや機能を強化できます。

ベーシックパーツ

• カルーセル: 自分のプリファレンス設定に応じて、自動切り替え間隔、サイズ、公開スケジュールを設定できます。ここで画像または動画を追加することができます。
  • 画像: 対応ファイル形式はpng、jpg、jpeg、gifです。顧客をカテゴリページ、商品詳細ページ、カスタムページ、および任意のウェブページに誘導するリンクを任意で挿入できます。
  • 動画: YouTubeおよびVimeoのリンクに対応しています。
    
• カスタム画像バナー: 対応ファイル形式はpng、jpg、jpeg、gifです。画像の幅は最低1123pxである必要があります。必要に応じて公開スケジュールを設定してください。
  
• カスタム動画バナー: 動画をローカルからアップロードします。動画のサイズは10MBを超えてはいけません。カバー画像をアップロードしない場合は、自動的に生成されます。希望のアスペクト比を選択し、リダイレクトリンクを挿入し、必要に応じて公開スケジュールを設定できます。
  
• カウントダウン: 期間限定のプロモーションを行う場合、緊急感を演出するためにカウントダウンを設定できます。タイトルを付け、終了時間をスケジュールし、テキストの色を選択できます。必要に応じてカウントダウン後の画像トグルをオンにし、カウントダウン終了後に表示される画像をアップロードしてください。
  
• カスタム画像とカスタマイズ可能なホットゾーン: 1つの画像上に複数のインタラクティブなエリア（ホットゾーン）を定義でき、それぞれのゾーンが商品詳細ページやカテゴリページなど異なるリンク先に繋がります。
  • カスタム画像: PNG、JPG、JPEG、GIF形式の画像アップロードに対応しています。画像のパディングもカスタマイズ可能です。
    
  • ホットゾーン設定: ホットゾーンを追加をクリックするとポップアップウィンドウが開きます。ホットゾーンを個別に追加し、必要に応じてサイズやリンク先ページを調整します。ホットゾーンが重なった場合は、インデックスが最も高いものが優先されます。
    

• Bento Grid: Bento Gridパーツは、ホームページに特集コンテンツを柔軟なグリッドレイアウトで表示します。Half card - Custom imageとHalf card - Categoryカードを組み合わせて、ブランド、プロモーション、商品カテゴリを紹介できます。最大で10枚のカードを追加できます。

  • Half card - Custom image: 単一の画像（アスペクト比2:5–4:1、最大2 MB）をアップロードし、リダイレクト先を設定します。Activation timeを使ってカードの表示スケジュールも設定可能です。

    

  • Half card - Category: リンクされたカテゴリと並べ替えルールを選択します。背景画像、タイトル、サブタイトル、表示する商品カードの数、自動スクロールの動作も設定可能です。Activation timeを使ってカードの表示スケジュールを設定できます。

    

  注意事項: カードが1枚の場合、パーツの高さはそのカードの高さに合わせます。カードが2枚の場合は、高い方のカードの高さに合わせます。低い方のカードは引き伸ばされず、下部に空白が残ります。 リンクされたカテゴリが利用できなくなった場合、そのカードのみ非表示になります。すべてのカードが利用できなくなった場合、Bento Gridパーツ全体が非表示になります。

商品パーツ

以下のパーツオプションを使用して商品を表示できます：

• 商品リストA および 商品リストB: これらのパーツは商品をグリッドレイアウトで表示します。商品リストAは1行に2アイテムを表示し、商品リストBは3アイテムを表示します。表示要件に最適なテンプレートを選択してください。両リストタイプとも、タイトルの設定、商品カテゴリの選択、並べ替え方法の選択、表示する商品の最大数の設定、商品ランキングバッジの有効化が可能です。また、カスタマイズ可能なテキストとリダイレクトリンクを持つボタンの表示や、パーツの有効化時間のスケジュール設定もできます。
  
• マルチカテゴリ商品リストA および マルチカテゴリ商品リストB: 標準の商品リストと同様に、これらのオプションは商品をグリッドレイアウトで表示しますが、複数のカテゴリから商品を紹介できます。マルチカテゴリ商品リストAは1行に2アイテムを表示し、マルチカテゴリ商品リストBは3アイテムを表示します。表示要件に最適なテンプレートを選択してください。
  • 表示スタイル: 両方のマルチカテゴリリストタイプで、タイトルの設定、表示する商品の最大数の設定、商品ランキングバッジの有効化が可能です。また、カスタマイズ可能なテキストとリダイレクトリンクを持つボタンの表示や、パーツの有効化時間のスケジュール設定もできます。
  • マルチカテゴリ設定: これらのマルチカテゴリリストには最大5つのカテゴリをサブパーツとして追加できます。ドラッグ＆ドロップでカテゴリの順序を変更できます。各サブパーツをクリックして、希望のカテゴリを選択し、そのタイトルを変更し、該当カテゴリ内の商品並べ替え順を指定してください。

• 商品カルーセル: カルーセルで表示したい商品を含むカテゴリを選択します。タイトルを追加したり、商品の並べ替え方法を選択したり、商品ランキングバッジを有効にしたり、商品カードのスタイル（標準または枠付き）と配置をカスタマイズできます。また、表示開始時間をスケジュール設定し、カスタマイズ可能なテキストとリダイレクトリンクを持つボタンを表示することもできます。
  
   

• 商品ショーケース: 表示したい商品を含むカテゴリを選択します。商品はコラージュ形式で表示されます。パーツにタイトルを追加し、商品の並べ替え方法を決定し、公開時間をスケジュール設定できます。必要に応じてボタンを表示することも可能です。ボタンのテキストとリダイレクトリンクはカスタマイズできます。
  

  注： 無効な商品を除くカテゴリ内の最初の6商品が、選択した並べ替え方法に従ってパーツに表示されます。プレビュー内の番号タグはあなただけに表示され、Appのトップページには表示されません。

• 商品カテゴリ表示: 表示したい商品を含むカテゴリを選択します。商品は背景の前に表示されるため、このパーツはカテゴリを強調表示するのに最適です。商品の並べ替え方法を選択し、商品ランキングバッジを有効にし、必要に応じて公開時間をスケジュール設定できます。背景には画像をアップロードでき、任意でタイトルとサブタイトルを追加し、テキストカラーをカスタマイズし、リダイレクトリンクを設定できます。 
  

カテゴリパーツ

カテゴリは以下の方法で表示できます。

• カテゴリ: 希望の画像スタイル（丸型または四角型）、列数、タイトルとその配置、そしてコンポーネント全体の公開スケジュールを選択できます。個別のカテゴリについては、各サブパーツに入り、カテゴリの指定、画像のアップロード、公開時間のスケジュールを行います。
  
• カテゴリショーケースAおよびカテゴリショーケースB: カテゴリはコラージュ形式で表示されます。カテゴリショーケースAは最大4つのカテゴリをサポートし、カテゴリショーケースBは最大7つのカテゴリをサポートします。すべてのスロットを使い切る必要があり、空のプレースホルダーが残らないようにしてください。コンポーネント全体にはタイトルを付け、希望の配置を選択し、公開時間をスケジュールできます。個別のカテゴリについては、各サブパーツに入り、カテゴリの指定と画像のアップロードを行います。ドラッグ＆ドロップで表示順を調整できます。
  
  
  
• カテゴリカルーセル: カテゴリはカルーセル形式で表示されます。最低4つのカテゴリを指定してください。コンポーネントには最大12のカテゴリを追加できます。コンポーネント全体にはタイトルを付け、希望の配置、背景色とテキスト色を選択し、公開時間をスケジュールできます。個別のカテゴリについては、各サブパーツに入り、カテゴリの指定、画像のアップロード、公開時間のスケジュールを行います。ドラッグ＆ドロップで表示順を調整できます。
  
• カテゴリグリッド: カテゴリはグリッド形式で表示されます。最低1つのカテゴリを指定してください。コンポーネントには最大4つのカテゴリを追加できます。コンポーネント全体にはタイトルを付け、希望の配置と画像比率を選択し、公開時間をスケジュールできます。個別のカテゴリについては、各サブパーツに入り、カテゴリの指定と画像のアップロードを行います。ドラッグ＆ドロップで表示順を調整できます。
  

アプリパーツ

タイムセール: タイムセールアプリで設定したキャンペーンがアプリ上に表示されます。詳細はこちら。

カスタムパーツ

Shopper Appの管理画面でカスタムパーツを作成し、ストアアプリのトップページに埋め込んでデザインや機能を強化できます。+ 追加パーツをクリックし、カスタムタブに切り替えて既存のパーツを選択して埋め込みます。あるいは、+ カスタムブロックを作成をクリックしてパーツエディターを開き、新しいパーツを作成します。カスタムパーツの作成に関する詳細は、こちらのヘルプセンター記事をご参照ください。

開発中と表示されているパーツは未公開であり、ライブ版のアプリに直接適用することはできません。ただし、これらのパーツはSnaplookを使ってプレビューできます。内容を確認したら、コードエディターからパーツを公開し、ライブアプリに適用できます。詳細はデザインの保存と公開のセクションをご覧ください。

フローティングアイコン

フローティングアイコンは、ユーザーがページをスクロールしても常に表示されるショートカットとして機能し、主要な機能への即時アクセスを提供して使いやすさを向上させます。

現在、Shopper Appではフローティングアイコンをライブチャット機能または指定したイベントページにリンクさせることができ、サポート対応の効率化やキャンペーンの促進に役立ちます。

設定パネルでは、フローティングアイコンに対して以下のオプションを設定できます。

• 基本設定：アイコンの名前を付け、位置を選択し、アプリに表示するアイコン画像をアップロードします。
• 機能タイプ：アイコンがリンクする先をイベントページまたはライブチャット機能から選択します。
  • イベントページを選択した場合：リダイレクト先のページを設定します。
  • ライブチャットを選択した場合： 
    • 使用するチャットサービスを選択します。Shopper Appは現在、リアルタイムの顧客サポート向けAIソリューションであるShulexとの連携をサポートしています。詳細はこちらのガイドをご参照ください。
    • 未読メッセージ通知を有効にするかどうかを決定します。有効にすると、未読メッセージがある場合に赤い点が表示されてユーザーに通知します。
• 有効化時間：フローティングアイコンを公開するスケジュールを任意で設定できます。

ログインバー

ログインバーパーツは、下部ナビゲーションバーの上に固定されており、顧客がワンクリックでストアにログインできるようにします。デフォルトで表示されますが、必要に応じて非表示にすることも可能です。ログインメッセージやボタンのテキストもカスタマイズできます。

下部ナビゲーション

下部ナビゲーションはアプリのすべてのページに表示され、主要なセクションや機能への迅速なアクセスを提供します。このナビゲーションを通じて、ストア、カテゴリ、検索、受信箱などの重要なページに常にアクセスできるようにします。最大6つのデフォルトまたはカスタムパーツを表示でき、顧客にとって最も関連性の高い機能を強調する柔軟性があります。

デフォルトパーツ

エディターで、下部ナビゲーションの横にあるドロップダウンアイコンをクリックすると、利用可能なパーツが表示されます。以下の変更を加えることができます：

カスタムパーツ

ホームページの下部ナビゲーション用にカスタムパーツを作成するには、左のサイドバーにあるカラーチップアイコンをクリックしてブランドキット>アイコンに移動し、次に＋カスタムアイコンを追加をクリックしてパーツを作成および設定します。その後、ホームページの下部ナビゲーションセクションに戻り、バーに追加してください。

カスタムアイコンの作成とカスタマイズの詳細な手順については、この記事のアイコン設定のカスタマイズセクションをご覧ください。

デザインの保存と公開

修正を完了し、プレビューが期待通りに表示されていることを確認したら、右上のオプションを使って次の操作を行えます：

• 保存: 現在の修正内容を一時的に保存し、将来の更新に備えます。これはブランドアプリのライブバージョンには影響しません。
• 公開 > Snaplookに公開: パーツをSnaplookに公開してプレビューとテストを行います。ライブにする前に機能や見た目を確認するためにこのオプションを使用してください。詳細は関連するヘルプセンターの記事をご参照ください。 
• 公開 > ライブアプリに公開: 修正内容をブランドアプリのライブバージョンに公開し、エンドユーザーに表示されるようにします。