レスポンシブデザインのベストプラクティス
Adalo でレスポンシブアプリを構築する際に、標準化されたワークフローを持つことは非常に役立ちます。以下に当社の推奨ワークフローをご紹介します。
Last updated
Was this helpful?
Adalo Resources (日本語)
Adalo でレスポンシブアプリを構築する際に、標準化されたワークフローを持つことは非常に役立ちます。以下に当社の推奨ワークフローをご紹介します。
Last updated
Was this helpful?
スキルレベル: 中級
このワークフローの使い方をよく理解するために、最初にの他のガイドを読むことを強くお勧めします。
このワークフローが最も効果的であると考えていますが、自分に最適な方法で構築することもできます。
たとえば、ソーシャル投稿アプリを構築する場合は、まずモバイルから始めることがあります。会社の在庫管理アプリを構築する場合は、最初にデスクトップアプリから始めることが理にかなっています。アプリを視聴者の使用方法に分割することで、すべての画面サイズに一度にデザインしようとして圧倒されるのを防ぐことができます。
アプリにプロフィール画面が必要ですか？設定画面や新しいレコードを追加する画面は？サインアップやログイン画面はありますか？最初はこれらの画面にコンポーネントを配置しなくても、すでに作成しておくことで、これらの画面に何を含める必要があるかをより深く考えるのに役立ちます。
複数のデバイス向けにデザインする際、表示したい情報に場所がないとすぐに混乱します。似た情報をボックスやコンテナに分割することで、後で異なる画面サイズに合わせるために情報の断片を移動する必要がある場合に役立ちます。使用している他のアプリを見ることで、情報のセクションについて考えるのに役立ちます。例としてこのヘルプドキュメントを見てみましょう：
各情報がページ内の赤い四角形やコンテナ内に存在することに注意してください。画面サイズがモバイルビューに変更されると、これらのコンテナが変更されて画面サイズの違いに対応するのがわかります。ページリストはメニューボタン内に隠され、ページナビゲーションは右上のケバブアイコンを通じても完全にアクセスできなくなっています。
他のコンポーネントを含めずにRectangleを画面サイズに応じて反応させることで、詳細な部分を追加する前に、コンテンツセクションのレスポンシブな側面に焦点を当てることができます。
これらの詳細コンポーネントは、テキストラベル、画像、ボタン、リストなど、エンドユーザーに表示したいすべてのものです。コンテナを「カード」またはコンテナとして表示したくない場合は、Rectangleの背景を透明に設定するか、画面の背景と同じ色に設定できます。
すべての詳細コンポーネントを追加した状態で画面サイズを調整してみてください。おそらくすでにかなり良い見た目になっているはずですが、Rectangleやグループ内の個々のコンポーネントを調整する必要がある場合は、それらのコンポーネントのレイアウト設定を、親コンポーネントから別々に調整できます。
言うまでもないかもしれませんが、レスポンシブであろうとなかろうと、Adaloアプリを他のどのアプリと同様に構築する必要があります。これにはデータベースの設定、コンポーネントへのアクションの追加、画面の接続、必要に応じてマジックテキストの追加などが含まれます！
これは私たちの好みのワークフローの1つに過ぎませんが、私たちが最も好きなものです！フォーラムであなた自身のワークフローを共有してください - 他の開発者にも役立つかもしれません！
情報のコンテナを考えるようになったら、これらのコンテナを考慮に入れてレイアウトを実際に構築する時が来ました。上記の赤い四角形が情報のセクションを表しているように、コンポーネントを使用して、自分のアプリ内でこれらのコンテナを作成し、必要なコンポーネントをそれらの中に配置することができます。
この記事に関する追加のヘルプが必要な場合は、いつでもで質問するか、ことができます！投稿にこの記事へのリンクを貼り付けることも忘れないでください！
チュートリアルやヘルプドキュメントのリクエストがありますか？
