Appifyで構築したアプリは、デザインページ、リソースページ、コレクション、ウェブの合計4種類のデザインで構築されます。
本ガイドでは、デザインページの作成方法をご案内します。
デザインページの作成上限は、1000件です。
デザインページは、ヘッタータブ、バナー、商品リスト（縦向き）、商品リスト（横向き）、コレクション（カルーセル）、コレクション（横向き）の5種類のブロックを組み合わせて作成します。
ブロック名 | 遷移先 |
ヘッダータブ | ・商品コレクション ・商品単体 ・デザインページ ・リソースページ ・リンク ・ページ |
バナー | ・商品コレクション ・商品単体 ・デザインページ ・リンク ・ページ ・画像（遷移先なし） ※画像サイズの上限は1MBです。 |
商品リスト（縦向き） | ・商品コレクション |
商品リスト（横向き） | ・商品コレクション |
コレクション（カルーセル） | ・複数の商品コレクション |
コレクション（横向き） | ・複数の商品コレクション |
Appify管理画面＞テーマ＞デザインページ＞新規ページを作成するから、名前を入力し新規ページを作成します。その次に作成したページ横にある[カスタマイズ]を選択します。
すでに作成済みのデザインページを修正する場合は、新規でページを作成せず[カスタマイズ]から修正してください。[・・・]を選択すると、名前の変更・複製・アーカイブが可能です。
特定のデザインページにアイコンを設定することができます。
ヘッダータブでデザインページが選択されていて、フッターでアイコンを設定した対象のデザインページが選択されている場合に表示されます。
アイコンを選択し、右の設定画面より任意のアイコン画像を設定してください。
アイコンの活用例
複数ブランドを取り扱っている場合ブランド毎にデザイン性を高めることができる
異なるサービスを展開している場合にどのサービスページを閲覧しているかユーザーの視認性を高めることができる
ヘッタータブは10個まで作成可能です。ヘッタータブを追加する＞ヘッタータブを設定するより、実際に設定を進めていきます。
項目 | 説明 |
タイトル | 日本語・英語・台湾語(繁体字)のタイトルをそれぞれ記入してください。 |
カスタマータグで表示制限を行う | 顧客タグで表示制限が可能です。 特定の顧客に対するイベントや販売などに活用できます。 ※タグは ※未入力の場合は全ユーザー閲覧可能です。 |
コレクション、商品〜リンク、ページ | ヘッタータブからの遷移先を設定してください。 |
ヘッダータブを活用しよう
ヘッダータブを活用することで下記のような効果が期待できます。
キャンペーン施策の動線を作ることで施策利用率アップが期待できる
新商品やSALEなどピックアップしたい商品への動線を作ることでコンバージョン率アップが期待できる
ITEMカテゴリ毎のデザインページの動線を作ることでユーザーの利便性が高まる効果が期待できる
ヘッタータブを追加する＞ヘッタータブ＞サブタブを追加するより、実際に設定を進めていきます。
サブタブは最大5つまで作成可能です。
項目 | 説明 |
タイトル | 日本語・英語・台湾語(繁体字)のタイトルをそれぞれ記入してください。 |
カスタマータグで表示制限を行う | 顧客タグで表示制限が可能です。 特定の顧客に対するイベントや販売などに活用できます。 ※タグは「テスト1,テスト2,テスト3」のようにカンマ区切りで付与することで複数指定が可能です。 ※未入力の場合は全ユーザー閲覧可能です。 |
コレクション、商品〜リンク、ページ | ヘッタータブからの遷移先を設定してください。 |
タブの登録数が少ない場合に、ヘッダータブの設定項目内にある［タブが少ない時の配置］の設定により「中央揃え」「左揃え」が選択可能です。
ユーザーがお気に入り登録をしたリソースページをヘッダータブに表示することができます。
事前にヘッダーへの表示制御の対象となるリソースページを作成してください。リソースページ内のブロックは「お気に入りボタンを表示する」にチェックを入れてください。
ヘッタータブ内のお気に入り制御設定より、設定を進めていきます。
項目 | 説明 |
お気に入りリソースページでヘッダータブを制御 | チェックをいれるとユーザーがお気に入り登録したリソースページをヘッダーに表示することができます。ヘッダーへの表示・非表示はユーザーが自由にカスタマイズすることができます。 |
制御対象のリソースページ | 対象のリソースページを選択してください。 選択したリソースページ内に設定されているページがヘッダーに表示されます。 |
デフォルトタブ設定 | チェックを入れるとユーザーがお気に入り登録したリソースページの優先順位が一番高いタブが、アプリを開いた際にデフォルトで遷移し表示されます。 |
お気に入り登録が存在しない場合の表示画像 | 画像を登録するとユーザーのお気に入り登録がゼロの場合に、登録した画像が表示されます。 |
お気に入り制御の活用例
複数ブランドを取り扱っている場合ユーザーのお気に入りのブランドをファーストビューで表示できるようになる
ブロックを追加する＞バナーを選択し、右の設定画面より実際に設定を進めていきます。
項目 | 説明 |
管理画面表示用のタイトル | 管理画面上のブロックタイトルを任意で設定してください。 |
コンテンツ | バナーに設定する画像をアップロードして遷移先を各項から選択することができます。 ※画像を選択した場合は遷移先なしとなります。 |
画像比率 | 画像比率を指定します。画像比率は入力必須です。 |
カルーセルインジケーター | バナーを複数設定した際のバナー下に表示される丸い点（インジケーター）を設定することができます。 ※色は16進数のカラーコードで設定できます。 |
表示期間の制限を行う | 表示開始と表示終了の日時を指定できます。 期間限定のイベントや販売などに活用できます。 |
会員ランクで表示制限を行う | VIPで登録したランクごとに表示制限が可能です。ランク限定のイベントや販売などに活用できます。 ※未チェックの場合は全ユーザー閲覧可能です。 |
カスタマータグで表示制限を行う | 顧客タグごとに表示制限が可能です。 特定の顧客に対するイベントや販売などに活用できます。 ※タグは ※未入力の場合は全ユーザー閲覧可能です。 |
会員ランクとカスタマータグの表示制限
会員ランクとカスタマータグはOR条件です。会員ランクとカスタマータグで表示制限を行っている場合はどちらかの条件を満たしていれば表示されます。
例1）会員ランクでシルバーとゴールドランクにチェックをいれている
会員ランクシルバー OR 会員ランクゴールドランクのユーザーに表示されます。
例2）会員ランクでゴールドにチェック、カスタマータグでテスト1のタグを指定している
会員ランクゴールド OR 顧客タグテスト1が付与されているユーザーに表示されます。
例3）会員ランクでシルバーとゴールドランクにチェック、カスタマータグでテスト1とテスト2のタグを指定している
会員ランクシルバー OR 会員ランクゴールド OR 顧客タグテスト1 OR 顧客タグテスト2が付与されているユーザーに表示されます。
ブロックを追加する＞商品リスト（縦向き）を選択し、右の設定画面より実際に設定を進めていきます。
項目 | 説明 |
管理画面表示用のタイトル | 管理画面上のブロックタイトルを任意で設定してください。 |
コンテンツ | コレクションを選択してください。 |
サブタイトル | コレクションタイトルの下に表示されるサブタイトルを表示したい場合に日本語・英語・台湾語(繁体字)で設定してください。 |
表示設定 | 表示する商品数を選択できます。 |
分析 | 任意のタグを設定することで、ブロックがタップした時にトラッキングイベントのパラメーターに追加されます。 |
表示期間の制限を行う | 表示開始と表示終了の日時を指定できます。 期間限定のイベントや販売などに活用できます。 |
顧客タグで表示制限を行う | 顧客タグごとに表示制限が可能です。 特定の顧客に対するイベントや販売などに活用できます。 ※タグは |
分析
デザイン設定時にタグをご入力いただくことで、FirebaseやGA4を用いてより細かい分析ができるようになります。
あとからタグを入力しても過去の数値実績は引き継げませんのでご注意ください。
ブロックを追加する＞商品リスト（横向き）を選択し、右の設定画面より実際に設定を進めていきます。
項目 | 説明 |
管理画面表示用のタイトル | 管理画面上のブロックタイトルを任意で設定してください。 |
コンテンツ | コレクションを選択してください。 |
サブタイトル | コレクションタイトルの下に表示されるサブタイトルを表示したい場合に日本語・英語・台湾語(繁体字)で設定してください。 |
表示設定 | 表示する商品数を選択できます。 |
分析 | 任意のタグを設定することで、ブロックがタップした時にトラッキングイベントのパラメーターに追加されます。 |
表示期間の制限を行う | 表示開始と表示終了の日時を指定できます。 期間限定のイベントや販売などに活用できます。 |
顧客タグで表示制限を行う | 顧客タグごとに表示制限が可能です。 特定の顧客に対するイベントや販売などに活用できます。 ※タグは |
分析
デザイン設定時にタグをご入力いただくことで、FirebaseやGA4を用いてより細かい分析ができるようになります。
あとからタグを入力しても過去の数値実績は引き継げませんのでご注意ください。
ブロックを追加する＞コレクション（カルーセル）を選択し、右の設定画面より実際に設定を進めていきます。
設定項目 | 説明 |
管理画面表示用のタイトル | 管理画面上のブロックタイトルを任意で設定してください。 |
コンテンツ | コレクションを選択してください。 コレクションは複数選択できます。 |
タイトル | コレクションタイトルを表示したい場合に日本語・英語・台湾語(繁体字)で設定してください。 |
サブタイトル | コレクションタイトルの下に表示されるサブタイトルを表示したい場合に日本語・英語・台湾語(繁体字)で設定してください。 |
コレクションにタイトルを表示する | チェックをいれることで、コレクションページに設定しているアイキャッチ画像がグレーアウトされその上にコレクションのタイトルが表示されます。 |
表示期間の制限を行う | 表示開始と表示終了の日時を指定できます。 期間限定のイベントや販売などに活用できます。 |
顧客タグで表示制限を行う | 顧客タグごとに表示制限が可能です。 特定の顧客に対するイベントや販売などに活用できます。 ※タグは |
ブロックを追加する＞コレクション（横向き）を選択し、右の設定画面より実際に設定を進めていきます。
設定項目 | 説明 |
管理画面表示用のタイトル | 管理画面上のブロックタイトルを任意で設定してください。 |
タイトル（日本語） | コレクションタイトルを表示したい場合に日本語で設定してください。 |
サブタイトル | コレクションタイトルの下に表示されるサブタイトルを表示したい場合に日本語・英語・台湾語(繁体字)で設定してください。 |
コンテンツ | コレクションを選択してください。 コレクションは複数選択できます。 |
コレクションにタイトルを表示する | チェックをいれることで、コレクションページに設定しているアイキャッチ画像がグレーアウトされその上にコレクションのタイトルが表示されます。 |
表示期間の制限を行う | 表示開始と表示終了の日時を指定できます。 期間限定のイベントや販売などに活用できます。 |
顧客タグで表示制限を行う | 顧客タグごとに表示制限が可能です。 特定の顧客に対するイベントや販売などに活用できます。 ※タグは |
モバイルアプリに表示されるコレクション名をカスタマイズする
以下の手順に則ってメタフィールドを設定することで、コレクションタイトルを自由にカスタマイズできます。管理用のタイトルと表示用のタイトルとしてそれぞれ管理可能です。
Shopify管理画面＞設定＞カスタムデータ＞コレクション と進みメタフィールドの設定を行います。[定義を追加する]ボタンをクリックして各項に下記の内容を入力してください。
※日本語、英語それぞれメタフィールドを設定しないと表示されません。
項目名 | 内容（日本語） | 内容（英語） |
名前 | 日本語タイトルの表示（任意） | 英語タイトルの表示（任意） |
ネームスペースとキー |
|
|
説明 | 任意で入力してください | 任意で入力してください |
タイプ | 単一行のテキスト[1つの値] | 単一行のテキスト[1つの値] |
メタフィールドの設定が終わったら、Shopifyの商品管理からコレクションへ進み、対象コレクションをクリックして移動します。コレクション内のメタフィールドにタイトルを入力すると入力した値がモバイルアプリに表示されます。
任意のテキストをバナーとして表示設定することができます。
ブロックを追加する＞色付きテキストバナーを選択し、右の設定画面より実際に設定を進めていきます。
設定項目 | 説明 |
タイトル | タイトルを表示したい場合に日本語、英語、中国語 繁体字それぞれ設定してください。 |
サブタイトル | サブタイトルを表示したい場合に日本語、英語、中国語 繁体字それぞれ設定してください。 |
テキスト | テキストを200文字以内で入力してください。 |
背景色 | 16進数のカラーコードで色を設定できます。 |
文字色 | 16進数のカラーコードで色を設定できます。 |
遷移先 | 遷移先を各項から選択することができます。 |
表示期間 | 表示開始と表示終了の日時を指定できます。 期間限定のイベントや販売などに活用できます。 |
顧客タグで表示制限を行う | 顧客タグごとに表示制限が可能です。 特定の顧客に対するイベントや販売などに活用できます。 ※タグは |
こちらの機能のご利用にはSTAFF START連携が必要です。
ブロックを追加する＞スタッフ一覧を選択し、右の設定画面より実際に設定を進めていきます。
設定項目 | 説明 |
管理画面表示用のタイトル | 管理画面上のブロックタイトルを任意で設定してください。 |
コンテンツ | STAFF STARTのブランドID(レーベルID)を指定してください。 |
タイトル | タイトルを表示したい場合に日本語、英語、中国語 繁体字それぞれ設定してください。 |
サブタイトル | サブタイトルを表示したい場合に日本語、英語、中国語 繁体字それぞれ設定してください。 |
分析 | 任意のタグを設定することで、ブロックがタップした時にトラッキングイベントのパラメーターに追加されます。 |
こちらの機能のご利用にはSTAFF START連携が必要です。
ブロックを追加する＞一覧を選択し、右の設定画面より実際に設定を進めていきます。
設定項目 | 説明 |
管理画面表示用のタイトル | 管理画面上のブロックタイトルを任意で設定してください。 |
コンテンツ | STAFF STARTのブランドID(レーベルID)を指定してください。 |
タイトル | タイトルを表示したい場合に日本語、英語、中国語 繁体字それぞれ設定してください。 |
サブタイトル | サブタイトルを表示したい場合に日本語、英語、中国語 繁体字それぞれ設定してください。 |
分析 | 任意のタグを設定することで、ブロックがタップした時にトラッキングイベントのパラメーターに追加されます。 |