Step2：デザイン設定｜Appify - モバイルアプリ

概要

アプリを構成するページ（デザインページ・リソースページ・コレクションページなど）の役割を理解し、アプリ全体と商品ページのデザインを決めます。「ほかのストアのアプリを参考にしたい」「自社に合った構成がわからない」ときは、業界別のデザイン事例を活用してください。

本ガイドでは、デザインの設定方法をご案内します。

デザインを設定する前に…！

デザインを作り始める前に、まずはどんなページ/機能でアプリが構成されているのかを理解しましょう！

Appifyでネイティブビュー構築したアプリは「デザインページ」「リソースページ」「コレクションページ」「ウェブページ」の4種類のページで構築できます。

また、これらに加えて「カートページ」と「マイページ」もご用意しています。

主な用途

どのページをどの目的で使うのかを理解することで、スムーズに設計ができます。

これらのページは「フッタータブ」で切り替えることができます。

WEBビューアプリは、ウェブページを中心に作成します。

ネイティブビューアプリ・・・AppifyオリジナルのUI/UXで構成したアプリ

WEBビューアプリ・・・Webページを中心に構成したアプリ

まずは、どのページにも共通して設定できる項目を押さえておきましょう。

ヘッダー：カートページ、お気に入りページや指定したリンクなどへの動線を設置します。テンプレートからの選択、お好きな画像を登録可能
お知らせバナー：リンク付きのお知らせ文章を表示することができます。デザインページ・リソースページ・マイページ・カートページ
フッタータブ：1〜5個まで選択できます。
- デザインページ・リソースページ・お気に入り ・検索・カート・お知らせ・マイページ・ウェブ ・チャネルトーク

アプリのトップ画像などに使用されるのが「デザインページ」です。

設定方法については、以下のガイドをご確認ください。

デザインページを活用することで、Webサイトのような自由度の高いレイアウト設計が可能です。

カテゴリ一覧や店舗一覧などのメニュー用途に適したページです。リソースブロック単位でお気に入りに登録することも可能です。

縦にブロックを並べたレイアウトで、遷移先は以下から選択できます。

デザインページ, リソースページ, コレクション, ウェブページ, 店舗リスト

「コレクションページ」は商品一覧ページです。こちらはAppify上での個別設定は不要で、Shopifyで作成したコレクションを指定することで表示されます。

コレクションに登録した画像・説明文をそのまま表示できます。

「カートページ」はAppifyオリジナルのカートページです。

顧客が会員情報やポイントを確認できるページです。

顧客会員情報表示設定：会員証や保有ポイント、失効予定のポイント、顧客の会員ランクやお気に入り項目などの顧客情報を表示できます。表示しないように設定も可能です。
アイコンブロック（縦2 x 横3）：
- アイコンをクリックし、他のページに遷移させることが可能です。
- お知らせやクーポン、購入履歴など7つのページから選択できます。
- アイコンもカスタマイズ可能です。
カスタムリンク：
- マイページ内下部に遷移先にURLを指定した行を追加できます。
- ショッピングガイドやその他ストアの基本情報などをURLで追加できます。