# アプリの作成

*スキルレベル：初心者*

## はじめに

* レスポンシブアプリの開発についての新しい[定義と用語](https://help.adalo.com/ja/design/designing-your-app/definitions-and-terms)を読了していることをご確認ください。
* Adaloアカウントを持っており、ログインしていることをご確認ください。

## 手順

#### 1. (オプション) Adaloアカウントにすでにアプリがある場合は、ビルダー内のアプリセレクタードロップダウンをクリックし、新しいアプリを作成してください。

<figure><img src="https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-ea70bc67cc9b28d7422fa1d7da8868c52c779719%2FScreen%20Shot%202023-03-06%20at%209.07.43%20AM.png?alt=media" alt="新しいアプリのドロップダウンのスクリーンショット"><figcaption></figcaption></figure>

#### 2. アプリ選択モーダルで、ユーザーがアプリにアクセスする方法を選択してください。

{% hint style="info" %}
**もう悩む必要はありません！**

いつでもビルド対象のデバイスを変更できます。[App Layout Type](https://help.adalo.com/ja/design/definitions-and-terms#app-layout-type)を変更することで、デバイスを切り替えることができます。
{% endhint %}

**モバイル、タブレット、デスクトップ** - これらをレスポンシブアプリと呼びます。ユーザーがさまざまな画面サイズでアプリを使用することを想定している場合は、このオプションを選択してください。

**モバイルのみ** - これをモバイルアプリと呼びます。Adaloのご利用が初めての場合は、このオプションを選択するのがおすすめです！アプリのデザインをモバイル画面に最適化し、その後App Layout Typeを切り替えて大きな画面に対応することができます。

選択したら、「NEXT」をクリックしてください。

<figure><img src="https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-579ef372ce9a4f1d95c943e30e60f1aee11fda7a%2Fapp-type-selection.jpg?alt=media" alt=""><figcaption></figcaption></figure>

#### 3. 開始するためのテンプレートを選択するか、ゼロからレスポンシブアプリを作成するために「Blank」を選択し、「NEXT」をクリックしてください。

レスポンシブを始めたばかりであれば、まずテンプレートで実際に操作し、さまざまなコンポーネントの設定がレスポンシブの動作にどのように影響するかを確認するとよいでしょう。

<figure><img src="https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-1095b86489c3e1f55f37351e1a2bf56b056cdf64%2FScreen%20Shot%202023-03-06%20at%209.21.23%20AM.png?alt=media" alt=""><figcaption></figcaption></figure>

#### 4. アプリの名前、Adaloチーム（該当する場合）、いくつかのブランディングカラーを選択し、「NEXT」をクリックしてください。

<figure><img src="https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-84a5999fa2e2f6600b59678f3dd0f093a89ab5de%2FScreen%20Shot%202023-03-06%20at%209.26.05%20AM.png?alt=media" alt=""><figcaption></figcaption></figure>

#### 5. Web、iOS、Androidに公開できるレスポンシブWebアプリが作成されました！

## ヘルプ

この記事に関する追加のヘルプが必要な場合は、いつでも[コミュニティフォーラム](https://forum.adalo.com/)で質問するか、[専門家に相談](https://adalo.com/experts)ことができます！投稿する際は、この記事へのリンクを貼り付けることも忘れないでください！

チュートリアルやヘルプドキュメントのリクエストがありますか？[こちら](https://ideas.adalo.com/tutorial-requests)にお知らせください！