メイリオとMeiryo UIの違い

メイリオやMeiryo UIはWindowsに標準で入っているフォントです。文字の雰囲気は似ていてぱっと見は違いに気付きにくいですが、よく見るとメイリオよりもMeiryo UIの方が少しコンパクトな見た目になっています。また、文字の「上下の中心位置」と、「左右の文字との間隔」も異なります。違いを表にまとめると下記の通り。

項目	メイリオ	Meiryo UI
文字の見た目	ゆったり	少しコンパクト
文字の上下配置	文字がわずかに上にずれる	ほぼ中心
文字の左右間隔	広め	狭い

以下で実際の例で違いを見てみます。

文章で比較

下に「メイリオ」と「Meiryo UI」で同じ文章を書きました。font-size:16px、lihe-height:1.7のpタグです。pタグ領域を水色で塗っています。（一つ目がメイリオ、二つ目がMeiryo UIです。）

メイリオとMeiyo UIの使い分け方とは？

メイリオとMeiyo UIの使い分け方とは？

↑まず、ぱっと見で文章の横幅が違うことがわかります。これはメイリオよりもMeiryo UIがコンパクトな文字でありかつ文字の左右間隔も小さいためです。例えば文章の中の「メイリオ」という文字を比べると明らかにメイリオよりもMeiryo UIの方が文字そのものがコンパクトになっていることがわかります。文字一つ一つの左右のスキマもメイリオよりMeiryo UIは詰まっているのが分かります。また、よーく見ないと気づきませんが、メイリオは文字の上下位置が中心よりも微妙に上にずれて配置されていることも知っておいて欲しいことです。

文章の読みやすさでは、メイリオの方がゆったりとしていて読みやすく感じるのではないでしょうか。Meiryo UIはぎっちり詰まっているので窮屈な感じがします。長い文章の場合はさらに読みやすさの差は大きくなると思います。

UIパーツで比較

次にボタンのような要素でメイリオとMeiryo UIを比べます。下に「メニュー」と書かれたボタンのような要素を作りました。一つ目がメイリオ、二つ目がMeiryo UIです。

↑メイリオよりもMeiryo UIの方がボタンの横幅が小さいことが分かります。また、先の例の文章の場合よりもボタンの方が気づきやすいのですが、メイリオは文字の上下配置が微妙に上にずれて配置されていることがわかります。

ウェブサイトのヘッダーなどではパーツのスペースは限られますからできるだけコンパクトにできるMeiryo UIが有利だと思います。またメイリオは文字が微妙に上にずれるためボタンなどのパーツがみっともない感じになってしまうので、その点でもMeiryo UIの方がUIパーツに使うには良いと思います。

メイリオとMeiryo UIの使い分けのコツ

メイリオとMeiryo UIの違いがわかりましたので、それぞれの特徴を踏まえると使い分け方は以下の通りとなります。

フォント	メイリオ	Meiryo UI
特徴	文字間隔が広めで文章などが読みやすい。一方で、スペース効率はいまいちで、また文字が微妙に上にずれる欠点がある。	文字がコンパクトで文字間隔も狭くスペース効率が高い。一方で少し窮屈な印象を受ける。
推奨用途	記事の本文など文字量の多い箇所での使用がおすすめ	ボタンなどのUIパーツや横幅を切り詰めたい見出しなどでの使用がおすすめ

ちなみにこのサイトでの「メイリオ」と「Meiryo UI」の使い分けが下図。

記事の文章の箇所だけは読みやすさを重視して「メイリオ」を使用。UIパーツやそれに近いものには「Meiryo UI」を使っています。また、記事の見出しなどにも「Meiryo UI」を使っています。これは見出しに「メイリオ」を使うと横幅が広くなって途中で改行されてしまったり文字が散らかった印象になるのが嫌だからです。見出しはスペース効率が良くて、またパっと見たときにカタマリ感のあるMeiryo UIが良いかなと試行錯誤してたどり着きました。