“オートレイアウト”の組み合わせで柔軟なデザインを作る

• 前回までの内容・今回やること
• カードデザインにオートレイアウトを設定する
• 1.フレームにオートレイアウトを適用
• 2.必要箇所をフレーム・グループ化する
• 3.フレーム内要素を可変にする
• 4.最終調整
• 補足

前回までの内容・今回やること

前回のレッスンで、同サイズのカードを4つ、一定の間隔で横並びに配置しました。
しかし、カードデザイン全体が伸縮しているのではなく、カード枠でトリミングしたような表示です。

カード内コンテンツの表示が途中で切れてしまう原因は、画像やテキストのサイズが固定値のためです。
今回は、カードに対して以下のように横幅を変えてもレイアウトが保たれるよう設定します。

こうすることで、カード4つを囲うフレームの幅を変更しても、表示が切れたり、レイアウトが崩れなくなります。

コンテンツ幅やgap（カードの間隔）が変わっても、ほぼ調整作業は要らなくなります。
スマホ幅表示のデザインなども楽にできるようになるので、設定してみましょう。

カードデザインにオートレイアウトを設定する

デモではコンポーネント化したものを使っているので、メインコンポーネントを変更していきます。

1.フレームにオートレイアウトを適用

オートレイアウトを追加してみましょう。
要素の並び順によって変わりますが、見た目に何らかの変化が起こるはずです。

下図、赤い線で囲った3箇所で縦並び・間隔16・上揃え（左）設定にします。

2.必要箇所をフレーム・グループ化する

オートレイアウトを適用したフレームの直下にあるレイヤーは、オートレイアウトで指定した並び順に従って配置されます。
今は縦並びですね。

しかし、画像やテキストを「横に並べたい」カード最下部があります。
こうした部分は、更にグループ化もしくはフレーム化して設定していきます。

コーディングで言うと、下記のようなCSS FlexBoxレイアウトのイメージです。

カード最下部でやってみましょう。
まず、カード下の画像・名前・日時の3つを選択状態にします。
そのまま、オートレイアウトを追加。

オートレイアウトのフレーム（下図Frame1）が追加されます。

新しく追加されたフレームを選択し、以下２つを設定して下さい。

• 水平方向のサイズ調整：コンテナに合わせて拡大
• オブジェクトの並び順：横並び

左側に寄せたい写真・名前をグループ化します。

名前のテキストレイヤーを選択して、水平方向の中央揃えを実行。

写真との距離が気になる場合は、調整して下さい。

もう一度、カード下部をまとめているフレーム（Frame1）を選択します。
アイテムの左右の間隔を [自動] にし、右にある揃え位置で [中央揃え] に設定します。

これでカード下部の配置が出来ました。
オートレイアウトを使ったことで、カードの幅を変えても投稿者情報・日時情報が左右端に配置されたままの状態が維持できています。

3.フレーム内要素を可変にする

カード下部と同じように、他のオブジェクトもフレームに合わせて幅が変わるようにします。

カード上部の画像、見出し、概要（抜粋）の３レイヤーを選択状態にします。
飛び飛びのレイヤーの選択はCtrlもしくは⌘キーを押しながらクリック。

水平方向のサイズ調整で、コンテナに合わせて拡大を設定します。

フレームの大きさに合わせて、自動的にサイズが変わるようになりました。

本題の、幅1200のフレーム内に配置した4つのカードを見てみましょう。
はみ出しが無くなり、きちんと見えるようになっています。

4.最終調整

最後に、カード４枚並びの調整をします。
フレームの位置がデザイン幅（top_pc）の中央からズレているのを直したり、カード同士の間隔を調整したり、気になるところを整えて下さい。

4枚めのカードだけ、ドロップシャドウが見えなくなっているのは、ドロップシャドウが外側に付いているため。
以下２つの方法、どちらかで見えるように出来ます。

方法1：カードを囲うフレームの[コンテンツを隠す]のチェックを外す

方法2：カードを囲うフレームに左右パディングを設定する

（左右パディング分、横幅を広げても良い）

補足

1.オートフレーム直下の要素で、余白を変えたい

オートフレームを適用すると、子要素同士の間隔は均一になります。

特定要素にだけ、間隔で設定した以上の余白を付けたい時は、その要素をオートレイアウトで囲う必要があります。
更にオートレイアウトを入れ子にして、パディングをつける形です。

例えば、題材のカードデザインで、抜粋文の上下にだけ余白を加えるなら、以下のように行います。

余白を付けたいテキストレイヤーを選択。
オートレイアウトを追加します。

新しく出来たオートレイアウトのフレームを選択。
右サイドバーのオートレイアウトから、パディングを設定します。

パディングは半角カンマ,で区切ると、上下・左右で別の数の指定もできます。

2.サイズが変わると画像が歪む

カード幅を変えると、画像が歪む（縦横比が崩れる）場合があります。

下図では、極端に細長くしてみました。
ライオンやアライグマの部分は、画像の縦横比が崩れて歪んでいますよね。

反対に、右にある猫・キリンは画像自体は歪んでいません。
この差は、シェイプの塗りに画像を指定する際に選んでいる、画像配置方法です。

トリミングを選んでいる場合、トリミングで指定した表示範囲が優先されます。
指定した範囲を見せるために、シェイプが細長くなると元画像の縦横比が崩されるわけです。

拡大を設定していると、表示範囲は指定できない変わりに元画像の縦横比は維持されます。

幅を変えても完璧に綺麗に表示したい、という場合は、事前に画像のサイズ・縦横比を統一した方が良いですね。