# 画面サイズ切り替えツールの使い方

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

## 開始前に

* [レスポンシブアプリの作成](/ja/design/designing-your-app/creating-an-app.md)ガイドを読了し、アプリが作成済みであることを確認してください。

## 動画

{% embed url="<https://www.youtube.com/watch?v=1ZqJtTtIVxs>" %}

## 手順

#### 1. Adaloの新しいレスポンシブアプリビルダーは、事前定義された解像度で3つの異なる画面サイズ向けにビルドを提供します。

* **デスクトップ** - 992 x 無限の高さより大きい画面
* **タブレット** - 768 - 991の幅 x 無限の高さの画面
* **モバイル** - 767以下の幅 x 無限の高さの画面

{% hint style="info" %}
**注意:** レスポンシブアプリのおかげで、デバイスを縦から横に回転させると、アプリのレイアウトが画面サイズに合わせて適応されるようになりました！
{% endhint %}

#### 2. スクリーンスイッチャーにアクセスするには、ビルダー内の任意の画面の左上にあるPCのアイコンをクリックします。

<figure><img src="/files/mXNV0LqiJUM03dxO9hCQ" alt=""><figcaption></figcaption></figure>

#### 3. 異なる端末タイプをクリックすると、ビルダー内の画面サイズが調整され、その特定の画面サイズ向けにビルドできます。

<figure><img src="/files/dTycXht6wGAtdY1Hh2Xq" alt=""><figcaption></figcaption></figure>

#### 4. スクリーンスイッチャーで端末タイプを変更すると、画面上のコンポーネントはそれぞれの[レイアウト](/ja/design/designing-your-app/using-the-layout-tab.md)設定に従って動作します。

スクリーンスイッチャーはアプリの画面レイアウトに実際に何が起こるかを制御するものではなく、むしろビルダー内でのプレビューとして機能します。

#### 5. 画面のラベルをクリックし、画面の黄色い境界線をクリックしてドラッグすることで、これらの異なる画面サイズをプレビューすることも可能です。

いつでもスクリーンスイッチャーを使用して画面サイズをデフォルトの画面サイズの1つにリセットできます。

<figure><img src="/files/kO0zNxwBEiJmT0huSDd9" alt=""><figcaption></figcaption></figure>

## もっと詳しく知る

* レスポンシブアプリでは、事前定義されたピクセル幅は変更できません。これにより、業界標準の画面幅に合わせることができます。より高度な制御が必要な場合は、Adalo Marketplaceの他のスクリーン検出コンポーネントをチェックしてみてください。ただし、このような方法でレスポンシブメソッドを組み合わせると、最適なパフォーマンスを保証することはできません。

## ヘルプ

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

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


---

# 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/using-the-screen-size-switcher.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.