デジタルハリウッドSTUDIO山口 ブログ

【イベント報告】
『ここは押さえておきたい!フォントの選び方と使い方』

2020-06-09

今回のライブ授業は!?

4月19日にライブ授業『ここは押さえておきたい!フォントの選び方と使い方』を開催しました!講師はSTUDIO山口ではおなじみ、ヒラヤマウェブデザイン代表の平山智也トレーナーです。Webデザインをしていく上で避けては通ることができない“フォント”についてどのように選び、どのように使うと効果的なのかなどについて教えていただきました!


眠くなる?文字の話

まずは書体の成り立ちについてのお話です。


書体には欧文と和文があります。また、文字の構造には、プロポーショナルフォントと固定ピッチフォントがあり、和文には句読点・括弧以外のセット幅が一定である固定ピッチフォント、欧文はセット幅が変わるプロポーショナルフォントが用いられています。Windowsを使っている方は、MSPゴシックなどを目にしたことがあるのではないでしょうか?このMSPゴシックの「P」がプロポーショナルフォントの「P」だそうです。このお話を聞いて、よく目にはするものの、なんとなく受け入れていた「P」の意味についてはじめて知ることができました。やっぱり一つ一つの言葉の意味に着目して理解しておくことは大事ですね!


さらに、パソコンやスマホで文字を管理する際に文字コードというものが用いられます。例えば、アルファベットや英数字などの欧文にはASCII(アスキー)コード、和文にはJISコードが使われています。WordやexcelにはASCIIコードとJISコードを一緒にしたShift_JIS(シフトJIS)コードが用いられており、たまに発生する「ワードで読み込んだら文字化けしちゃった!」などという事件は、この文字コードのズレからきているそう。現在は、世界で使われるすべての文字を共通の文字集合で利用できるようになっているUnicodeが作られ、国際規格とされました。


フォントの種類について

次に、デザイン業界のスタンダードなフォントメーカーからフリーフォントまで様々なフォントについて教えていただきました。その中の一部をご紹介します!


・モリサワ 

デザイン業界のスタンダードといえばやはりモリサワフォントです。明朝体の「リュウミン」は文庫本の本文などでよく使われています。


・フォントワークス

こちらも業界ではスタンダードに使われています。平山トレーナーのマニアックなお話だと、「マティスEB」というフォントは『新世紀エヴァンゲリオン』の公式フォントになっています。エヴァでよく見る「使徒襲来」という言葉はこれ。


・mac OS、Windowsに標準搭載のフォント

標準搭載のフォントとはパソコンに既にインストールされているフォントのこと。mac OS、Windowsの両方に標準搭載されているものでよく使われるのは、「Uゴシック」と「U明朝」です。特に電子書籍の本文に使われています。


・Google Fonts

Google FontsはWebフォントと言ってサーバー上にフォントデータがあり、サイトなどを表示する時だけ読み込んでフォントを表示します。Wifi環境があまり良くないと読み込みに時間がかかりなかなか表示されないということも。よく使われるものに「Noto Sans」や「Noto Serif」、「Kosugi Maru」などがあります。



イメージ別フリーフォントの紹介

まずは本文など読ませるテキストに最適なスタンダードなフォント。

・メイリオ

その名の通りマイクロソフトが明瞭さを求めて作ったフォント。横書きに強い。

・Helvetica

San Serif系といえばこれ!というほど世界的にとても有名なフォント。シンプルで間違いがありません。


余白を活かしたデザインや見出しに使われる、きれい・上品といったイメージのフォント。

・ロゴタイプゴシック

・こころ明朝

・Snell Roundhand


手書きっぽさのある、やさしい・かわいいといったイメージのフォント。

・やさしさゴシック

・れいこフォント

・フォントポにほんご


フリーフォントではないけれど明朝体でよく使われるフォント。

・A1明朝

活版印刷の特徴がよく再現されています。

・丸明オールド

丸みと古さが表現されていて、広告などでよく使用されています。

・Ro本明朝新がな

くせがなくてシンプルな明朝体です。平山トレーナー愛用だそう。


フォントの使いどころとは?

では、フォントを効果的に使うにはどうしたらいいのでしょうか?


例えば、目立たせたい見出しは大きく太くする、吹き出しなどの会話部分は手書きフォントを使う、フォントを使いすぎない、などが挙げられます。目立たせたいところに細いフォントを用いるとわかりにくくなってしまったり、いろんな種類のフォントを使いすぎるとまとまりがなくなったりと、フォントにも効果的な使い方があります。


適材適所なフォントを使って、まとまりのあるサイトづくりを心掛けたいですね!



まとめ

今回のライブ授業では、フォントに関する基礎知識から効果的な使い方まで学ぶことができました。Web上には数えきれないくらいたくさんのフォントがあります。フォントを活かしたまとまりのあるサイトを作ることができるように、数あるフォントの中から適したフォントを選択していきたいですね。

その他のSTUDIO山口のブログ

BLOGS