前回学習した「Auto Layout」で、内容に応じた可変のObjectの作り方がわかりましたが、
今回はそれをさらに発展させた、
Auto Layoutの構造化について学習を進めてみたいと思います。
ちなみに、Auto Layoutの構造化って簡単に説明すると、入れ子にした階層を作るという事です。
これを覚えておくと、さらにFigmaを使ったデザインが扱いやすくなるでしょう。
サンプルを使ったチュートリアル
Webデザインでは、カード表示をするケースって結構多いと思います。
「サービスの特徴」
「人員紹介」
「Q&A」
こういう時は、カード表示をすることで、見た目もみやすく、コンテンツとしてもわかりやすい印象を与えます。
カードがイメージできない人のために、実際に使われているカードの表示サンプルを用意しておきました。
このカードの１つの構造は、
・サービス名
・サービスの説明
・詳細を見るボタン
こういう感じで構成されているケースが多いです。
この3つを一つのAuto Layoutにまとめるだけでもカードは作れますが、
見出しと説明文をひとまとめにしたい場合や、ボタンを独立して配置したい場合には、
複数のAuto Layoutを組み合わせると便利です。
このように、Auto Layoutの中に別のAuto Layoutを配置する構造を、「入れ子のAuto Layout」と呼ばれているようです。
今回は、これをFigmaを使って構築してみたいと思いますね。
手順
まず最初にカードのイメージを書き出してみたいと思います。
見出し : Webサイト制作
説明 : 小規模な事業やサービスに適したWebサイトを制作します。必要な情報を整理し、使いやすいページを構築します。
ボタン : 詳細を見る
FigmaのLayout構造としては、次のような感じです。
Objectを配置
実際に、Figma上にObjectを配置してみましょう。
1. 見出しを作る
2. 説明文を作る
3. 2つのテキストをまとめる(Auto Layout)
見出しと説明文のObjectを同時に選択しておいて、
Shift + A
のショートカットを押すと、Frameが構築されます。
4. ボタンを作る
前回のAuto Layoutの手順で、ボタンを構築します。
5. カード全体をまとめる(Auto Layout)
見出し + 説明文のFrame と、ボタンを選択した状態で、Shift + A でAuto Layoutを作ります。
線をつけて、角丸などをセットすると、カードの出来上がりです。
6. 文章を変えてみる。
実際に、コンテンツ内容が変更になっても、カードのサイズが自動的に変更してくれるので、便利に使えると思います。
カード複数をさらに構造化する
カードを扱う場合は、ほとんどの場合、複数個をリスト表示のように、扱うことが多いでしょう。
ということで、これらもすべて Auto Layout化してしまうことで、扱いやすいフレームを作ることができます。
今回は、同じものをコピーしただけですが、
同じように Shift + A で、Auto Layoutにします。
こうすることで、カードのサイズが変更になった時でも、自動的にサイズ調整ができるようになって便利です。
入れ子にするメリット
すべての要素を一つのAuto Layoutにすればいいと考える人もいるかもしれませんが、何故階層を分けたほうがいいのかというと、
「要素ごとに役割を分けられる」
「変更の影響範囲を整理できる」
「同じ構造を再利用しやすい」
此の3点が大きなメリットになります。
今回のサンプルでは、
見出しと、説明文は、情報としての１つのまとまりで、ボタンはそれとは別の１つの要素になります。
さらに、カード１つも単体としてのまとまりと考えて、
それぞれ、単独の Auto Layout として処理した方が、後々の文章変更や、内容変更の際に、崩れたりしにくくなります。
また、Auto Layout で、構造化されたFrame(Objectの塊）は、コピペして、別の箇所で中身を変更して使うことで、
より作業効率がアップするでしょう。
やってスキルが身につく、確認内容
Figmaに限ったことではありませんが、実際にこういう機能があると知って、理解できても、
その後、本番で便利に使いこなせるようになるには、何度も実戦経験を積む必要があります。
でも、実際に本番対応をするには、
仕事として、受注をして、
クライアントと打ち合わせをして、
デザインの元を作成して・・・
という工程を踏まないと、なかなかこうした経験て積むことができないし、
そうたくさんの経験につながるには何年もかかってしまいます。
そこで、自分で実際に本番さながらのデザイン構築をすることをお勧めします。
今回の Auto Layout に関しては、以下の点を確認しながら作業をすることで、
本番に強いスキルにつながると思うので、是非下のチェック項目を確認してみてください。
チェック1： 説明文を2倍程度の長さに変更し、ボタンの位置がどう変わるか確認する。
チェック2： カード全体の内側の余白を変更し、カードの見た目がどう変わるか確認する。
チェック3： 見出しと説明文の間隔だけを変更し、ボタンとの間隔に影響するか確認する。
チェック4： ボタンのテキストを「サービスの詳細を見る」に変更し、ボタンの幅が追従するか確認する。
あとがき
入れ子のAuto Layoutは、単にFrameを何重にも作るということではありません。
情報のまとまりごとにFrameを作り、
それぞれの
配置ルールを設定して、
全体を組み立てる方法です。
この考え方を理解すると、ボタンやカードだけでなく、
ヘッダー、ナビゲーション、フォーム、一覧画面など、
複雑なUIを整理して設計できるようになるでしょう。
0 件のコメント:
コメントを投稿