声の特徴を AI が解析しユーザー独自の「フォント＋イメージ」が生成される驚きのコンテンツ fontgraphy
AI とデザインを掛け合わせた興味深い作品
今回ご紹介するのは、DeNA 社が提供するモバイル端末専用のウェブサイトです。
モバイル専用なので PC からはトップページしか見ることができないのですが、PC 版のページには QR コードが掲載されているので、モバイル版でのプレビューも簡単だと思います。
こちらのサイトではユーザーの音声をマイクの入力から受け取り、それを AI が解析して結果が様々に変化する仕掛けになっています。
ぜひマイク入力を有効にして楽しんでみてください。
リンク：
実際に動作させてみた様子をご紹介
今回のサイトはモバイル専用ということもあり、また音声の入力が必要ということもあるので、今電車のなかでこれを読んでる……みたいな感じだとなかなか実体験するのが難しいかなと思いますので……
ここでは私の音声で実際にサイト上で動作している様子をご紹介していこうと思います。
AI とデザインをテーマに DeNA が取り組んできた研究開発の成果として今回のサイトがローンチされている形のようなんですが、その研究開発とはまた別の意味で、WebGL が随所で効果的に使われておりビジュアル面でも楽しめる一作となっています。
サイトに訪れたら、まずはマイク入力を許可してやると、チュートリアルがスタートします。もう最初のこの場面から、背景にはバリバリの 3D シーンが描かれていて、どこか近未来的な雰囲気です。
サンプルボイスを利用したチュートリアルが終わると、今度は実際に音声を入力する画面へとシーンが変化します。
ここでは、背景にカラフルな薄いレイヤーのようなものが登場する（この上の画像のシーン）のですが、音声を入力する操作を行っている際はこのレイヤー部分が音声に反応して動くようになっていますね。
まるで音声入力の波形が可視化されているような感じで、なんともかっこいいです。
そして、無事に音声の入力が完了すると、声の特徴が AI によって解析されて…… パラメータを可視化したグラフとして表示されます。この上の画像が、実際に私の声の情報を解析した結果の表示ですね。
グラフの表示も、なんとなく流体っぽいというか…… インクがゆらゆら流れているかのような動的なグラデーションになっていて美しく描画されています。
また、上の画像の中心部分を見るとアルファベットの A の文字が書かれていると思うのですが、この A の文字は、音声の解析結果からイメージの近いフォントを自動的に選択して表示しているみたいです。
さらに、フォントの場合と同じように、音声解析の結果からイメージ画像も自動的に選択されるようになっています。
私の場合は、ちょっと和柄っぽい感じの、丸い模様を基調にしたイメージが選択されました。
今回のサイトでは、リアルタイムに音声を解析した結果から、フォントとイメージが選択され、これをサイト名にもなっている fontgraphy と呼んでいるわけですね。
ちなみに、他のユーザーがこちらのサイトで行った音声解析の履歴なども見ることができるようになっていて、これを見る限りフォントの種類やイメージ画像のパターンは相当種類がたくさんあるっぽいですね……
この過去の事例を選択すると、動的にフォントとイメージ画像が合成されていく様子なども、リアルタイムに逐一見ることができるようになっています。
このあたりは、あまり WebGL 実装では見かけないような表現というかアニメーション処理なので、かなり参考になると思います。（ちなみにフロントの実装は 株式会社ホムンクルス さんみたいなのですが、今回もさすがのクオリティです……）
この記事では当サイトの性質上、WebGL 関連の話がどうしても中心になってしまいましたが、公式サイトには、実装した製作者さんたちのインタビュー記事や、フォントデータを提供している Monotype 社の方のメッセージなども掲載されています。
ぜひチェックしてみてください。
