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

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、最大2MB）をアップロードし、リダイレクト先を設定します。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に公開し、プレビューとテストを行います。このオプションを使って、公開前に機能や見た目を確認してください。詳細は「Snaplookを使ったブランドアプリのプレビュー」の記事を参照してください。
• 本番のアプリに公開: 変更をストアのライブ版ブランドアプリに公開し、エンドユーザーに表示されるようにします。