![見出し画像](https://assets.st-note.com/production/uploads/images/98615024/rectangle_large_type_2_95b04f8a73b36ca833f37b4c2964c932.png?width=800)
文字のデザイン
文字のフォントを選ぶとき、みなさんはどのように選んでいますか?
突然ですが次のイラストをご覧ください。
![](https://assets.st-note.com/img/1677033267481-3eeSyaJd3y.png?width=800)
どこか違和感ありませんか?
では次のイラストだとどうでしょうか。
![](https://assets.st-note.com/img/1677033308335-0tUt8L58pK.png?width=800)
これだとしっくりきますよね。
このように、フォントが変わるだけで全体的な印象や分かりやすさも大きく変わってきます。
今回は、代表的なフォントの特徴と文字の使い方について少し紹介します。
ゴシック体と明朝体の特徴
身の回りの多くの場面で使われているゴシック体と明朝体。
この2つのフォントの特徴と効果的な使い方を押さえておくだけでもぐっと分かりやすいデザインにつながります。
まずはゴシック体から紹介します。
![](https://assets.st-note.com/img/1677033419118-ZsQDAbj99F.png?width=800)
![](https://assets.st-note.com/img/1677033436940-D4SvmE8g7c.png?width=800)
![](https://assets.st-note.com/img/1677033492023-kvdQbu49Zv.png?width=800)
続いて明朝体。
![](https://assets.st-note.com/img/1677033506219-tRDey2PyX5.png?width=800)
![](https://assets.st-note.com/img/1677033543767-zRg1Kw1ZLX.png?width=800)
![](https://assets.st-note.com/img/1677033565221-GsLFuudbsN.png?width=800)
身の回りでの使用場面を見ても分かるように、ゴシック体は「視認性」(見やすさ)に優れており、明朝体は「可読性」(読みやすさ)に優れています。
![](https://assets.st-note.com/img/1677033823598-Qq34s8QUdr.png?width=800)
このポイントを押さえたおすすめのデザインを一つ紹介します。
それは、タイトルや見出しなどの「見る文字」と、説明や本文などの「読む文字」で文字を使い分けることです。
![](https://assets.st-note.com/img/1677034067741-5JmJaYf5VA.png?width=800)
![](https://assets.st-note.com/img/1677034114318-xpE99xWf0Z.png?width=800)
![](https://assets.st-note.com/img/1677034133227-hE6fESWUY0.png?width=800)
また、「見る文字」はフォントと合わせて色の使い分けなどでも視認性を高めるとより分かりやすいデザインになります。
(例)見出しの色を反転させて視認性を高めるデザイン
![](https://assets.st-note.com/img/1677048040139-wA9Zjtq69n.png?width=800)
![](https://assets.st-note.com/img/1677048058181-K5CFijv7Up.png?width=800)
文字間による印象
文字と文字の間の余白、「文字間」を変えることで、伝わる印象も変わってきます。
例えば、文字間を詰めると緊張感や危機感が伝わりやすくなり、文字間を広げるとやわらかく落ち着いた雰囲気が伝わりやすくなります。
![](https://assets.st-note.com/img/1677042241732-STBbw56JJX.png?width=800)
![](https://assets.st-note.com/img/1677042285543-RL7dbhnbPn.png?width=800)
文字間の調整の仕方(パワーポイントの例)
手順❶
文字間を調整したいテキストを選択
![](https://assets.st-note.com/img/1677043981385-FWfEK5R7Co.png?width=800)
手順❷
ホーム → フォント → 文字間の間隔(AV)をクリック
![](https://assets.st-note.com/img/1677044228897-LmPyFf6Crk.png)
完了!
フォントや文字間は全体的な印象や分かりやすさに大きく影響してきます。
ぜひ参考にしてみてください。
最後まで読んでいただきありがとうございました。
この記事が気に入ったらサポートをしてみませんか?