デザインと実装、デザイナーの葛藤

ライゾマティクス・木村浩康さん（以下、ライゾマ・木村）：靖裕さんはデザインを手がける一方で、フロントエンドのビジュアルプログラミングに関するスキルセットを持っていますよね？

ホムンクルス・木村靖裕さん（以下、ホムンクルス・木村）：基本的にはデザイナーと言っているんですが、自分でも実装はしています。

木村靖裕
1972年、北海道生まれ。デザイン事務所、Webプロダクション数社を経て、株式会社ホムンクルスを設立。デザインからフロントエンド実装まで手を動かすことにこだわり日々奮闘中

ライゾマ・木村：靖裕さんのキャリアのはじまりは？

ホムンクルス・木村：もともと、雑誌などの紙媒体でデザインをしていました。30歳になる直前に、中村勇吾さんのサイトを見て衝撃を受けて、Webについて独学で勉強をはじめたのがきっかけです。Flashってすごくとっつきやすかったので、勉強は苦ではありませんでした。そこから未経験でも可というWeb制作会社を探して、転職したんです。だから、三角関数は30歳になってからちゃんとやったんですよ（笑）。

ライゾマ・木村：独立されたのは？

木村浩康（ライゾマティクスデザイン）

ホムンクルス・木村：会社にいると、マネジメント的な部分、チームの仕事のバランスを考える、中間管理職的なポジションになることが求められてきます。僕はずっとプレイヤーでいたかったので、当時勤めていたSONICJAMから40歳で独立しました、それが6年前のことです。

ライゾマ・木村：ホムンクルスさんは、何人くらいいらっしゃるんですか？

ホムンクルス・木村：僕を含めて4人です。ディレクターが1人と、バックエンド寄りのプログラマ兼テクニカルディレクションが1人と、フロントエンジニアが1人。

ライゾマ・木村：全員野球じゃないですか（笑）。みんなで完結できますね。僕もFlash時代は実装も含めてやっていましたが、いまは実装はすべてプログラマに任せるというかたちにシフトしています。

ホムンクルス・木村：僕も「デザインか実装」どちらかにした方が良いのではないかと、悩んだことがあります。でも、自分の想像したものを誰かにちゃんと実装してもらえるように伝えるのが難しいんです。もちろん優秀なプログラマにお任せする時もありますが、基本的には、自分が考えたことをちゃんとカタチにできるのが一番嬉しいですね。

ライゾマ・木村：そうですよね。靖裕さんがおっしゃってることは、僕の目標に近いです。僕が自分で実装するのを辞める条件は、「プログラマに対して的確な指示とビジュアルイメージを伝えることができること」でした。それを目標にするのが、Webにおけるデザイナーやアートディレクターが持っていなくてはならないスキルセットだと思うんです。自分で実装もできるデザイナーというのは、プログラマにとって脅威なんじゃないでしょうか。「それはできません」と言わせないというか。

ホムンクルス・木村：でも最近は、プログラマの方がデザインを上回る時があるんです。それはすごく危機感を感じます。もちろん素晴らしいことだし、相乗効果もありますが、やっぱり嫉妬しちゃうんですよね（笑）。

ライゾマ・木村：おもしろいですね。僕はもう完全に別だと思ってるので、「やったー！良いものができた」っていう喜びしかないです。

ホムンクルス・木村：そういう風に言えたらいんですけど、なかなかそこがジレンマというか。

ライゾマ・木村：フロントエンドのプログラマには実はふた通りあると思うんですよ。一つはデザイナー思考のプログラマ、もう一つはアーティスト思考のプログラマ。

ホムンクルス・木村：そこは確かにありますよね。

ライゾマ・木村：アートは問題提起、デザインは問題解決という言葉に象徴されるように、アーティストの方が自分でつくり出すことに対して喜びを感じる傾向があるので、課題を押しつけるとすごくストレスを感じてしまうプログラマもいるんです。どちらが良いということでもありませんが、最終的なゴールが定められている時に、自由に表現してもらった方が良いのか、カチッと定義して、その後の伸びしろを意識した方が良いのか。プログラマと組んでアートディレクションをする際に、二極化してるということを感じます。

ホムンクルス・木村：僕はまったくアーティスト志向はないですね。僕は10年前くらいのFlash全盛期にはFlashで開発していたんですが、当時はWebのプロモーションにかける費用がすごく大きくて、「いままで見たことのないことをやってほしい」というお話をよくいただいていたので、そういう面ではチャレンジングなことはやっています。

特徴的なトランジションがつくられる背景

