游ゴシック」タグアーカイブ

思わず読みたくなるフォントデザインにする 3つの方法

まずはこの 2つの文章を見てください。

上と下、どちらに目がいきますか?
どちらの文章を読みたいと思うでしょうか。

読ませるためには、中身と見た目の 2つの要素があります。
ですがこのように見た目が悪ければ、たとえ中身が良いとしても読んでもらえないのです。

では、どのような見た目だと読んでもらいやすいのでしょうか?

今回はフォントの見た目をフォントの幅・フォントカラー・間隔の 3つに分解して改善することで、読み手を引き込む方法をお伝えします。

フォントはゴシック体で、線の幅が均等のもの

日本語フォントには明朝体とゴシック体があります。
明朝体は線の幅がまばらで見づらいため上級者向けです。インパクトがあるので、見出しなど大きなフォントサイズだと効果的ですが。
ですので基本的にはゴシック体を選んで損はありません。

さらに文章だとサイズが小さくなるので、線の幅が均等のものを選び、フォントが小さくなっても見やすいようにしましょう。

Apple はかなりフォントに気を使っており、洗練されたデザイン・使いやすさの大きな要因です。

一方 Windows は独自のフォント開発をしているものの、アップデートのたびに採用フォントを変更しており、フォントに対する姿勢はぶれています。

Windows 10 のフォントはとにかく読みづらいのですが、これはフォント自体(游ゴシック)ではなく、游ゴシックの細さが問題なのです。

Windows 10で游ゴシックの細さと薄さを改善する、具体的な対策まとめ

こちらに Windows 10 のフォント(游ゴシック)改善についてまとめているので、Windows 10 ユーザーはぜひ参考にしてください。

フォントデザイン 1つ目のポイントは、線の幅が均等なゴシック体を選ぶことです。

色は黒ではなく、グレー

普段、フォントの色は何色にしていますか?
特に気にしていないなら、フォントの色は黒になっているはずです。

左のフォント色は黒で、右はグレーです。

一般的な背景色である白に対して黒はコントラストが強すぎるのです。
黒とのコントラストの強さにより文字の間の白が際立ってしまい、文字が読みづらくなってしまいます。

色覚異常でも見やすい配色になる『2つの差』の埋め方

白か黒のどちらかをグレーに寄せるべきなのですが、どちらが良いのでしょうか?

配色の原則は、自然の法則にならうこと。
実は自然界には白はあるものの黒はほぼ存在しないのです。

よって、黒をグレーにする方がナチュラルです。
グレーにするとコントラストが抑えられて読みやすく、読んでいても疲れにくくなります。
これだと読み手は離脱しづらいので長く読んでもらいやすくなりますよね。

フォントの色は黒ではなくグレーにしましょう。これが 2つ目のポイントです。

行間に見えない線をつくる

フォント自体が読みやすくても、フォント同士の間隔が不自然だと結果的に読みづらいですよね。
大切なのは、読み手の目線の動きに沿ってストレスなく読み手を誘導できているかどうかです。

ポイントは行間に見えない線をつくることです。
間隔は縦と横(行間隔と文字間隔)があり、縦はある程度空け、横は詰める。
具体的な間隔は縦・横でそれぞれ異なります。

行間隔は透明な線を引くイメージで、目線をブレさせないようにしてください。
読み手の目線は左から右へ、1行づつ流れます。
行間隔が十分にない場合、この読み手の目線がブレてしまうのです。

文字間隔は、線が見えない程度に少しだけ空けるといいでしょう。
広すぎると文字をかたまりとして認識しにくくなるので、フォントサイズ(幅)に対して一定の割合を空けるようにします。
具体的には、細い線が通るくらいは空けておき、フォント同士が重ならないようにしましょう。

また、ひらがなより漢字の方が文字間隔が狭いので、漢字が多いと詰まって読みづらくなります。

ひらがなと漢字は 7 : 3 程度の比率を意識すると読みやすくなるので、ぜひ試してみてください。

3つ目のポイントは、読み手の目線にそって行間に見えない線をつくる
これでフォントデザインは完成です。

まとめ

文章の見た目つまりフォントデザインによって読み手は引き込まれます。
フォントの幅、フォントカラー、間隔。
この 3つを改善して、思わず読みたくなるような文章を目指してください。

Windows10のフォント(游ゴシック)の細さと薄さを改善する、具体的な対策まとめ

この記事で伝えたいこと

