「ﾈｺﾁｬﾝエディター」を作ってみた。〜瞳孔から毛並みまで、自分だけの猫をかたちに〜

近年、猫と人間の関係は大きくアップデートされ、新たな時代が到来しています。

本連載「ネコラボ通信」は、電通のクリエイティブR＆D組織「Dentsu Lab Tokyo」内に発足した猫専門イノベーションチーム「Neko Lab Tokyo」（以下、ネコラボ）のメンバーが持ち回りで登場。テクノロジーとアイデアを掛け合わせた、猫にまつわる最新プロジェクトやユニークな研究開発をお届けしていきます。

今回は、8月8日「世界猫の日」に向けて公開したネコラボのウェブサイト（https://neko.dentsulab.tokyo/）をご紹介。

ネコラボメンバーのアートディレクター根岸桃子、CMプランナー／コピーライターの秋澤瑞穂、そして実装を一手に担ったDentsu Lab Tokyoのクリエイティブ・テクノロジスト、山岸奏大の鼎談で制作過程を振り返ります。

※ネコチャンエディターの「ネコチャン」は半角表示が正式名称です。
 

きっかけはロゴ制作

根岸：アートディレクターの根岸です。今回制作したウェブサイトのビジュアルを担当しました。学生の頃から猫をモチーフにした作品を制作していて、この連載「ネコラボ通信」のイラストも描いています。

秋澤：CMプランナー／コピーライターの秋澤です。今は猫と暮らしていませんが、過去に飼っていた猫のみとりの経験を生かしたくてネコラボに参加しました。今回のプロジェクト、最初はウェブサイトではなく、ネコラボのロゴを作ろうとしていたんですよね。

根岸：そうなんです。当初はネコラボらしく、テクノロジーを使った「ダイナミックアイデンティティ（※）」を作れたら面白いよね、と話していました。

※ダイナミックアイデンティティ＝
デザインを一つに固定せず、用途や状況、文脈に合わせて柔軟に変化させるデザイン手法。

根岸：でも、このタイプのロゴはプログラムで制御する必要があり、経験のない私たちには難しかったので、コンピュータを使ったビジュアライゼーションを得意とするクリエイティブ・テクノロジストの山岸さんに手伝ってもらうことにしたんです。

山岸：ふだんはクリエイティブコーディングと呼ばれる手法でのグラフィック制作や、ツールから作ることで新しい表現を探索している山岸です。

猫をテーマに動くロゴを作りたいと相談を受けたものの、猫を飼ったことがなかったので、まずはメンバーの家で猫と触れ合うところから始めました。猫の涙や抜け毛など、はた目に見ているだけだとなかなか意識することのない、生き物としてのリアリティを感じられて面白かったです。今回の表現には結びつきませんでしたが（笑）。

秋澤：猫をモチーフにしたロゴとして、「シュレーディンガーの猫」とか、「遠目ではネコっぽく見える日用品」とか、いろんな案が出ましたね。最終的に、猫の特徴は形や瞳孔の動きによって表情や印象が大きく変わる「目」に表れるのではと考え、まずは「猫の目」を起点に試作を始めました。

「猫らしさ」をデータから表現する？

山岸：そういえば当初は、猫の生態にまつわるデータを元にしたビジュアライズも検討していましたね。

根岸：はい。例えば、猫の行動が明け方や夕方に活発になることを「薄明薄暮性（はくめいはくぼせい）」と言うのですが、その研究について調べたり、猫にまつわるさまざまなデータを集めることから始めました。

秋澤：猫は一日中寝ているイメージがあり、「寝子」が語源という説があります。猫の睡眠時間や睡眠パターンを科学的に研究したデータなども参照しました。これら「薄明薄暮性」や、睡眠時間などの「猫の行動パターン」を、ビジュアライズ時のパラメータにできないか、と考えたり。

山岸：猫の瞳孔は明るいところでは細くなり、暗いところでは丸くなりますが、明るさと瞳孔のサイズの関係についても調べました。照度が10倍になると、瞳孔直径は1.5〜2ミリずつくらい小さくなるという研究結果があります。

根岸：他にも、猫の毛の色や模様は遺伝によって決まると言われているので、これらをAIでシミュレーションするのはどうか、なんてアイデアも出ましたね。