ライゾマ・木村：ホムンクルスさんのお仕事で毎回印象に残るのが、写真や動画などラスタ形式をつなぐトランジションがヌルっと走っていくことです。他のクリエイターだと、ふわっと消してふわっと着くという質感になるんですが、バックグランドに画像を使いながらも、全体がシームレスに動く感じがホムクルさんっぽいと思います。

ホムンクルス・木村：それはいつも意識しているというよりも、単純に「できたらおもしろいこと」を盛り込みたいと思っているんです。

ライゾマ・木村：やっぱりFlashのスペシャルコンテンツから脈々と積み上げてきた感性から生まれているのではないかと思います。いまの主流はスクロール芸で、いかに読みやすいサイトにするかということですが、それだと僕はちょっと物足りないので。もちろん用途によってはそういったサイトも多く手がけてますが。そういう意味でも、ホムンクルスさんのつくるものはすごく好きですね。

ホムンクルス・木村：広告の案件でも、おもしろいポイント、自分たちが満足できたり、納得できるポイントを仕込む努力をしています。それも含めてお仕事だと思っているので。

ライゾマ・木村：最近特に印象的だったのは、「VIRTUAL FLAGSHIP STORE」です。久しぶりにフルFlashのようなサイトを見たという印象でした。ここ最近では一番目を引いたサイトです。最初に見た時に、尖ったインターフェイスだと思いました。スクロールではなくて、一画面で収まるというのがFlash特有のファーストビューでつくるインターフェイスの特徴ですが、このサイトはトランジションが多くて、情報量も適度で、とにかくかっこいい。更新はどうするんだろう？と思いました。

VIRTUAL FLAGSHIP STORE
LIBERTY JAPANのスペシャルコンテンツ。リバティのプロダクトの魅力とロンドンにある本店の雰囲気を伝えることを目指した
https://www.liberty-japan.co.jp/specialcontent/

ホムンクルス・木村：商品のところは、自動更新ができるんですよ。

ライゾマ・木村：こんなにエキセントリックなのに、ちゃんとスマホ対応しているのもすごいですね。自分はスマホのためのサイトデザインというのが、どうにもテンションが上がらなくて（苦笑）。フルFlashの頃のようなテンションで一度つくっても、スマホはレスポンシブにするのか、切り分けるのか、そこで悩んでしまう。

ホムンクルス・木村：自分もPCからデザインします。そこで雰囲気を掴みたい。でも、いまはスマホ専用でPCは考えなくてもいいというサイトも増えています。「五五七二三二〇 MASHUP MUSIC PLAYER」はもともとスマホ専用サイトで、PCは後追いでした。

五五七二三二〇 MASHUP MUSIC PLAYER
アイドルグループ「五五七二三二〇」の4つの楽曲を自由にマッシュアップできる「マッシュアップミュージックプレイヤー」の制作に参加
http://www.5572320.jp/mu/

ライゾマ・木村：これは最初に見た時、「つくるの大変そうだな……」と思いました。

ホムンクルス・木村：そういった意味で一番印象に残っているサイトです。デベロッパーとしてBIRDMANさんと協業したのですが、女子高生が架空の世界を駆け抜けるという設定で、この世界観はピクスの牧野（惇）さんが考えました。BIRDMANさんが女子高生や動物たちをつくってくれました。ステージや建物はプリミティブなもので、プログラム上でつくっています。

ライゾマ・木村：基本的には三次元的なアプローチのうえで、二次元と三次元がくっついたサービス、スペシャルコンテンツの王道的コンテンツですよね。いま、こういうものをつくっている会社さんが、日本では減ってきています。そもそも、そういうサービス自体が減っているんですが、ホムンクルスさんはよく手がけられているなと。そういう意味で、うちと近いアプローチだと思います。

ホムンクルス・木村：いやいやそんな！

ライゾマ・木村：表現的なアプローチというか、コンテンツの要素では近いものをつくっている印象で、いつも参考にさせていただいています。

Webデザイナーの仕事が映像思考に

ライゾマ・木村：こうしたコンテンツをつくっていて思うのは、Webデザイナーの仕事が、モニター上のフラットな世界から、どんどん映像思考になってきたということです。

ホムンクルス・木村：確かに、Webに時間軸的な要素が求められることが増えました。平面的なものって基本は止まっていて、スクロールしていくのですが、そこに時間軸が加わるようになった。要素と動きで上手に間を埋めて、「見ごたえ」を出すというのは、映像に近いことかもしれないですね。

ライゾマ・木村：変わってきたと感じるのは、本当にここ数年のことなんです。プログラマに「絵を回してください」という指示を出す時に、カメラワークなどの指示出しをしなければならない。もはやWebなのか……？みたいな話になってきます。