Windows10の游ゴシックはMacより1段階細いため、薄く細く見えてしまいます。そこで、游ゴシック Mediumに変更することで、Windows10の游ゴシックを見やすいフォントへ改善します。

課題:游ゴシックが薄い&細い

Windows10の游ゴシック、見にくいですよね。
PowerPoint最初の1枚目なんて特にうんざりしません?

もともと游ゴシック自体は美しいフォントなんです。
字游工房 游ゴシック

ですがWindows10では、なぜか薄く細く表示されてしまいます。

これは、WIREDのある記事の抜粋です。

どちらも游ゴシックですが、Windows10の方が薄く細く見えますよね。

なぜWindows10だと、こんなにも細く見えるのでしょうか。

原因:Windows10はウェイト(太さ)が細い

Windows10の游ゴシックが薄く細く見える原因は、2つあります。

1. Windows10は游ゴシックのウェイト(太さ)が1段階細い



游ゴシックには7種類ものウェイト(太さ)があり、MacとWindows10ではデフォルトのウェイトが違います。
MacはMediumなのに対し、Windows10では1段階細いRegularになっています。

2. 黒自体が見にくい


どうやらWindows10では、ガンマ補正が強くかかっており、黒が薄くなる傾向があるようです。

Ryuseiさんの以下リンク先の記事で詳しく解説されています。

游ゴシックは何故Windowsでかすれて見えるのか

さらに游ゴシックはもともと余白が広いので、余計に薄く細く見えてしまいます。

このように原因はいくつかありますが、今回は1つ目の原因であるフォントの太さに絞ります。
たったひとつの箇所を変えるだけで、游ゴシックの薄さと細さを改善できるんです。

解決策:游ゴシック Mediumへ変更

游ゴシックを游ゴシック Mediumに変更する、たったこれだけです。

変更方法を画像付きで説明します。

まずは、ブラウザから。

Internet Explore

右上の歯車マークから、インターネットオプションを選びます。

フォントボタンを選び、[Web ページ フォント]を游ゴシック Mediumへ変更します。

Google Chrome

右上の3点リーダーから、設定を選びます。

フォントをカスタマイズを選んでください。

するとフォント変更箇所が4つあります。すべて游ゴシック Mediumでもいいですが、Serifフォントのみ游明朝 Demilightにしておくといいでしょう。

Windows officeは、ソフトによって設定方法がばらばらなので、注意してください。

Excel

Excelは簡単です。ファイルからオプションへ進み、基本設定のフォントを変更すれば完了です。

PowerPoint

表示タブからスライドマスターを選び、フォントというボタンをクリック。
そして一番下にあるフォントのカスタマイズを選びます。
すると以下のような画面になるので、すべて游ゴシック Mediumを選択し、フォントパターンを作成します。
名前は[游ゴシック Medium]などとしておくとわかりやすいです。

これで新しいスライドを追加しても、はじめから游ゴシック Mediumになっています。

outlook

デザインタブからフォントボタンを選びます。
すると、さきほど作成した、フォントパターンが登録されていますよね?

游ゴシック Mediumというフォントパターンを選ぶだけで、簡単に変更できます。

Word

ファイルからオプションへ進み、ひな形というボタンを押します。

すると下のように、[文字書式]というボタンが3つ出てきますので、それぞれ押してフォントを変更してください。

またoutlookとWordでは、フォントの形や文字間隔など、さらに細かいカスタマイズも可能です。
(近日投稿予定)游ゴシックをヒラギノ角ゴに近づけるカスタマイズ

効果:薄さ&細さが改善された

游ゴシック Mediumへ変更すると、これぐらい見やすくなります。

フォントを変えるだけで、Windows10の游ゴシックが見やすくなりました。
6つのアプリ全部合わせても10分あれば設定できるので、ぜひ試してください。

読み手を引き込むフォントデザインについて具体的にまとめました。こちらもぜひ参考にしてください。
思わず読みたくなるフォントデザインにする 3つの方法

ただ、ヒラギノ角ゴと比べると、まだまだ見やすいとは言えません。

(近日投稿予定)游ゴシックをヒラギノ角ゴに近づけるカスタマイズ
游ゴシックを、Macの美しいフォントであるヒラギノ角ゴに近づけてみました。

メールや資料の見せ方にこだわりたい方や、社用PCで仕方なくWindowsを使っている方に、ぜひアクセスして欲しいです。