UGA Boxxx

つぶやきの延長のつもりで、知ったこと思ったこと書いてます

【デザイン】ヒラギノと游ゴシック

デザイナーにいままで「ヒラギノ角ゴ」を使っていたのを「游ゴシック」にしたいと言われた

この時のWebフロントエンド実装における問題点などを調べた

そもそも游ゴシックとは?

字游工房のサイトにあった

游ゴシック体ファミリーは、游明朝体と一緒に使うことを想定して開発された、スタンダードな角ゴシック体ファミリーです。 ややフトコロがせまい漢字と、伝統的なスタイルを持ったすこし小さな仮名の組み合わせが、このファミリーの大きな特徴です。
字游工房|JIYUKOBO | 游ゴシック体開発ノートより

やや細っそりしてシュッとしている?  

f:id:uggds:20220123144312p:plain
游書体ライブラリー - 游ゴシック体ファミリー

というか、この引用ページおもしろい

特に遊ゴシックをつくったデザイナーへのQAがよい

Q : 游ゴシック体はどんな場面でつかってほしいですか? A : 今回のLとHはともに見出し用と考えています。曲線が多くて癒し系の書体だとおもいます。静かに長く使ってもらえればうれしいです。 特にLは縦画の起筆やハライの先端に拡大しないとわからないような細かい処理が施されいるので、Lを大きく使ったものを見てみたいですね。それから全く反対ですがLの本文も見てみたい。だれか使ってくれないかな。明るいというか、白い紙面になるはず。でも勇気いるだろうな。

なんで流行っているのか?

Windows10の標準のフォントが游ゴシックになったのでマイクロソフトが推してる?

より見やすいフォントとして認知されはじめたからっぽい

問題点

以下のサイトがまとめてくれていた

sinciate.co.jp

また、以下の問題点もみつけた

  • MacにはLightがない

注意点

以上より、利用するのはよいが、以下のことに注意しておくべきとデザイナーに伝えるのがよさそう

  • スマホは「游ゴシック」が使えないので「ヒラギノ角ゴ」のままになる
  • MacもサポートするのでフォントウェイトはMedium / Boldだけにする必要がある
  • IEは要確認(死に体だから無視でもよいかも)

特にスマホとPCでフォントファミリーをわけるのはFigmaのVariantsの作り方に影響がありそう

あるUIパーツをVariantsにした場合、厳密にやるならスマホとPCで使い分けしないといけないが、きっと手間だろうから、Figamaではどちらか一方のフォントに統一した方がよいと感じた

Font-Familyをどうつくるか

これはこちらの記事を参考にした

【游ゴシック】macとwinの差異! – スタッフブログ

3パターンを試したみたい

  • "游ゴシック"の記述のみ
    macとwinで名称が違う(末尾に「体」ありなしの)ため反映されない
  • "游ゴシック", "游ゴシック体"と記述
    英語名も記述をしないとSafariが反映されない
  • ”Yu Gothic Medium”, “游ゴシック Medium”, YuGothic, “游ゴシック体”と記述
    • 名称:winとmacで等しく表示するため「体」ありなしの両方を記載
    • ウェイト:windowsでかすれて表示されるのを防ぐため記載
    • 英語名称での記載:すべてのブラウザで等しく表示するため記載

最後の指定が結果よいみたい