{tocify} $title={Table of Contents}
UIフォントを選ぶときのポイント
UI(ユーザーインターフェース)フォントとは、アプリやウェブサイトなどのインターフェースで利用されるフォントのこと。可読性が高く、視認性に優れることが求められ、小さなサイズでも読みやすいように設計されています。
①可読性:文字の形が明確で、長時間見ても疲れにくいものが理想
②視認性:小さなサイズや異なる画面でもはっきり読めるかが重要
③柔軟性:太さやスタイルのバリエーションが豊富
今回、上記3つのポイントをクリアした代表的な日本語UIフォントを厳選しました。すべてゴシック体です。次で一挙紹介します。
日本語UIフォント10選
今回厳選した日本語UIフォントはすべてAdobe Fontsのものなので商用利用可です。商業目的で安全に使えます。使い方は以下の記事で解説しています。
各サンプル画像の文字サイズは36、ウェイトはレギュラーまたはミディアムで統一しています{alertSuccess}
源ノ角ゴシック - 日中韓 日本語
約46万グリフから成る大規模なフォント。7種類のウェイトを持ち、最も主流なUIフォントの一つです。
フォントにおけるウェイトとは、文字の太さのことを指します。一般的に「Light」「Regular」「Bold」などの名称で分類されます{alertInfo}
IBM Plex Sans JP
IBM Plex Sansは、IBMが開発した、個性的でありながら時代に左右されないフォントファミリーです。公式ページによると、開発の原点はタイプライターとのこと。
8種類とウェイトが豊富なので、タイポグラフィの調整が柔軟にできます。若干丸みのある文字が親しみやすさを与えます。
游ゴシック体
文字間にゆとりを持たせることで、文字同士が干渉せず、読みやすい組版を実現しています。3種類のウェイトを持つ、Windowsのシステムフォント。
ヒラギノ角ゴは、SCREEN GAが開発した紙でもWebでも読みやすいフォントです。ウェイトは2種類、Macのシステムフォント。
時代の要求に応えた新しいコンセプトのフォントを目指し、あらゆる媒体に対応できるようデザインされました。のびやかな字面、訴求力の強さが特徴。
小塚ゴシックは、書体デザイナー小塚昌彦氏が手掛けた非常に人気のUIフォントです。筆者がWeb制作していた頃、このフォントばかり使っていました。
Adobe Fontsではウェイト1種類のみの提供です{alertWarning}
ヒラギノ角ゴ ProN
時代の要求に応えた新しいコンセプトのフォントを目指し、あらゆる媒体に対応できるようデザインされました。のびやかな字面、訴求力の強さが特徴。
小塚ゴシック Pro
ウェイトは6種類。比較的行間が広く、一字一字が大きく、そしてはっきり見えるのが特徴です。
平成角ゴシック Std
TOT-雫花ゴシック StdN
BIZ UDPGothic
ちなみに、PCで見てもらえればわかると思いますが、当サイトのWebフォントはこれです。一文にアルファベット・数字、日本語の文字を並べても違和感なくなじむところが気に入ってます。
Noto Sans CJK JP
百千鳥
独創的でユニークな文字なので、世界観を大事にしたいゲームや、ストーリー性のあるアプリなどにおすすめ。
以上、Adobe Fontsにある日本語UIフォントのおすすめを厳選しました。
Webフォントを選ぶときの決め手はやっぱり全体的な雰囲気がマッチするかですよね。それを感じ取るには長文で表示させたり、実際に導入して検証することが必要です。
今回、サンプル画像を撮影するにあたって利用したのがFont Viewer Plusというソフト。以下の手順で手軽にフォントを試せます。
このソフト、最終更新が2017年なのでちょっと挙動がおかしいですが、色々クリックして待ってれば「システムフォント」に既存のフォントが反映されるはずです。
それと、サンプル画像内の以下の文章は一部省略してApple公式ページから引用しました。
最後までお読みいただきありがとうございました。
最後に|UIフォントの検証方法
以上、Adobe Fontsにある日本語UIフォントのおすすめを厳選しました。
Webフォントを選ぶときの決め手はやっぱり全体的な雰囲気がマッチするかですよね。それを感じ取るには長文で表示させたり、実際に導入して検証することが必要です。
今回、サンプル画像を撮影するにあたって利用したのがFont Viewer Plusというソフト。以下の手順で手軽にフォントを試せます。
Adobe Fontsでフォントを追加⇒Creative Cloudデスクトップアプリから手動でインストール⇒Font Viewer Plusを起動⇒システムフォントのタブを開く{codeBox}
このソフト、最終更新が2017年なのでちょっと挙動がおかしいですが、色々クリックして待ってれば「システムフォント」に既存のフォントが反映されるはずです。
それと、サンプル画像内の以下の文章は一部省略してApple公式ページから引用しました。
タイポグラフィの選択は、判読可能なテキストの表示、情報の階層構造の伝達、重要な内容の伝達、ブランドやスタイルの表現などに役立ちます。テキストの読みやすさには、フォントのウェイトも影響することを考慮してください。
最後までお読みいただきありがとうございました。














