# アプリのデザイン

## デザインを始める前に

ユーザーがアプリにアクセスする方法を考えてみましょう。

* モバイルアプリとしてアクセスすることになるのでしょうか？アプリストア[^1]からダウンロードするか、PWA[^2]としてインストールされますか？
* それとも、モバイル、タブレット、デスクトップなど、さまざまなデバイスを使用してアプリを利用できるオプションがあるのでしょうか？

Adaloには、これらのシナリオに対応する2つの主要なアプリ種類があります：モバイルアプリとレスポンシブアプリです。アプリの種類はAdaloで完全に互換性があり、アプリの設定サイドバーの「アプリレイアウトタイプ」でいつでも簡単に切り替えることができます。

### モバイルアプリ（モバイルデバイス専用）

「モバイルアプリタイプ」を使用すると、ユーザーにモバイル専用の体験を提供できます。異なるデバイスサイズのユーザーをサポートする必要がない場合に使用します。Adaloを始めたばかりの場合は、これはレスポンシブよりもシンプルなので学ぶのに最適です。必要に応じて後でレスポンシブに切り替えることもでき、好みに応じていつでもモバイルに戻すことができます。モバイルアプリは、AppleのApp Store（iOS）、GoogleのPlay Store、およびWeb上の独自のカスタムドメインに公開できます。Web上では、すべてのユーザーがアプリのモバイル最適化バージョンを見ることができます。モバイル専用アプリの現在のバージョンは2023年12月にローンチされました。この日付以前に作成されたすべてのモバイルアプリはレガシーアプリとなります（[以下を参照](#what-is-the-different-between-responsive-app-builder-and-legacy-app-builder)）。

### レスポンシブアプリ（モバイル、タブレット、デスクトップ）

レスポンシブアプリを使用すると、モバイル、タブレット、デスクトップの3つの異なる画面サイズで1つのアプリをデザインできます。レスポンシブアプリは、AppleのApp Store（iOS）、GoogleのPlay Store、およびWeb上の独自のカスタムドメインに公開できます。Web上では、ユーザーは自分の画面に最適なアプリバージョンを自動的に表示します。アプリ内の各画面の上に画面サイズ切り替えツールが表示されている場合、アプリがレスポンシブであることがわかります。レスポンシブアプリタイプは2023年4月にローンチされました。

#### レスポンシブアプリの動画ガイド

{% embed url="<https://www.youtube.com/watch?v=rnajBt-qDCc>" %}

## 新しい「Adaloビルダー」とは？

Adaloアプリビルドは多くのイテレーションを経てきましたが、最新バージョンはこれまでで最も高度なアプリエンジンです。このエンジンは、レスポンシブアプリとモバイルアプリの両方を駆動します。これらのアプリは、ネイティブモバイルアプリストアとWebに公開できます。

{% hint style="info" %}
**注意：** 最新のAdaloビルダーはレガシービルダーとは異なります。このセクションのページは新しいビルダーに特有です。レガシービルダーでのデザインに関するヘルプは、[このガイド](/ja/design/legacy-builder.md)を参照してください。
{% endhint %}

## このセクションのページ

{% content-ref url="/pages/iNTYnZEUjJAJeMFNdxsO" %}
[定義と用語](/ja/design/designing-your-app/definitions-and-terms.md)
{% endcontent-ref %}

{% content-ref url="/pages/S3mVhw3mAG3XuUyEl3oi" %}
[アプリの作成](/ja/design/designing-your-app/creating-an-app.md)
{% endcontent-ref %}

{% content-ref url="/pages/z1mAwDhfilufJ3d0Y4km" %}
[画面サイズ切り替えツールの使い方](/ja/design/designing-your-app/using-the-screen-size-switcher.md)
{% endcontent-ref %}

{% content-ref url="/pages/fhsRptqujjGMNCvsPFjc" %}
[レイアウトタブの使い方](/ja/design/designing-your-app/using-the-layout-tab.md)
{% endcontent-ref %}

{% content-ref url="/pages/7a8kMB7KCBFKcDgeOPP2" %}
[コンポーネントのグループ化](/ja/design/designing-your-app/grouping-components.md)
{% endcontent-ref %}

{% content-ref url="/pages/VKAZ04urA7fOVDmA7FIu" %}
[レスポンシブナビゲーション](/ja/design/designing-your-app/responsive-navigation.md)
{% endcontent-ref %}

{% content-ref url="/pages/50m1Odd6KZCXx7angVex" %}
[レスポンシブデザインのベストプラクティス](/ja/design/designing-your-app/responsive-design-best-practices.md)
{% endcontent-ref %}

## FAQ

<details>

<summary>レスポンシブデザインとは？</summary>

Adaloのレスポンシブデザインは、1つの画面と1つのアプリで複数の画面サイズに対応できるように設計されています。

</details>

<details>

<summary>レスポンシブWebアプリとは？</summary>

レスポンシブWebアプリは、画面サイズに適応するように画面上のコンポーネントを検出して調整します。Adaloビルダーを使用して、アイコンの配置とスケーリングを選択します。

</details>

<details>

<summary>PWAはレスポンシブWebアプリと異なりますか？</summary>

はい！PWAはレスポンシブの必要はありませんが、最高のものはそうです。

PWA、または「プログレッシブWebアプリ」は、Apple App StoreやGoogle Play Storeからダウンロードするアプリのように機能するウェブサイトの一種です。PWAの特徴の1つは、ブラウザからユーザーのデバイスにインストールできることです。AdaloのすべてのアプリはPWAとして公開できます。すべての画面サイズに対応するように構築することを選択しなくても。

</details>

<details>

<summary>新しい「レスポンシブアプリビルダー」と「レガシーアプリビルダー」の違いは何ですか？</summary>

レスポンシブアプリビルダーは、レガシーアプリビルダーのコードベースを完全に書き直したものです。新しいレイアウトオプション、画面サイズ設定、コンポーネントのアンカリング、新しいスナップグリッドの改善などが含まれており、アプリを1度構築してネイティブとWebに同時に公開することが可能になります。

新しい[Mobile Apps](#mobile-apps-mobile-devices-only)は、Adaloのレスポンシブアプリエンジンの上に構築されています。これにより、このデザインモードを自由に切り替えることができます。

レガシービルダーは画面サイズに対応しておらず、通常はモバイルやネイティブアプリをWebアプリとは別に作成するのに最適でした。さらに、レガシーアプリにはコンポーネントレイアウトツールがなく、公開の制御が制限されており、スナップガイドも改善されていません。

</details>

[^1]: AppleのApp StoreまたはGoogle Play Store

[^2]: プログレッシブWebアプリ


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.adalo.com/ja/design/designing-your-app.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.