見出し画像

Figmaのスマホ設計手法　②

Yusui Hoshino

では、入れる要素の配置ごとに見ていきましょう！

3-1. 要素が1つで中央揃えしたい時


構造

Frame-1

 - fix 要素1 (status bar)

 - fix 要素2 (bottom navigation)

 - Frame-2 (Auto layout)

   - テキスト1

   - テキスト2

   - ...

解説

ボタンなどのオブジェクトはFrame-2に入れるだけで中央揃えになってくれるので特に言うことはないです。

曲者なのがテキストなので、これについて解説します。

テキストの作り方

  • Width: Fixed width

  • Text align: left, center, rightで左揃え、中央揃え、右揃えを表現

テキストのWidth: Fixed widthの理由

テキストを中央に配置する方法は2つあります。

  • 方法1: テキストをWidth: Fixed widthにする（上の動画の方法）

  • 方法2: Auto layoutを適用した親を横いっぱいに広げ、その中にテキストを入れる

方法2は、左右の余白の変更がしやすいというメリットがあります。しかし、次に挙げられる方法1のメリットを重要視したため、この設計手法では方法1を採用しています。

  • 階層が浅い

  • 左右に等しい余白が絶対にできる

    • テキストのtext-alginをleftからrightに変更した時、左と同じサイズの余白が右にあるので便利

3-2. 要素が複数で中央揃えしたい場合

構造

Frame-1

 - fix 要素1 (status bar)

 - fix 要素2 (bottom navigation)

 - Frame-2

   - テキスト1

   - テキスト2

   - ...

解説

先ほどはテキスト、1つのボタンなどを考えましたが、今回は2つのボタンを中央寄せする場合を考えます。

まずAuto layoutを適用した親を作り、その中で横並びにするのまでは良いでしょう。以降、この親を「Frame-3」と呼び、上の画像では青い点線で示しています。

Frame-3の詳細

  • Width: Hug contents

  • Height: Hug contents

  • Padding around: 0

Frame-3のWidthがHug contentsの理由

どっちがいいのか問題

今回も中央寄せに上画像のように2つの方法があるので考えてみましょう。

  • 方法1: Frame-3をWidth: Hug contentsにする

  • 方法2: Frame-3をWidth: Fill containerにしてAlignment: centerにする

この設計手法では方法1で次のメリットを重視し、方法1を採用します。

  • Frame-2のAlignment: centerで中央寄せになっていると明確に分かる

    • 方法2だとFrame-3がAlignment: leftで、左にPaddingがいい感じについている可能性があります。

    • もしくはFrame-3がAlignment: centerで左右に小さいPaddingが含まれている可能性もあります。

    • これに対して、方法1は、Frame-3の選択範囲（青い点線）を見るだけで、Frame-2のAlignment: centerで要素が真ん中に配置されていると分かります。

  • コンポネント化しやすい

    • コンポネント化する要素は、余計なpadding aroundをつけない方が都合が良いと思います（CSSのBEM設計における「ブロックにはmarginを含めない」というルールと同じノリです）。

    • その点、方法1はPadding around: 0がないので繰り返し使いやすい構造と言えます。

3-3. 要素を左右の余白が異なる場所に配置したい場合

構造

Frame-1

 - fix 要素1 (status bar)

 - fix 要素2 (bottom navigation)

 - Frame-2(Auto layout)

   - Frame-3(Auto layout)

     - ボタン1

   - Frame-3(Auto layout)

     - ボタン2

解説

スマホ画面の場合は99%、上記の3-1と3-2の方法で解決できます。

ただし稀にテキストの左右で異なるサイズの余白を作りたい場合や、ボタンを中央以外の位置に配置したい場合があります。この時は、3-2と同じくAuto layoutを適用した親要素を作ります。（3-2と同じく、これを「Frame-3」と呼び、青い点線で示します。）

Frame-3の詳細

  • Width: Fill container

  • Padding around:

    • leftを設定: 左に余白が作りたい場合

    • rightを設定: 右に余白を作りたい場合

    • leftとrightを設定: 左右に余白を作り、間をFill containerの子要素で埋めたい場合

Width: Fill containerの理由

Frame-3をWidth: Fill containerで横幅いっぱいに広げると以下のメリットが生まれます。

  • 左右の余白調整の自由度が高い

  • 画面サイズの横幅が変わっても、左右の余白を保てる

  • Paddingをどこにつけたかによって、どこ基準で余白を指定したのかを伝えられる

これらのメリットが重要だと判断したため、Padding around:0が持つメリットでは手放しています。

Adobe税を払うために使わせていただきます