並列項目テキストのフォントサイズは揃える

ボタン群や項目リストなど、複数のテキストを並列的に配置する場合に気をつけたいのが、それらのフォントサイズ。

フォントサイズが揃っていないと、まとまりがなくアンバランスな印象を与えてしまいます。

文言の修正

例えば、RPGなどでこのようなボタン群があったとします。

他の項目に比べて「どうぐをかくにんする」のフォントサイズが小さいせいで、アンバランスな感じになっていませんか？

そこで、「どうぐをかくにんする」という文を省略して単に「どうぐ」としてみましょう。

全体的にまとまりがあり、すっきりした印象です。

このように、ボタン群などの並列項目があった場合はテキストの文字数を揃えることを心がけると、自然とフォントサイズも揃うので綺麗なUIになります。

このような場合はどうでしょう。

「プライバシーポリシー」だけ文字数が多く、フォントサイズが小さくなっています。

しかし「プライバシーポリシー」は言い換えることができないので、先ほどのように文言を修正して文字数を合わせることはできません。

このような場合にはフォントを小さくして詰め込むのではなく、ボタンの大きさやレイアウト自体を考え直すことで、同一フォントサイズでの表示ができる配置にするべきです。

フォントの大きさを固定する、つまりボタンの大きさは長いテキストを基準にして決めます。

ボタンの左右に余白がある分にはあまり違和感は感じません。

逆に小さいフォントで詰め込んだり、ギリギリで余白がない状態だと窮屈な印象を与えてしまいます。

また、二段組を一段組にするなどのレイアウト変更によって、ボタンの幅を広げることも有効です。

並列項目のフォントサイズについて、ご紹介しました。