Adobeから自由自在に新しいフォントを作り出せる技術「Project Faces」が登場
![](https://i.gzn.jp/img/2015/10/08/adobe-project-faces/top_m.jpg)
ソフトウェア会社のAdobeが、サンフランシスコで開催中の「Adobe Max 2015」で、開発中の新技術を披露する基調講演を行いました。基調講演ではさまざまな新しい技術が紹介されましたが、その中でも特に反響が大きかったのが「Project Faces」という、フォントの骨格を解析して自由自在に新しいフォントを作成できる技術です。
Adobe MAX 2015 - Sneaks - Project Faces - YouTube
![](https://img.youtube.com/vi/bcUo9ULvVq4/maxresdefault.jpg)
デザインの際に頭を悩ませることの1つは、そのプロジェクトに適したフォントを選ぶ作業。既存のフォントを使いたくないときは、フォントを変形させたりするのですが、その作業は時間がかかり過ぎるそうです。
![](https://i.gzn.jp/img/2015/10/08/adobe-project-faces/001_m.jpg)
その問題を解決すべくAdobeはアプリケーションを開発中。そのアプリケーションのプロトタイプをiPad上で動かすというデモが行われました。スクリーンに大きな「P」が表示されていて、その下に2つの調節バーがあります。
![](https://i.gzn.jp/img/2015/10/08/adobe-project-faces/002_m.jpg)
上のバーを右にスライドするとPが太くなりました。
![](https://i.gzn.jp/img/2015/10/08/adobe-project-faces/003_m.jpg)
下のバーを左に動かすと、特定の部分を基準点にしてPが小さくなったり……
![](https://i.gzn.jp/img/2015/10/08/adobe-project-faces/004_m.jpg)
大きくなったりします。これがフォントの骨格を解析して、形を自由自在に調節する新技術のProject Facesです。
![](https://i.gzn.jp/img/2015/10/08/adobe-project-faces/005_m.jpg)
これがアプリのプロトタイプの画面。画面左には「Weight」「Crossbar」「Width」「Slant」「Contrast」「Curves」といった調節バーが表示されています。
![](https://i.gzn.jp/img/2015/10/08/adobe-project-faces/006_m.jpg)
アルファベットを選択してCrossbarを左に寄せると、縦の画線に挟まれた水平画線のクロスバーが上に移動し、フォントがギュッと上に寄った形に変わりました。
![](https://i.gzn.jp/img/2015/10/08/adobe-project-faces/007_m.jpg)
右にスライドすると、クロスバーの位置が下がります。
![](https://i.gzn.jp/img/2015/10/08/adobe-project-faces/008_m.jpg)
Weightを右に振れば線が太く。
![](https://i.gzn.jp/img/2015/10/08/adobe-project-faces/009_m.jpg)
左に振ると線が細くなります。
![](https://i.gzn.jp/img/2015/10/08/adobe-project-faces/010_m.jpg)
Contrastを調整すると、文字全体の線の太さが変化しました。
![](https://i.gzn.jp/img/2015/10/08/adobe-project-faces/011_m.jpg)
Slantは傾き調整。
![](https://i.gzn.jp/img/2015/10/08/adobe-project-faces/013_m.jpg)
驚いたのが「Serifs」というメニューで、これは起筆部や終筆部を飾る線のセリフを調節できる機能です。
![](https://i.gzn.jp/img/2015/10/08/adobe-project-faces/014_m.jpg)
「Effects」というメニューのデモ。
![](https://i.gzn.jp/img/2015/10/08/adobe-project-faces/015_m.jpg)
Centerlineを調節してみます。
![](https://i.gzn.jp/img/2015/10/08/adobe-project-faces/016_m.jpg)
Centerlineを右に振ると、フォントの骨格の中心にあった白線が太くなりました。
![](https://i.gzn.jp/img/2015/10/08/adobe-project-faces/017_m.jpg)
一番右まで振ると輪郭だけに。
![](https://i.gzn.jp/img/2015/10/08/adobe-project-faces/018_m.jpg)
次は「Offset」
![](https://i.gzn.jp/img/2015/10/08/adobe-project-faces/019_m.jpg)
右にスライドすると、フォントがセンターラインをググッと前に突き出した形に変形。
![](https://i.gzn.jp/img/2015/10/08/adobe-project-faces/020_m.jpg)
Offsetを左に振ると、こんな感じ。
![](https://i.gzn.jp/img/2015/10/08/adobe-project-faces/021_m.jpg)
今度は単語を使ってデザインのデモ。
![](https://i.gzn.jp/img/2015/10/08/adobe-project-faces/022_m.jpg)
まずは、Widthを右に振ってフォントの幅を広げます。
![](https://i.gzn.jp/img/2015/10/08/adobe-project-faces/023_m.jpg)
次はWeightで線を太く。
![](https://i.gzn.jp/img/2015/10/08/adobe-project-faces/024_m.jpg)
Curvesで曲線部分を調節し……
![](https://i.gzn.jp/img/2015/10/08/adobe-project-faces/025_m.jpg)
最後はEffectsのStencilでステンシル加工。
![](https://i.gzn.jp/img/2015/10/08/adobe-project-faces/026_m.jpg)
作成したフォントはSVG形式やPNG形式の画像データや、フォントデータとして保存可能。さらには、共有機能まであるようです。
![](https://i.gzn.jp/img/2015/10/08/adobe-project-faces/027_m.jpg)
ユーザーがフォントを自由自在に調整して新しいフォントを作成できるのはかなり画期的。ただし、フォントの著作権についてはまだまだ議論の余地がありそうです。
・関連記事
フォントは人間の感情にどのように作用するのか? - GIGAZINE
Adobeのデジタルペン&定規「Ink & Slide」を使ってみたムービーレビュー - GIGAZINE
絶対フォント感を持つ人に送る超激ムズのクイズゲーム「フォント検定」 - GIGAZINE
魔法の画像編集ソフトPhotoshopのツールが搭載された無料スマホアプリ「Adobe Photoshop Fix」を使ってみた - GIGAZINE
Adobeのお絵かきアプリ「Adobe Sketch」と一緒に使えるスタイラス「Jot Touch with Pixelpoint」を使ってみました - GIGAZINE
・関連コンテンツ
in ソフトウェア, 動画, デザイン, Posted by darkhorse_log
You can read the machine translated English article 'Project Faces' technology that can crea….