マイアプリ by Wix:アプリの機能とコンテンツをカスタマイズする

読了時間:17分
マイアプリのスタイルをデザインしたら、アプリ内のコンテンツと機能をカスタマイズします。マイアプリは、サイトページと同様に画面で構成されています。必要な画面数と各画面で表示する内容を選択します。
Wix ストアの商品ページ、イベントリスト、Wix ブッキングのクラススケジュールなど、ビジネスに基づいたパーツを画面に追加します。次に、ボタン、画像、動画などを使用して画面をさらにカスタマイズします。
サイトダッシュボードのウェブエディタでアプリのコンテンツをカスタマイズするか、Wix Owner アプリをダウンロードしてモバイルからカスタマイズするかを選択します。
注意:
現在、すべてのカスタマイズオプションがウェブエディタから利用できるわけではありません。完全なカスタマイズ機能を利用するには、Wix Owner アプリをダウンロードすることをおすすめします。
この記事では、以下の項目について説明します:

ヘッダーをカスタマイズする

マイアプリのヘッダーは「ホーム」画面に表示され、メンバーがアプリにログインした後に最初に目にするパーツです。ロゴ、カバー写真、スタイルカラーを追加して、ボタンやアクセントを目立たせ、あなたのビジネススに合ったスタイルにしましょう。
Wix Owner アプリ
  1. サイトダッシュボードの「モバイルアプリ」にアクセスします。
  2. マイアプリのタブを選択します。すでにアプリに名前を付けている場合、タブのタイトルはアプリの名前になります。アプリに名前を付けていない場合、タブのタイトルには「独自のモバイルアプリ」と表示されます。
  3. アプリを編集」をクリックしてウェブエディタを開きます。
    注意:まだアプリをデザインしていない場合は、「アプリを編集」オプションが表示される前に、アプリ名、スタイル、レイアウトを選択する必要があります。
  4. ウェブエディタで、アプリのヘッダーをクリックして「ヘッダーを編集」パネルを開きます。
ダッシュボードウェブエディタの「ヘッダーを編集」パネルのスクリーンショット。
  1. 利用可能なオプションを使用して、ヘッダーのデザインをカスタマイズします:
    • 名前:ビジネスまたはアプリの名前を更新します。
    • タグライン:カスタムタグライン(アプリのスローガンや短い告知)を追加します。
    • ロゴを表示:トグルをクリックして、ロゴを表示または非表示にします。ロゴ画像にマウスオーバーして、変更または削除します。
    • 基本情報を表示:トグルをクリックしてヘッダーにリンクを表示すると、SNS リンク、連絡先情報、サイト URL などのビジネスに関する詳細情報が画面に表示されます。
    • カバー写真:「追加」アイコン  をクリックし、カバー写真をアップロードします。また複数の写真を追加し、メンバーがスクロールできるスライドショーを作成することもできます。スライドショーの場合、写真切り替え時間(秒)を選択します。
  2. メンバー情報」ドロップダウンをクリックして、ヘッダーに表示するサイト会員情報を選択します:
    • メンバー数を表示:アプリのヘッダーでメンバー数を表示または非表示にします。
    • メンバープロフィールを表示:アプリのヘッダーでメンバープロフィールアバターを表示または非表示にします。
  3. アクションボタン」ドロップダウンをクリックして、ヘッダーにボタンを追加します。
    • 招待ボタンを表示:トグルをクリックして、メンバーがマイアプリにさらにユーザーを招待できるボタンを表示または非表示にします。
    • カスタムボタンを表示:トグルをクリックして、ヘッダーにカスタムボタンを追加します。たとえば、「今すぐ予約」ボタンのタップでメンバーを予約タブやプライベート予約タブに誘導することができます。
  4. トップバーのアイコン」ドロップダウンをクリックして、ヘッダーにアイコンを追加します。インストールした Wix アプリ(例:Wix ストア、Wix チャット)によっては、次のような追加のカスタマイズオプションが表示される場合があります:
    • ショッピングカートアイコンを表示:トグルをクリックしてヘッダーにショッピングカートアイコンを追加し、メンバーのカートへの移動をより簡単にします。
    • チャットアイコンを表示:トグルをクリックして、メンバーをチャットに誘導するチャットアイコンをヘッダーに追加します。
  5. 右上の「保存する」をクリックします。

