MENUCLOSE
twitter ツイッターfeedlyRSS

オンスタでは、オンラインで学習するために役立つコンテンツを掲載しています。そのほか、UdemyをはじめとしたEラーニングサービスの紹介も行っています。

オンスタ | オンラインで学習するための近道になるサイト
日本語フォントの役割と分類を知って、適切なフォント選びをしよう!

日本語フォントの役割と分類を知って、適切なフォント選びをしよう!

公開日:2017年02月17日
最終更新日:2022年01月17日
オンスタ運営
デザイン
デザイン
ホーム > 全記事一覧 > 制作 > デザイナー > デザイン > 日本語フォントの役割と分類を知って、適切なフォント選びをしよう!
このエントリーをはてなブックマークに追加
日本語フォントの役割と分類を知って、適切なフォント選びをしよう!
【PR】Udemyならスマホでもタブレットでも、いつでも気軽に学べます。
こんにちは! Grow Groupデザイナーのさとおです。

業務としては、Webサイトのデザインだけでなくカタログやパンフレットなど、デザイン全般を担当しております。

その中で必ず行わなければならないのが、「フォント選定」です。

世の中に溢れる膨大なフォントの中から、これだ!というものを見つけるのって苦労しますよね。

そこで今回は、そんなフォントたちの歴史や分類を知って、少しでもフォント選びの手助けになればと思い書いてみようと思います。

そもそもなぜフォント選びが大事なの?

文字は読む前に「見る」もの

文字は読む前に、どの文字を読むか「見て」判断して、それから読みます。 そして、見た瞬間にそのフォントから伝わるものがあります 例えば上図のAとB、どちらも文章の内容はまったく同じ結婚パーティの招待状ですが、 Aの方は、厳粛な雰囲気なのか目上の人へ宛てた招待状で、 Bの方は、どちらかというとフランクなパーティで友達をたくさん呼ぶ感じの招待状かなー、と無意識にイメージすると思います。 このように、ユーザーにどのような口調で語りかけるか、どういった気持ちで読まれたいのかという印象の面で、そのデザインのブランディングにおける大事な部分を担っています。 逆に、間違ったフォント選びをしてしまうと、そのデザイン媒体(Webサイトや広告)のイメージの相違で共感が得られず、 広告としての売り上げに貢献できない可能性も大いにあります。 フォントによってそのデザインの印象が左右されるということも十分にあり得るのです。

フォント選びの基準を考える

それでは、本題に入ります…!

フォントの種類

膨大な数のフォント、その種類は大まかに4つに分けられます。

明朝体

日本的な演出、趣のある雰囲気や繊細な印象を与えたい場合など

ゴシック体

サインやポスターなど、高い視認性や可読性が求められる場合など

丸ゴシック体

親しみやすさ、子ども向けの可愛らしい印象を与えたい場合など

楷書体

歴史や伝統を感じさせたい場合、中国的な演出をしたい場合など  

フォントの役割と時代背景

そして、今なお増え続けるフォントにも、「なぜそのデザインにしたのか」という時代背景がきちんと存在します。 こちらも大まかに3つに分けることができます。  

近代活字期(オールドスタイル)

秀英体、築地体、リュウミンなど

写植期(ミディアムスタイル)

新ゴ、ヒラギノ、ゴシックMB101など

デジタル書体期(モダンスタイル)

游ゴシック、小塚ゴシックなど   比較しやすく、明朝体とゴシック体に分けて並べてみました。 さらに文字を縦書きにしてみるとわかりやすいのですが、 近代活字期のリュウミンは一文字一文字が縦長なので、流れるように読み進めることができます。 時代的に縦書きをメインに考えられて作られていることがわかります。 写植期では、様々なフォントの種類が登場し、一つのフォントの中でもスタイル(太さや斜体)別でファミリー化したものも出てきました。 そのため、見出しと本文が同じ形で使えるようになりました。   そしてデジタル書体期では、印刷技術のデジタル化によってモニターなどのデジタル画面で文字を見る機会が増えたため、シャープなエッジが嫌われるようになります。 角を丸くし、小ぶりの文字が歓迎されるようになりました。 こうして時代ごとに見比べてみると、その違いがよくわかりますね。面白い!  

パソコンに初めからインストールされている「標準フォント」の意図

Webデザインの経験がある方は、一度は疑問に思ったことがあるのではないでしょうか。 後から個別にインストールできるWebフォントは別として、 私は使い初めの頃、なんで游ゴシックかヒラギノ角ゴかメイリオ(Macの場合)しか使えないのーと、嘆いておりました。 ですがフォントの歴史を調べるうちに、これらがデジタル画面で見るための最良のフォントなのだということがわかりました。

ユニバーサルデザインフォント(UDフォント)

デジタル書体期に追随する今現在、広く推奨されているのがUDフォントです。 Universal Design Font : ユニバーサルデザインフォントとはその名の通り、 「誰にでも読みやすく、わかりやすく、間違えにくい」ように開発されたユニバーサルデザインを取り入れたフォントのことです。 例えば、次のようなものがあります。

隙間を広く、しっかり差別化

