静岡・浜松のWebマーケティング|株式会社シーエムエー

お問い合わせ

CMA BLOG

株式会社シーエムエー ホーム > CMA BLOG > ノンデザイナー > ノンデザイナーのためのデザイン基本ルール
~フォント種類編~ 代表的なおすすめフォント7選

ノンデザイナー ノンデザイナーのためのデザイン基本ルール
~フォント種類編~ 代表的なおすすめフォント7選

  • このエントリーをはてなブックマークに追加

こんにちは、制作部 部長の坂本です。
「文字編 文字詰め編」から時間が空いてしまいましたが、お待たせしました!
「ノンデザイナーのためのデザイン基本ルール」
第2弾!

今回は、「フォント種類編」です。

デザイン業界では文字のことをフォントといいます。(以降フォントで統一)
一重にフォントと言っても、たくさんの種類があります。あまりに種類がありすぎて何を選べばよいのか、どうやって使い分ければよいのか判断に迷うと思います。

今回は、フォントの種類と使い分けの方法をノンデザイナーにもわかりやすく紹介したいと思います。

文字の種類

デザインを構成する要素においてフォントは重要な影響を与えます。書体の種類、特徴をしっかり理解して使い分けができるようにしましょう!

和文(日本語)

明朝体

「うろこ」「はね」など特有の装飾があり、縦と横で太さが違います。高級感があり、信頼感を持たせたい際に使います。読みやすく新聞や印刷物の本文、書類関係(契約書・見積書)等に使われています。Webサイトの本文ではコントラストの関係から逆に見づらくなることがあり、ゴシック体を使うことが多いです。MS明朝、ヒラギノ明朝、遊明朝体などが定番フォントです。

ゴシック体

明朝体にあるような「うろこ」「はね」などの装飾がなく、縦と横の太さがほぼ均一。見出しや強調したい場合に使います。見やすいのが特徴です。太さも様々で細くすればスタイリッシュになり、太くなればインパクトのある表現が可能です。ヒラギノ角ゴ、游ゴシック、新ゴシック体などが定番フォントです。

デザイン書体

明朝体・ゴシック体と違いデザイン的に装飾された書体です。インパクトがあるので、見出しやタイトルなど強調する際に使われることが多いです。その特徴的な装飾から本文で使うと読みづらくなるので避けましょう。

欧文(外国語)

セリフ体

日本語の明朝体と同じ意味です。定番フォントとしてGaramond(ガラモン/ギャラモン) 、‎Times New Roman(タイムズニューローマン)、Bodoni(ボドニ)、Palatino (パラティノ)などがあります。

サンセリフ体

日本語のゴシック体と同じ意味ですが、フォントによっては縦と横の太さが違うこともあります。サンセリフ(sans-serif)のサンはフランス語で「〜のない」という意味で、セリフは明朝体の「うろこ」や「ひげ」を意味します。そのためサンセリフは「うろこ」や「ひげ」のない書体という意味となります。Helvetica (ヘルベチカ)、Futura (フーツラ)、DIN (ディン)、Gill Sans (ギルサンズ)、Optima(オプティマ)などが定番フォントです。

スクリプト体

筆記体のようなつながった流れる書体のことで、手書き風やエレガントなものまで種類が豊富です。日本人には可読性が悪いため、手書き風のサインやタイトル文字の背景など、デザイン的なアクセントで使われたりします。

文字の太さ

文字の太さはウェイトと言います。「フォントのウェイトが細いので、もう少し太く」など指示したりします。太さにはフォントによって細かく分かれています。

以下は一般的な文字の太さになります。

文字の見ため

読みやすさ(可読性)

フォントの種類はもちろんのこと、大きさ、文章の長さ、行間、文字間、文字色で読みやすさは変わります。本文においては印刷物の場合は明朝体が読みやすいですが、Webの場合はゴシック体のほうが読みやすいのでしっかりと使い分けましょう。近年ではUD(ユニバーサルデザイン)フォントという可読性・視認性に特化したフォントも生まれています。

●BIZ UDGothic
https://fonts.google.com/specimen/BIZ+UDGothic

わかりやすさ(可視性)

「読む」よりも「見る」に重点をおいて、ゴシック体は遠くからでも視認性が高いフォントです。余計な装飾がないため、一瞬みただけでも誤読が少なく伝わりやすいです。高速道路の案内標識など瞬時に判断が必要な情報ではゴシック体でデザインされることが多いです。

目立ちやすさ(認識性)

目線をスムーズに誘導するため、文字の目立ちやすさは重要です。他よりも文字を大きくしたり余白をつけたり、色を変えたりして視線誘導を心がけましょう。