ナビゲーションメニューをカスタマイズする

マイアプリ by Wix は、メンバーがアプリ内の異なるエリア間を移動するのに役立つ「画面」で構成されています。ナビゲーションメニューをアプリの上部または下部に表示するかどうかを選択できます。次に、カスタムメニューアイコンを追加してデザインをカスタマイズします。
Wix Owner アプリ
  1. サイトダッシュボードの「モバイルアプリ」にアクセスします。
  2. マイアプリのタブを選択します。すでにアプリに名前を付けている場合、タブのタイトルはアプリの名前になります。アプリに名前を付けていない場合、タブのタイトルには「独自のモバイルアプリ」と表示されます。
  3. アプリを編集」をクリックしてウェブエディタを開きます。
    注意:まだアプリをデザインしていない場合は、「アプリを編集」オプションが表示される前に、アプリ名、スタイル、レイアウトを選択する必要があります。
  4. アプリのナビゲーションバーをクリックします。アプリのヘッダー下またはアプリの下部に表示されます。
ウェブエディタのタブバー(下部)ナビゲーションパネルのスクリーンショット。
  1. ナビゲーションレイアウトを選択します:
    • タブバー(上部):メンバーは、アプリ上部のヘッダーのすぐ下で画面間を移動します。
    • タブバー(下部):メンバーはアプリの下部で画面間を移動します。このオプションを選択すると、各画面用にそれぞれカスタムアイコンを追加できます。
      • ラベル:トグルをクリックして、ナビゲーションメニューの画面名を表示または非表示にします。名前は画面のアイコンの下に表示されます。アクセシビリティの観点から、画面名を含めることをおすすめします。
      • アイコン:ナビゲーションメニューのアイコンをカスタマイズします。各アイコンはそれぞれ特定の画面に対応しています。アイコンにマウスオーバーし、「アイコンを変更」をクリックして変更します。
  2. 右上の「保存」をクリックします。

画面にパーツを追加する

パーツはアプリのコンテンツを構成します。パーツを追加して、アプリメンバーに自分のことや提供しているサービスなどについて紹介しましょう。たとえば、イベント企画会社を運営している場合、イベントパーツを追加して、顧客がアプリから直接参加申し込みできるようにします。
アプリにパーツを追加したら、同じ画面を上下に移動させるか、完全に別の画面に切り替えます。パーツの複製、不要なパーツの削除、各パーツ内のコンテンツの編集もできます。
ヒント:
ネットショップ、レストラン、ブッキングなど、特定のビジネス用にパーツを追加する方法はこちら
Wix Owner アプリ
  1. サイトダッシュボードの「モバイルアプリ」にアクセスします。
  2. マイアプリのタブを選択します。すでにアプリに名前を付けている場合、タブのタイトルはアプリの名前になります。アプリに名前を付けていない場合、タブのタイトルには「独自のモバイルアプリ」と表示されます。
  3. アプリを編集」をクリックしてウェブエディタを開きます。
    注意:まだアプリをデザインしていない場合は、「アプリを編集」オプションが表示される前に、アプリ名、スタイル、レイアウトを選択する必要があります。
  4. ウェブエディタ左側で「パーツ」をクリックします。
  5. カタログを参照し、パーツをクリックしてアプリに追加します。
    ヒント:「基本アイテム」では、ボタン、画像、区切り線、動画などのアプリをデザインおよび整理するためのパーツを追加できます。
イベントスライドショーが選択された、ウェブエディタ内のパーツカタログのスクリーンショット。
  1. アプリプレビューでパーツをクリックして、表示とコンテンツ設定をカスタマイズします。
注意:
すべてのパーツがウェブエディタからカスタマイズできるわけではなく、Wix Owner アプリから更新が必要なものもあります。
  1. (オプション)利用可能なオプションを使用して、パーツをさらに管理します。注意:追加したパーツによっては、異なるオプションが表示される場合があります。
    • パーツ表示設定:Android 端末、iOS 端末、またはその両方にパーツを表示するかを選択します。異なるオペレーティングシステムでパーツを表示または非表示にする方法はこちら
      1. パーツをクリックします。
      2. 「編集」パネルの「パーツ表示設定」下で、「すべて」、「Android」、「iOS」のいずれかのオプションを選択します。
    • パーツを並べ替える:
      1. パーツをクリックします。
      2. パーツの横にある矢印(上に移動 / 下に移動)をクリックして、画面上でパーツを並べ替えます。
    • パーツを複製する:
      1. パーツをクリックします。
      2. 複製」アイコン  をクリックします。新しいパーツは元のパーツの上に表示されます。
    • パーツを削除する:
      1. パーツをクリックします。
      2. パーツ横の「削除」アイコン  をクリックします。
      3. 削除」をクリックして確定します。
  2. 右上の「保存する」をクリックします。