ホムンクルス・木村：Webの見せ方が2Dプラスアルファ、時間的な要素だったり、3D的な、映像的な要素などが加わっていますが、実はFlash時代から、かっこいい、気持ちいいという要素は変わらないと思っているんです。そこが抑えられていれば、どういうツールを使ってもいいし、あとはその時々の、この方法で試してみようというチャレンジができればいい。

ライゾマ・木村：Flashがなくなった時に、Webの表現が1回沈んだと思うんです。表現として翼をもがれた時代が来て、そこからゆっくり上がってくる時代があった。ホムンクルスさんは、Flash時代のアプローチの仕方から落ちるんじゃなくて、ちゃんと積み上げたものが更新されていると思います。だから他のサイトよりも目を引くし、みんなが期待するのはそういうところです。

ホムンクルス・木村：そう思っていただけるとすごく嬉しいですね。たまたま自分がWebGLがおもしろいと思ってやっていたので、運が良かったというのはありますね。そこに優秀なスタッフが入ってさらに加速することができたと思います。

ライゾマ・木村：ちなみにデザインする時は何を使っていますか？

ホムンクルス・木村：Photoshopですね。実装はDreamweaverです。

ライゾマ・木村：僕もずっとPhotoshopなんですよ。Photoshopみたいに完全な自由度があって、そこでUIとか表現をつくっていく方が感覚的には広い視野でできるんじゃないかなって思っていたんですが、靖裕さんもそうだと知って腑に落ちました。これからもWebをつくっていきたいと思いますか？

ホムンクルス・木村：Webはやっぱり好きですね。みんなが見てくれるものなので。でも、Webに限らず、その時々で良いパフォーマンスを出して行ければいいと思っています。

ゴッティンガムからの問い

当連載では、撮影を担当する写真家のGottingham（ゴッティンガム）こと杉山豪州さんが、対談を終えたふたりへの素朴な質問を投げかけてゆる〜く締めていきます。

Gottingham：ホムンクルスさんはつくり込む世界観が毎回違っていてすごいなと思うんです。会社としての一貫した成長についてはどのように考えているのでしょうか？

ホムンクルス・木村：例えば、TAO TAJIMAさんのWebサイトは、デザインは僕がして、実装はうちのデベロッパー、荒井（祐一郎）がやっています。僕はこれを見て悔しいと思いました。そんな風に、それぞれのクリエイターの個人プレーに大きく依存しているんです。基本的には個人の裁量だったりとか、クリエイターが次はこれを学びたい、やりたいというものを乗せているのが大きいと思います。

TAO TAJIMA | Filmmaker
http://taotajima.jp/

ホムンクルス・荒井祐一郎さん：僕も、いつも木村さんがデザインから実装までひとりでつくっている時に、後ろから見て、「ヤバいのつくってるな」「悔しいな」と思っています。

ホムンクルス・木村：っていう関係です（笑）。

Gottingham：仲間の動きを管理しているというよりは、楽しみにされている感じなんですか？

ホムンクルス・木村：楽しみに恐れているかもしれない（笑）。僕が迷っている時に、彼がシンプルな世界をつくり込んでいるのを見て羨ましいと思ったり。「こういうことができるようになったいるのか！」と意識しています。

ライゾマ・木村：すごくいい関係じゃないですか！

ホムンクルス・荒井：好きなものは似ているんですが、アプローチが違っていて、木村さんはデザイナー的な思考ですが、僕はデベロッパーなんです。デザインを拠り所としている一方で、僕は技術を拠り所にしている。例えばサイトをつくっている時に、僕はコードで表現をつくっていますが、木村さんはコードだけでなくPhotoshopも使って感覚で素材をつくっている。僕はそれができないから、時間をかけてコードでつくっている。

ホムンクルス・木村：僕はいつも周りのスタッフに助けられながらやっているなって思っているんですけど、彼らがここまで行けたら次のステップでここまで行けるんじゃないか、というのはいつも意識はしています。

ライゾマ・木村：背中で暗黙の積み上げをしているんですね！

ホムンクルス・木村：それを表立って言っちゃうと、悔しいじゃないですか（笑）。

Gottingham：木村くんは？

ライゾマ・木村：僕はずっと外の人、ブックマークサイトを見て、特にホムンクルスさんのサイトを見て常に嫉妬しています。何なら、いつも嫉妬の対象を探しているのかもしれないです（笑）。

構成・文／齋藤あきこ　 撮影：Gottingham　 編集：瀬尾陽（JDN）

homunculus Inc.
http://homunculus.jp/