こんにちは、フリーランスエンジニア歴6年目のしょーご(@samuraibrass)です。
私は職業柄コーディングを勉強中の方のコードを読むことが多いのですが、游ゴシック関連でのミスがよく見つかります。
ずばり、「Windows、もしくはMacの片方でしか游ゴシックが適用されていない」という問題です。
しかし、游ゴシックにはこれ以外にも「太さの違い」というトラップもあります。
そこで今回は「游ゴシックの正しい活用方法」を解説していきます。
今回の記事を読んでいただくことで、デバイスフォントとして正しく游ゴシックが使えるようになるので、ぜひ最後まで御覧ください。
この記事を書いたのは
しょーご（@samurabrass）
当ブログ「しょーごログ」の運営者。2018年からWeb制作・フロントエンドエンジニアとして主にWordPressでのサイト制作やシステム開発のフロントエンドを担当。同時にブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行い、スクール講師を4年以上している経験を活かした分かりやすい記事制作を心がけている。
＼現役エンジニアのレビュー付き／
実践レベルのコーディング課題公開中
- デザインカンプからのコーディングを経験したい
- 現役エンジニアのレビューを受けてみたい
- 即戦力級のポートフォリオを用意したい
2024年にデザインを完全リニューアルしています！
コーディングに自身をつけるにはプロからのレビューを貰うのが必須なため、制作会社も利用するレビューツールで添削をしています。
Web制作学習ロードマップにも取り入れているため、学習終了まで迷わず進むことが可能です。コーディングを本気で仕事したい方はぜひご活用ください！
＼無料の入門編から本格企業サイトまで／
游ゴシックの正しいコード
いきなり答えを書くと、デザインデータで游ゴシックが設定されている場合は、以下を適用させてあげればOKです。
body{
font-family: "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
font-weight:500;
}font-weight:500;については、後述するWindowsの問題への対処になります。
この指定方法の詳しい使い方をこれから解説していきます。
游ゴシックのMacとWindowsでの表示の違い
游ゴシックを普通に指定すると、MacとWindowsで微妙に表示が異なります。
微妙に文字の太さが違うのがおわかりでしょうか？
ちなみに上がMac,下がWindowsです。
このサイトでは游ゴシック レギュラー(weight400)を指定してるのですが、MacにはRegularが存在しないため、
そのひとつ上のMedium(500)が適用され、Windowsよりも少し太めに表示されているのです。
そこで、先程のfont-weight:500;をはじめから指定することで、両者の太さを均一にしています。
font-weight: 500;の弊害
しかし、font-weight:500;を指定することで、游ゴシック以外のフォントが誤って太字になってしまう可能性があります。
よって、font-weight:500;を指定する際には、游ゴシック以外のフォントがデザインより太くなってしまっていないか、確認する必要があります。
特に英字フォントは太さが多様でweight400と500では見た目が結構異なるので、気をつけましょう。
游フォントはAndroidはもちろんiOSにも存在しません。
游ゴシック以外の設定が反映されるので、游ゴシックに近いヒラギノやメイリオで補填しています。
MacユーザーはWindows環境も用意しておこう
WebサイトはMacとWindowsで見え方が結構異なります。
プロとしてWeb制作を仕事にするなら、「ConoHa for Windows Server
」などのサービスを使って、Windows環境も用意しておいたほうがいいですね。
ちなみにWindowsユーザーがどうやって、第二のIEたる「MacOSのSafari」を検証しているのかはわかりません。誰か情報をください（泣）
游ゴシックを使う際は制約を認識しよう
ここまで見てきた通り、游ゴシックは魅力的なフォントながら、スマホでは適用されないなど、制約が多いフォントです。
デザイナーがもし游ゴシックをどうしても使いたいなら、それなりのお金（Webフォント）や実装の制約を受け入れる必要がありますし、それを「デザイナーとコーダー両方」が正しく認識する必要があります。
游ゴシックを利用する場合は気をつけていきましょう！！
フォントがちゃんと当たっているか確認する方法
HTML初心者からWordPress実案件レベルまでのコーディング演習課題を「専用ページ」にて公開しています。
- Figma,Photoshopデザインからのコーディング
- サーバーアップロードでサイト公開
- プロによる最大3回の表示確認特典
- レビュー返しは爆速
- 2024年にデザイン刷新！被らないポートフォリオ
「初級編」は初めてデザインからコーディングする方向け
「中級編」はJavaScriptやjQueryの練習
「上級編」はWordPressの実案件を模擬体験できるレベル感にしています。
中級者の方には高難易度課題を詰め合わせた「即戦力セット」も出しています。
全課題で「実務レベルの、プロの厳しいレビュー」を受けられるようにしています。
また、2024年には随時デザインの刷新をしており、完全リニューアル！！
他者と差をつけられるポートフォリオが準備できます！
制作会社も使用する専用レビューツールで分かりやすく添削していきます！
基本的に「まとめて購入」していただくとかなりお得になります↓
コーディングは書籍だけではなかなか実力がつかないので、実務レベルのレビューを受けて自身をつけたい人は是非挑戦してみてください！
＼課題の購入はこちらから／
ご寄付を頂けると今後の更新の励みになります！
これを解説している私自身は、Webサイト制作を200件近く行っており、50人近くのフリーランス独立を支援してきた実績があります。