メインコンテンツまでスキップ

5. レイアウトと画面設計

Create and Manage Pages（ページの作成と管理）​

各Pageは、ドラッグ＆ドロップでウィジェットを配置する視覚的なキャンバスです。

ページを作成する​

Lucy Studioでページを作成する方法は3つあります。

  1. ハンバーガーメニュー

    1. ハンバーガーメニューに移動します。

    2. 「New Page」をクリックします。

      ハンバーガーメニュー

    3. 「Create New Page」ダイアログの「Name」欄を入力します（説明は任意です）。

      Create New Pageダイアログ

  2. Page タブを使う

    1. Page タブ（Plateメニューの3番目のアイコン）に移動します。

    2. 上部の「ページを新規追加」アイコンをクリックします。

      Page タブから新規ページを追加

    3. 「Create New Page」ダイアログの「Name」欄を入力します（説明は任意です）。

      Create New Pageダイアログ

ページの管理 - 削除・名前変更・複製​

ページを大きなカテゴリーに整理するには、フォルダを作成できます。以下では、ページの削除・名前変更・複製の方法も扱います。

  • フォルダを作成する

    • 「フォルダ追加アイコン」をクリックします。

      フォルダを作成

    • 「Folder Name」と「Description」を入力します。

      フォルダ作成ダイアログ

    注記

    現在、ページをドラッグ＆ドロップでフォルダに入れる操作はサポートされていません。フォルダを右クリックすると、直接ページを追加できます。

  • ページを削除・名前変更・複製する

    • 削除・名前変更・複製したいページを右クリックします。

      ページの削除・名前変更・複製

Page Size / Device Type​

キャンバス領域の上部に「Device Type」ドロップダウンがあります。ここでビルド対象のデバイスを選択できます。キャンバスのサイズが選択したデバイスのサイズに合わせて変わるため、目的のデバイスに正確に合わせてデザインできます。

Device Typeドロップダウン

  • Responsive - キャンバスは特定のデバイスサイズに固定されません。代わりにデフォルトサイズ1024×768でプレビューされ、実行時にアプリが動作する画面サイズに合わせてレイアウトが適応するよう設計されています。画面サイズが大きく異なるWebやデスクトップを対象とする場合はResponsiveモードを使用してください。
  • Foldable Device - キャンバスには折りたたみ状態（344×882）と展開状態（690×829）の2つの状態があります。Studio内でこの2つの状態を切り替えながら、それぞれのレイアウトをデザインできます。フォルダブルデバイス向けに作る場合は、折りたたみ・展開の両方の画面をデザインしてテストする必要があります。

Page Properties​

キャンバス領域でページをクリックすると、設定可能なプロパティが表示されます。ここには、ページの背景色、デザインの高さ、デザインの幅などが含まれます。

ページプロパティパネル

Use Layout Widgets（レイアウトウィジェットの使用）​

各ページが持てる親ウィジェットは1つだけです。この親ウィジェットは通常ColumnまたはRowです。

  • Column

    • 子を上から下へ配置します。

    • MainAxisSize

      • min：子の高さの合計を使用します。
      • max：親が許容する最大の高さを使用します（デフォルト）。

    • MainAxisAlignment - Columnの子を上から下へ整列します。

      Column MainAxisAlignment

    • CrossAxisAlignment - Columnの子を左から右へ整列します。

      Column CrossAxisAlignment

      Columnの整列の例

  • Row

    • 子を左から右へ配置します。

    • MainAxisSize

      • min：子の幅の合計を使用します。
      • max：親が許容する最大の幅を使用します（デフォルト）。

    • MainAxisAlignment - Rowの子を左から右へ整列します。

      Row MainAxisAlignment

    • CrossAxisAlignment - Rowの子を上から下へ整列します。

      Row CrossAxisAlignment

      Rowの整列の例

親ウィジェットがRowやColumn以外になる場合もあります。これらのウィジェットは「Layout」セクションにあります。

  • Stack

    • Stackはすべての子を同じ位置に重ねて配置します。デフォルトでは子はStackの左上隅に配置されますが、「Positioned」プロパティを使うと各子にStack内の絶対位置を指定できます。

      Stackの例

  • Wrap

    • 子を1行（軸を縦に設定している場合は1列）に並べ、次の子が使用可能な幅を超える場合は次の行に折り返します。Columnと異なり、Wrapは子が幅いっぱいを占める必要がなく、各子は必要な分のスペースだけを使います。

      Wrapの例

Supplemental Layout Widgets​

