文字から見るUI

こんにちは。コモテック制作チーム デザイナーです。
WEBサイトは、ビジュアルなどで目を引くことの他に、文字の読みやすさも重要です。せっかくサイトを立ち上げても、書いてある内容がユーザーやターゲットに伝わりづらいと効果が薄くなってしまいます。

今回は、文字が見やすい・読みやすいサイトをいくつかピックアップしてみました。読みやすいしくみを見ていきましょう。
(投稿日時点の情報です)

・任天堂
https://www.nintendo.co.jp/

見出しの文字はひときわ大きく太く、ひと目で分かりやすいようになっています。本文は小さすぎず大きすぎない大きさで、見出しを邪魔しないように少し細くなっていたり、グレー色になっていたりしています。
また、本文以外の補足情報などはさらに小さくなっており、文字情報の順番付けがきちんと統一されています。
そして、文字の周りには余白を多めにとっていることも、区切りがわかりやすく読みやすさに繋がっているようです。

・株式会社プロフェッショナル・ネットワークス
https://www.pronets.co.jp

こちらは英文見出しがメインになっているパターンです。ビジュアルが無くシンプルな文字だけの情報ですが、各数字パーツ等を用い、文字周りの余白をうまく使うことによって、情報の区切りがわかりやすくなっています。

また、プランなどの箇所ではただ文字を羅列するのではなく、大きさのメリハリやマークアイコン等で理解しやすい工夫がされています。

・株式会社モノモード
https://monomode.co.jp

サイトのテイストによっては、あまり太い文字を使いたくない場合もあります。その際はこのように、メイン文字以外はグレー色にすること等によって、優先的に目に入ってほしい情報へ誘導するパターンもあるようです。

まとめ

いくつかのサイトを見比べてみると、共通点としては、「見出しは大きく目立つように」「文字周りの適切な余白」「文字情報の順位付け」がされているサイトは、文字が見やすい印象がありました。
文字にも気を配って、ユーザーやターゲットに伝わりやすい、見やすく読みやすいサイトにしていきましょう!