# モーダル/ポップアップウィンドウの作成方法
*スキルレベル: 初心者*
## **始める前に**
* [画面とコンポーネント](https://help.adalo.com/ja/component-basics)および[アクション](https://help.adalo.com/ja/action-basics)の基本を知っていることを確認してください
* この機能を使用するには有料の Adalo プランは必要ありません
* アプリに少なくとも1つの画面があることを確認してください
* その画面にアクションを追加するためのコンポーネントがあることを確認してください
## 手順
{% tabs %}
{% tab title="シンプル" %}
**1.)** リンク元となるコンポーネントを選択します。**クリックアクション**エリアで**アクションの追加**をクリックします。
**2.)** **リンク**を選択し、**新しい画面**を選択します。
**3.)** 新しいモーダル画面に**名前**を付け、画面タイプとして**Blank**を選択するか、**Misc**セクションのドロップダウンメニューから**Modal**テンプレート画面を選択します。**Modal**テンプレートを選択した場合は、**ステップ9**にスキップします。
**4.)** 画面の左上隅にある画面タイトルをクリックして、画面全体を選択します。
**5.)** 画面オプションの一番下にある**スタイルの編集**をクリックします。
**6.)** **背景**の色スウォッチをクリックして、カラーピッカーを表示します。
**7.)** 透明度スライダー 
を使用して、背景の透明度を左にスライドして0に設定します。
**8.)** 今度は、モーダルとして機能するいくつかのコンポーネントを画面に追加する必要があります。たとえば、四角形、テキスト、いくつかのボタン、[Lottie ファイル](https://help.adalo.com/ja/component-basics/marketplace-components/lottie-files)などです。このステップのヘルプについては、まず[コンポーネントの基本](https://help.adalo.com/ja/component-basics/design-basics)ページを参照してください。
**9.)** モーダルが望むように見え、読めるようになったら、ステップ2で設定したリンクアクションを編集する必要があります。新しいモーダルにリンクするコンポーネントに戻り、**リンク**アクションを選択します。**トランジション**ドロップダウンメニューで、トランジションタイプとして**Modal**を選択してください。
**10.)** 通常、モーダルに**X**ボタンまたは**キャンセル**オプションを配置しておくのがベストプラクティスです。これがないと、ユーザーはポップアップを閉じることができません！
**11.)** 画面の下部にモーダルを表示することもできます。これには、画面の下部に配置し、コンポーネントをグループ化し、グループ内で**スタイルの編集**をクリックし、**Fixed**セクションで**Bottom**を選択します。
{% endtab %}
{% tab title="詳細" %}
**1.)** この例では、ユーザーが追加ボタンをクリックして、リストに新しいアイテムを追加できるように、ポップアップモーダルに移動することを望んでいます。リンク元となるコンポーネントを選択します。**クリックアクション**エリアで**アクションの追加**をクリックします。**リンク**を選択し、**新しい画面**を選択します。
**2.)** 新しいモーダル画面に**名前**を付け、画面タイプとして**Blank**を選択するか、**Misc**セクションのドロップダウンメニューから**Modal**テンプレート画面を選択します。**Modal**テンプレートを選択した場合は、**ステップ9**にスキップします。
 **3.)** ブランク画面オプションを選択した場合は、画面の左上隅にある画面タイトルをクリックして、画面全体を選択します。
**4.)** 画面オプションの一番下にある **Edit Styles** をクリックします。
**5.)** **Background** カラースワッチをクリックして、カラーピッカーを表示します。透明度スライダー を使用して、背景の透明度を左端までスライドして 0 に設定します。
**6.)** 今、ポップアップ自体として機能する四角形が必要です。右上の大きなプラス記号をクリックして 
、次に **Simple** をクリックして **Rectangle** を画面にドラッグします。このステップのヘルプについては、最初に [Component Basics](https://help.adalo.com/ja/component-basics/design-basics) ページをよく読んでください。スタイルや色をお好みに変更できます。
**7.)** 画面を作成する際に **Modal** テンプレートを選択した場合は、四角形をダブルクリックしてグループに入り、その後ボタンとテキストを削除してください。
**8.)** 今度は、ポップアップモーダルにアイテムを作成するフォームを追加しましょう。[フォーム](https://help.adalo.com/ja/component-basics/how-to-create-and-edit-forms-and-fields) についての詳細はこちらをクリックしてください。
**9.)** ユーザーがアイテムを作成した後にホーム画面にリンクされるように、フォームにも戻るアクションを追加することを忘れないでください！フォームの設定で **Submit Button** ドロップダウンセクションをクリックし、**Link** アクションを追加して **<-Back** にリンクするようにします。
**10.)** モーダルが望むように見え、読めるようになったら、Step 2 で設定したリンクアクションを編集する必要があります。新しいモーダルにリンクするコンポーネントに戻り、**Link** アクションを選択します。**Transition** ドロップダウンで、トランジションタイプとして **Modal** を選択することを忘れないでください。
**11.)** 通常、モーダルには **X** ボタンまたは **Cancel** オプションを追加しておくのがベストプラクティスです。これがないと、ユーザーはポップアップを閉じることができません！
{% endtab %}
{% tab title="Video" %}
{% embed url="" %}
{% endtab %}
{% endtabs %}
## 例
これで、誰かがコンポーネントをクリックするといつでもポップアップウィンドウが表示されます！この手順で使用されるアプリをクローンしたりテストしたりするには、[こちらをクリックしてください](https://previewer.adalo.com/f47b14e7-44b4-4de7-a820-afccd4cd55d1)。 たくさんのモーダルの例をご覧になりたい場合は、[Modals cloneable kit](https://www.adalo.com/cloneables/modals-popups)をチェックしてください！
## もっと詳しく知る
* モーダル/ポップアップを適用するさまざまな方法があります。画像ギャラリー、情報ポップアップ、Lottieアニメーションを使用した確認、ヒントなどに使用できます。アプリに直接コピーできる素晴らしいモーダルの例をいくつかご紹介します。[Modals cloneable kit](https://www.adalo.com/cloneables/modals-popups)をクローンしてください！
* 他のモーダルとの間でモーダルをリンクする際は注意してください。これにより、データのループやユーザーが前に進めない画面フローが作成されることがあります。モーダルは、「行って戻ってくる」タイプの画面フローで最も効果的に機能します。ユーザーがモーダルに移動し、何かを行い（作成、更新、削除、キャンセルなど）、元の画面に戻される場合です。例外は、ユーザーが長い画面フローを完了し、成功画面が表示され、Homeなどにリンクされる確認画面の場合です。