ただ、調べれば調べるほど、私たちが考える猫のかわいさは、データだけでは表現しきれないのではないかと……。

秋澤：そうなんです。科学的な知見を参考にしつつ、最終的には「見た瞬間に猫らしい」と感じられるデフォルメとのバランスを大切にしました。

ロゴを作るはずが……。猫顔メーカー制作へ

秋澤：検討を重ねるうちに、「これはロゴよりも体験として楽しめるコンテンツにしたほうが面白いのでは？」という話になって。目だけではなく、猫の顔全体を作れる現在の「ﾈｺﾁｬﾝエディター」へと発展していきました。

自主プロジェクトだったこともあり、途中で方向転換できたのは大きかったですね。

根岸：ロゴはどうしても最終的に一つの形へ収束させる必要があります。でも試作を続けるうちに、「猫らしさ」って一つじゃないよね、という感覚が強くなってきたんです。

目の形も、柄も、毛並みも、猫ごとに全然違う。その違いを削ぎ落として一つのロゴにするよりも、一匹一匹の個性を自由に表現できる仕組みのほうが、ネコラボらしいのではないかと思うようになりました。

山岸：技術的にも、その方向性のほうが相性が良かったですね。ロゴを動かすためのプログラムを作るのではなく、パラメータを操作して猫の表情や柄を変えられるツールとして設計することで、テクノロジーの面白さも生かせると感じました。

秋澤：自分で猫を作って遊んでもらうほうが、猫の個性や魅力を体験として伝えられますよね。そこからウェブサイト全体も、「ﾈｺﾁｬﾝエディター」を中心に組み立てることに。

根岸：なので、ネコラボのロゴはいまだに完成していないんです（笑）。

表情を決める「目」の描き方

山岸：「ﾈｺﾁｬﾝエディター」は大きく２つの機能からできています。目・鼻エディターと、毛のエディターです。最初に根岸さんにデフォルメの方向性や表情の理想形を作ってもらい、まずはそれを再現する形でツールに落としていきました。

根岸：はい。私は普段描いている猫のイラストをベースに、目の輪郭や虹彩、瞳孔の大きさや色、目と鼻の位置などを一つ一つ整理していきました。同じ猫でも、ほんの少し瞳孔が開くだけで幼く見えたり、りりしく見えたりするので、その微妙な違いを調整できるようにしています。

秋澤：初期の試作では、目を現実にはありえない形や大きさに変えられるなど、良くも悪くも自由度が高すぎる設計だったため、猫らしいリアリティと遊び心のさじ加減を調整していきました。

リアルとかわいさの間。理想の毛並みをどう表現するか？

根岸：今回いちばんこだわったのは猫の毛並みや柄の表現方法です。最初は、毛並みをストライプの密度でグラフィカルに表現することを考えていたのですが、単純なストライプでは模様の複雑さを表現できなくて悩んでいたところ、山岸さんが私たちでは絶対思いつかない方法を提案してくれて。何でしたっけ……？なんとかノイズ。

山岸：パーリンノイズです（笑）。CGやゲーム開発で自然界のような滑らかな「ゆらぎ」や「質感」を人工的に作り出すために使われる擬似乱数アルゴリズムで、雲や煙、炎、岩肌などのリアルな模様を描き出す用途に使われます。

これを猫の毛並みの表現に使ってみてはどうか、と考えたんです。試作を重ねる中で、パーリンノイズを使うと、滑らかな毛並みからボサボサな毛まで、あるいは繊細でリアルな質感から抽象的でグラフィカルな見え方まで、多様な表情を作り出せることがわかりました。

根岸：このなんとかノイズ（笑）のおかげで、アナログな手段では難しかった毛並みのニュアンスを表現できるようになりました。一方で、リアルすぎると少し怖く見えてしまうので、グラフィックとしてのかわいさは最後まで意識しました。

秋澤：ハチワレや三毛、サビなどを再現するためのペイント機能も実装しています。

山岸：根岸さんや秋澤さんに使ってみてもらったところ、猫ではなくパンダを描いたり、手前に花畑を描き加えたり、私が想定していないような使い方をしてくれたのがうれしかったですね。UGC（ユーザー・ジェネレーテッド・コンテンツ）としてみんなに楽しんでもらえるものになりそうな可能性を感じました。

