Shufumin日記

のんびりデザイナー続けているひとの雑記ブログです

【レイアウト】揃える

f:id:yuumin5220:20200829145817j:plain

「揃える」レイアウトについて2つの方法を書きます。

大きいオブジェクト+文字を揃える

(例1)何か大きいオブジェクト(アイコンなど)の横に文字を配置するとき
f:id:yuumin5220:20190623215835p:plain
①まずアイコンを基準に文字を中央揃えにします。
②文字を気持ち下に2ドットほど下げて完了です。


①の状態で終わらせてしまうと、数値的にはきれいになっているはずですが、どこかふわふわした違和感を感じるレイアウトになってしまいます。
そのため、②の調整を行っています。

項目が多い画面のボタンを揃える

(例2)画面1のボタンを押すと画面2に遷移するUIのレイアウトを作るとします。
f:id:yuumin5220:20190623223927p:plain
(方法1) 画面2のボタンの位置を画面1と同じ位置に揃える。


この方以外にもボタンをきれいに見せる揃え方はこちらです。
f:id:yuumin5220:20190623224826p:plain
(方法2)画面2のボタンの位置を、画面1のボタンを基準に中央揃えにする。

以上です('◇')ゞ