デザインにもどんどん人工知能がすごいぞ!ディープラーニングで、フォントの最適な組み合わせをつくりだす
Post on:2017年7月25日
先日の記事で、カラーセオリーに基づいた学習型AIで色の組み合わせを作成できるツールを紹介しました。デザインの世界にも人工知能がどんどん進出しているように感じます。
今回は、フォントの最適な組み合わせをつくりだすことができるツールを紹介します。

Fontjoyは、フォントの組み合わせを作成するための学習型AIです。
実用性も高く、普段使用するフォントに最適な組み合わせを導き出すことができます。

左サイドバーでフォントを選択し、右パネルに最適な組み合わせが表示されます。
フォントを指定するには、右パネル・左サイドバーの横線アイコンをクリックします。

フォントの指定
フォントは「Lato」にしてみました。

Latoのウェイト一覧
フォントを指定すると、すぐに最適な組み合わせが表示されます。

Latoに最適な組み合わせ
そして、ここからが本ツールのメインです。
左サイドバーのアイコンをクリックして、「Lato」を固定します。

フォントを固定
右パネルの「Generate」ボタンをクリックすると、次々に組み合わせが表示されます。

Latoに最適な組み合わせ
「Generate」ボタンの右にあるスライダーで、組み合わせる時のテーマを指定できます。

組み合わせのテーマを変更
左にスライドするとコントラストの強弱、右にスライドすると類似の強度です。

コントラストの強い組み合わせ
「high contrast」にすると、メリハリがあるフォントの組み合わせになります。

Latoに最適な組み合わせ
Fontjoyの仕組みはフォントを画像化し、フォントがどのように見えるか視覚情報を演算して、フォントを比較しているそうです。どんな感じかは、下記ページで確認できます。

sponsors