シチュエーション別

フォントに要素を追加してデザインされた具体的な例を紹介します。

パターン1 人柄を文字+イラストで表現して楽しげな雰囲気に。

●制作部の資格
https://www.akindo2000.net/company/designer/

パターン2 太文字+動きでダイナミックと力強さを表現。

●YouTube動画広告運用代行
https://www.akindo2000.net/internetad/youtube.php

パターン3 文字斜め+写真で浮遊感を演出。

●インスタグラム広告の運用代行なら静岡県 浜松市のシーエムエー
https://www.akindo2000.net/internetad/instagram.php

代表的なおすすめフォント7選

Adobe Fonts(有料)
https://fonts.adobe.com/

Google Fonts(無料)
https://googlefonts.github.io/japanese/

pixivのフォント
https://www.pixiv.net/tags/%E3%83%95%E3%83%AA%E3%83%BC%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88

かなたとひなたフォント(有料)
https://www.flopdesign.com/syotai/kanata.html

ロゴJrブラック
https://www.vdl.co.jp/font/logojrblack.html

クラフト明朝(期間限定で無料)
https://booth.pm/ja/items/3308018

DIN Next Font(有料)
https://www.myfonts.com/collections/din-next-font-monotype-imaging?rfsn=6624862.a6b809

本日のキーワード

明朝体

縦と横で太さが違います。高級感があり、信頼感を持たせたい際に使います。読みやすく新聞や印刷物の本文、書類関係(契約書・見積書)等に使われています。

ゴシック体

縦と横の太さがほぼ均一。見出しや強調したい場合に使います。見やすいのが特徴です。

まとめ

いかがでしたか?
本文で使うフォントは可読性・視認性を重視したフォント。見出しやタイトルではデザインフォントを使ったり、装飾にこだわってデザインする。
こうすることでメリハリがついて、素人っぽさがなくなります。また改行や段落など、適度に行を切ったり空けたりすることもみやすさ・わかりやすさの一つです。

それでは次回もお楽しみに!

第1回 「文字編 文字詰め」はこちら

https://www.akindo2000.net/blog/rule_kerning/

  • このエントリーをはてなブックマークに追加

人気の記事ランキング

  • posted on 2023/02/082023年度版 Google PageSpeed Insights(ページスピードインサイト)を使って読み込み速度を改善したら、何点になるのかチャレンジしてみた

  • posted on 2023/12/07迫る、浜松市の行政区再編(中央区、浜名区)。住所変更だけじゃない。Webサイトで必要な対応とは?

  • posted on 2020/06/10ノンデザイナーのためのデザイン基本ルール ~文字編 文字詰め~

  • posted on 2022/10/21DockerでPHP環境を簡単に構築してみよう

  • posted on 2024/02/22「文字コード」って何?Webディレクターなら知っておきたいUnicode(ユニコード)のこと!

おすすめタグ

ECサイト 動画 HTML レクリエーション 創業記念日 ASP SSL PageSpeed Insights スピードアップデート 動画広告 ECcube wordpress 構造化マークアップ カスタマイズ Transport Layer Security 保護されていない通信 HowTo Chrome TLS クリック率 ハウツー ノンデザイナー リッチリザルト Instagram広告 文字 デザイン フォント Core Web Vitals 自作PC 初心者 構造化データ Facebook広告 リモート iPhone CSS 動画制作 AMP 広告 HTML5広告 Google Chrome videoタグ GoogleMapsPlatform Zapier Facebook Audience Network Google my map ワイヤーフレーム Google for jobs Googleしごと検索 撮影 iPad 一眼レフカメラ 写真 自作パソコン ウェブサイト翻訳 Adobe XD PC組み立て XMLサイトマップ PHP タスクランナー gulp.js node.js WebP画像 楽天GOLD スマートフォン用新店舗トップページ Threads(スレッズ) Instagram Adobe Firefly 画像生成AI アセット生成 生成塗りつぶし Adobe MAX Japan 2023 UI UX Adobe Stock アンチックフォント Adobe Express Webマーケティング デジタルマーケティング 文字コード 符号化文字集合 生成拡張 Google Search Console レクタングルバナー 画質パラメーター shopify ショッピングサイト ショッピファイ Shopify使い方 WebP リモートワーク remotework プラグイン IE コーディング サイズパラメーター モダンブラウザ gridレイアウト object-fit aspect-ratio any-hover docker Photoshop クラウドドキュメント ディスプレイ広告 スマートオブジェクト gap Unicode(ユニコード)

Top