メイリオ嫌われる理由を徹底解説！
メイリオ嫌われる理由を徹底的に掘り下げていきます。
フォント選びはデザインの命。特にUIパーツでは、ほんの少しのズレがUX全体に影響することもあるんです。
①メイリオの文字位置がズレて見える
メイリオの一番の特徴とも言えるのが、上下方向の余白が独特だということ。
特に和文に対して縦方向に約95%に縮小されており、文字の下部に多めのスペースが取られているんですよね。
一見、これは英数字と和文のベースラインを揃える工夫のように思えますが、単体で使うと違和感が強いんです。
ボタンやタブなど、中央揃えが命のUIパーツでは「数値上は中央揃えだけど、目にはズレて見える」現象が起きがちです。
この微妙なズレ、見慣れていないとめちゃくちゃ気になります…！
②UIパーツで中央揃えが崩れる問題
デザイナー泣かせなのがこの問題。
一行だけのボタンなどでメイリオを使うと、上下のバランスが崩れてしまうことが多いです。
たとえばボタンのラベルに使うと、なぜか少し上に寄って見えるんですよね。
この現象は、他のフォントにはあまりない特徴なんです。
CSSでvertical-alignやpaddingを調整しても完全には解決しないため、デザイナーが意図しない修正工数がかかるという苦しい状況に。
ほんと、地味にストレス溜まります…！
③他デバイスとの相性が悪い
メイリオは主にWindows環境に標準搭載されているフォント。
つまり、MacやAndroidでは非対応なケースが多く、想定外のズレが出てしまうこともあるんです。
Webサイトではどのデバイスでアクセスしても同じ見た目にすることが求められます。
ですが、メイリオを指定してしまうと、Macユーザーやスマホユーザーにとってはまったく違う印象になってしまうんですよね。
このデバイス間のズレ、解消が本当に大変なんです。
④MacとWindowsで表示が違う
さらにやっかいなのが、同じフォント名でもOSで異なる挙動を示すケース。
「游ゴシック」などもそうですが、WindowsとMacではウエイト（太さ）や文字間の詰まり具合が異なるんですよ。
メイリオも例外ではなく、Windowsでピシッと見えていても、Macではややぼやけて見えたり、行間が違ったりします。
「なぜあの人の環境だけ崩れてるの？」という現象は、だいたいこれが原因です。
ほんとにフォントって、奥が深いですよね。
⑤line-height調整でも限界がある
CSSでline-height: 1;を指定することで一見は揃います。
ですが、この手法には問題があって、行間が詰まりすぎてしまい、可読性が悪くなるんです。
また、フォントによって内部の余白も違うため、一律でline-heightを指定してもバランスは崩れることがあるんですよね。
特にメイリオは下部に空白があるため、結果的に文字が上寄りに見える問題は解消されないことも。
だから「CSSで調整すればいいじゃん」って話では済まないんですよ～。
⑥Web開発者からの評判がイマイチ
エンジニア視点から見ると、余白やズレの調整に時間が取られるフォントは正直敬遠されがちです。
「ボタンのテキストだけ位置がズレてる」
「Macと見た目が違う」
「他のフォントと併用したら崩れた」など、トラブルの原因になりやすいのがメイリオ。
そのため、UIを重視する場面ではあえて避ける人も増えています。
筆者も何度泣かされたことか…。
⑦代替フォントが増えてきた背景
そして近年、アクセシビリティやデザイン性を重視した新しいフォントが次々登場しています。
そのため、昔ながらのメイリオが相対的に選ばれなくなってきているのも事実です。
選択肢が広がったことで、「わざわざメイリオを選ぶ理由がない」という現実もありますね。
UIデザインでメイリオを避ける理由とは？
UIデザインにおいて、なぜメイリオが避けられる傾向にあるのかをさらに深堀りします。
①デザインの見た目に統一感が出ない
プロダクト全体でフォントの統一感を出すのは重要なポイントです。
しかし、メイリオは文字の余白や高さにクセがあるため、他のフォントと組み合わせると違和感が出てしまいます。
パッと見の整合性がなくなると、デザインの信頼性も落ちるんですよね。
②文字バランスが悪くなる
特に和文と欧文が混在する文章では、メイリオの特徴が裏目に出ます。
欧文と和文のベースラインが揃わず、不自然な見た目になってしまうんです。
そのため、テック系の文章などでは不向きと言えます。
③UX全体に影響を与える
ユーザーにとって文字の読みやすさは体験の一部。
少しのズレや読みづらさが積み重なると、ストレスや離脱の原因になります。
UIの美しさがUXに直結する今、フォント選びはそれだけ重要なんですよね。
④ブラウザ環境ごとの差が大きい
同じHTML・CSSを使っていても、ブラウザやOSによって見た目が違うのは避けられません。
特にメイリオは、表示が安定しないフォントの代表格とも言えます。
だからこそ、より汎用性の高いフォントが求められるんです。
⑤CSS調整が手間になる
見た目のズレを修正するには、CSSで細かい調整が必要になります。
marginやpaddingでの微調整に加えて、line-heightやtransformでの位置調整など、手間がかかりすぎるのが現実です。
ちょっとしたボタン一つでも調整が必要なんて、正直しんどいです…。
⑥プロダクトでの不具合リスク
プロダクト開発では、再現性と安定性が超重要です。
フォントによるズレや見た目の差異は、QAやレビュー工程でもバグ扱いされることがあります。
つまり、メイリオを使うことで開発・運用コストが増えることにも繋がってしまうんですね。
⑦他のフォントとの併用が難しい
Webサイトやアプリでは複数フォントを使うこともありますが、メイリオはバランスが取りづらくて難しいです。
和文中心ならメイリオも選択肢ですが、欧文が混ざると一気に崩れてしまいます。
メイリオの代替になるおすすめフォント
最後に、メイリオの代わりとしておすすめできるフォントをご紹介します。
①BIZ UDゴシック：アクセシビリティに優れる
項目 内容
名称 BIZ UDゴシック
搭載 Windows 10 October 2018 Update以降
特徴 見やすさ・読みやすさ重視
Web対応 Google Fonts対応
企業や教育現場でも導入されており、視認性に優れた次世代フォントです。
②游ゴシック：美しさと互換性のバランス
項目 内容
名称 游ゴシック
搭載 Mac/Windows共に標準搭載
特徴 洗練された見た目
ただし、MacとWindowsで表示が微妙に違うため、調整は必要です。
③源ノ角ゴシック：Webフォントとしても最適
項目 内容
名称 源ノ角ゴシック（Noto Sans）
提供 Adobe・Google
特徴 癖が少なく、整った印象
対応 Webフォントあり・バリアブルフォントあり
全デバイス共通で使えるため、もっとも安定感がある選択肢かもしれません。
④フォントの選び方のポイント
表示の安定性があるか
多言語対応か
CSS調整が少なくて済むか
この3点を意識すると選びやすいです。
⑤フォント変更時の注意点
フォントを変えると行間や改行位置が変わるため、UI全体の再調整が必要になります。
そのため、必ずデザイン全体を見渡して変更を行うようにしてくださいね。
⑥実際の表示例を比較してみた
メイリオ、BIZ UD、游ゴシック、源ノ角で同じボタンを作って比べると、明確な余白の違いが見えてきます。
実際に試してみると一目瞭然なので、まずはテスト環境で比べてみるのがおすすめです！
⑦最終的な判断基準とは？
最終的にはプロジェクトの目的・ターゲットユーザー・UI設計方針によって最適なフォントは変わります。
ただ、メイリオが避けられがちな理由を理解しておくことで、失敗しないフォント選びができるようになりますよ！