Apple、Google、Microsoft、Adobeが共同開発したバリアブルフォントって何?Webデザイン、これからどうなるの?(全10回)Apple、Google、Microsoft、Adobeが共同開発したバリアブルフォントって何?ひとつのフォントファイルで複数フォントが利用できるバリアブルフォント。一部のフォントでしか利用できないが、一般化していく可能性があるのでチェック(第8回)。キーワードから探るデザイン動向の現在と未来』の一部をWeb担向けに特別にオンラインで公開しているものです。30バリアブルフォントバリアブルフォント3行で理解!ひとつのフォントファイルで複数フォント利用できる新しい技術で、まだ完全には利用できないレスポンシブデザインに合わせてフォントを調整できるApple、Google、Microsoft、Adobeが共同開発し、2016年9月に正式発表された新しいフォントの概念であるバリアブルフォント。一部のフォントでしか利用できないが、これから一般化していく可能性があるのでチェックしておきたい。可変フォントの標準化されたデザインスペース。[1]バリアブルフォントとは?バリアブルフォントとは、「ひとつのフォントファイルでありながら複数のフォントのように利用できる」フォントであると、アドビのタイプデザイナーであるジョン・ハドソン氏が定義しています。ご存知のように、フォントは元々ウェイトや幅などによって別々のフォントファイルが存在していて、イラストレーターやフォトショップ等のデザインソフトウェアで利用する場合も、それぞれのPCにフォントファイルをインストールして利用していました。前節でも述べたように、同じフォントでも複数のウェイトを使いたい場合は、それぞれ別々のファイルを用意して読み込ませる必要がありました。使いたいフォントが多ければ多いほど、フォントファイルをページに読み込む時間がかかってしまうということです。バリアブルフォントは、ひとつのフォントファイルの中にフォントを可変させる情報を持たせることで、この問題を解決しました。「ブラウザーによっても、スマホによっても見た目がちょっと違うな...」バリアブルフォントは、こうしたWebフォントにおける悩みを解決する可能性を持っています。現在のフォント制作の概念は、ひとつのフォントを作っても、その他のウェイトを制作するためには、すべてデザインし直して、ひとつひとつまたフォントを作らなければなりません。そのため、ウェイトが少なければその中から利用するしか方法はなく、たとえ利用したいフォントがあってもウェイト選択の幅がなくて諦めたことはないでしょうか。バリアブルフォントは、ひとつのフォントファイルの中にフォントの太さや幅、傾斜などの可変情報を持たせておくことで、デザインに合わせて自由に調節することができます。フォント制作自体の概念を変化させる可能性を持っています図1。図1ウェイト、幅が自由に変更できる。[2]すべてのフォントがバリアブルフォントベースになると、Web上で読み込む必要があるフォントファイルはフォント1種類につきひとつで済むことになり、読み込みの負荷を考える必要がなくなります。Site」は、カスタムフォントとして以下の各ウェイトのフォントファイルを使用していました。2017」だけを読み込み、デザインに合わせてウェイトを細かく調整することができるようになります。いった調整ができるようになると、Webデザインでは一般的になっているレスポンシブデザインにおけるフォントの使い方にも変化が起きます。レスポンシブデザインは、さまざまなスクリーンサイズに合わせてデザインを変化させるデザイン手法です。現在、レイアウトやフォントサイズを変更することはできますが、ウェイトは別ファイルを使用しなければ変更することができません。PCやデバイスに搭載されているさまざまなブラウザーによっても、太さがまったく違い、完全に統一することは難しい状況です。した中、バリアブルフォントによる自由なウェイトコントロールは、こういった問題を解決する手段になるかも知れません図2。図2_1図2_2図2_3図2_4図2_5エリック・ヴァン・ブロックランド氏によるレスポンシブレタリング例。ウェイトが可変する様子がイメージできる。[3]サポート状況バリアブルフォントを実用化していくには、レンダリングエンジンや各ブラウザー、そしてデザインするためのソフトウェアの対応が必要です。11のみで、Chromeはβテスト中であり、Firefoxは別途設定することで利用することができます。Preview版からDirectwWriteで動作するバリアブルフォント「Bahnschrift」が、macOS最新版でも「Skia」というバリアブルフォントがインストールされています。2018からPhotoshopとIllustratorともにバリアブルフォントに対応し、Typekitからもテスト版のバリアブルフォントが利用できるようになっており、着々と標準化への準備が行われています図3。図3_1図3_2AdobeCC2018でテスト版として表示が確認できるフォント。ソフトウェアのUIもバリアブルフォントに合わせて設計されている。価格:2,000円+税ISBN:978-4-8443-6730-7発行:エムディエヌコーポレーション常に進化し続けるWebデザインの「最新」と「これから」がわかる。新しい手法の意義と効果を知る本書は、「UI」「レイアウト」「グラフィック」「タイポグラフィ」「配色」の5つをテーマに、さまざまな手法で作られた実例とその意義・効果を知ることで、Webデザインの最前線とこれからのデザイントレンドを一望できる内容になっています。各分野の第一線で活躍するクリエイターや識者が、「いまのWebデザイン」に対する独自の意見や見解を交えた「オピニオンコラム」も掲載。Webの制作・発注に関わるすべての人々、そしてグラフィックなど他のデザインに携わる方にも必ず役立つ一冊です。http://b.hatena.ne.jp/entry/https%3A%2F%2Fwebtan.impress.co.jp%2Fe%2F2018%2F05%2F09%2F28489。