意外と気付かぬ落とし穴
こんにちはchessinuです。
皆さん游ゴシック(Yu Gothic)は好きですか？
自分はそこそこ好きです。だから自分のサイトには游ゴシック体を使用しています。ただ游ゴシックは使用する上で、色々と面倒くさいのも事実です。
何が面倒くさいのかというと、OSやブラウザによって表示のされ方(見え方)が少し変わる事！
もっと細かく言うと、見え方というのは「文字の濃さや薄さ」の事です。
普段サイトの更新や記事の編集作業などは、パソコンでしている方が大半だと思います。
そしてこの問題に関してWindowsユーザーならばすぐに気付くとは思うのですが、ことMacユーザーでMacから更新・編集作業をしている人はかなり見落としがちです。
何故Macユーザーだけなんだろうか…？
というわけで今回はWindowsユーザーの自分が、サイトに「游ゴシック(Yu Gothic)」を使用しているMacユーザーの方へ向けて、游ゴシックフォント使用時の注意点を記事にしてみました。
「游ゴシック(Yu Gothic)」の問題点
最近では游ゴシックはメイリオに取って代わり、ウェブサイト上でもよく使われるようになって頻繁に目にします。
実際に自分もメイリオから游ゴシックに乗り換えた派なので、気持ちは良く分かります。
ただ游ゴシックには少し問題があります。
その問題について簡単・簡潔に一言で済ますと「きちんと設定しないと、文字がかすれて(薄くて)見えにくい！」って感じです。(当然モニターの解像度による差もありますが)
Windowsの場合
Windowsにはデフォルトでフォントの太さが以下の4種類入っています。
- Light
- Regular
- Medium
- Bold
通常の場合ですと、当然フォントの太さはfont-weightでRegular(400)を指定します。
ただ游ゴシックにこのRegularを適用すると、Chromeで見た場合に「文字が細くて薄く」なります。
実際にWindows上で「Firefox」「IE」「Edge」など他のブラウザで見てみましたが、Chrome以外は特に問題なく表示されました。
ということでつまりWindow＋Chromeで游ゴシックを使用する時には、別の書き方ではないと駄目ということです。
Macの場合
話は変わってMacの場合ですが、Macにはデフォルトで以下の2種類のフォントの太さが用意されています。
- Medium
- Bold
そんでMacの場合はそもそもRegularが無いので、通常のweight400指定をすればMediumが適用されます。
なのでMac上ではChromeから見ようがSafariから見ようが特に問題は有りません。
ただ裏を返せばこれが問題とも言えます。
Macユーザーだけが気が付かない原因
では何故「Macユーザーだけが気が付かないのか？」という事に関してですが、理由はとても単純で既にお分かりかと思います。
游ゴシックを使用する時に、fant-familyに対して”游ゴシック”,”Yu Gothic”と指定してやれば「IE」「Edge」「Firefox」「Safari」では特に問題なく普通の濃さで表示されます。
この「Safari」では普通に表示される、というのがこの問題の大きな原因ですね。
というのも先程も述べましたが「WindowsでChrome」を使用してウェブサイトを見ている人に対しては、通常のfont-familyの游ゴシックフォントの指定の仕方では不十分であり、フォントが薄くて見えにくいサイト＆記事が出来上がってしまします。
しかしMac上のブラウザだけをずっと使用してサイトを作っていると、一切それに気が付けないままでいます。
自身のMacPC上からでは普通に見える、っていうのが完全な罠ですよね。
(もちろんMacをデュアルブートをして、Windowsを入れているという様な場合は別ですが。)
そしてスマホを除けば、圧倒的多数が「WindowsでChrome」を使用してウェブサイトを閲覧しています。
ということはつまり圧倒的多数の人にとって、薄くて見づらいサイトがずーっと放置されている状態になります。
これはユーザビリティー的にも最悪で、一刻も早く改善したほうが良いです。実際に自分がその人のサイトを見ていても、フォントが薄過ぎ＆かすれ過ぎていて読むのに目が痛くなるぐらいです。
実際の見え方
それでは実際の見え方を紹介していきます。
って書きましたが、この「実際の見え方を紹介していきます。」って文章、実は既にWindowsのChromeユーザーから見ると薄く見えるんです。
ではMacユーザーの人にも分かるように、Windowsユーザー目線で見た画像を見てみましょう。
どちらがどちらだか分かりますか？
そう、ひと目ですぐに上がかすれてて薄いって分かりますよね。
わずかな文字数を切り抜いた画像ですら、この様に見えにくさがはっきりと分かると思います。これがサイトを通して全体的にこんな感じだと、記事を読んでる方はげんなりします。。。
そして実際に、こんな風に見えているサイトが割と多いです。
解決方法とまとめ
Macユーザーのサイト管理人が、よくサイトでするフォント指定の仕方ってこんな感じですよね。
body{font-family: "Helvetica", "Arial", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Yu Gothic, "游ゴシック", "メイリオ", Meiryo, sans-serif;}
この場合、Windowsではヒラギノは見られないので、ほとんどのWindowsユーザーは薄いYu Gothicフォントでサイトを見ることになってしまいます。
現時点での解決方法としてはChromeに対しては、”Yu Gothic Medium”を使用してあげればいいと思います。大体どのサイトもそうしてますからね。
それと補足ですが、「Yu Gothic」と「Yu Gothic Medium」ではBoldの表示のされ方も少し違います。
簡潔に言うと、「Yu Gothic Medium」のBoldの文字はこの様に滲みます。(特に漢字が)
もっと分かりやすいように、画数の多い漢字で見てみましょう。
この様に見え方がかなり変わってきます。
なので通常はbody又はPには「Yu Gothic Medium」、strong,bには「Yu Gothic」を指定します。
また設定後に家電量販店などでWindowsPCから自分のサイトを見てみるか、もしくわデュアルブートをしてWindows上から確認してみるのが一番良いかも知れませんね。
それでどの様に表示されているのかがはっきりすると思います。
游ゴシックはウェブサイト上で綺麗な日本語を表示できるフォントとして、とても重宝しているのですが設定などをミスると薄くて見づらいサイトとなってしまいます。
実際に自分も以前に間違えた設定をしていて、Chrome以外のブラウザで変な風に表示されているのを、知り合いに教えてもらうまで気が付かずにいました…今思い出しても冷や汗が出ます(笑)。
というかそこら辺に関しては、游ゴシックの仕様自体がどうなの？って感じもしますが怒っても仕方がない…
ちなみに自分もApple製品を持っていないのでそちらでどう見えているのか割と気になっています。
なので今度中古のApple製品を購入して、すぐにチェックできるようにしたいと思っています。思えばそれが一番確実ですよね。
以上でMac(マック)ユーザーの方が游ゴシック(Yu Gothic)を使用する場合に、気を付けたほうが良い点をまとめた記事は終わりとなります。
また別の記事でお会いしましょう！
それではさようなら～
この記事が気に入りましたら、下のアイコンをクリックしてSNSシェアの方をお願いします！