Lucy Studioでは、これらのウィジェットは「Dividers」セクションにありますが、目的のレイアウトを作るのに役立ちます。

  • Spacer：Spacerウィジェットは画面には表示されませんが、親のRowまたはColumnの主軸に沿って残りのスペースをすべて埋めるウィジェットです。兄弟ウィジェットを両端に押しやる用途で最もよく使われます。間隔を利用可能なスペースに合わせて自動調整したいときにSpacerを使用します。

    Spacerウィジェット

  • Divider-H：水平の区切り線

    水平区切り線の例

  • Divider-V：垂直の区切り線

    垂直区切り線の例

  • SpaceBox：SpaceBoxウィジェットは、ウィジェット間に正確な間隔を挿入するための固定サイズの空のボックスです。特定の変わらない距離が必要なときにSpaceBoxを使用します。

    SpaceBoxウィジェット

特定のウィジェットの周囲に余白が必要な場合は、そのウィジェットにスタイルプロパティとしてPaddingを適用してください — SpaceBoxを追加するよりツリーをコンパクトに保てます。ウィジェットを大きくして残りのスペースを埋めたい場合は、別途Spacerを追加するのではなく、そのウィジェットにFlexibleプロパティを適用してください。SpacerやSpaceBoxは、他の方法では調整できない兄弟ウィジェット同士の間隔が必要なときにのみ使用します。

List and Area Layout Patterns（リストとエリアのレイアウトパターン）​

以下は、レイアウトウィジェットを組み合わせてよくある画面構造を実現する例です。個々のウィジェットのプロパティはウィジェットリファレンスセクションで扱います。これらのプロパティについて詳しくは、ウィジェットの使い方をご覧ください。

  • Feed（06_Layout_and_Screen_Design > feed_example）— ListViewの中にCardウィジェットを配置して作るスクロール可能なフィードです。各Cardは画像・タイトル・説明など1項目分のコンテンツを保持し、ListViewがそれらを縦に並べてスクロールを処理します。コンテンツフィードや商品一覧など、繰り返しのスクロール可能なリストが必要な画面に適したパターンです。

    Feedの例

  • Settings（06_Layout_and_Screen_Design > settings_example）— Column、Row、Cardウィジェットで作る設定画面です。セクションごとにCardのレイアウトや内容が異なるため、このパターンではListViewを使わず、各セクションをColumnとRowで個別に構成します。設定画面や環境設定画面で、各セクションが均一な行テンプレートの繰り返しではなく、それぞれ独自のレイアウトを必要とする場合にこの方法が適しています。

    Settingsの例

Build Responsive Layouts（レスポンシブレイアウトの構築）​

ウィジェットに「Flexible」プロパティを適用すると、レスポンシブレイアウトを実現しやすくなります。親がRowまたはColumnであれば、すべてのウィジェットに「Flexible」プロパティを適用するオプションがあります。

ウィジェットにFlexibleを適用する​

  • Flexibleプロパティを適用するには、適用したいウィジェットをクリックし、「Property」タブを開きます。
  • flexとfitというプロパティが表示されます。

    • Flex：各子は、自分のflex 値を全ての子（自分を含む）のflex 値の合計で割った分だけ広がってスペースを埋めます。

      Flex プロパティ

      Flexの例

      • 例）上の画像では、子AとCのflex 値は1、子Bは2です。子のflex 値の合計は4です。子Bのflex 値（2）を合計（4）で割ると0.5、つまり50%です — これが子Bが広がって埋めるスペースの割合です。

    • Fit

      • tight：ウィジェットの本来のサイズがそれより小さくても、割り当てられたflex スペース全体を強制的に埋めます。下の画像のすべての子は、本来の幅が50であるにもかかわらず、fitプロパティがtightに設定されています。

        Fit: tightの例

      • loose：ウィジェットは、自分のflex 割り当て分を上限として本来のサイズで表示されます。これがデフォルトです。

        Fit: looseの例

        • 例：flex: 1をそれぞれ持つ3つの子が、すべて幅50でボックス化され、利用可能な幅328px・子同士の間隔8pxの行に配置されている場合。8pxの間隔2つ分を引くと、子に分配できるスペースは312pxになり、flex: 1ずつ均等に3等分すると、子1つあたり104pxです。子AとCはtightなので、それぞれ104px分をすべて埋めるよう強制されます。子Bはlooseなので、104pxの割り当てのうち本来の幅（50px）分だけを使い、残りの54pxは使用されません。

Scrollable Overflow​

コンテンツがRowやColumnの範囲を超える場合、コンテンツをスクロール可能にしてこのオーバーフローに対処する方法がいくつかあります。

  • ListViewを使用します。スクロールされるコンテンツがすべて異なるデザインの場合は、ScrollViewを適用するか「scrollAnchor」を有効にしてください。

  • オーバーフローするコンテンツを保持しているColumnまたはRowにScrollViewスタイルを追加します。

    ScrollViewの例

  • Columnに標準で用意されている「scrollAnchor」プロパティを有効にします。

    • このプロパティを使うと、ユーザーがColumn内の特定の位置までスクロールすることもできます。

    • Column内の特定の位置までスクロールすることも可能です。詳しい方法については、Column Widget Controlをご覧ください。

      scrollAnchorの例