Appifyをご利用いただくにあたり、アプリ公開までの手順をStep1〜Step3のガイドに分けてご案内しています。
本ガイドでは「Step2：デザインを設定する」についてご説明します。まだ初期設定が完了していない方は、まずは「Step1：初期設定」からご確認ください。
デザインを設定する前に…！
いきなりデザインを作り始めるのではなく、まずはどんなページ/機能でアプリが構成されているのかを理解することが重要です。
各デザインがどの機能で構成されているのか、また、どのようなページで成り立っているのかを確認していきましょう。
Appifyで構築したアプリは「デザインページ」「リソースページ」「コレクション」「ウェブ」の4種類のページで構築できます。また、これらに加えて「カートページ」と「マイページ」もご用意しています。
主な用途
どのページをどの目的で使うのかを理解する事で、スムーズに設計ができます。
デザインページ：ホーム画面（トップ画面）や特集ページなど、自由度の高いページ
リソースページ：店舗一覧やカテゴリー一覧など、メニュー用途に
コレクションページ：商品一覧ページとして
ウェブ：コンテンツや外部サイトを表示したいときに
これらのページは「フッタータブ」で切り替えることができます。
まずは、どのページにも共通して設定できる項目を押さえておきましょう。
ヘッダー：カートページ、お気に入りページや指定したリンクなどへの動線を設置します。 テンプレートからの選択、お好きな画像を登録可能です。
お知らせバナー：リンク付きのお知らせ文章を表示することができます。デザインページ、リソースページ、コレクション、商品、固定ページ、WEBページで表示できます。
フッタータブ：以下のうち、最小1つ最大5つまで選択できます。
デザインページ・リソースページ・お気に入り・検索・カート・お知らせ・マイページ・ウェブ・チャネルトーク
商品検索・検索条件：キーワード入力欄と、あらかじめ作成した検索条件の一覧を表示できます。
アプリのトップ画像などに使用されるのが「デザインページ」です。設定方法については、以下のガイドをご確認ください。
アイコン：画像でアイコンを設定できます。
ヘッタータブ：ヘッタータブで表示内容を切り替えることができます。ヘッタータブは10個まで作成可能です。
サブタブ：ヘッタータブの配下にさらにページを切り替えるタブ＝サブタブを設定できます。サブタブは最大5つまで作成可能です。
バナー：画像をクリックすることで設定したページに推移します。
商品リスト：選択したコレクションの商品を表示します。横向きと縦向きがあります。
コレクション：設定したコレクションに推移します。カルーセル型と横型があります。
色付きテキストバナー：背景色や文字色を自由に変更しデザインページをカスタマイズすることができます。クリックすることで設定した推移先に移動できます。
デザインページを活用することで、Webサイトのような自由度の高いレイアウト設計が可能です！
「リソースページ」は、店舗一覧やカテゴリー一覧などのメニュー用途に適したページです。縦にブロックを並べたレイアウトで、推移先は以下の4つから1つ選択できます。
デザインページ
リソースページ
コレクション
外部Webページ
「コレクションページ」は商品一覧ページです。こちらはAppify上での個別設定は不要で、Shopifyで作成したコレクションを指定することで表示されます。
並び替えとフィルター
新着順・人気順・価格が低い/高い順に並び替えることが可能です。
在庫有無やブランド、カラーや価格などからコレクション内の商品を絞り込めます。
タグ設定で、特定の商品をコレクションに表示しないように設定も可能です。
カートバナー：カートページにてお客様にお知らせしたい内容を表示できます。お盆や年末年始など配送時期などに変更点がある際にぜひご利用ください。
追加商品：ギフトラッピングやショッピングバッグなど商品の追加を提案できます。
表示制限：ポイントや、領収書のフォーム・熨斗の入力フォーム、メモの記入欄や購入に関する同意など表示できます。
顧客が会員情報やポイントを確認できるページです。
顧客会員情報表示設定：会員証や保有ポイント、失効予定のポイント、顧客の会員ランクやお気に入り項目なのどの顧客情報を表示できます。表示しないように設定も可能です。
アイコン：アイコンをクリックし、他のページに推移させることが可能です。
お知らせやクーポン、購入履歴など7つのページから選択できます。アイコンもカスタマイズ可能です。
カスタムリンク：マイページ内下部に遷移先にURLを指定した行を追加できます。
例えば、サイズガイドやショッピングガイドなどお客様からよくいただくお問い合わせに関する内容を追加することも可能です。
アプリの構成を理解した後は・・？
ここからはアプリをどのような構成にするかを考えましょう。
他社で設定されているデザイン例を参考にしながら、自社に合った構成を考えてみましょう。
紹介している業界一覧（後でリンク入れる予定です）
全業界共通で設定しているデザイン
モールで設定しているデザイン
セレクト・ストリートブランドで設定しているデザイン
オリジナルブランドで設定しているデザイン
レディースブランドで設定しているデザイン
アウトドア・スポーツで設定しているデザイン
コスメで設定しているデザイン
アクセサリーで設定しているデザイン
食品で設定しているデザイン
家具・雑貨で設定しているデザイン
リユースで設定しているデザイン
その他で設定しているデザイン
全業界共通で設定されている基本構成があります。以下4点をまず設計するのがおすすめです。
フッタータブを活用
フッタータブは、アプリ内で画面を切り替えるために必ず設定が必要な項目です。
一般的には「ホーム画面」「カテゴリーページ」「マイページ」「カートページ」などを設定されるケースが多いです。
ホーム画面（トップ画面）をデザインページで作成
すべてのアプリで「ホーム画面」が設定されています。
アプリ起動時に最初に表示されるため、新商品・ランキング・期間限定特集など、今一番見せたい情報を中心に構成するのがおすすめです。
検索画面を設定
お客様が探している商品をすぐに見つけられるように、検索バーの設定を行いましょう。
検索設定は主に以下2種類のデザインで設定できます。
キーワード検索＆条件検索
キーワードで検索・条件で検索ができるように設定します。
検索バーは、ホーム画面やヘッダーに表示するケースが多いです。
カテゴリー検索
リソースページで、カテゴリー検索ページを作成します。
アイテムのカテゴリーだけでなく、ブランドやランキングなど、さまざまなカテゴリーからアイテムを絞り込むことができます。
フッタータブに検索動線を設定するのがおすすめです。
マイページをカスタマイズ
お客様が自分の会員情報やポイントなどを閲覧できるページである「マイページ」を作成しましょう。
マイページへの動線はヘッタータブやヘッダーで表示されるケースが多いです。
ポイント！
ブランド数・商品数が多いため、検索性を高めるのが重要です。
お客様が自分が好きなブランドにアクセスしやすいようにアプリ動線を作成するのが重要です。
フッタータブで「お気に入りページ」や「ブランドページ」への動線を作成
モールはブランドや商品数が多いため、お気に入り登録した商品を一覧で確認できる
「お気に入りページ」や「ブランドページ」への動線を作成するのがおすすめです。
トップページにお客様がお気に入り登録したブランドを表示できるように
デザインページの「お気に入り制御設定」を有効にすることで、お客様がお気に入り登録したブランドをホーム画面に表示することが可能です。
ヘッダータブに切り替え項目を設置することで「トップ画面」 と 「お気に入り登録済みブランドページ」 をタブで切り替えて表示できます。
ブランドページは以下3つの方法がおすすめです✨
ホーム画面にバナーでブランド紹介を設定
モールは取り扱いブランドや商品数が多いため、トップ画面にバナーでブランド紹介を設定するのもおすすめです。また、ヘッダータブやサブタブを活用し、メンズ・レディースなどでブランドを切り替えて表示することも可能です。
コレクションページでブランド紹介を設定
バナーだけでなく、コレクションでブランドを表示することも可能です。
リソースページでブランド一覧ページを作成
リソースページでブランド一覧ページを作成することも可能です。
リソースページで設定することのメリットとしては「お気に入り機能」を活用することで、ブランドのお気に入り登録も可能になります。
文字検索を設定
モールは商品数が多いので、検索性を求められます。そのため「文字検索」は必須で設定しましょう。
ポイント！
ブランドイメージを重視しながら回遊性を高めましょう！
バナーを活用して画像クリックでページ遷移を設定する
バナーを設定することで、画像をクリックするとブランドページやコレクションページへ遷移するように設定できます。画像を使って動線を設計することで、ブランドイメージに合わせたアプリを作成しつつ、スムーズな顧客導線を構築しましょう。
コールアウト機能で新商品や予約商品などを表示
新商品や予約商品、別注アイテムや、配送予定日などをコールアウト機能で商品ページに表示することで、商品詳細ページを確認しなくても把握することができ、お問い合わせ削減にも繋がります。
ブランド一覧ページを作成
モールと同じようにセレクトもブランドが多いので、ブランドページを作成するのがおすすめです。詳細はこちらのモールのデザイン集をご確認ください。
バナーを活用して、商品一覧や特集ページへの動線を作成
バナーに画像を設定することで、画像をタップした際に設定したページへ遷移させることができます。ホーム画面上部に、特集ページや新作情報など今お客様にご案内したい内容を画像で訴求する使い方がおすすめです。
また、左から2番目の画像のようにメンズ・レディースなどの導線を画像で分けて設計するのもおすすめです。
コールアウト機能で新商品や予約商品などを表示
新商品や予約商品、別注アイテムや、配送予定日などをコールアウト機能で商品ページに表示することで、商品詳細ページを確認しなくても把握することができ、お問い合わせ削減にも繋がります。
ポイント！
回遊性を高め、コーディネート提案で購入単価を上げる
フッタータブで「お気に入りページ」「コーディネート一覧」への動線を作成
レディースブランドでは、比較検討と着用イメージ確認が購入の決め手になるケースが多い傾向があります。
そのため、
お気に入り登録した商品を一覧で確認できる「お気に入りページ」
コーディネートをまとめて確認できる「コーディネート一覧」
をフッターに設定しているブランドが多いです。
フッターに設置することで、どのページからでもすぐにアクセスできる設計になります。
セットアイテムや着回しセットなどを表示
トップ画面では、セットアイテムや着回しセットなどをタブ切り替えで表示するのがおすすめです。 検索ページではセットアイテム・コーデセットで検索できるように設定することで、まとめ買いを促進できます。
ベストセラーやランキングを表示
レディースブランドでは、トップ画面にランキングを表示するケースが多く、サブタブやカテゴリーページでランキング別に表示する設計もおすすめです。
コールアウト機能で新商品や予約商品などを表示
新商品や予約商品、別注アイテムや、配送予定日などをコールアウト機能で商品ページに表示することで、商品詳細ページを確認しなくても把握することができ、お問い合わせなども減らすことができます。
施設予約や店舗一覧を表示
フッターに施設予約や店舗一覧を表示できます。 また、予約システムなどはWebViewで表示することも可能です。
カテゴリーごとにアイテムを表示
コスメはアイテム数が多いため、カテゴリー分けは必須です。トップ画面や商品一覧でカテゴリー分けして表示することをおすすめします。
コールアウト機能で数量限定や期間限定を表示
数量限定・期間限定や、パールやシアーなどのアイテム特徴をコールアウトで表示することで、商品特徴を一目で伝えることができます。
カテゴリー検索ページを作成
カテゴリーやカラー、テクスチャー別に検索ページを作成することで、探しているアイテムを見つけやすくなります。
ポイント：比較検討しやすい設計にする
フッタータブで「お気に入りページ」を作成
アクセサリーは比較検討されるケースが多いため、お気に入り登録した商品を一覧で確認できるページをフッターに設置するのがおすすめです。
カテゴリー検索ページを作成
リング・ネックレス・ピアスなどカテゴリー別に絞り込めるページをリソースページで作成することで、お客様が探しているアイテムを見つけやすくなります。
ポイント：オンラインでも魅力を伝え、用途別に選びやすくする
定期便や特集について記載
食品業界では、定期便や季節ごとのイベントが多いため、 トップ画面や商品一覧ページでお知らせバナーやバナー機能を活用し、定期便や季節特集を訴求するのがおすすめです。
ギフト用・自宅用でカテゴリー分け
トップ画面や商品一覧ページで自宅用・ギフト用などなど用途別に分類することで、購入目的に合わせた導線設計が可能です。
コンテンツページを作成
食品はオンラインでは味や香りが伝わりにくいため、 どのような特徴があるのか、どんなこだわりがあるのかといった商品のおすすめポイントを、コンテンツで紹介するのもおすすめです。
ポイント：商品を比較しやすい設計にする
フッター機能でお気に入りページを表示
複数の商品を比較しながら購入を検討されるお客様や、単価の高い商品についてじっくり検討されるお客様も多いため、お気に入り登録した商品を一覧で確認できる「お気に入りページ」への動線をフッター機能で設定するのがおすすめです。
商品をカテゴリーごとに表示
トップ画面で、カテゴリーごとに商品を表示しましょう。
サブタブで切り替え
デザインページのコレクション機能でアイテムをカテゴリー別に表示
予約商品・オーダー商品を別タブ表示
などもおすすめです。
コンテンツを表示
アイテムのこだわりポイントや素材や機能性をコンテンツとして表示することで、商品の魅力を分かりやすく伝えることができます。
実店舗の予約ページや、店舗一覧を表示
実店舗がある場合は、予約ページや店舗一覧を設けるのがおすすめです。
注文ページへの導線をあわせて設計すると効果的です。
ポイント：購入前コミュニケーションをスムーズにする
価格交渉可能なチャットを表示
チャットツールを導入している場合は、問い合わせ動線をアプリ内に設置できます。価格交渉など購入前のコミュニケーションが多い場合は、アプリへの設置がおすすめです。
コンテンツを表示
商品のコンディションや希少性、ストーリーなどをコンテンツで丁寧に伝える設計がおすすめです。
サブタブでキャンペーンを表示
キャンペーンが多い場合は、サブタブで切り替えて表示するのがおすすめです。
トップ画面に配置することで、目に留まりやすくなります。
用途別に商品を表示
商品数が多い場合は、用途別・シーン別にトップ画面で表示すると、目的別に探しやすい設計になります。
以上でアプリのデザイン設定は完了です👏
次は、アプリ公開時の必須設定についてご案内いたします。▶️「Step3：必須設定」のガイドはこちら