Web制作実務役立ち

游ゴシックのMacとWindowsでの指定方法を解説【太さの罠】

游ゴシックのWindowsとMacでの指定方法を解説【太さの罠】
本ページにはプロモーションが含まれています。

こんにちは、フリーランスエンジニア歴6年目のしょーご(@samuraibrass)です。

私は職業柄コーディングを勉強中の方のコードを読むことが多いのですが、游ゴシック関連でのミスがよく見つかります。

ずばり、「Windows、もしくはMacの片方でしか游ゴシックが適用されていない」という問題です。

しかし、游ゴシックにはこれ以外にも「太さの違い」というトラップもあります。

そこで今回は「游ゴシックの正しい活用方法」を解説していきます。

これを解説している私自身は、Webサイト制作を200件近く行っており、50人近くのフリーランス独立を支援してきた実績があります。

今回の記事を読んでいただくことで、デバイスフォントとして正しく游ゴシックが使えるようになるので、ぜひ最後まで御覧ください。

一応游ゴシックにもWebフォントはありますが、高額なので除外します。

しょーご

この記事を書いたのは
しょーご@samurabrass

このブログ「しょーごログ」の運営者。2018年からエンジニアとしてサイト制作やシステム開発を行いつつ、ブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行う。

\現役エンジニアのレビュー付き/

実践レベルのコーディング課題公開中

デザインカンプからのコーディング練習課題【オリジナルポートフォリオを準備できるようになりました】
販売ページはこちら
  • デザインカンプからのコーディングを経験したい
  • 現役エンジニアのレビューを受けてみたい
  • 即戦力級のポートフォリオを用意したい

2024年にデザインを完全リニューアルしています!

コーディングを学習中の方はぜひご活用ください。

無料の入門編から本格企業サイトまで/

また、超実践編という鬼のようなコースもあるので、ほぼ実案件と同じ厳しい環境でコミュニケーション面までレビュー受けたい方がいれば、是非。

超実践編バナー

超実践編をとりあえず見てみる

游ゴシックの正しいコード

いきなり答えを書くと、デザインデータで游ゴシックが設定されている場合は、以下を適用させてあげればOKです。

body{
  font-family: "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
  font-weight:500;
}

font-weight:500;については、後述するWindowsの問題への対処になります。

しょーご

この指定方法の詳しい使い方をこれから解説していきます。

注意点としてbodyに設定すると【サイト全体で】游ゴシックが当たるので、游ゴシック以外の任意のフォントを当てる場合には、都度その場所に任意のフォントを設定する必要があります。

游ゴシックのMacとWindowsでの表示の違い

游ゴシックを普通に指定すると、MacとWindowsで微妙に表示が異なります。

Windows Mac 游ゴシック 違い
Windows Mac 游ゴシック 違い

微妙に文字の太さが違うのがおわかりでしょうか?

ちなみに上がMac,下がWindowsです。

このサイトでは游ゴシック レギュラー(weight400)を指定してるのですが、MacにはRegularが存在しないため、

そのひとつ上のMedium(500)が適用され、Windowsよりも少し太めに表示されているのです。

そこで、先程のfont-weight:500;をはじめから指定することで、両者の太さを均一にしています。

他にも、Windowsの游ゴシックのweight400は細くて見にくいというのもあります。

font-weight: 500;の弊害

しかし、font-weight:500;を指定することで、游ゴシック以外のフォントが誤って太字になってしまう可能性があります。

よって、font-weight:500;を指定する際には、游ゴシック以外のフォントがデザインより太くなってしまっていないか、確認する必要があります。

しょーご

特に英字フォントは太さが多様でweight400と500では見た目が結構異なるので、気をつけましょう。

補足:iOSやAndroidは代替フォントになる

游フォントはAndroidはもちろんiOSにも存在しません

游ゴシック以外の設定が反映されるので、游ゴシックに近いヒラギノやメイリオで補填しています。

MacユーザーはWindows環境も用意しておこう

WebサイトはMacとWindowsで見え方が結構異なります。

プロとしてWeb制作を仕事にするなら、「ConoHa for Windows Server」などのサービスを使って、Windows環境も用意しておいたほうがいいですね。

しょーご

ちなみにWindowsユーザーがどうやって、第二のIEたる「MacOSのSafari」を検証しているのかはわかりません。誰か情報をください(泣)

游ゴシックを使う際は制約を認識しよう

ここまで見てきた通り、游ゴシックは魅力的なフォントながら、スマホでは適用されないなど、制約が多いフォントです。

デザイナーがもし游ゴシックをどうしても使いたいなら、それなりのお金(Webフォント)や実装の制約を受け入れる必要がありますし、それを「デザイナーとコーダー両方」が正しく認識する必要があります。

しょーご

游ゴシックを利用する場合は気をつけていきましょう!!

フォントがちゃんと当たっているか確認する方法

即戦力になれるコーディング課題

HTML初心者からWordPress実案件レベルまでのコーディング演習課題を「専用ページ」にて公開しています。

デザインカンプからのコーディング練習課題【オリジナルポートフォリオを準備できるようになりました】
  1. Figma,Photoshopデザインからのコーディング
  2. サーバーアップロードでサイト公開
  3. プロによる最大3回の表示確認特典
  4. レビュー返しは爆速
  5. 2024年にデザイン刷新!被らないポートフォリオ

初級編」は初めてデザインからコーディングする方向け
中級編」はJavaScriptやjQueryの練習
上級編」はWordPressの実案件を模擬体験できるレベル感にしています。

中級者の方には高難易度課題を詰め合わせた「即戦力セット」も出しています。

全課題で「実務レベルの、プロの厳しいレビュー」を受けられるようにしています。

また、2024年には随時デザインの刷新をしており、完全リニューアル!!

他者と差をつけられるポートフォリオが準備できます!

コーディング課題 中級 中級Ex
しょーご

制作会社も使用する専用レビューツールで分かりやすく添削していきます!

基本的に「まとめて購入」していただくとかなりお得になります↓

コーディング課題
まとめて購入

全部盛りこちらから
中級以上こちらから
即戦力編こちらから

コーディングは書籍だけではなかなか実力がつかないので、ぜひ腕試しにご利用ください!!

\課題の購入はこちらから/

また、超実践編という鬼のようなコースもあるので、ほぼ実案件と同じ厳しい環境でコミュニケーション面までレビュー受けたい方がいれば、是非。

超実践編バナー

超実践編をとりあえず見てみる

あなたに是非読んでほしい記事です!