ウェブデザインで使えるテキスト周りのデザインアイデアまとめ＃6（見出しで使える表現）
今回で第6回目となりますが、引き続きテキスト周りで使えるデザインについて考えてみたいと思います。今回はWebデザインでも比較的よくみられる要素である見出しで使える表現方法についてみていきます。シンプルながらも工夫が求められる部分ですので、いろんな表現方法を覚えておきたいですね。
（過去の参考記事）
・ウェブデザインで使えるテキスト周りのデザインアイデアまとめ＃5（デザイン要素の追加）
・ウェブデザインで使えるテキスト周りのデザインアイデアまとめ＃4（塗りの表現）
・ウェブデザインで使えるテキスト周りのデザインアイデアまとめ＃3（アウトライン・シャドウ・グロー効果）
・ウェブデザインで使えるテキスト周りのデザインアイデアまとめ＃2（文字の変形・加工）
・ウェブデザインで使えるテキスト周りのデザインアイデアまとめ＃1（背景写真との組み合わせ）
・画像内の文字を見せるデザイン表現 〜文字に効果を付ける（1）〜
・画像内の文字を見せるデザイン表現 〜文字に効果を付ける（2）〜
・画像内の文字を見せるデザイン表現 ～背景を加工する～
強調する部分の文字のサイズやウエイトを変化させることで、より訴求を高める方法です。このような文字サイズの変化の差は「ジャンプ率」と呼ばれます。文字サイズと合わせてウエイトも変化させることで、より効率よく目立たせることができます。ミニマムな表現ですが、基本でもありよく使うテクニックなのでまずはマスターしておきたいですね。
先ほどの文字サイズとウエイトに変化をつける方法と合わせてよく使われる表現です。見た目にもわかりやすく、色を使うことでサイトデザインにも溶け込ませることができます。実践では目立たせたいコピーの場合だと色だけ変化をつけるのではなく、文字サイズも合わせて変化させることが多いと思います。また色を使うので、配色ルールなども考慮する必要がありますね。
書体にはいろんな種類がありますが、その書体によって与える印象は異なります（参考記事「和文書体の種類まとめ」）これを利用して、コピーの意味に合わせて書体に変化を付けることで、目立たせるだけでなく、より印象を強くさせることが期待できます。このサンプルではネガティブな意味を表すテキストには明朝体を、ポジティブな印象を表すテキストにはゴシック体と使い分けています。先ほど同じく、文字サイズやウエイト、文字色なども合わせて変化させることでより効果が強くなります。
文字揃えを変えると、見た目の変化で目立たせるだけでなく、文字が持つ伝えるべき情報やその役割を明確に区分けすることができます。このように異なる情報軸が混在するテキストに対しては、役割ごとに左寄せ、中央寄せ、右寄せと文字揃えに変化を付けると文字が持つ情報や意味を自然に理解することができます。テキストごとにセクションで分けたいけど、まとまり良く見せたい場合に効果的ですね。
文字間の幅調整を行うことを「カーニング」と呼びますが、本来カーニングはテキストの見た目上のバランスを整えるために行うものですが、強弱を極端に付けることでデザインとして与える印象をコントロールすることができます。例えば字間を広くすると、より抽象的な印象に寄せてメッセージ性を強くしたり、洗練されたデザインに合うようになります。逆に詰めることで、かっちりとした真面目で真剣さや緊張感などを演出することができます。
句読点や括弧などの記号を総称して「約物」と呼びます。通常はこの約物は文字として扱われますが、それをデザインの装飾に使うこともできます。このサンプルでは引用文であることを明示させるために、引用符を装飾用のデザイン要素として表現した例になります。元々は文字の要素であるため、テキスト周りのデザインとしても相性がよく、ミニマムかつ洗練された印象に仕上げることができます。
今回まで全6回にわたりテキスト周りのデザイン表現のアイデアについてまとめてきました。Webデザインをする上でテキスト部分のデザインは避けては通れません。ですので、テキスト周りのデザインの引き出しがたくさんあると、とても効率よく質の高いデザインを作成できるのではないでしょうか。 今回紹介しきれなかったものもありますが、また良いアイデアがあれば改めて記事にまとめてみたいと思います。 （こちらの記事もどうぞ） ・ウェブデザインで使えるテキスト周りのデザインアイデアまとめ＃5（デザイン要素の追加） ・ウェブデザインで使えるテキスト周りのデザインアイデアまとめ＃4（塗りの表現） ・ウェブデザインで使えるテキスト周りのデザインアイデアまとめ＃3（アウトライン・シャドウ・グロー効果） ・ウェブデザインで使えるテキスト周りのデザインアイデアまとめ＃2（文字の変形・加工） ・ウェブデザインで使えるテキスト周りのデザインアイデアまとめ＃1（背景写真との組み合わせ） ・画像内の文字を見せるデザイン表現 〜文字に効果を付ける（1）〜 ・画像内の文字を見せるデザイン表現 〜文字に効果を付ける（2）〜 ・画像内の文字を見せるデザイン表現 ～背景を加工する～
ジャンプ率の調整、ウエイトを変える
強調する部分の文字のサイズやウエイトを変化させることで、より訴求を高める方法です。このような文字サイズの変化の差は「ジャンプ率」と呼ばれます。文字サイズと合わせてウエイトも変化させることで、より効率よく目立たせることができます。ミニマムな表現ですが、基本でもありよく使うテクニックなのでまずはマスターしておきたいですね。
文字色を変える
先ほどの文字サイズとウエイトに変化をつける方法と合わせてよく使われる表現です。見た目にもわかりやすく、色を使うことでサイトデザインにも溶け込ませることができます。実践では目立たせたいコピーの場合だと色だけ変化をつけるのではなく、文字サイズも合わせて変化させることが多いと思います。また色を使うので、配色ルールなども考慮する必要がありますね。
書体を変える
書体にはいろんな種類がありますが、その書体によって与える印象は異なります（参考記事「和文書体の種類まとめ」）これを利用して、コピーの意味に合わせて書体に変化を付けることで、目立たせるだけでなく、より印象を強くさせることが期待できます。このサンプルではネガティブな意味を表すテキストには明朝体を、ポジティブな印象を表すテキストにはゴシック体と使い分けています。先ほど同じく、文字サイズやウエイト、文字色なども合わせて変化させることでより効果が強くなります。
文字揃えを変える
文字揃えを変えると、見た目の変化で目立たせるだけでなく、文字が持つ伝えるべき情報やその役割を明確に区分けすることができます。このように異なる情報軸が混在するテキストに対しては、役割ごとに左寄せ、中央寄せ、右寄せと文字揃えに変化を付けると文字が持つ情報や意味を自然に理解することができます。テキストごとにセクションで分けたいけど、まとまり良く見せたい場合に効果的ですね。
字間を調整する
文字間の幅調整を行うことを「カーニング」と呼びますが、本来カーニングはテキストの見た目上のバランスを整えるために行うものですが、強弱を極端に付けることでデザインとして与える印象をコントロールすることができます。例えば字間を広くすると、より抽象的な印象に寄せてメッセージ性を強くしたり、洗練されたデザインに合うようになります。逆に詰めることで、かっちりとした真面目で真剣さや緊張感などを演出することができます。
装飾に約物を使う
句読点や括弧などの記号を総称して「約物」と呼びます。通常はこの約物は文字として扱われますが、それをデザインの装飾に使うこともできます。このサンプルでは引用文であることを明示させるために、引用符を装飾用のデザイン要素として表現した例になります。元々は文字の要素であるため、テキスト周りのデザインとしても相性がよく、ミニマムかつ洗練された印象に仕上げることができます。
今回まで全6回にわたりテキスト周りのデザイン表現のアイデアについてまとめてきました。Webデザインをする上でテキスト部分のデザインは避けては通れません。ですので、テキスト周りのデザインの引き出しがたくさんあると、とても効率よく質の高いデザインを作成できるのではないでしょうか。 今回紹介しきれなかったものもありますが、また良いアイデアがあれば改めて記事にまとめてみたいと思います。 （こちらの記事もどうぞ） ・ウェブデザインで使えるテキスト周りのデザインアイデアまとめ＃5（デザイン要素の追加） ・ウェブデザインで使えるテキスト周りのデザインアイデアまとめ＃4（塗りの表現） ・ウェブデザインで使えるテキスト周りのデザインアイデアまとめ＃3（アウトライン・シャドウ・グロー効果） ・ウェブデザインで使えるテキスト周りのデザインアイデアまとめ＃2（文字の変形・加工） ・ウェブデザインで使えるテキスト周りのデザインアイデアまとめ＃1（背景写真との組み合わせ） ・画像内の文字を見せるデザイン表現 〜文字に効果を付ける（1）〜 ・画像内の文字を見せるデザイン表現 〜文字に効果を付ける（2）〜 ・画像内の文字を見せるデザイン表現 ～背景を加工する～
