人それぞれいろんな呼び方があって、あまり統一されてないですよね。

中村さんや深津さんはかなり大御所ですけど、大まかに言うと近いと思います。 あと「なめサン」でいいですよ、「サン」が敬称を兼ねてるんで笑。

大学は理工学部の情報系です。 そこで「Processing」(MITで開発されたアート向けプログラミング言語のひとつ)を使った講義を受けたんです。 そこから、プログラミングを使った表現というかグラフィックアート的なものにハマって。大学は中退して、今はWeb制作会社で働いています。

大学ではジェネラティブアートやゴリゴリのグラフィックにハマってたんですけど。 会社に勤めてからは、徐々にWebのスクロールだったり操作性とかを考えるのが好きになって。 今は「手触り」の良いWebみたいなものを追求していますね。

いや、ずっとプログラミングで作品を作ってます。 Sketch（デザインツールの一種）とかは触りますが、Adobe製品はほとんど触れないです。 勉強しても使い方覚えられなさそうというか…笑。

特に思わないですね。 デザインと言うとみんなAdobe製品を使うイメージですが、自分にとってはそのツールがプログラミングだっただけで。 Adobeを使うデザイナーと、プログラミングを使うデザイナーがいる、というだけのことだと思います。 「ビジュアルコーダー」という呼び名もありますが、「デザイナー」で良いと思ってます。

「Nature of Code」というプログラミングの本はおすすめです。 Processingを学びながらコードで自然の物理法則の動きやインタラクションを作っていく本なんですけど。 Processing自体がプログラミング初心者のために作られた言語という側面もあるので、入門者向けです。 自分が今の仕事で使っている表現や技術のうち、言語の特性によらない基本的なことはだいたいProcessingから学んでますね。

そうですね。 もちろん勉強したての頃は公開されてるコードを真似したり、ライブラリを利用することが多いです。 ただ、その先の「手触り」みたいなのを実現しようと思うとそれだけでは駄目で。 ライブラリの車輪の再発明をして、さらに先を自分で作らないといけないですね。 自分みたいなエンジニアは、みんなそれぞれの「気持ち良いスクロール」の実装方法を持ってると思いますよ。

Web上の操作やインタラクションが、いかに自分の身体の一部のように扱えるか、というような意味ですね。 使っている心地よさすら忘れるような実装をしたいと思っていて。 渡邊恵太さんの『融けるデザイン』から学んだことが多いです。

演出を考えるデザイナーやディレクターはもちろん、エンジニアにこそ読んでほしい本です。 特に前半のパートは、良い操作や動きを実装するうえで重要な考えが書かれていると思います。

苦労の９割はこのグラフィックの拡大・縮小の動きの手触りの追求ですね。 マウスカーソルが変化するのとか、背景のタイポグラフィが動くのとかも大変だったんですけど。

サイトを開くときにグラフィックが100枚一気に動くので、CSSのトランジション（CSSの値を時間とともに変化させる処理）にiOSのSafariが耐えられなくて。 パフォーマンスチューニングをして解決しました。 プログラムのエラーではなくパフォーマンスの問題だから、エラーメッセージも出ずにブラウザが勝手に落ちるので、本当に大変なんですよ。

「融けるデザイン」でも言及されていますが、確かに個人ですべてやる場合はコミュニケーションの難しさが排除されて、試行錯誤を爆速で繰り返すことができます。 分業の場合と比べてそのイテレーション（繰り返し）回数が多くなるので完成度はかなり高くなると思います。

じゃぁ分業が難しいかというと、コミュニケーションの問題だと思っていて。 丁寧に考えを共有しあってチームの練度上げていくしかないかなと思います。

会社だと「動き」の実装に関しては完全に分業はされていなくて、デザイナーさんと僕で相談しながら作ることが多いです。 デザイナーさんも僕が「動き」を考えるのが得意なのを理解してくださっているので、まるっきり任せてもらうこともあります。

どんな動きを良いと思うかがバラバラだと、最終決定がブレることはあると思います。 こういうブレをなるべくなくすために、僕から実装が優れているサイトをオンラインドキュメントにまとめて共有したりしています。

たとえばmoves.basicagency.comのマウスカーソルのカスタマイズは、単なる演出を超えて、体験の拡張として模範解答だと思いますね。

他にはwickret.cuberto.comは、ホバー時のカーソルのリアクションが工夫があってうまいです。 スクロールに対してのアニメーションも滑らかで気持ちいいです。

creative.squarespace.comはどのアニメーションにもセンスを感じます。 特にメニュー画面の画像の3Dアニメーションが最高に気持ちいいですね。

まずページの目的があって、その手段としての演出というのは本業の仕事でも気をつけています。 常に「これやりすぎてないか」とか、「使いにくくないか」というのは議論していて。

単純な情報の見やすさも大切ですし、感性に訴えることも大事ですから、バランスが重要ですね。 オシャレなんだけど極端に使いにくいサイトとかは、デザインと実装をディレクションする人のバランス感覚がうまくいっていないケースが多いと思いますね。 そういう立場の人ほど『融けるデザイン』は読んでほしいです。

まぁ、パッと見てオシャレだから流行ったんだろうなという印象はあります。 可愛くてきれいで未来感がありますよね。 「絵」としてはすごく気持ちの良いものだと思います。 ただ、デザインも実装も大変そうだろうな…。

実装の話をすると、単純にこういった影とかボカシの演出って描画コストめちゃくちゃ高いので、気持ちの良い操作感を実装するの大変だろうなと。 気をつけてやらないといけないデザインではありますよね。 「オシャレな絵」という印象です。

「手触り」という観点だと、描画コスト高いとどうしても動きがカクつくので、ユーザーの操作と画面の動きが一致しなくて、操作感が失われますよね。 使いやすい操作感と感性に訴えかける表現、その両立を第一に考えていくのが大事ですね。