# レスポンシブデザインのベストプラクティス

*スキルレベル: 中級*

## 開始前に

* このワークフローの使い方をよく理解するために、最初に[レスポンシブアプリ](https://help.adalo.com/ja/design/designing-your-app)の他のガイドを読むことを強くお勧めします。
* このワークフローが最も効果的であると考えていますが、自分に最適な方法で構築することもできます。

## 動画

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

## 手順

#### 1. ユーザーが使用する最小の推奨画面サイズから構築を開始します。

たとえば、ソーシャル投稿アプリを構築する場合は、まずモバイルから始めることがあります。会社の在庫管理アプリを構築する場合は、最初にデスクトップアプリから始めることが理にかなっています。アプリを視聴者の使用方法に分割することで、すべての画面サイズに一度にデザインしようとして圧倒されるのを防ぐことができます。

{% hint style="info" %}
**プロのヒント**: もし提供する予定があるなら、モバイルから始めることを強くお勧めします。画面を大きくしたりコンポーネントを再配置する方が簡単ですが、小さくするのは難しいです。その場合、コンポーネントはモバイル画面からはみ出す傾向があります。
{% endhint %}

#### 2. ユーザーが必要とすると思われる画面のワイヤーフレームを作成します。

アプリにプロフィール画面が必要ですか？設定画面や新しいレコードを追加する画面は？サインアップやログイン画面はありますか？最初はこれらの画面にコンポーネントを配置しなくても、すでに作成しておくことで、これらの画面に何を含める必要があるかをより深く考えるのに役立ちます。

#### 3. 画面を情報のセクションやコンテナとして考えます。

複数のデバイス向けにデザインする際、表示したい情報に場所がないとすぐに混乱します。似た情報をボックスやコンテナに分割することで、後で異なる画面サイズに合わせるために情報の断片を移動する必要がある場合に役立ちます。使用している他のアプリを見ることで、情報のセクションについて考えるのに役立ちます。例としてこのヘルプドキュメントを見てみましょう：

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

各情報がページ内の赤い四角形やコンテナ内に存在することに注意してください。画面サイズが**モバイル**ビューに変更されると、これらのコンテナが変更されて画面サイズの違いに対応するのがわかります。ページリストはメニューボタン内に隠され、ページナビゲーションは右上のケバブアイコンを通じても完全にアクセスできなくなっています。

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

#### 4. 表示する情報に必要なプレースホルダーコンテナやコンポーネントを追加します。

情報のコンテナを考えるようになったら、これらのコンテナを考慮に入れてレイアウトを実際に構築する時が来ました。上記の赤い四角形が情報のセクションを表しているように、[Rectangle](https://help.adalo.com/ja/design/designing-your-app/grouping-components)コンポーネントを使用して、自分のアプリ内でこれらのコンテナを作成し、必要なコンポーネントをそれらの中に配置することができます。

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

#### 5. コンテンツのセクションを表すためにRectangleを配置したら、通常は[Shared](https://help.adalo.com/ja/design/designing-your-app/using-the-layout-tab/shared-layout-settings)および[Custom](https://help.adalo.com/ja/design/designing-your-app/using-the-layout-tab/custom-layout-settings)レイアウト設定を調整するのが最善です。

他のコンポーネントを含めずにRectangleを画面サイズに応じて反応させることで、詳細な部分を追加する前に、コンテンツセクションのレスポンシブな側面に焦点を当てることができます。

#### 6. これでRectangleが配置され、画面サイズに対応しているので、詳細コンポーネントをコンテンツRectangleに配置する準備が整いました。

これらの詳細コンポーネントは、テキストラベル、画像、ボタン、リストなど、エンドユーザーに表示したいすべてのものです。コンテナを「カード」またはコンテナとして表示したくない場合は、Rectangleの背景を透明に設定するか、画面の背景と同じ色に設定できます。

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

すべての詳細コンポーネントを追加した状態で画面サイズを調整してみてください。おそらくすでにかなり良い見た目になっているはずですが、Rectangleやグループ内の個々のコンポーネントを調整する必要がある場合は、それらのコンポーネントのレイアウト設定を、親コンポーネントから別々に調整できます。

#### 8. 最後に、すべてのデータが接続され、アプリ内にアクションがあることを確認してください！

言うまでもないかもしれませんが、レスポンシブであろうとなかろうと、Adaloアプリを他のどのアプリと同様に構築する必要があります。これにはデータベースの設定、コンポーネントへのアクションの追加、画面の接続、必要に応じてマジックテキストの追加などが含まれます！

## もっと詳しく知る

* これは私たちの好みのワークフローの1つに過ぎませんが、私たちが最も好きなものです！フォーラムであなた自身のワークフローを共有してください - 他の開発者にも役立つかもしれません！

## ヘルプ

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

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