業界別アプリデザイン集

紹介している業界一覧

• 全業界共通で設定しているデザイン

• モールで設定しているデザイン

• セレクト・ストリートブランドで設定しているデザイン

• オリジナルブランドで設定しているデザイン

• レディースブランドで設定しているデザイン

• コスメで設定しているデザイン

• アクセサリーで設定しているデザイン

• 食品で設定しているデザイン

• 家具・雑貨で設定しているデザイン

• リユースで設定しているデザイン

• その他で設定しているデザイン

全業界共通で設定されている基本構成があります。以下4点をまず設計するのがおすすめです。

フッタータブを活用

フッタータブは、アプリ内で画面を切り替えるために必ず設定が必要な項目です。

一般的には「ホーム画面」「カテゴリーページ」「マイページ」「カートページ」などを設定されるケースが多いです。

ホーム画面（トップ画面）をデザインページで作成

すべてのアプリで「ホーム画面」が設定されています。

アプリ起動時に最初に表示されるため、新商品・ランキング・期間限定特集など、今一番見せたい情報を中心に構成するのがおすすめです。

検索画面を設定

お客様が探している商品をすぐに見つけられるように、検索バーの設定を行いましょう。

検索設定は主に以下2種類のデザインで設定できます。

• キーワード検索＆条件検索

  • キーワードで検索・条件で検索ができるように設定します。

  • 検索バーは、ホーム画面やヘッダーに表示するケースが多いです。

• カテゴリー検索

  • リソースページで、カテゴリー検索ページを作成します。

  • アイテムのカテゴリーだけでなく、ブランドやランキングなど、さまざまなカテゴリーからアイテムを絞り込むことができます。

  • フッタータブに検索動線を設定するのがおすすめです。

マイページをカスタマイズ

お客様が自分の会員情報やポイントなどを閲覧できるページである「マイページ」を作成しましょう。

マイページへの動線はヘッタータブやヘッダーで表示されるケースが多いです。

フッタータブで「お気に入りページ」や「ブランドページ」への動線を作成

モールはブランドや商品数が多いため、お気に入り登録した商品を一覧で確認できる

「お気に入りページ」や「ブランドページ」への動線を作成するのがおすすめです。

トップページにお客様がお気に入り登録したブランドを表示できるように

デザインページの「お気に入り制御設定」を有効にすることで、お客様がお気に入り登録したブランドをホーム画面に表示することが可能です。

ヘッダータブに切り替え項目を設置することで「トップ画面」 と 「お気に入り登録済みブランドページ」 をタブで切り替えて表示できます。

ブランドページは以下3つの方法がおすすめです

ホーム画面にバナーでブランド紹介を設定

モールは取り扱いブランドや商品数が多いため、トップ画面にバナーでブランド紹介を設定するのもおすすめです。また、ヘッダータブやサブタブを活用し、メンズ・レディースなどでブランドを切り替えて表示することも可能です。

コレクションページでブランド紹介を設定

バナーだけでなく、コレクションでブランドを表示することも可能です。

リソースページでブランド一覧ページを作成

リソースページでブランド一覧ページを作成することも可能です。

リソースページで設定することのメリットとしては「お気に入り機能」を活用することで、ブランドのお気に入り登録も可能になります。

文字検索を設定

モールは商品数が多いので、検索性を求められます。そのため「文字検索」は必須で設定しましょう。

バナーを活用して画像クリックでページ遷移を設定する

バナーを設定することで、画像をクリックするとブランドページやコレクションページへ遷移するように設定できます。画像を使って動線を設計することで、ブランドイメージに合わせたアプリを作成しつつ、スムーズな顧客導線を構築しましょう。

コールアウト機能で新商品や予約商品などを表示

新商品や予約商品、別注アイテムや、配送予定日などをコールアウト機能で商品ページに表示することで、商品詳細ページを確認しなくても把握することができ、お問い合わせ削減にも繋がります。

ブランド一覧ページを作成

モールと同じようにセレクトもブランドが多いので、ブランドページを作成するのがおすすめです。詳細はこちらのモールのデザイン集をご確認ください。

バナーを活用して、商品一覧や特集ページへの動線を作成

バナーに画像を設定することで、画像をタップした際に設定したページへ遷移させることができます。ホーム画面上部に、特集ページや新作情報など今お客様にご案内したい内容を画像で訴求する使い方がおすすめです。

また、左から2番目の画像のようにメンズ・レディースなどの導線を画像で分けて設計するのもおすすめです。

コールアウト機能で新商品や予約商品などを表示

