GoogleとAdobeのフォントNoto Sans（Source Han Sans）の画期的なところ

2014年7月16日に、Google と Adobe がリリースした Noto Sans（Adobe からは Source Han Sans という名称でリリース）というオープンソースのフォントファミリーは「日本のWebデザイン史上に残る画期的なフォント」だと思ったので記事にしました。

Noto Sans Japanese

これまでの問題

ウエイトの不足

普段Webデザインなどの仕事をされている方でないとあまり気にすることはないかもしれませんが、たとえば Android は、アプリによっては下記のように日本語部分と英数字部分で大きくウエイト（フォントの太さ）が異なることがありました。

Twitter

※この画像は、Nexus 7（Android 4.4）で Twitter 公式アプリを表示した時のものです。
Nexus 7 では Chrome ブラウザーなどでは日本語・半角英数字ともに丸ゴシックで表示され、ウエイトもおかしくないのですが、アプリによってはこのように日本語と半角英数字で大きくウエイトが異なる場合があります。

Web fontsで日本語が利用しづらい

欧米のWebサイトでは Web fonts（Wikipedia）という、フォントファイルをWebサーバーにアップロードし、指定したフォントがインストールされていない環境でもWeb制作者が指定したフォントで表示させる技術を利用したサイトが増えています。

英語サイトで Web fonts を使用したい場合、Google Fonts
などで多数のフォントファミリーが無償で使用できるようになっていますが、日本語の場合

  • TypeSquare（25万 PV/月の場合 2000円〜）
  • FONTPLUS（10万PC/月の場合 1080円〜）

など有償のものが多く、無償で利用できる美しい日本語フォントは M+ WEB FONTS など極めて限られた選択肢しかありません。

また、日本語フォントの場合容量が大きいため、Webページ内で使用しているグリフ（字体）だけを含むフォントファイルを自動生成してそれを Web fonts として使用する場合がありますが、それを行うためには「改変・再配布」が認められているフォントを利用するか、有償の Web fonts サービスを利用する必要がありました。

Noto Sansの画期的なところ

私が Noto Sans が画期的だと感じたのは、以下の点です。

  • 無償で利用できる
  • 改変・再配布できる
  • ウエイト（太さ）が7種類もある
  • 商業デザインでも利用できるクオリティの高さ
  • 各国語の書体デザインが統一されている
  • 漢字も豊富に入っており、旧字体、中国語の字体なども含まれている
  • スマートフォンやタブレットなどのモバイルデバイスで読みやすいようにデザインされている
  • オリジナルフォントを作成する際に組み合わせて利用できる

以下、詳細です。

無償で利用でき、改変・再配布できる

Noto Sans は、オープンソース（Apache 2.0ライセンス）で無償配布されています。
Wikipedia の内容を抜粋すると、以下のようになります。

  • ユーザーがそのソフトウェアの使用や頒布、修正、派生版の頒布をすることを制限しない。
  • 頒布される二次的著作物が同じライセンスで提供されたり、フリーソフトウエア、オープンソースソフトウェアとして頒布されることを要求しない。
  • ライセンスされたファイルそれぞれに元々ある著作権と特許権の記述はそのまま保持されなければならず、何らかの修正が施されている場合は、その旨を追加記述しなければならない。

例えば、Web font として自分のWebサイトで利用したい場合、

  • 無償で利用できるか
  • 改変が認められているか
  • 再配布が認められているか

はとても重要です。

なぜなら、フォントファイル軽量化のためにそのWebサイトで使用されていないグリフ（字体）を抜いたフォントファイルを作成し、サーバーにアップロードする場合があるからです。

さらに画期的だと思うのは、この書体をリリースしたのは Google と Adobe ですが、Android とライバル関係にある Firefox OS などでもこの書体を使用することができるということです。

Firefox OS は、わずか25ドルの超低価格スマートフォン などで利用される予定ですが、そのような低価格端末で高価なフォントを利用することは難しいと思われます。

しかし、Noto Sans があれば美しく読みやすい書体を収録し、世界中にリリースすることができます。
これは、「次の10億人」にインターネット接続環境を提供する上でとても重要なことです。

ウエイト（太さ）が7種類もある

Adobe Photoshop や Illustrator に付属している「小塚ゴシック」や高価な有料フォントを除き、大抵の日本語フォントはあまりウエイトが豊富ではありません。

女性向けのおしゃれな雑誌をデザインしている時は極めて細く、男性的向けに力強い広告バナーを制作している時は極めて太いウエイトのフォントを使用したくなるかもしれませんが、そのような時豊富なウエイトの日本語フォントがあると、とても助かります。

jp-weight
オープンソースの美しい Noto フォントファミリーに日本語、中国語、韓国語が加わりました。 – Google Developer Relations Japan Blog より

