世界最大級のウェブデザインアワード、「awwwards」。

2020年5月15日のSite Of The Day(賞のひとつ。その日最も優れたWebサイトが選ばれる)を受賞したのは、25歳の日本人Webエンジニア、なめサン。

彼の受賞作、100 DAYS OF POETRYは、のってぃ氏が制作した、100枚のグラフィックアートを閲覧するためのWebサイトだ。

100 DAYS OF POETRY

Webサイト制作では通常、「デザイナーの作ったデザインをエンジニアが実装する」という分業体制が一般的。

しかし、今回なめサンは、サイトの見た目・動きのデザインから開発まで、すべてひとりで行っている。

優れたアニメーションやインタラクション（ユーザー操作へのフィードバック）をデザインし、自ら実装するエンジニアの呼び名は、「クリエイティブコーダー」「ビジュアルコーダー」など、実は定まっていない。

そんな未開拓のキャリアパスを生きるなめサンに話を聞いてみると、エンジニア・デザイナー問わず「使いやすいUI」を作るために必要なことが見えてきた。

Adobe製品は使わない!?デザインと実装を一人でこなす「ビジュアルコーダー」なめサンとは

三角

今回受賞したサイトは、デザインから実装まで一人でやっているわけですよね。こういう「ヌルヌル動くWebサイト」を自分でデザインして実装する人達って、なんて呼べばいいのか分かっていなくて笑。
企業のキャンペーンページや、アニメ・ゲームの公式ページなどの制作で活躍されている印象があります。

なめサン

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

三角

tha ltd. の中村勇吾さんやTHE GUILDやnoteの深津貴之さんが有名だと思うんですが、エンジニアでもあり、デザイナーでもあるので定義が難しいですね。
深津さんの言葉を借りて「ビジュアルコーダー」と呼んでみますが、なめサンさん…もビジュアルコーダーという認識でよいでしょうか？

なめサン

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

三角

さかなクンみたいだ笑

三角

なめサンがこの道に進んだきっかけって何だったんでしょうか？
やっぱり、美術系の大学を出たとか？

なめサン

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

三角

Processingというと、ジェネラティブアート(コンピューターによりアルゴリズム的に生成される芸術表現)で使われている言語という印象があります。
「ジェネラティブアート」で検索するとなめサンのnoteが一番上に出ますね（2020年6月時点）。

なめサン

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

三角

デザイナー的なことは勉強していないんですか？
Web制作会社ということでデザイナーのバックグラウンドもあるのかなと思っていましたが。

なめサン

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

三角

Webデザイナー的な人はみんな必修だと思ってました。
Adobe製品を使ったデザイン制作をしようとは思わなかったんですか？

なめサン

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

三角

今からなめサンのような仕事をしようと思ったら、何から勉強すれば良いんでしょうか？
今はデザイナーの方もプログラミングを学ぶ、という人が増えていますし、何かおすすめの本とかありますか？

なめサン

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

デザインの名著「融けるデザイン」から学んだ「手触り」の重要性

三角

今回受賞された100 DAYS OF POETRYは、なめらかなスクロールや、拡大・縮小のアニメーションが、操作していて気持ちいいですよね。

三角

こういった気持ちのいい動きは既存のライブラリをコピペ…みたいなことでは出せないように思います。
アニメーションはフルスクラッチ（ライブラリなどを利用せず1から自分で作ること）が多いんですか？

なめサン

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

三角

それぞれ得意技を持ってるってことですね…かっこよすぎる。
なめサンとの会話の中で、「手触り」という言葉が何度か出てきていますよね。
これってどういう意味でしょうか？

なめサン

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

三角

『融けるデザイン』は名著ですよね。
エンジニアリングとデザインについて横断的に語られていて、たくさんの発見がありますが、
身近なデザイナーやエンジニアに聞くとまだ読んでいない人が多いです。

なめサン

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

三角

『融けるデザイン』では、「マウスカーソルが人間の体の一部のように感じられるか？」という実験から、操作の滑らかさや自己帰属感が重要だという議論が展開されます。
『100 DAYS OF POETRY』でも、マウスカーソルが状況に応じてスムーズに変化します。

三角

あと、Twitterのリンクの上にマウスオーバーすると、カーソルがTwitterのロゴに変化しますよね。
装飾性の強いサイトデザインのなかで、何のリンクなのかという可読性も高く機能的だと思います。

三角

マウスカーソルもすごいですが、一番の見どころはグラフィックをクリック・タップしたときの動きですよね。
シームレスに100枚のグラフィックが連動して動いていく様子は、操作していて気持ちいいですね。
一方で、実装するのがかなり大変そうですが…。

なめサン

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

三角

たしかリリース前日くらいまで、「Safariがクラッシュするバグの修正に追われている」とツイートしていましたよね。

なめサン

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

三角

なめサンは普段の会社でのお仕事はデザイナーと分業していると思うんですが、分業と個人制作、それぞれの違いってありますか？
「手触り」「動き」みたいな感性的なことって、今回のように個人で制作したほうが、良いものができるんじゃないかなと思っているんですが。

なめサン

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

三角

「融けるデザイン」では、デザイナーが手触りの良い「動き」を仕様書に落とし込むことの難しさも指摘されていましたね。

なめサン

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

なめサン

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

三角

う〜ん、相談するだけでうまくいくもんなんでしょうか？

なめサン

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

三角

普段から理想像を共有することでコミュニケーションを円滑にしているんですね。
例えばどんなサイトを共有しているんですか？

なめサン

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

BASIC Moves®

三角

もはや我々の知っているマウスカーソルの機能じゃない…！

なめサン

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

三角

スマホ表示のスクロールも気持ちいいですが、PCでのスクロールの気持ちよさだけで数分遊べますね。

なめサン

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

三角

自分の良いと思ったものをこうして言語化してストックしておくことが分業・協業でも気持ちいい「動き」を実現するカギなんですね。

「ヌルヌル動くWeb」を開発者の「自己満足」にしないために

三角

少し意地悪な話ですが、「ヌルヌル動くWeb」は自己満足になりがちで、使いにくいという批判もよく耳にしますよね。
「使いやすさ」と「表現」のバランスについて、どう思いますか？

なめサン

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

三角

先程デザイナーとのコミュニケーションの話がありましたが、やりたい表現だけではなく、使いやすさも同時に議論しているんですね。

なめサン

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

三角

デザインと実装の連携というテーマだと、最近、「ニューモーフィズム」というデザイントレンドが議論を巻き起こしていました。

'Neumorphism' なるUIデザインのトレンド｜木村 博信 (hiro_kimu)｜note

三角

ボーダーや塗りを使わず、凸凹をつけて影を落としたような有機的なデザインで、2020年のデザイントレンドとして各所で取り上げられています。
一方で、視認性が悪いのでは、とか、どこが押せるかわからない、といった議論もあります。
なめサン的に、「ニューモーフィズム」は「手触りの良い実装」になりそうですか？

なめサン

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

三角

たしかに、アプリデザインのモックを投稿するサイトではよく見かけるけど、実戦投入されている例はあまり見ない、という声もあります。
実装が大変だから普及しないというのもあるんですね。

なめサン

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

三角

「絵」というキーワードも出てきました。
そうか、「動き」「操作感」というのを常に考えていると、逆に「絵」という対義語が出てくるのか…。

なめサン

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