2017年06月22日 19時00分デザイン

マウスの動きに合わせて形状変化するフォント「Spectral」

GoogleのパートナーであるProduction Typeによりデザインされたフォントのひとつが「Spectral」です。このフォントは数回のクリックだけでオリジナルのフォントが作れる「Prototypo」で作られた初のGoogleフォントとなっています。

SpectralはGoogleが公開しているウェブフォントのオープンソースディレクトリである「Googleフォント」で公開されています。

Spectral - Google Fonts

Googleフォントで公開されているのはユーザーの閲覧環境に関わらず同じフォントを表示するためのウェブフォントですが、Spectralは「Googleフォントで公開されているウェブフォント」というだけでなく、「通行人の動きに合わせて見た目が変化するフォント」のような真にレスポンシブなフォントを目指して作られたものだそうです。

そんなSpectralの特性をよく示しているのが以下のページ。

Spectral, the first parametric Google font by Prototypo.
https://spectral.prototypo.io/

上記URLにアクセスすると、画面の至る所にマウスの動きに合わせて形状を変化させるフォントが埋め込まれています。
例えばフォントの線が変化したり……

⌛️ The biG announcement is scheduled for wednesday... Get ready! pic.twitter.com/cVoGCSMOQR
— Prototypo (@prototypoApp)

フォントの横幅が変化したり……

Be patient a bit more, we've got somethinG huge coming for you tomorrow! pic.twitter.com/0sZafe5SyG
— Prototypo (@prototypoApp)

フォントのさまざまな変化が楽しめるようになっているわけ。

Try Spectral, the first parametric Google font.
Exclusively available in Prototypo!https://t.co/rJvuPjkOlF pic.twitter.com/kOaYoLInUN
— Prototypo (@prototypoApp)

実際にページ上のフォントの形状変化をムービーにするとこんな感じ。

マウスの動きに合わせて形状変化するフォント「Spectral」 - YouTube

また、Spectralを作成したフォント作成ツールのPrototypoでは、自作のフォントを作る際にテンプレートとして使用するフォントとしてSpectralが選べるようになっています。

Prototypo - Typedesign Tool
https://app.prototypo.io/