上図のように、隙間を広く取り、ラインのくっつき・離れを明確にさせたり、 濁点なのか半濁点なのかを識別しやすいように、点と丸を大きくしたり、 小さな文字になった場合でも読みやすいように工夫されたデザインになっています。  

手書きの形に近づける

上図のように、ディフォルメされたフォントだとラインの隙間が狭い分まとまって見えるので、文章で見たときに一文字として認識しやすいです。 ですが、外国人にとってはどうでしょう?どちらも同じ「ri」だと認識するのは難しい可能性もあります。   UDフォントは、年齢や性別、国籍や障害に関係なく、あらゆる人々が快適に文字を読めるよう、 交通看板や新聞、パソコンやモバイル端末など、生活の中のさまざまなところで使われています。

文章のサイトパーソナリティも考慮して

少し主題からはみ出ますが、文章における「イメージ」という面では、 フォントだけではなく「文章の表現方法」によっても印象は左右されます。 例えば上図のAとB、どちらも文章の内容はまったく同じですが、 どうでしょう? 一見してBの方が漢字が少なく、よく読むとAの方が口調も堅いという印象を持つかと思います。  

「事」「物」「出来る」などはひらがなで表記する

私たちデザイナーは、クライアントからいただいた原稿を元にレイアウトを組んでいく場合が多くあります。 ですが、そのいただいた原稿のまま流し込むのでは不十分だと思います。 図のBのように「事」や「物」「出来る」などをひらがなにしたり、適切な言い回しを考えたりして原稿自体に少し手を加える、 この一手間があるかないかで、読みやすさや与えるイメージも全然変わってきます。

さいごに

いかがでしたでしょうか? 普段、フォントを何気なく選んで「いつものこれでいっかー」ではもったいないです。 デザインにおいてはフォント選定も必要不可欠です。 何か突っ込まれた時など、プロとして知っておくと、いざというときに役立つかもしれません! ぜひ、参考にしてみてくださいね。
【PR】Udemyならスマホでもタブレットでも、いつでも気軽に学べます。

Udemyを実際に体験した方の感想記事もぜひご覧ください♪

関連コンテンツ


Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
よく使われるA4パンフレットの折り加工の種類
デザイン
パンフレット
公開日: 2018年08月02日
最終更新日: 2022年01月17日
よく使われるA4パンフレットの折り加工の種類
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
【Webデザイン検証.その1】ホームボタンってグローバルナビ に必要なの?
デザイン
Webデザイン
公開日: 2018年03月26日
最終更新日: 2018年03月26日
【Webデザイン検証.その1】ホームボタンってグローバルナビ に必要なの?
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
【ホームページ制作】~ターゲット設定はしない方がいい!?~
デザイン
コンサルティング
公開日: 2016年12月28日
最終更新日: 2022年01月17日
【ホームページ制作】~ターゲット設定はしない方がいい!?~
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
仮説の考え方と使い方
デザイン
公開日: 2021年04月05日
最終更新日: 2021年04月05日
仮説の考え方と使い方
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
ビジネスに役立つデータの可視化法7つのポイント
デザイン
マーケティング
デザイン
公開日: 2020年12月21日
最終更新日: 2020年12月21日
ビジネスに役立つデータの可視化法7つのポイント
d.sato

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
WEBデザインの世界に飛び込むあなたへ!WEBデザイン制作時に知っておくべき用語集【WEB】
デザイナー
デザイン
Webデザイン
公開日: 2018年03月01日
最終更新日: 2018年03月01日
WEBデザインの世界に飛び込むあなたへ!WEBデザイン制作時に知っておくべき用語集【WEB】
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
デザイナーのキャリアアップ(デザイナーがキャリアアップするための道のり-最終章)
デザイナー
デザイン
公開日: 2017年01月29日
最終更新日: 2022年01月17日
デザイナーのキャリアアップ(デザイナーがキャリアアップするための道のり-最終章)
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
游ゴシックのテキストをIEで表示すると謎の余白ができる【問題検証と対策】
マークアップ
デザイン
公開日: 2018年03月30日
最終更新日: 2022年01月17日
游ゴシックのテキストをIEで表示すると謎の余白ができる【問題検証と対策】
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
これがあればデザイナーは助かる!修正を最小限に抑えるためのデザインディレクション
デザイン
Webデザイン
公開日: 2016年12月08日
最終更新日: 2022年01月17日
これがあればデザイナーは助かる!修正を最小限に抑えるためのデザインディレクション
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
デザイナーとして向上するための本質を見極めるデザイン
デザイナー
デザイン
公開日: 2016年12月05日
最終更新日: 2022年01月17日
デザイナーとして向上するための本質を見極めるデザイン
オンスタ運営
全記事一覧

web制作者にオススメのオンライン学習サイト「Udemy」

世界最大級のコースがラインナップ!電子書籍サイト「Udemy」

世界最大級のコースがラインナップ!オンライン学習サイト「Udemy」

「Udemy」ではいつでもどんなトピックでも、専門家が教える何千ものコースを用意されており、無料で学べるコースも多数あります。もうちょっと勉強したいな。スキルアップしたいな。と思ったら是非チェックしてみてください。