オンボーディングをデザインする

ノーコードのモバイルアプリ向けオンボーディングビルダーは、ユーザーに最高のオンボーディング体験を提供するための強力でカスタマイズ性の高いツールです。開発者やデザイナーでなくても、優れた結果を得ることができます。

オンボーディングの画面

オンボーディングのフローは、追加してデザインする複数の画面で構成されます。

ユーザーはボタンをタップして画面間を移動します。

一部のユーザーに少し異なるフローが必要な場合（たとえば、フィットネスアプリでユーザーの性別に応じて異なる「目標」画像を表示したい場合）、別のオンボーディングを作成する必要はありません。

代わりに、一部の画面をデフォルトで非表示にし、特定の条件のときだけ表示されるよう設定できます。

オンボーディングの要素

オンボーディングの要素は、左側に表示順で表示されます。右上の Add をクリックして新しい要素を追加します。

追加できる要素のグループは以下のとおりです：

Containers：コンテナを使うと、柔軟なレイアウトを設定できます。たとえば、2カラムのテキストを追加したい場合は、Columns を追加してから、左ペインの Columns に2つのテキストブロックをドラッグします。カルーセルを追加する場合は、内部の Media 要素に画像を追加する必要があります。
Typography：事前にフォーマットされたテキストブロックを追加し、見た目を自由に設定できます。
Media & Display：画像や動画のほか、アプリの価値をアピールしてユーザーの意欲を高めるアニメーションチャートも追加できます。

対応している動画フォーマットはMP4とWebMです。メディアファイルの最大サイズは15MBです。

Lottieのような非対応のアニメーション要素を追加したい場合は、動画に変換して（例：このツールを使用）、動画として埋め込むことができます。
Quiz：テキストや画像の選択肢を使った短いアンケートを作成し、オンボーディング体験をカスタマイズしながらユーザーのことをより深く知ることができます。
Inputs：ユーザーのデータを収集します。
Buttons：ボタンを使うと、画面間の移動、オンボーディングの終了、ペイウォールへの移動をユーザーが行えます。光沢のあるボタンや動くボタンを追加して、ユーザーの注意を引き、インストールを購入につなげることもできます。
Loaders：アニメーションローダーで、処理中もユーザーを飽きさせません。
User engagement：テスティモニアル、ユーザーメールリスト、カウントダウンを追加できます。

Media & Display グループの一部として、提供されているカスタマイズオプションでは不十分な場合にカスタムHTMLコードも追加できます。

ただし、カスタムHTML要素はプリロードもキャッシュもされないため、Raw HTML は小さく軽量な要素にのみ使用することを推奨します。

要素IDとアクションID

ボタンをカスタムアクションに使用したい場合は、アクションID を割り当て、ソースコード内で使用します。アクションIDを使うと、同じアクションIDを持つ複数のボタンを同じ方法で処理できます。

特定のフィールドでユーザーの入力を処理したい場合（例：年齢やメールアドレスを保存する）は、要素ID を割り当て、ソースコード内で質問と回答を紐付けるために使用します。要素IDはオンボーディング内で1回だけ使用できます。

カスタマイズオプション

ビルダーでは以下のカスタマイズオプションを利用できます：

Styles タブ：要素の見た目を調整します。
Element タブ：表示/非表示、ボタン押下時のアクションなど、要素の見た目以外の属性を設定します。
Screen タブ：ヘッダーや画面カウンターの表示など、画面全体の設定を行います。

画面と要素のコピー

オンボーディングを作成済みで、その一部を再利用したい場合や、少し変更を加えてA/Bテストを行いたい場合は、1つまたは複数の画面を別のオンボーディングにコピーできます。

画面をコピーするには、オンボーディングビルダーを開き、次のいずれかを行います：

単一の画面を右クリックして Copy を選択する
目的の画面を選択して Ctrl+C（Windows）または ⌘+C（Mac）を押す

個々の要素やテキストブロックも、同じオンボーディング内でも別のオンボーディング間でもコピーできます。

ウェブ to アプリファネルからの画面のコピー

FunnelFox で作成したウェブ to アプリファネルを使用していて、ファネルの画面をオンボーディングで使いたい場合は、ファネルビルダーで画面をコピーしてオンボーディングビルダーに貼り付けることで素早く実現できます：

FunnelFoxのファネルビルダーで画面を右クリックして Copy を選択するか、画面を選択して Ctrl+C/⌘+C を押します。
オンボーディングビルダーを開きます。
コピーした画面を挿入したい画面を右クリックして Paste を選択するか、その画面を選択して Ctrl+V/⌘+V を押します。コピーされた画面は選択した画面の下に挿入されます。