並び替え、複製、削除オプションが選択されたパーツのスクリーンショット。

画面を管理する

ナビゲーションバーに表示する画面数、画面の順序、画面名など、アプリの画面を更新します。また、アプリのメインメニューから非表示にする画面を作成することもできます。
Wix Owner アプリ
  1. サイトダッシュボードの「モバイルアプリ」にアクセスします。
  2. マイアプリのタブを選択します。すでにアプリに名前を付けている場合、タブのタイトルはアプリの名前になります。アプリに名前を付けていない場合、タブのタイトルには「独自のモバイルアプリ」と表示されます。
  3. アプリを編集」をクリックしてウェブエディタを開きます。
    注意:まだアプリをデザインしていない場合は、「アプリを編集」オプションが表示される前に、アプリ名、スタイル、レイアウトを選択する必要があります。
  4. ウェブエディタ左側で「画面」をクリックします。
  5. 実行する内容を選択します:
    • 新しい画面を追加する:アプリのメインナビゲーションバーに表示される画面を追加するか、ナビゲーションから非表示にする画面を選択します。
      • ナビゲーションバーに画面を追加する方法:
        1. ナビゲーション画面」横の「+追加」をクリックします。
        2. 新しい画面の名前を入力します。
        3. ナビゲーションバーに表示する位置まで、画面を上下にドラッグします。
      • ナビゲーションで非表示の画面を追加する方法:
        1. ナビゲーションで非表示の画面」横の「+追加」をクリックします。
        2. 新しい画面の名前を入力します。
        3. チェックマークアイコン  をクリックして画面名を保存します。
    • 画面のアクセス権を設定する画面ごとにアクセス権を設定し、特定のバッジを持っているメンバー、または販売プランを購入したメンバーにのみ画面へのアクセスを許可します。
      1. 該当する画面横の「その他のアクション」アイコン  をクリックします。
      2. アクセス権を設定」をクリックします。
      3. この画面にアクセスできるユーザーを「すべてのサイト会員」、「バッジを持っているサイト会員」、または「販売プラン購入済みのサイト会員」から選択します。
    • ナビゲーションで画面を非表示にする:ナビゲーションバーから画面を非表示にします。このオプションを選択すると、「ナビゲーションで非表示の画面」セクションに画面が移動します。
      1. 該当する画面横の「その他のアクション」アイコン  をクリックします。
      2. ナビゲーションで非表示」をクリックします。
        ヒント:表示するには、画面横の「その他のアクション」アイコン  をクリックし、「ナビゲーションに追加」をクリックします。
    • 画面を並べ替える:
      • 並べ替えたい画面をクリックし、ナビゲーション内で上下にドラッグします。
    • 画面の名前を変更する:
      1. 該当する画面横の「その他のアクション」アイコン  をクリックします。
      2. 名前を変更」をクリックします。
      3. 新しい画面名を入力します。
    • 画面を削除する:
      1. 削除したい画面横の「その他のアクション」アイコン  をクリックします。
      2. 削除」をクリックします。
      3. 削除」をクリックして確定します。
ナビゲーションの画面横にある「その他のアクション」メニューのスクリーンショット。
  1. (オプション)マイアプリの導入画面とログイン画面を管理します。各画面のデザインについての詳細はこちら
    1. 導入画面:
      1. システム画面」下の「導入画面」をクリックします。
      2. 導入画面の背景色と画像を更新します。
        注意:アプリの導入画面への変更は App Store と Google Play にアプリを再提出した時点で有効になります。
    2. ログイン画面:
      1. システム画面」下の「ログイン」をクリックします。
      2. ログイン画面のテキスト、背景色、画像を編集します。
  2. 右上の「保存する」をクリックします。

よくある質問

制作したアプリの機能をカスタマイズする方法については、以下の質問をクリックしてください。

動画ガイド