UIでは、ユーザーに押してほしい部分や注目してほしい部分を強調する必要があります。
今回は文字を強調する方法を7つ、挙げてみます。
元の文章
今回例として使うのはこちらの文章。
大富豪のルールを簡単に書いてみました。
普通に書いただけで、このままだと文章が頭に入ってきにくい状態です。
なぜかと言うと、「何が重要か」がぱっと見で分からないから。
ということで、重要な部分を強調してみます。
文字を強調する方法
今回は文字を強調する7つの方法を挙げます。
以下の7つです。
- 文字の大きさ
- 文字の太さ
- 文字色
- フォントの種類
- 文字装飾
- 背景色
- 文字間の大きさ/余白
順に説明していきます。
文字の大きさ
文字の大きさを他よりも大きくする方法です。
これは多くの方が一番最初に思いつくような方法ではないでしょうか。
一部の文字をを大きくしてみました。
少し目立つようになったのが分かるでしょうか。
これだけだと少し読みづらいですが。
文字の太さ
文字の太さを太くすることでも強調することができます。
このサイトでも重要な部分は黄色いマーカーに加えて文字の太さを太くしています。
これはかなりお勧めな方法で、画像を見てもひと目で要点が分かって読みやすくなったのではないでしょうか。
文字自体の大きさはほとんど変わらないので、見た目もすっきりしたまま強調することができます。
文字色
文字色を変更することで、強調する方法。
これも非常に分かりやすいですよね。
ぱっと見で重要なところが分かります。
また、レイアウトを全く崩さないので文章全体をすっきり見せることができます。
ただし配色を決める必要があるので、考えることが1つ増えてしまうという懸念もあります。
基本的にはアクセントカラー（場合によってはメインカラー）で良いと思います。
アクセントカラーやメインカラーについてはこちら。
フォントの種類
フォントの種類を変えることで強調するという方法もあります。
よく使われるのは、全体が明朝体の文章の一部をゴシック体に変えるパターン。
明朝体は細い線もある程度ある一方で、ゴシック体はだいたい明朝体の太い部分の太さで一定なので、結果的に「文字の太さ」による強調とも似ています。
フォント同士の相性もあるので、この方法を使う場合は同じフォントファミリーの異なる書体にすることをお勧めします。
ちなみに上の画像は「ヒラギノ明朝」と「ヒラギノ角ゴ」です。
文字装飾
文字を装飾することによって強調する方法です。
ゲームUIではこの方法がよく使われますね。
簡単に強調するなら他の方法が良いですが、クオリティを求めるなら文字修飾を一度検討してみるのが良いかと思います。
特に画像で用意する場合は、是非とも文字修飾を検討しましょう。
今回は例として使うので、他の要素ができる限り入らないような文字修飾にしましたが、実際には文字色や文字の太さなど他の要素も合わせて使います。
背景色
文字自体ではなく、背景色を変更して強調する方法です。
こちらも見やすい強調方法です。
ただ、素材を画像で用意しない場合は少し実現するのが難しいかもしれません。
文字間の大きさ/余白
最後に文字間の大きさや前後の余白を広げる方法です。
文字間の大きさはTwitterなんかでよく見かける「 大 草 原 」みたいなもの。
余白を多くとることで、強調することができます。
強調方法を複合した例
7つの文字強調方法を挙げましたが、実際にはこれらの方法を複数個合わせて使うことが多いです。
その例として、1つ挙げてみます。
使った方法は「文字の大きさ」「文字の太さ」「文字色」「文字修飾」「余白」の5種類。
かなり文字が強調されているのが分かります。
まとめ
文字を強調する方法をまとめました。
- 文字を強調する方法はたくさんある
- ゲームでは「文字修飾」がよく使われる
- 複数の要素を組み合わせて使う
コメント
お世話になっております。
本記事中、
「背景色」「文字間の大きさ/余白」「強調方法を複合した例」
の3つの例において
サンプル画像が表示されない様です(ChromeとEdgeで確認)。
お手数ですが、ご確認いただければと思います。
dummyさん
ご指摘ありがとうございます。
画像のアップロードミスが原因でした。
修正して再アップロードしましたので、ご確認ください。
今後とも本サイトをよろしくお願いいたします。