Webデザインで役に立つフォントの話
文字の選択もかなり重要です。文字の形だけで、そのページの雰囲気が大きく変わります。
でも色と同じで、文字の選択も最初は難しいものです。
どのように選択するとよいのか、ポイントをおさえましょう！
まずはコンセプトやイメージに合っているフォントを探そう
フォントを選択するとき、自分が好きなフォントを選択してしまいがちです。
特にデザインを学び始めたころは、自分の好みが大きく反映されがち。
ですがそのフォントは、今作ろうとしているサイトのコンセプトに合っていますか？
フォントはその言葉に表情を付けるものだと思います。
「春」という言葉のフォントを選ぶときに、「春」を柔らかく言っているのか、寂しそうに言っているのか、楽しそうに言っているのか、嬉しそうなのか、怒っているのか・・・。
同じ言葉でも、選ぶフォントによって表情が変わるものなのです。
なのでフォントを選択する前に「どんなイメージを持ってもらいたいのか」「どんなコンセプトのサイトなのか」を先に洗いだしておく必要があります。
そのうえで、フォントを選択していくのです。
Webデザインでは明朝体よりゴシック体を使おう
日本語のフォントは大きく分けると「ゴシック体」と「明朝体」の２つに分けられます。
ゴシック体は平らな文字で、トメやハネがありません。
明朝体は筆で描いたような文字で、トメやハネがあります。
ゴシック体
明朝体
一般的に、ゴシック体は太めの文字なので、目を引きやすい反面、長文に使用されると疲れやすい文字です。
逆に明朝体は文字が細い線で描かれているものが多く、可読性が高いといわれています。
なので、ゴシック体は見出しなど「見せたい」部分に使用し、明朝体は文章などの「読ませたい」部分に使用するとよいといわれます。
しかしWebサイトの場合、ゴシック体が多く使用されます。
それは見出しだけではなく、長文の文章であってもゴシック体を使用することが多いのです。
モニタを通して文字を見るとき、線が細い明朝体だと、ギザギザしているように見えたり、逆に可読性が下がることが知られています。
明朝体は上品に見えたり、女性に好まれたりする書体なのですが、Webでは避けたほうがいい文字だといえます。
ただし、絶対に避けましょう！というわけではありません。
先ほどの「言葉の表情」を考えると、どうしても明朝体を使いたいときももちろんあります。
その時は、明朝体でも、少し線が太めの明朝体を選択するとよいでしょう。
１つのWebサイトのフォントの種類は少なめデザインする
フォントの種類は膨大にあります。
デザインをしていると、たくさんのフォントを使いたくなってしまうこともあるのですが、実際は２から３種類ほどに絞って使用したほうが、デザインとしてはまとまりやすくなります。
使うフォントが多すぎてしまうと、ごちゃごちゃとした印象になってまとまりにくくなるのです。
実際は１種類だけでもデザインは可能です。
見出しや目立たせたい場合は、色、サイズ、太さを変えることで対応が可能で、ほかのフォントでデザインするよりも魅力的に仕上がることもあります。
使用する書体はできるだけ絞ってデザインしてみましょう。
特徴のありすぎるフォントをWebデザインではできるかぎり使用しない
女性はポップ体などの丸い文字が好きだったりします。
和風のサイトを作る場合は、行書体を使ってみようかと思うこともあるでしょう。
ですが、これらの文字はどちらかというと「特徴がありすぎる文字」だといえます。
長い文章などにこういった文字を使用してしまうと、とても読みづらく、疲れやすいデザインになってしまいます。
特徴のありすぎる文字は、極力使わないほうがベストなのです。
絶対に使ってはいけないというわけではありません。
使う場合は「この文字でないとダメ」という明確な理由が必要です。安易に選択しないようにしましょう。
Webデザインで意識するユーザーの環境に配慮した文字選び
画像としてWebサイトに表示する文字については、ユーザーの環境に配慮する必要はそれほどありませんが、見出しや通常の文章に使用する文字については、ユーザーの環境に最大限の配慮をする必要があります。
文字の指定は通常、CSSで行います。
その際に「この書体を使って表示しましょう」とコンピュータに指示を出すわけですが、もし指定した文字がユーザーのパソコンに登録されていなかった場合、指定した書体で表示することは不可能です。
別の書体に置き換えられることになります。
ユーザーはさまざまな環境を使ってWebサイトにアクセスします。
Windows、MacなどOSの違いもありますが、スマートフォンなどのパソコン以外の端末で閲覧することも想定しなければなりません。
以上のことから、どのコンピュータでも表示ができるであろう、ベーシックな書体を選択することがいいでしょう。
安易に珍しい書体を使おうとしてしまうと、想定していたようなデザインが仕上がらず、困ることも多々あります。
どうしてもデザイン性のある文字を使いたい場合はWebフォントを使う
Webフォントは、GoogleやAdobeなどが提供してくれているフォントです。
GoogleFontsはこちらから
Webフォントを使用するメリットは、ユーザーの環境に依存せず、どのユーザーにも指定した書体を使うことができる、ということです。
しかし、古いブラウザは対応していないこともあるため、絶対ではありません。
Webフォントは有料のもの、無料のものがあります。
また、まだ発展途上の技術なので、日本語の書体が少なめだったりもします。
それでも、十分利用できるものなので、一度チェックしてみましょう。
行間と文字間を大切に
フォントの種類を選択したら、次は行間と文字間を検討しましょう。
行間は1.5から1.8の間で指定するのがいいといわれているのですが、選択した文字や表示するフォントサイズによって多少異なってきます。
これは自分の目で見て、一番いいと感じるサイズを選択するべきだと思います。
またも時間も少し広げてあげると、印象が変わったりします。
何度も細かく調整して、一番いいな、と思える値を探してみるとよいでしょう。
まとめ
今回は文字についてまとめてみましたが、結局一番大切なのは「読みやすさ」です。
ユーザーは「このサイトは読みづらい」と感じたらすぐに離脱してしまいます。
デザイン性よりも、読みやすさ、ユーザーへの優しさを大切にして文字を選択するとよいでしょう。