ウエイトが豊富にあることで、さまざまなシーンで利用しやすく、他のフォントファミリーと組み合わせての利用もしやすくなります。

商業デザインでも利用できるクオリティの高さ

東京を拠点とするフォント開発チームのシニアデザイナーである西塚涼子は、新しい書体ファミリーの基本デザインを作成しました。
（中略）
西塚涼子によるデザインは、シンプルで線幅の太さがかなり均質な画線で構成される、比較的現代的な様式です。その結果、タブレットやスマートフォンなどの小型デバイスでも読みやすくなります。そのシンプルさにもかかわらず、伝統的なサンセリフの書体デザインに固有の優美さも残しています。そのため、ソフトウェアのメニューにあるような単一行の語句、短いテキストから、電子書籍などでの長い本文テキストにいたるまで、十分な読みやすさを維持します。

The Typekit Blog | Source Han Sansの紹介：オープンソースのPan-CJK書体 より

西塚涼子さんは、Adobe の「かづらき」「りょう」「りょうゴシック」などの書体デザインをされた方です。

「ソフトウェアのメニューにあるような単一行の語句、短いテキストから、電子書籍などでの長い本文テキストにいたるまで、十分な読みやすさを維持」とのことで、これからさらに重要になるモバイルデバイスの UI や電子書籍を意識して作られたというのはとても素晴らしいですね。

さらに、ユニバーサルデザインに基づく「イワタUDフォント」などで有名な書体メーカーである イワタ もこのプロジェクトに関わっています。

各国語の書体デザインが統一されている

各国語の書体デザインが統一されているということは、多言語サイトや多言語アプリで、どの言語で表示した時も同じイメージを保てるということです。
これはとても重要な事だと思いますが、それが実現できるフォントファミリーはこれまであまりなかったように思います。

そして、この書体をリリースしたのが Google と Adobe という有名企業であることも重要だと思っています。

例えば、日本語のフリーフォントで美しく汎用的に利用できるものとして M+ OUTLINE FONTS がありますが、海外の方はそれを知らないと思います。

Noto フォントファミリーが有名になり、さまざまなアプリケーションで利用されるようになれば、この記事の冒頭で紹介した Twitter アプリのようにウエイトの組み合わせがおかしい例もなくなり、世界がちょっと良くなると思います。

Noto は各言語別の OTF をまとめた多言語 OTC （OpenType Collections）という形式になっており、アプリ開発者も多言語対応が楽になるようです。

オリジナルフォントを作成する際に組み合わせて利用できる

オリジナルの日本語書体を制作しようと思った時、ひらがな・カタカナはいいとして、漢字まで制作するのは大変な手間がかかります。

しかし、Noto は漢字が豊富に含まれ、7つものウエイトがあり、改変・再配布も可能なので、自分でひらがな・カタカナのみ制作し、漢字は Noto の漢字を組み合わせる、といったことも考えられます。

Noto には極太書体から極細書体までさまざまなウエイトがあるため、いろいろな書体と組み合わせやすいと思います。

「Noto」の名前の由来

When text is rendered by a computer, sometimes there will be characters in the text that can not be displayed, because no font that supports them is available to the computer. When this occurs, small boxes are shown to represent the characters. We call those small boxes “tofu,” and we want to remove tofu from the Web. This is how the Noto font families got their name.

from Google Fonts Noto Sans

日本語に要約すると「コンピューターで表示されないテキストは、白い四角形で表示されることがあります。私達はそれらの小さな箱を『豆腐』と呼びます。私達はWebから豆腐を取り除きたい。このようにして、Noto フォントファミリーの名前が決まりました」といったことが書かれています。

※誤訳があれば @Stocker_jp まで教えて頂けると幸いです。

つまり、「No tofu」で Noto という名前になったようです。
まさか日本のネットスラングとは…

豆腐自体は中国などでも食されているようですが、ひょっとして中国でも白い四角形のことは豆腐と呼ばれていたりするのですかね？

Notoのダウンロード

下記ページを表示して読み込み完了まで待ってから、「Noto Sans Japanese」の右の「Download」をクリックすると、日本語書体一式（7ウエイト）がダウンロードできます。

Google Noto Fonts

オリジナルソースは noto – Fonts that support all languages/characters in Unicode – Google Project Hosting より（開発者向け）。

Adobe Typekit を利用されている方であれば、Typekit.com から Source Han Sans Japanese をダウンロードし、利用できます。
フォントファミリー名は異なりますが、日本語書体は Google Noto Fonts と同じです。欧文書体は Noto とは少しデザインが異なるようです。

オリジナルソースは adobe-fonts/source-han-sans · GitHub および Source Han Sans – Browse Files at SourceForge.net からダウンロード可能です（開発者向け）。

If you like this article click the Facebook “Like” button to share it with your friends!