新商品や予約商品、別注アイテムや、配送予定日などをコールアウト機能で商品ページに表示することで、商品詳細ページを確認しなくても把握することができ、お問い合わせ削減にも繋がります。

フッタータブで「お気に入りページ」「コーディネート一覧」への動線を作成

レディースブランドでは、比較検討と着用イメージ確認が購入の決め手になるケースが多い傾向があります。

そのため、

• お気に入り登録した商品を一覧で確認できる「お気に入りページ」

• コーディネートをまとめて確認できる「コーディネート一覧」

をフッターに設定しているブランドが多いです。

フッターに設置することで、どのページからでもすぐにアクセスできる設計になります。

セットアイテムや着回しセットなどを表示

トップ画面では、セットアイテムや着回しセットなどをタブ切り替えで表示するのがおすすめです。 検索ページではセットアイテム・コーデセットで検索できるように設定することで、まとめ買いを促進できます。

ベストセラーやランキングを表示

レディースブランドでは、トップ画面にランキングを表示するケースが多く、サブタブやカテゴリーページでランキング別に表示する設計もおすすめです。

コールアウト機能で新商品や予約商品などを表示

新商品や予約商品、別注アイテムや、配送予定日などをコールアウト機能で商品ページに表示することで、商品詳細ページを確認しなくても把握することができ、お問い合わせなども減らすことができます。

施設予約や店舗一覧を表示

フッターに施設予約や店舗一覧を表示できます。 また、予約システムなどはWebViewで表示することも可能です。

カテゴリーごとにアイテムを表示

コスメはアイテム数が多いため、カテゴリー分けは必須です。トップ画面や商品一覧でカテゴリー分けして表示することをおすすめします。

コールアウト機能で数量限定や期間限定を表示

数量限定・期間限定や、パールやシアーなどのアイテム特徴をコールアウトで表示することで、商品特徴を一目で伝えることができます。

カテゴリー検索ページを作成

カテゴリーやカラー、テクスチャー別に検索ページを作成することで、探しているアイテムを見つけやすくなります。

フッタータブで「お気に入りページ」を作成

アクセサリーは比較検討されるケースが多いため、お気に入り登録した商品を一覧で確認できるページをフッターに設置するのがおすすめです。

カテゴリー検索ページを作成

リング・ネックレス・ピアスなどカテゴリー別に絞り込めるページをリソースページで作成することで、お客様が探しているアイテムを見つけやすくなります。

定期便や特集について記載

食品業界では、定期便や季節ごとのイベントが多いため、 トップ画面や商品一覧ページでお知らせバナーやバナー機能を活用し、定期便や季節特集を訴求するのがおすすめです。

ギフト用・自宅用でカテゴリー分け

トップ画面や商品一覧ページで自宅用・ギフト用などなど用途別に分類することで、購入目的に合わせた導線設計が可能です。

コンテンツページを作成

食品はオンラインでは味や香りが伝わりにくいため、 どのような特徴があるのか、どんなこだわりがあるのかといった商品のおすすめポイントを、コンテンツで紹介するのもおすすめです。

フッター機能でお気に入りページを表示

複数の商品を比較しながら購入を検討されるお客様や、単価の高い商品についてじっくり検討されるお客様も多いため、お気に入り登録した商品を一覧で確認できる「お気に入りページ」への動線をフッター機能で設定するのがおすすめです。

商品をカテゴリーごとに表示

トップ画面で、カテゴリーごとに商品を表示しましょう。

• サブタブで切り替え

• デザインページのコレクション機能でアイテムをカテゴリー別に表示

• 予約商品・オーダー商品を別タブ表示

などもおすすめです。

コンテンツを表示

アイテムのこだわりポイントや素材や機能性をコンテンツとして表示することで、商品の魅力を分かりやすく伝えることができます。

実店舗の予約ページや、店舗一覧を表示

実店舗がある場合は、予約ページや店舗一覧を設けるのがおすすめです。

注文ページへの導線をあわせて設計すると効果的です。

価格交渉可能なチャットを表示

チャットツールを導入している場合は、問い合わせ動線をアプリ内に設置できます。価格交渉など購入前のコミュニケーションが多い場合は、アプリへの設置がおすすめです。

コンテンツを表示

商品のコンディションや希少性、ストーリーなどをコンテンツで丁寧に伝える設計がおすすめです。

サブタブでキャンペーンを表示

キャンペーンが多い場合は、サブタブで切り替えて表示するのがおすすめです。

トップ画面に配置することで、目に留まりやすくなります。

用途別に商品を表示

商品数が多い場合は、用途別・シーン別にトップ画面で表示すると、目的別に探しやすい設計になります。