デザインとテクノロジーの出合い

根岸：この頃、プロジェクトのゴールを「これはウェブサイトそのものにしよう」という方向に決まりました。トップページを「ﾈｺﾁｬﾝエディター」にして、メンバー紹介もこのツールで作ったビジュアルを使用して、アーカイブも残せるような構成にしました。

秋澤：山岸さんが素早くプロトタイプを作ってくれたので、追加のアイデアも考えやすかったです。たとえば、各ページでしばらく放置するとてんとう虫が現れる仕組みは、当初は目がカーソルを追いかけるだけでした。それを早い段階で確認できたからこそ、滞在するほど新しい発見が生まれるサイトへ発展できました。でも、あれこれ相談しちゃったので山岸さんは大変だったと思います……。

山岸：いえいえ（笑）。実は今回の実装ではAIによるVibe Coding（※）もしています。これまでなら数日かかっていたことが数分で再現できるようになり、対面で話し合いながらその場で修正したり、項目ごとに微調整用のUIを構築して言語化しづらい心地よさを取り入れたりと、開発プロセス自体が大きく変わったことを実感しました。

※Vive Coding＝
AIに自然言語で作りたいアプリのイメージを伝え、コードを生成しながら開発する手法。

根岸：山岸さんは今回のようにアートディレクターやデザイナーと組んで制作することは多いのですか？

山岸：そうですね。「テクノロジスト」という肩書でも専門性が多様で、機械に強い人、手広くリサーチすることにたけている人などさまざまですが、自分は新しい視覚表現や体験をテクノロジーによって探求することが好きなタイプなんです。なので、「新しい表現を探るために、作り方から作りたい」というアートディレクターと一緒に、実験的なグラフィック制作に挑戦する仕事がいくつかあります。

根岸：私たちの仕事は一人で完結することはあまりなくて、コピーライターやフォトグラファー、イラストレーターなど、いろいろな専門家の方と共同で制作をすることが多いです。今回はじめて、テクノロジーに精通したメンバーとの制作を経験して、自分たちだけでは思いつかなかった表現や発想がたくさん生まれました。

「ﾈｺﾁｬﾝエディター」のその先へ

秋澤：「かわいい猫のアイコンを作るツール」で終わるのももったいないですよね。たとえば、保護猫団体と連携して、里親募集をしている猫たちをこのツールで紹介したり、SNSでシェアしやすい形にしたり。猫の魅力を伝える入り口として使ってもらえたらうれしいです。

根岸：サビ猫のように「かわいいのに、なかなか人気が出にくい」と言われる猫たちにも光を当てられたら、という話も出ました。サビ柄は写真だと魅力が伝わりづらいこともありますが、模様の美しさや個性をグラフィカルに表現することで、「こんなにかわいいんだ」と知ってもらうきっかけになるかもしれません。見た目の印象だけでなく、一匹一匹の個性に目を向けてもらえるような仕掛けを作れたらいいですね。

山岸：技術的にもまだまだ発展の余地があります。今は自由に猫を作るツールですが、写真から愛猫らしい特徴を抽出したり、表情や毛並みをより自然に再現したり、AIや画像解析を組み合わせればできることはもっと広がっていくと思います。

根岸：作った猫顔をグッズにしたり、イベントで使ったり、猫をテーマにしたキャラクターやIPとのコラボレーションもできそうですよね。自分の猫をきっかけに猫好き同士がつながるような体験も作っていきたいです。

秋澤：ネコラボは、好奇心と創造力で、猫と人との関係をより良くしていくプロジェクトチームです。「ﾈｺﾁｬﾝエディター」もその第一歩。楽しさやかわいさを入り口にしながら、保護猫や猫との暮らしについて考えるきっかけまで届けられるプロジェクトへ育てていきたいと思っています。

山岸：まずは、その前に……。

根岸・秋澤：ロゴ、作りましょう（笑）。 

イラストレーション：根岸桃子（Neko Lab Tokyo）

お問い合わせ：neko-lab-tokyo@dentsu.co.jp