バナーに使う文字で迷うので、55書体を見比べられる一覧を作りました

　バナーを作るたびに、毎回けっこう悩みます。
　同じ言葉でも、やわらかく見せたいのか、きちんと見せたいのか、親しみやすく見せたいのかで、合う字体がかなり変わるからです。

　たとえば、子ども向けのお知らせなら角がやさしい文字のほうが合いやすいですし、講座案内や説明画像なら、落ち着いて読める文字のほうがしっくりきます。
　和風の題字にしたい日もあれば、学校の配布物みたいに読みやすさ優先の日もあります。
　それなのに、実際にバナーを作る段階になると、
　「この言葉なら明朝かな」
　「いや、ゴシックのほうが見やすいかも」
　「でも、もう少しやわらかい雰囲気がほしい」
　……と、そこで手が止まりがちでした。

　しかも、フォント名だけ見ても、正直なところ、完成形の雰囲気まではなかなか想像しにくいです。
　だから今回は、バナーに使う文字を考えるときにイメージがわきやすいよう、見本を一覧で見比べられるHTMLを作りました。

　1つずつ文字を打ち直して確認するより、同じ見本文字が並んでいたほうが、違いがかなり分かりやすいです。
　「読みやすい」
　「かわいい」
　「まじめ」
　「少し高級感がある」
　そんな印象の差が、並べると一気に見えてきます。

　今回まとめたのは、日本語表示できる書体の見本一覧です。
　「この見出しならどれが合うかな」
　「配信画像のタイトルにするなら、どの太さが見やすいかな」
　「やさしい雰囲気にしたいけれど、幼くなりすぎない文字はどれかな」
　そんなふうに考えるときの、最初の比較用として使いやすい形を目指しました。

　一覧を作ってみて、あらためて感じたのは、文字そのものの形だけでなく、線の太さや重心、角の丸さでも印象がかなり変わるということでした。
　同じ「読みやすい系」に見える書体でも、見出し向きのものと本文向きのものがありますし、やさしく見える書体でも、少し甘めに寄るものと、すっきり見えるものがあります。
　このあたりは、実際に並べてみないと気づきにくい部分だなと思います。

　なので、バナー用の文字で迷うことがある方、
　見出し画像や告知画像を作るたびに字体選びで止まりやすい方には、そこそこ役立つかもしれません。
　細かく比較したい方は、リンク先のHTMLをのぞいてみてください。
　スマホでもPCでも、画面幅に合わせて見やすいようにしてあります。

　私自身、これからは
　「かわいい系」
　「説明向け」
　「和風寄り」
　「すっきり見せたいとき」
　みたいに、自分の中で使い分けの基準も少しずつ増やしていけそうです。
　バナーの文字選びで迷う時間を、少しでも短くできたらうれしいです。

　同じように、
　「フォント名だけでは決めきれない」
　「実際に並んでいる状態で比べたい」
　と思う方の参考になれば幸いです。