PC ブログ研究

Noto Sans・メイリオ・源ノ角・游・ヒラギノ角ゴシックの違い&フォント比較

5つの代表的フォントNoto Sans・メイリオ・源ノ角・游・ヒラギノ角ゴシックの違いとPC&WordPressテーマCocoonフォント変更方法PC
この記事は約15分で読めます。
スポンサーリンク
しゃお
しゃお

フォントの種類多すぎ問題!どれが良いの?

D君
D君

それぞれフォントの違いを見て、そこから選べばOK

 

2021年も明けたので、PC&ブログのフォントの見直しを行いました。

 

この記事をおすすめしたい方
  • 代表的なフリーフォントの違いについて知りたい
  • PCのフォントを標準システムフォントから変更したい
  • サイトやブログのフォントをどれにすれば良いか迷っている

 

代表的なフリーフォントについて簡単解説

フォント一覧
  • Noto Sans(無料)
  • 源ノ角ゴシック(無料)
  • メイリオ(Windowsに標準搭載)
  • 游ゴシック(Windowsに標準搭載)
  • ヒラギノ角ゴシック(Macに標準搭載)

Noto Sans & 源ノ角ゴシック(英名:Source Han Sans JP)

D君
D君

無料フォントの代表格!

Noto Sans & 源ノ角ゴシックめも
  • オープンソースのフォントファミリーとして、GoogleとAdobeからリリース
  • 「世界中の文字をサポートするフォント群を開発」という目標のもと、総勢100名以上のチームが3年以上をかけて開発
  • 開発協力:イワタ・Changzhou SinoType Technology・Sandoll Communication

引用:アドビ、GOOGLEと協力し、画期的なデジタル書体を発表 – Adobe

 

Beautiful and free fonts for all languages – Google Noto Fonts

Notoフォントは100種類以上ありますが、そのうちの日本語が使えるのは数種類です。

 

源ノ角ゴシック(Source Han Sans JP)は、上記2つのページから安全にダウンロードできます。

 

以下の表は日本語が使えるゴシック体のフォントです。

リリースフォント名ウェイト数グリフ(字体)
GoogleNoto Sans JP6Japaneseのみのフォント
Noto Sans CJK JP7
  • C(Chinese:中国語)
  • J(Japanese:日本語)
  • K(Korean:韓国語)
Adobe源ノ角ゴシック
(Source Han Sans JP)
7Japaneseのみのフォント
源ノ角ゴシック JCK JP
(Source Han Sans CJK JP)
7
  • C(Chinese:中国語)
  • J(Japanese:日本語)
  • K(Korean:韓国語)

JPは日本語対応版、CJKは日本語以外の中国語と韓国語にも対応

Googleフォント名「Noto」の由来

When text is rendered by a computer, sometimes there will be characters in the text that can not be displayed, because no font that supports them is available to the computer. When this occurs, small boxes are shown to represent the characters. We call those small boxes “tofu,” and we want to remove tofu from the Web. This is how the Noto font families got their name.

引用:Noto Sans – Google Fonts

簡単に和訳すると

コンピュータで表示できない文字があると、「□(小さな箱=豆腐)」で表示されます。この豆腐をWebから取り除くために開発されたのが、Notoフォントファミリーです。

 

Noto =「No Tofu(ノー豆腐)の略」と覚えておけばOK

 

Noto Sansと源ノ角ゴシックの違い

ややこしい「源ノ角ゴシック」と「Noto Sans」のまとめ – DTP Transit

ガチで詳しく説明してあるサイトがありますので、気になる方は一読しておくと良いです。

 

【WEBフォント】Noto Sans系日本語フォントは結局どれを使えばいいのか検証してみる – OKU LOG

「結論、どれがいいのか」に、設定例が記載されているので、参考になります。

 

Noto SansとNoto Serif の違い

Noto Sansはゴシック体、Noto Serifは明朝体です。

 

明朝体のNotoフォントが使いたい方は、「Noto Serif JP」もしくは「Noto Serif CJK JP」をダウンロードしましょう。

 

メイリオ・Meiryo UI

D君
D君

