ドキュメント

コンポーネント(レイアウトカスタマイズ)

更新日 2025年4月28日

カルーセル

カルーセルとは、横にスクロールできる一連の項目を表示するユーザーインターフェース要素です。各項目は通常、サムネイル画像として表示され、画面を左右にスワイプするか、画面に表示される矢印ボタンをクリックすることでスクロールできます。アプリでは、カルーセルは画像などのメディアのセットを表示するためによく使われ、クリックやタップで詳細情報を確認したり、他のアクションを実行したりできます。

コレクションカルーセル

コレクションカルーセルは、特定のテーマやカテゴリに関連する商品グループを表示する機能です。コレクションカルーセルの項目は通常、横にスクロールするカードのセットとして整理されており、ユーザーは左右にスワイプしてさまざまな商品を見ることができます。ECアプリでは、テーマやカテゴリ別に整理された商品を閲覧できるようにするためにコレクションカルーセルが使われます。例えば、「夏ファッション」のコレクションカルーセルに、夏に適した服やアクセサリーのセレクションを表示するといった使い方ができます。

商品カルーセル

プロダクトカルーセルとは、販売中の商品を選んで表示するカルーセルの一種です。プロダクトカルーセル内の商品は通常、横にスクロールできるカード形式で整理されており、ユーザーは左右にスワイプしてさまざまな商品を見ることができます。プロダクトカルーセルは、ECアプリでユーザーが商品を閲覧し、各商品の詳細情報を確認できるようにするためによく使われます。例えば、新着商品を表示する「新着」のプロダクトカルーセルや、人気商品を表示する「ベストセラー」のプロダクトカルーセルなどがあります。

画像カルーセル

画像カルーセルとは、複数の画像を横並びのリストで表示し、ユーザーがスクロールして閲覧できる機能要素です。画像カルーセル内の画像は通常、横にスクロールできるカード形式で表示され、ユーザーは左右にスワイプしてさまざまな画像を見ることができます。画像カルーセルは、アプリでユーザーが画像を閲覧し、各画像の詳細情報を確認できるようにするためによく使われます。例えば、キャンペーンや商品、プロモーションの画像を表示する「バナー画像」の画像カルーセルや、人気アイテムを表示する「トレンド商品」の画像カルーセルなどがあります。
 

商品リスト

商品リストとは、販売中の商品を選んで表示するアプリの機能です。商品リスト内の商品は通常、縦に並べられ、各商品は商品名、価格、サムネイル画像などの情報を含むカードで表現されます。商品リストは、ECアプリでユーザーが商品を閲覧し、各商品の詳細情報を確認できるようにするために使われます。ユーザーは通常、リスト内の商品をタップすると、説明文、追加画像、カスタマーレビューなどの詳細情報を表示できます。また、商品リストには並び替えや絞り込み機能が含まれる場合があり、ユーザーが関心のある商品を見つけやすくなります。

コレクションリスト

コレクションリストとは、さまざまなコレクションを表示するアプリの機能で、通常は縦のリスト形式で並べられ、各項目はコレクション名やコレクション画像などの情報を含むカードで表現されます。コレクションリストは、ECアプリでテーマやカテゴリ別に整理された商品をユーザーが閲覧できるようにするためによく使われます。例えば、アプリにコレクションリストを設ければ、購入時に顧客が関心のあるカテゴリを見つけられます。衣服やアクセサリーのコレクションがその良い例です。 

画像スライダー

画像スライダーは、単一の画像を表示し、矢印ボタンのクリックやナビゲーションドットで他の画像へ移動できるユーザーインターフェース要素です。画像スライダーは、単体の画像や少数の画像を強調表示する際に使用され、ウェブサイトやモバイルアプリでよく見られます。
アプリでは、例えば商品画像のシリーズを表示したり、特定のコンセプトやアイデアを示す画像群を見せるために画像スライダーが利用されます。ユーザーは画面上で左右にスワイプするか、画面に表示された矢印ボタンをクリックして画像を切り替えられます。一部の画像スライダーはスライドショーを一時停止したり、表示中の画像セットから手動で画像を選択することも可能です。

テキスト

テキストは、アプリ内でユーザーに情報を提供するために一般的に使用される機能です。指示や説明、ラベルなど、さまざまな情報を表示できます。段落、リスト、見出しなどの形式で表示でき、サイズや色、その他の書式設定でスタイルを調整できます。テキストは画像やボタン、リンクなど他の機能と組み合わせて、よりインタラクティブで魅力的なユーザー体験を提供します。

折りたたみテキスト

折りたたみテキスト機能は、ボタン、リンク、またはドロップダウンをタップすることでテキストブロックを開閉できるテキスト機能です。折りたたまれている間は概要や抜粋のみが表示され、ボタンやリンクをタップすると全文を閲覧できます。これによりスペースを節約でき、長いテキストも読みやすく、目的の情報を見つけやすくなります。折りたたみテキストは、すべてのユーザーにとって必須ではない情報や、読み飛ばしたいユーザーがいる情報の表示によく使われます。例えば、商品の詳細説明を折りたたみテキストで表示し、希望するユーザーだけが全文を確認できるようにするといった使い方が可能です。

商品レコメンド 

商品レコメンド機能は、ユーザーの関心や過去の行動に基づいて商品を提案するアプリ内機能です。ECアプリでよく活用され、ユーザーが興味を持ちそうな新商品を発見させ、追加購入を促します。協調フィルタリング、コンテンツベースフィルタリング、行列分解など、さまざまなアルゴリズムや手法でレコメンドを生成します。閲覧・購入履歴、関心カテゴリやブランド、他商品の評価やレビューなど、複数の要素を元にレコメンドが作られます。