Webサイトやアプリの画面は、いつも同じサイズで表示されるとは限りません。
例えば、デスクトップ用に作った画面の幅が、
1440px
↓
1200px
↓
900px
と変わったら、そこに配置されているObjectはどうなるのでしょうか。
すべてをそのまま同じ位置に置いておくのか。
画面の右側にあるものは右側に残すのか。
中央にあるものは中央に置き続けるのか。
こうしたFrameのサイズが変化したときのObjectの振る舞いを決めるのが、FigmaのConstraintsです。
ホームページのコーディングでは
「レスポンシブデザイン」と言いますが、Figmaでこうしたマルチサイズ対応についてもテックニックを習得しておきましょう。
Constraintsとは？
Constraintsは、
Objectが親Frameのサイズ変更に対して、どのように位
置やサイズを保つかを指定する機能です。
例えば、Frameで、次のような構造があった場合、
このFrameの幅を狭くしたとき、中に置かれているObjectはどうなるべきでしょうか？
右端からの距離を維持したいのであれば、
RightにConstraintを設定する
ことで、対応できます。
つまりConstraintsは、
「親Frameのサイズが変わったとき、子Objectをどこに留めておくか」
というルールなんです。
基準を上下左右のどこに置くかを設定できる機能です。
これをちゃんとセットしておくと、画面内のFrameサイズを少しだけ変えるような場合に、内部の座標をセットし直さなくてもよくなる場合があるので、効率アップにつながる機能です。
Constraintsは親との関係を決める
Constrainsは、日本語では、「制約」という機能になります。
実際に、Figmaを操作して、設定を確認してみましょう。
Objectを選択している状態で、右側のインスペクタパネルの「位置」のところにボタンが表示されます。
右のボタンをクリックすると、すぐ下に、設定パネルが表示されます。
左側の項目では、左右、上下それぞれの状態が選択できて、
右側の項目は、上下左右それぞれの線をクリックすると、その方向のFrameとの座標を維持するようになります。
この画像では、右下が選択されている状態です。
セットしてみたら、Frameのサイズを変更して、追従するかどうか確認してみましょう。
Constraintsの機能内容
実際に、操作を体感できたら、機能の内容について、解説しておきます。
Horizontal Constraint
「左右制約」をセットする機能です。
プルダウンの内容は以下の通りです。
- 左 (Left)
- 右 (Right)
- 左+右 (Left and Right)
- 中央 (Center)
- 拡大縮小 (Scale)
左、右、中央は、どこ位置に依存するかのセットなので、さほど説明はいらないと思いますが、
「左+右」って、中央と何が違うんでしょう？
これは、右側と左側の距離を同じに保つという意味で、
幅が拡縮するような挙動になります。
拡大縮小は、左+右と違っていて、Frameのサイズに応じてサイズ自体も変化しますが、右、左の距離自体も割合に応じて変動します。
これらの違いをちゃんと理解しておくことで、適切にセットできるようになるでしょう。
Vertical Constraint
左右の制約が理解できたら、Vertical Constraintは、「上下制約」をする機能です。
プルダウンの内容は、以下の通り。
- 上 (Top)
- 下 (Bottom)
- 上+下 (Top and Bottom)
- 中央 (Center)
- 拡大縮小 (Scale)
それぞれの内容は、理解できますよね？
Gridと合わせて使うと効果的
Constraintsは、Gridと組み合わせると、管理がしやすくなります。
Gridは、内部を分割した目安を表示してくれるので、Constraintsをセットする時の目安にすると、どの位置に配置して、
サイズ変更に応じて、どのようにFITさせるのかを、見た目でわかりやすくしてくれます。
あとがき
少しわかりずらい面もある、「Constraints（制約）」機能について、ちゃんと理解できましたか？
Constraintsの本質は、インターネットブラウザや、スマホなど画面サイズの違う
マルチデバイスに対してデザインをするという点にあります。
・ブラウザの幅が変わる
・スマートフォンとPCでサイズが違う
・ウィンドウをリサイズする
・コンテンツの領域が変わる
こうした場合には、Constraintsをちゃんとセットしておかないと、
崩れや
はみ出しが発生してしまいます。
ホームページ制作においては、この制約思考は必須だと考えた方がいいでしょうね。
0 件のコメント:
コメントを投稿