現在主流のWindowsでは、初めから使用可

メイリオめも
  • Windows Vista・Server2008のシステム用和文フォントとして採用
  • MS UIゴシックに代わるシステム用フォント(サンセリフ系ゴシック体フォント)として開発
  • 画面上での読み取り用に最適化され、印刷物がキレイに見えるよう設計
Meiryo UIめも
  • Windows7で限定的に採用、Windows8で全面採用(Wikipediaより
  • メイリオの派生フォントとして開発
  • スペースの節約に適した狭い行間隔を可能にするコンパクトで読みやすい

引用:Meiryo font famiy – Microsoft

 

メイリオ – Microsoftダウンロードセンター

配布ページは残っていましたが、現在配布は行われていないようです。

 

古いバージョンからWindows10にアップグレードした場合、Meiryo UIは、Windows7以降ならWindowsアップデートでインストールされています。

 

 

メイリオ(Meiryo)の由来

メイリオ(Meiryo)の語源は、日本語の「明瞭」からで、画面上でも印刷物でもキレイに見えるようにと名付けられた。

 

游ゴシック(英名:Yu Gothic)

D君
D君

現在主流のWindowsでは、初めから使用可

游ゴシックめも
  • Windows8.1以降のWindows・Mavericks以降のmacOSに標準搭載
  • 游明朝体とセットでの使用を想定して開発
  • 文字間に余裕をもたせてあるため、長文でも読みやすい
Yu Gothic UIめも
  • Windows10でシステムフォントとして採用
  • 数字&ラテン文字がSegoe UI(Wikipediaより
  • スペースの節約に適した狭い行間隔を可能にするコンパクトで読みやすい

 

游ゴシック 游明朝フォントパック – Microsoft

Microsoft Office 2016に含まれている游ゴシック&游明朝体

 

游ゴシックの由来

デザインを手掛けた「字游工房」の游から。

 

游ゴシックについて

游明朝体と一緒に使うことを想定して開発された、スタンダードな角ゴシック体(字游工房より

 

販売価格は、33,000円(1ウェイト)と、結構良い値段

しゃお
しゃお

フォントって高い!

D君
D君

様々なフォントも含むと考えると、OSの価格は、かなり良心的だね!

 

ヒラギノ角ゴシック

D君
D君

アップルのOS・Cocoon(WordPressテーマ)では、初めから使用可

ヒラギノ角ゴシックめも
  • アップルのMacに標準搭載
  • くせのないやや広めのフトコロと、画線両端のアクセントにより、読みやすさと存在感を両立
  • 多彩なウェイト(太さ)バリエーションで、極小サイズの説明文から特大の見出しまで、幅広く対応

引用:ヒラギノ角ゴシック体 – SCREENヒラギノフォント総合情報サイト

 

ヒラギノ角ゴシックの購入について

Macに標準搭載されていないウェイトやWindowsで使いたい場合は、有料フォントを購入する or MORISAWA PASSPORTでライセンスを購入する必要あり。

 

販売店情報(ショップ) – SCREEN

販売価格は、11,800円(1ウェイト)、36,850円(基本6書体セット)

 

Amazonでも購入できます。

 

MORISAWA PASSPORT

モリサワではPC1台につき、49,800円(税抜)で、1500以上の書体が常に最新の状態で使用できるようです。

しゃお
しゃお

フォント研究家やフォント特化ブログでは、安く使えて良いかも

 

フォント比較

D君
D君

比較は、各フォントの大きめ太字+通常のウェイトです。

メリット
文字や文章の見やすさ&読みやすさを、3つの指標で判定しています。
  • 可読性:読みやすさ → 長文の疲れににくさや読むスピードに影響
  • 視認性:認識しやすさ → 字の発見しやすさや目立ちやすさに影響
  • 判読性:誤読の少なさ → 似た字の区別のしやすさ読み間違いの多さに影響

引用:読みやすく – 伝わるデザイン 研究発表のユニバーサルデザイン

Noto Sans CJK JP

フォント比較_Noto Sans CJK JP

  • スッキリしていて、可読性・視認性・判読性が高い
  • ヒラギノ角ゴシックよりも現代的で、デジタルな印象が少ない
  • Google&Adobeが3年以上をかけて開発しただけあって、読みやすい&美しいフォント

 

源ノ角ゴシック

フォント比較_源ノ角ゴシック

  • 「Noto Sans CJK JP」に同じ

 

メイリオ

フォント比較_メイリオ

  • 視認性・判読性がは非常に高く、遠くからでも読みやすい
  • 文字間隔が狭く、長文のある資料や読み物だと疲れやすい
  • 全体的に横幅が広めで、デジタル感が強い

 

Meiryo UI

フォント比較_Meiryo UI

  • メイリオの派生なだけあり、漢字・アルファベット・数字・記号は同じ
  • ひらがな・カタカナがメイリオよりもコンパクト
  • Office(ExcelやPowerPoint)など、スペースに限りがあるときなどに有効

 

游ゴシック

フォント比較_游ゴシック

  • 他のフォントに比べると、適度な文字間隔&線が細くスッキリしていて、可読性・視認性・判読性が高い
  • 全体がキレイで非常に読みやすい
  • 標準だと細すぎるという方は、「Medium」ウェイトを使うのもおすすめ

 

Yu Gothic UI

フォント比較_Yu Gothic UI

  • 游ゴシックの派生だが、同じものは漢字のみ
  • Office(ExcelやPowerPoint)など、スペースに限りがあるときなどに有効

 

ヒラギノ角ゴシック

フォント比較_ヒラギノ角ゴシック

  • Macで採用されているだけあり、可読性・視認性・判読性が高い
  • アルファベットはメイリオに近い
  • 数字は他のフォントに比べ、横幅が広め

 

ヒラギノ角ゴを試す – モリサワ

上記サイトで、ウェイトごとのイメージを確認できます。

 

代表的なフォントを比較した結果

まとめ
  • モダンなイメージで、可読性・視認性・判読性に優れた万能フォント
    →Noto Sans系(源ノ角ゴシック)
  • 全体的にスッキリ&キレイで読みやすい
    →游ゴシック
  • Mac使用
    →ヒラギノ角ゴシック
  • 読みやすいわけではないので、Webページや読み物などには向かないが、少しでも省スペースで文字を入力したい
    →UIフォント

 

Windows10のシステムフォントを設定・変更する

試しにNoto Sans CJK JPに変更してみます。

フリーフォントのダウンロード&インストール

Beautiful and free fonts for all languages – Google Noto Fonts

 

jp」と入力すると、すぐに出てきます。

Google Noto FontsからNoto Sans CJK JPをダウンロード

Noto Sans CJK JP」をクリックし、「DOWNLOAD」からダウンロード

 

zipファイルがダウンロードされるので、解凍すると「NotoSansCJKjp-hinted」フォルダが作成されます。

 

フリーフォント_Noto Sans CJK JPを右クリックからインストール

拡張子が「otf」のものをすべて選択し、右クリック > 「インストール」で、現在ログイン中のユーザにフォントがインストールされます。

※特定のウェイトだけインストールしたければ、インストールしたいウェイトのotfだけを選んでください。

 

上記以外のフォントインストール方法
  • 先ほどと同様、otfファイルを選択

  • 「C:\Windows\Fonts」にドラッグ&ドロップ

この方法でも問題なくフォントのインストールができます。

 

アプリ「Meiryo UIも大っきらい!!」のダウンロード

GitHubからダウンロードすると、ビルドが必要なので

Tatsu-syo/noMeiryoUI – GitHub

 

今回は、フリーツールのサイトからダウンロードします。

Meiryo UIも大っきらい!! – freesoft100

 

VirusTotalでハッシュを確認_noMeiryoUI

zipファイルを解凍し、一応「VirusTotal」でハッシュ検索&確認しておきます。

 

VirusTotalでハッシュ検索結果_noMeiryoUI

検索結果:0/69なので、全く問題なし

 

ツールの実行&フォント設定・変更した結果

Meiryo UIも大っきらい!!_游ゴシック

さっそく実行し、Windows10のシステムフォント「游ゴシック」から

 

Meiryo UIも大っきらい!!_Noto Sans CJK JP Medium

Noto Sans CJK JP Medium」に変更みると

 

フォントを游ゴシックからNoto Sans CJK JP Mediumに変更してエクスプローラを見てみる

左側のフォルダ階層(ディレクトリ)を見てください。

游ゴシックでは、文字が細い&薄いですが、Noto Sans CJK JP Mediumでは、濃い&見やすくなっています。

しゃお
しゃお

これだけでもやる価値あるね!

 

Meiryo UIも大っきらい!!_個別設定

ちなみに、Meiryo UIも大っきらい!!は「個別設定」も可能です。

 

Macのシステムフォントを設定・変更する

Mac_TinkerToolでシステムフォントを設定変更

 

アプリ「TinkerTool」のインストール

Macのシステムフォントは、アプリ「TinkerTool」を入れると簡単に変更できるようです。

 

Download」ページへ移動し、「Download」ボタンをクリックすると、「TinkerTool.dmg」のダウンロードが開始します。

 

ダウンロード完了後、TinkerTool.dmgをダブルクリックして、インストールします。

※dmgファイルを保存したのと同じ場所にアプリアイコンが作成されるので、アプリケーションフォルダに移動しましょう。

 

インストール後は、dmgファイルは不要なので、削除します。

※アプリが動作しない場合は、下記リンクの「dmgファイルからインストールしたアプリが動作しない場合の対処方法」を参考にしてみてください。

 

参考:MacでAppStoreやdmgファイルからアプリを追加する際のインストール&エラーの対処法とアンインストール(削除)方法

 

フォントの設定・変更

TinkerTool起動後、上記画像のように「フォント」タブからフォントや文字サイズを自由に設定・変更できます。

 

ただし、設定を変更したあとは不具合防止のために必ず再起動しましょう。

 

参考:Macをさらに使いやすくする隠し設定4選 – コトノバ

しゃお
しゃお

Macは詳しいサイトにおまかせ

 

WordPressテーマ「Cocoon」のフォントを設定・変更

Cocoon設定 > 全体 > サイトフォント

WordPress_テーマCocoonでフォントを設定&変更

好きなフォントを選んで「変更をまとめて保存」を押すだけでフォントの変更が可能

 

Cocoonのフォント設定から変更できること
  • フォント
  • 文字サイズ
  • 文字色
  • モバイルサイトの文字サイズ
  • 文字の太さ(ウェイト)

ウェイトまで変えられるのは、便利ですね。

D君
D君

無料テーマとは思えないカスタマイズ性

Cocoonでフォント設定・変更した結果

ウェイトを400から500に設定・変更しました。

WordPress_テーマCocoonでフォントウェイト設定・変更前

変更前は、文字サイズ18pxで少し薄いかな?といった感じでしたが

 

WordPress_テーマCocoonでフォントウェイト設定・変更後

変更後は、くっきり見やすくなりました。

しゃお
しゃお

いっとき様子見

 

フォントのソースはどこにある?

しゃお
しゃお

スマートなイメージにしたいため、最優先で游ゴシックが表示されるよう設定中

WordPressのテーマ「Cocoon」の方は、変更していなければ、ソース上のフォント設定箇所(font-family)は以下にあります。

外観 > テーマエディター > Cocoonを選択 > style.css(220行目辺り)

font-family: "Yu Gothic", Meiryo, "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;

 

Webフォント(Noto Sansなど)を使いたい場合

Webフォントを使用すると、サイト読み込み時にフォントのダウンロードが発生

SEOにも少なからず影響がある!

という問題があります。

 

しかし、「文字を読みやすく、キレイにしたい」場合、Webフォントを使うのが手っ取り早いです。

 

そこで、Webフォント&表示速度も速いサイトにするために、以下3つをやると効果があります。

  • フォントの軽量化
  • Webサイトに設置
  • フォントの遅延読み込み

 

気になる方は、以下を参照してください。

【サイト高速化!】Noto Sansを軽量化してWEBサイトに使う方法

 

 

 

コメント

タイトルとURLをコピーしました