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

読了時間:30分
マイアプリのスタイルをデザインしたら、アプリ内のコンテンツと機能をカスタマイズします。マイアプリは、サイトページと同様に画面で構成されています。必要な画面数と各画面で表示する内容を選択します。
Wix ストアの商品ページ、イベントリスト、Wix ブッキングのクラススケジュールなど、ビジネスに基づいたパーツを画面に追加します。次に、ボタン、画像、動画などを使用して画面をさらにカスタマイズします。また、色やフォントを選択して、アプリのデザインをさらにカスタマイズすることもできます。
これらマイアプリの機能とコンテンツは、サイトダッシュボードからカスタマイズするか、Wix アプリまたは Wix Studio アプリをダウンロードして、モバイルからカスタマイズすることができます。
この記事では、以下の項目について説明します:

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

マイアプリのヘッダーは「ホーム」画面に表示され、メンバーがアプリにログインした後に最初に目にするパーツです。ロゴ、カバー写真、スタイルカラーを追加して、ボタンやアクセントを目立たせ、あなたのビジネススに合ったスタイルにしましょう。
Wix アプリ
Wix Studio アプリ
  1. サイトダッシュボードの「マイアプリ by Wix」にアクセスします。
  2. モバイルアプリを編集」をクリックします。
  3. 左側の「デザイン」をクリックします。
  4. ウェブエディタで、アプリのヘッダーをクリックして「ヘッダーを編集」パネルを開きます。
ダッシュボードウェブエディタの「ヘッダーを編集」パネルのスクリーンショット。
  1. 利用可能なオプションを使用して、ヘッダーのデザインをカスタマイズします:
    • アイコン:該当するトグルを有効にして、ヘッダーに必要なアイコンを追加します。
      注意:サイトにインストールしている Wix アプリ(例:Wix ストア、Wix チャットなど)によって、表示されるオプションは異なります。
    • 種類:ホーム画面のヘッダーのデザインを選択します:
7. 右上の「保存する」をクリックします。

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

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

画面にパーツを追加する

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

画面を管理する

ナビゲーションバーに表示する画面数、画面の順序、画面名など、アプリの画面を更新します。また、アプリのメインメニューから非表示にする画面を作成することもできます。
Wix アプリ
Wix Studio アプリ
  1. サイトダッシュボードの「マイアプリ by Wix」にアクセスします。
  2. モバイルアプリを編集」をクリックします。
  3. ウェブエディタ左側で「画面」をクリックします。
  4. 実行する内容を選択します:
ナビゲーションの画面横にある「その他のアクション」メニューのスクリーンショット。

アプリのデザインをカスタマイズする

ブランドに合わせてアプリの色とフォントをカスタマイズします。事前にデザインされたテーマを変更するか、色やフォントを個別に選択して独自のデザインに仕上げることができます。
ダッシュボード
Wix アプリ
Wix Studio アプリ
  1. サイトダッシュボードの「マイアプリ by Wix」にアクセスします。
  2. モバイルアプリを編集」をクリックします。
  3. 左側の「デザイン」をクリックします。
  4. カスタマイズするものを選択します:
    • カラーテーマ:アプリのテーマを変更するか、「メイン」、「テキストとアイコン」、「背景」の色を個別に選択します。
    • テキストテーマ:テキストテーマを変更するか、「見出し」、「本文」のフォントを個別に選択します。
      ヒント:「テキストテーマを変更する」をクリックすると、事前にデザインされた「見出し」と「本文」のフォントの組み合わせを選択することができます。
    • ヘッダースタイル:ヘッダーの色を、メインカラーまたは背景色のどちらに合わせるかを選択します。
  5. 保存する」をクリックします。

よくある質問

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

動画ガイド

お役に立ちましたか?

|