[在庫速報.com](https://zaikosokuho.com/mask)をご存知でしょうか？

マスクの通販比較：在庫速報.com

コロナウイルスが流行しはじめてすぐの３月中にリリースされ、**現在では300万MAU（MAU=月間アクティブユーザ）**と膨大なアクセスを集めている、**マスクやアルコール消毒液などの通販最安値を確認できるサービス**です。

~~マスクや除菌商品の最安値とその販売場所、出荷時期や評価がひと目で分かる。マスクの種類別での検索も可能。~~

**実はこの「在庫速報.com」、本業は「ブラウザの開発」という、一見全く関係のなさそうな会社が開発**していました。

ブラウザを開発している会社が、なぜ「在庫速報.com」を作ろうと思ったのか？

社長に業界初の、突撃インタビューです！

~~加藤雄一【かとう・ゆういち】 アスツール株式会社CEO 新卒でソニーに入社しソニー・エリクソン（現ソニーモバイルコミュニケーションズ）、楽天、Viber Japanを経て2016年アスツール株式会社を創業。「人間の能力を拡張する未来（アス）の道具（ツール）を作る」というビジョンのもと、スマホブラウザ「Smooz」や「在庫速報.com」を開発中。~~

## １人のメンバーが気づいた「ユーザペイン」

#### balloon mitsuji left
在庫速報.comって、コロナが本格化した頃にかなりのスピード感でリリースされましたよね？

#### balloon astool_kato right
*３月の上旬にプロジェクトが立ち上がり、３月２３日にリリース*しました。

#### balloon mitsuji left
最初からここまでヒットすると思って作られたんですか？

#### balloon astool_kato right
それが全然違っていて。
構想段階の*３月上旬って、自粛要請もそんなに出ていなくて、世間的にもコロナへの危機感がまだ薄かった*んですよ。
店頭からマスクが減り始めているくらいで、*僕自身もまだ危機感を強くは覚えていません*でした。

#### balloon mitsuji left
え、じゃあ開発のきっかけは何だったんですか？

#### balloon astool_kato right
社内にいた、感度の高いメンバーです。
彼がとにかくマスク不足を心配していて、ネットで探してみると、**なかなか在庫が見つからないし、在庫があっても枚数や価格はバラバラで、1枚あたりの価格も分かりづらい。**
**どこで買えばお得か全然分からなかった**んですよね。
*買いたいマスクが見つかっても出荷日が全然先*だったりもして…。
そこで「もしかして、みんな困っているんじゃないか」と気づきました。

~~通販サイトでマスクを検索すると、たしかにどれを買えばいいのか分からない…。~~

#### balloon astool_kato right
そこで、これはサービスを開発して解決すべき課題ではないかと社内で話をしました。
当時はコロナがどれほど長引くかも見当がつかなかったですし、*「翌週や翌月には終息してこのサービスが無駄になったらどうしよう…」*とも考えましたが、**「それはそれでナイストライだし、とにかくやってみよう」**ということで、GOサインを出しました。

#### balloon mitsuji left
スマホブラウザ「[Smooz](https://smoozapp.com/ja/)」の開発・運営でリソースも限られているなかで、どうしてこのスピードでリリースできたんですか？

#### balloon astool_kato right
これは本当に偶然なんです（笑）。
弊社は四半期ごとに目標を立ててるんですが、*1Q(1 - 3月)の目標を2月末くらいに達成*しちゃって、**開発リソースに余裕があった**んですよね。
「今ならエンジニアを動かせるな」と思って開発に着手してみた、という感じです。

#### balloon astool_kato right
いざリリースしてみると、翌日にはアクセスが殺到。
メディアにも多く取り上げられ、**早々に同時アクセスが１万や２万という数字**になりました。
今では**300万MAUと開発前に立てた目標の100倍以上のアクセスを獲得**していますね。

#### balloon mitsuji left
300万MAU!? 100倍!?

#### balloon astool_kato right
圧倒的な上振れです。（笑）
下振れすることもありますが、こうやって**「大当たり」か「大外れ」が極端なのが、C向けのプロダクトの面白いところ**ですよね。

#### balloon mitsuji left
300万MAUってプロダクトとしてはかなりのヒットだと思います。
このように多くの方に使っていただけている理由って何だと思われますか？

#### balloon astool_kato right
やはり**このサービスが解決しようとしていた問題が非常に大きかったから**だと思います。
誰もがマスクを必要としていたし、マスクを見つけるのは非常に難しかった。
*この問題の大きさは正直僕たちの想定をはるかに上回るサイズのもの*でした。

#### balloon astool_kato right
また、**適切なタイミングでサービスを提供することができたことも大きかった**と思います。
*スピード重視で開発を進め、３月末というタイミングでリリースできた*からこそ、乾いた土に水をやった時のようにサービスが広がっていったのだと思います。

## スピード感を出すには「価値と機能を絞ること」

#### balloon mitsuji left
開発にはどれぐらいの工数を割かれたんですか？

#### balloon astool_kato right
*最初はブラウザ開発のバックエンドのエンジニア１人*で作ってました。
途中からフロントエンドのエンジニアやデザイナーが入ったりしましたけど、前半はほぼ彼１人で開発を進めていました。

#### balloon mitsuji left
たった１人…？
それでもこのスピード感でリリースできたのはなぜ…？

#### balloon astool_kato right
**「このサービスで出来ること」を絞りに絞った**から。この１点に尽きます。
*初めは「対象商品はマスクのみで、１枚あたりの金額が安い順に並ぶだけ」という機能だけでリリースしました。*
実際にこの機能だけでも多くのユーザに利用いただけましたし、初期リリースには十分でしたね。

~~リリース直後のページ。当時は「マスク在庫速報」だった。現在と比べるとカテゴリー切り替えやメニューボタンなども無く、機能が絞られている。~~

#### balloon astool_kato right
**機能を追加するのは、コアバリューがユーザに受け入れられた後でいい**んですよね。
元々開発していた*ブラウザアプリの初回リリース時には３つの機能を訴求したんですが、その分開発には半年もの時間がかかって*しまいました。その反省もあって、とにかく訴求する価値を絞りました。
*コアの機能以外は本当に時間をかけていなくて、デザインも簡素なものだったし、サービス名もある日の朝礼でサクッと決めました*ね。

#### balloon mitsuji left
提供する価値と機能を絞る。よく言われることではありますが、徹底しているんですね。
コロナの影響もあり、*構想からリリース、リリース後も含めてすべてリモート*という点にも驚きました。
開発における意思疎通など苦労しませんでしたか？

#### balloon astool_kato right
リモートだから、という苦労はなかったですし、今もしていないですね。
３年あまりブラウザの機能改善を行っていく中で、チームの力を高めることができたいたということもあると思います。

#### balloon astool_kato right
弊社では週２回リリースをする速いサイクルで機能改善をしています。
これができるチームなので、*「開発力」はもちろん、すべてのメンバーの「自走力」、カスタマーサポートを含めたチームの「実行力」が非常に高く*、リモートでスピードが落ちるということもありません。
在庫速報.comも、ユーザの声も反映しながら速いスピードで改善を進めています。

#### balloon mitsuji left
ブラウザ開発の経験を経て強いチームになっているんですね…！

## ユーザに愛されればマネタイズは見つかる

#### balloon mitsuji left
在庫速報.comの現状についてなんですが…マネタイズってどうされてますか？
これだけアクセスを集めるとサーバー費用なども結構かかると思いますし…。

#### balloon astool_kato right
既にある程度の売上がありますし、継続的に運営できる見込みも立っています。
個人的には*マネタイズを最初に考えすぎるのって少し違う*と思っていて。

#### balloon mitsuji left
どういうことですか？

#### balloon astool_kato right
**たくさんのユーザに多く使ってもらえるサービスになれば、マネタイズの方法って必ず何かしら見つかる**んですよね。
マネタイズのプランがまったくないのは問題ですが（笑）。
これまで作ってきたサービスでそれは実感していたので、*在庫速報.comはユーザに利用してもらえるサービスになることにとにかくフォーカス*しました。

#### balloon astool_kato right
**優れたマネタイズ手段を考えるより、多くの人に使ってもらえるサービスを作る方がよっぽど難しい**ですよ。
マネタイズのプランが完璧でも、ユーザに使ってもらえなければ結局サービスは継続できません。
まずはユーザに向き合って、本当にいいサービスを提供することが大事ですよね。

#### balloon mitsuji left
在庫速報.comの今後の展望についても教えてください。
コロナが終息するとプロジェクトも終わるんでしょうか…？

#### balloon astool_kato right
いや全然やる気満々ですよ！
*４月からの四半期ではさらにリソースを割いて注力していく*つもり！

#### balloon mitsuji left
え！そうなんですね！
マスクの需給も安定してくると思うんですが、それでもニーズはあるんでしょうか？

#### balloon astool_kato right
マスクや衛生用品の需要は引き続き高いですし、何より**今後も「需要と供給は完全に均衡しない」という課題は残り続ける**と思っています。
ソフトウェアと違って、リアルの商品は生産設備を用意し、原料を調達し、生産して流通させる工程でどうしてもある程度のリードタイムがかかってしまうからです。

#### balloon astool_kato right
そんな時、ユーザーは様々な手段で商品を探し求めますが、**情報が整理されておらず最適な購入場所が分かりづらい商品はまだまだ多い**ので、今後も取り扱う商品はどんどん増やしていきますよ。

#### balloon mitsuji left
どんな商品が追加されていくのか、今後の展開が楽しみだ…！

~~インタビュー後、体温計が早速追加されていた。ユーザの声をもとに対象の商品を増やしている。~~

## 「殻を破ってくれた」新サービス開発

#### balloon mitsuji left
在庫速報.comを始めて良かったことはありますか？

#### balloon astool_kato right
技術的には、バックエンドはこれまで同様Railsを使っていますし、新しい取り組みはアプリ版をFlutterでクロスプラットフォーム開発したくらいですかね。
ただ技術面での経験以上に、在庫速報.comの成功が**自分や会社の殻を破ってくれたこと**が本当に大きいですね。

#### balloon mitsuji left
殻を破る…？

#### balloon astool_kato right
うちってこれまで４年間ずっとSmooz一本でやっていて。
**良くも悪くも「一つのプロダクトにこだわる」という美学に縛られていた**んですよね。
*Smoozのヒットという呪縛*とも言えるかもしれないですが。

#### balloon astool_kato right
**今回の在庫速報.comという新サービスの成功によって、この呪縛から解放されました**。
僕もメンバーもSmooz以外のサービスを成功させられる自信がつきましたね。
これまでは新サービスを全然やってこなかったのですが、今後はどんどん新サービスにトライしたいですね。
*「人間の能力を拡張する未来の道具を創る」というアスツールのビジョンを実現できるチームにより一層近づいた*と感じています。

~~アスツールのビジョン。プロダクトを作り続けている加藤さんの想いが伝わる。~~

#### balloon mitsuji left 
在庫速報.comの成功が会社が変わるきっかけになったんですね…！
このコロナの状況下で、企業やエンジニア個人が取るべきアクションってなんでしょう？

#### balloon astool_kato right
まず、**どの企業も世の中の課題を解決するために存在しており、エンジニアは技術の力で課題を解決したいという人が多い**と思います。
そして、今まさに世の中で色々な課題が生まれ、顕在化した状況になっています。
*目の前の事業や生活は守りつつ、ミッションと合う課題が見つかってリソースがあるのであれば、その課題の解決に取り組むべき*ではないかと思います。

#### balloon astool_kato right
もちろん、**ボランティアとしてやるべきというわけではなく、シビアにビジネスチャンスとして見ればいい**と思っています。
大きな転換点だし、サービスが不足している場所は多い。
ここで生まれたものが未来の大きなサービスになり得るでしょうし、積極的にトライしていきましょう！

在庫速報.comのこれまでとこれから、そしてアスツールの未来についても触れることができた貴重なインタビューでした。

次回はアスツールが提供しているブラウザ「Smooz」についてお話をお聞かせいただきます。

コロナウイルスが流行しはじめてすぐの３月中にリリースされて以来、膨大なアクセスを集めている「在庫速報.com」をご存知でしょうか？マスクやアルコール消毒液などの通販最安値を確認できるサービスです。ブラウザを開発している会社が、なぜ「在庫速報.com」を作ろうと思ったのか？社長に業界初の、突撃インタビューです！

サービス開発で大事なのは「価値と機能を絞ること」

マネタイズより先に「ユーザに愛される」サービスに

新サービスは自分や会社の殻を破ってくれる

１ヶ月で300万MAU！当初の開発は１人！ マスクの通販最安値サイト「在庫速報.com」の開発秘話を最速インタビュー！

**世界最大級のウェブデザインアワード、「[awwwards](https://www.awwwards.com/)」**。

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

彼の受賞作、[100 DAYS OF POETRY](https://100daysofpoetry.gallery/)は、[のってぃ](https://twitter.com/re_notty)氏が制作した、100枚のグラフィックアートを閲覧するためのWebサイトだ。

100 DAYS OF POETRY

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

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

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

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

~~なめサン（なめらかサンショウウオ）：20歳の時、プログラミングによるグラフィック生成やWeb制作に没頭するようになる。普段はWebフロントエンドデベロッパーとして働きながら、ライフワークとしてもWeb制作を行う。主な受賞歴はawwwards(SOTD x1), CSS Design Awards(WOTD x1), FWA(FOTD x1)~~

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

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

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

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

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

#### balloon sankaku left さかなクンみたいだ笑

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

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

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

~~なめサンがProcessingで実装した作品のひとつ~~

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

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

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

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

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

~~高度なWeb表現技術を用いたなめサンの実験的な[ポートフォリオサイト](https://experiments.p5aholic.me/)(PCでの閲覧のみ)~~

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

#### balloon namesan right **「[Nature of Code](https://www.amazon.co.jp/Nature-Code-Processing%E3%81%A7%E3%81%AF%E3%81%98%E3%82%81%E3%82%8B%E8%87%AA%E7%84%B6%E7%8F%BE%E8%B1%A1%E3%81%AE%E3%82%B7%E3%83%9F%E3%83%A5%E3%83%AC%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3-%E3%83%80%E3%83%8B%E3%82%A8%E3%83%AB%E3%83%BB%E3%82%B7%E3%83%95%E3%83%9E%E3%83%B3/dp/4862462456)」というプログラミングの本はおすすめです。** Processingを学びながらコードで自然の物理法則の動きやインタラクションを作っていく本なんですけど。 **Processing自体がプログラミング初心者のために作られた言語という側面もあるので、入門者向けです。** 自分が今の仕事で使っている表現や技術のうち、言語の特性によらない基本的なことはだいたいProcessingから学んでますね。

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

#### balloon sankaku left 今回受賞された[100 DAYS OF POETRY](https://www.awwwards.com/sites/100-days-of-poetry)は、*なめらかなスクロールや、拡大・縮小のアニメーションが、操作していて気持ちいい*ですよね。

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

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

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

#### balloon namesan right **Web上の操作やインタラクションが、いかに自分の身体の一部のように扱えるか**、というような意味ですね。 使っている心地よさすら忘れるような実装をしたいと思っていて。 **[渡邊恵太さん](https://twitter.com/100kw)の[『融けるデザイン』](https://www.amazon.co.jp/dp/B00TPLKYEM/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1)**から学んだことが多いです。

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

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

### 「融けるデザイン」の視点でWebサイトを見ると、「手触り」の正体がわかってきた

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

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

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

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

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

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

### デザイナーとエンジニアが分業する上で必要なコミュニケーションとは

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

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

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

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

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

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

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

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

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

BASIC Moves®

~~ぜひPCで見てほしい。マウスカーソルが文脈に応じて様々に変化し、機能を持つ体験は、単なるサイト閲覧を超えた操作の喜びがある~~

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

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

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

#### balloon namesan right [creative.squarespace.com](https://creative.squarespace.com)はどのアニメーションにもセンスを感じます。 特にメニュー画面の画像の3Dアニメーションが最高に気持ちいいですね。

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

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

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

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

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

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

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

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

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

~~ブームの火付け役となった[Alexander Plyuto氏のデザイン](https://dribbble.com/shots/7994421-Skeuomorph-Mobile-Banking)~~

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

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

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

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

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

「流行りのデザインだけど、使いにくいな…」そんなUIを作りがちなエンジニアやデザイナーのために。Webデザインアワードで複数の賞を受賞してきたエンジニアが「手触りの良いWeb」の開発方法や、必要な知識を徹底解説。

良いUIを実装するために、デザイナーもエンジニアも『融けるデザイン』を読もう

コードで動きのあるデザインを実装したい人は『Nature of Code』を読もう

自己満足な「やたら動くWebサイト」にならないために、デザイナーとエンジニアがコミュニケーションをし続けよう

Adobe製品を使わない"デザイナー"？「ビジュアルコーダー」が考える、自己満足で終わらないWebデザインとは

**世界最大級のソーシャルVRプラットフォーム「VRChat」**。

実は「VRChat」内部では、*新しい形の経済圏*も形成されているとか…!?

~~バーチャル空間最大級のマーケットフェスティバル「バーチャルマーケット4」でも利用された「VRChat」 (引用: [VRChat](https://vrchat.com/))~~

とはいえ、門外漢にはまだまだハードルが高く思えるのも事実。

今回アンドエンジニアでは、**「VRChatのはじめかた」**について、「VRChat」ユーザーであり、自身のショップ**「奈良阪配本地」で3Dモデルや、アバターの開発ツールの開発・販売もしている奈良阪さん**に、*「VRChat」のバーチャル空間で*インタビューを行いました！

奈良阪配本地 - BOOTH

## 「VRChat」は「VRゲーム」じゃなくて「VR SNS」！

#### balloon skmt3p-vr left
このインタビューをするために、私も「VRChat」を始めてみました！
でも、「VRChat」って目的とかやるべきことがさっぱり分かんないんですよね。
「VRChat」って一体どういう「VRゲーム」なんですか？

#### balloon narazaka-vr right
そもそもなんですけど、個人的には**「VRChat」を「VRゲーム」ってカテゴライズすること自体、しっくりこない**んですよね。
個人的には、「VRChat」は*「VR SNS」*のようなものだと思っています。

~~「VRChat」のバーチャル空間でインタビューに答える奈良阪さん。~~

#### balloon skmt3p-vr left
完全に「VRゲーム」だと思ってました。
「VR SNS」というと、FacebookとかTwitterのVR版みたいなイメージですか？
（※ 編集注: Twitterは厳密にはSNSではなくMicro Blogに該当する）

#### balloon narazaka-vr right
そうですね。特に*Twitterはイメージが近いと思っています。*
個人的に言い得て妙だなと思ったのは、*「VRChatは大学のサークルで意味もなくだべっている感じ」*という表現ですかね。
**「VRChat」というバーチャル空間で、モラトリアム時代のあの感じが続いている**みたいな。

#### balloon skmt3p-vr left
なんとなく分かるかもしれません。

#### balloon narazaka-vr right
**よく分からないギミックを作ったり教え合ったり遊んだりして、それが終わったら深夜に寝るみたいな生活**ですよね。
その繰り返しなんですけど、それが楽しいんですよ。

#### balloon skmt3p-vr left
でもそういうことってZoomやTeams、Discordを使ったWebチャットでもできると思うんですけど、それらと比べてどうなんですか？

#### balloon narazaka-vr right
同じバーチャル空間にいるからだと思うんですけど、「VRChat」の方が、**より「人に会ってる感」がありますね。**

~~豊かな表情とモーションで語る奈良阪さん。~~

## 最初のアバター作りはアジャイルで小さく作る！

#### balloon skmt3p-vr left
奈良阪さんは、どのくらいの間「VRChat」をやられているんです？

#### balloon narazaka-vr right
**だいたい2年くらい**ですかね。
**逆に、それまではVRの経験は無かったんですよ。**
仕事はサーバーサイド寄りのエンジニアで、VRエンジニアというわけでもないですし…。

#### balloon skmt3p-vr left
では、今使われている美少女アバターとかは、独学で作れるようになったんですか？
*「Unity」*(Unity Technologies社が開発したゲームエンジン)をゼロから独学で勉強するの、辛くなかったですか？

~~「Unity」Unity Technologies社が開発したゲームエンジン (引用: [Unity](https://unity.com/ja))~~

#### balloon narazaka-vr right
自分は、「VRChat」のアバター作成には*「Blender」*(オープンソースの3DCGソフト)と*「Unity」*を使っているんですよ。
**「Blender」で3Dモデリングを行い、「Unity」で設定と「VRChat」へのアップロードを行う**感じですね。

~~「Blender」オープンソースの3DCGソフト (引用: [Blender](https://www.blender.org/))~~

#### balloon narazaka-vr right
幸い、**「Unity」と「C#（Unityで使用する）」は過去に経験があった**ので、そこに抵抗はなかったんですよね。
あと、*イラストを書いていた経験も役に立ちました。*

#### balloon skmt3p-vr left
確かに、そういった経験はアドバンテージになりそうですね。
「Blender」についてはどうでしたか？

#### balloon narazaka-vr right
**「Blender」は使ったことがありませんでした。**
なので、最初のアバターは**「かんたんBlender講座」**というWebページを参照しながら作りましたね。

~~「かんたんBlender講座」高知工科大学で開講される「コンピュータグラフィックス」の演習課題向けに作られたWebページ (引用: [かんたんBlender講座](http://krlab.info.kochi-tech.ac.jp/kurihara/lecture/cg/BlenderWeb_Hayashi/html/index.html))~~

#### balloon narazaka-vr right
この「[かんたんBlender講座](http://krlab.info.kochi-tech.ac.jp/kurihara/lecture/cg/BlenderWeb_Hayashi/html/index.html)」が非常に分かりやすく、且つ、その内容が、最初の目的としていた*「ローポリ(ポリゴン数、頂点数が少ない3Dモデル)でデフォルメで小さくてかわいいアバター作り」*にマッチしていたんです。
おかげで、**余計なハマりや試行錯誤なく、だいたい1週間で完成させることができました。**

#### balloon skmt3p-vr left
凄いですね。
自分だったら1ヶ月はかかりそう。

#### balloon narazaka-vr right
いや、多分このくらいだったら、意外と作れると思いますよ。
最初に作ったアバターは、このアバターの原型になるんですけど、原型時点では、表情もなく、靴下とかメガネといった小物もつけていないシンプルなものでしたし。
**初めからハイクオリティなものを作ろうとしないのがポイントだと思います。**

~~最初に作った原型をアップデートしていった現在のアバター。ローポリだが表情も小物も充実している。~~

#### balloon skmt3p-vr left
最初の目的を高くして頑張りすぎちゃうと辛くなりそうですよね。

#### balloon narazaka-vr right
そうですね。
なので、こういった3Dモデルも、**アジャイルでちょくちょく作っていくのが良いんじゃないでしょうか。**

#### balloon skmt3p-vr left
え？アジャイル開発ですか？

#### balloon narazaka-vr right
なんなら、**Gitリポジトリにして管理するのもアリですね！**
Blenderのファイルはバイナリ化されちゃいますが、*Unityプロジェクトは差分確認できますし*。

~~アバターの開発手法について語る奈良阪さん。~~

#### balloon skmt3p-vr left
アジャイル開発にGitを導入するとなると、本当にプロダクト開発みたいですね。
これを機に「VRChat」のアバター作りをこれからはじめる人に向けて、おすすめできる資料ってなにかあったりしませんか？

#### balloon narazaka-vr right
**「ワニでもできる！モデリングforVRChat」**は良い動画ではないでしょうか。
この動画を参考にして作っている人が結構いるようで、個人的には**「VRChat」に適したノウハウが反映されているところが良い**と思っています。

【第０回】ワニでもできる！モデリングforVRChat

## ゼロ円からはじめられる異世界生活

#### balloon skmt3p-vr left
そもそもなんですけど、「VRChat」ってハードルってとても高くないですか？
環境構築の手間もなんですけど、はじめるまでの金銭的なハードルが高いイメージです。

#### balloon narazaka-vr right
そうですね。
「VRChat」が満足に動く程度のパソコンや、VRを楽しむ場合にはヘッドマウントディスプレイが必要になりますしね。
でも、*持っているパソコンがWindowsであれば、*ヘッドマウントディスプレイが無くても*「Steam(有名なゲーミングプラットフォーム)」*と*「VRChat」*をインストールするだけで、**「VRChat」をすぐにでもゼロ円で楽しむこともできるんですよ！**
アバターも、「VRChat」内や「BOOTH」で、ゼロ円から配布されているものもありますし。

~~「Steam」Valve Corporation社が開発・運営するゲーミングプラットフォーム (引用: [Steam](https://store.steampowered.com/?l=japanese))~~

#### balloon skmt3p-vr left
そう言われると、確かにそこまでハードルが高くない気がしてきました。
ちなみになんですけど、奈良阪さんはこれまでおいくらくらい「VRChat」に使っているのかお聞きしてもいいですか？

#### balloon narazaka-vr right
だいたい**30万円くらい**ですかね。

#### balloon skmt3p-vr left
めっちゃ高い！

#### balloon narazaka-vr right
*ヘッドマウントディスプレイは、1つ5万円くらいのものをなんだかんだ買い換えたり買い足したりして* **15万円くらい。**
*グラフィックボードも2回買い替えて、* **6万円くらいしました。**
あとはアバターですかね。
*自作アバターはもちろんゼロ円*なんですけど、**「BOOTH」で売っているものを30体ほど購入して、だいたい10万円弱**使っていました。
他には、Unity AssetStore(「Unity」で使用できるアセットを販売するストア)でも少々…。

~~装い新たにインタビューに答える奈良阪さん。可愛く言っても30万円は安くないんだぞ。~~

#### balloon narazaka-vr right
まあ、**のめり込むとそれくらいは出してもいいかなと思っちゃいますね。**
ただ実際には、これから「VRChat」はじめようといちから新品を揃える人でも、**15万円程度あれば問題なくVRを始められると思っています。 **
また、ヘッドマウントディスプレイはお手頃な値段でレンタルさせてくれるサービスもあるので、そういったサービスを使ってみて試してみるのも良いんじゃないでしょうか。
上を見れば*「パソコン30万円、ヘッドマウントディスプレイ10万円、VR用全身スーツ10万円で、ハードだけで50万円！」*みたいな人もいるのですが、それはもう青天井になるだけなので...。

#### balloon skmt3p-vr left
確かに上を見たらキリがないですもんね。
それに、ゼロ円からでも十分楽しめるわけですし。

#### balloon narazaka-vr right
そのとおりです！

## 辛いところは「Unity」と「人間関係」のアップデート!?

#### balloon skmt3p-vr left
逆に、*「VRChatで辛かったこと」*ってなにかありますか？

#### balloon narazaka-vr right
現在の「VRChat」って正式版ではなくて、*アーリーアクセス版*の位置づけなんですよ。
だからなのか、*「Unity」のアップデートに対応しなきゃいけない*っていう課題が降りかかってくるんですよね。
**丹精込めて作って、これまでは問題なく動かせていたアバターやワールドが、アップデートのせいで壊れて動かなくなる**ことがあるんですよ。

~~表情から辛さを訴える奈良阪さん。~~

#### balloon skmt3p-vr left
エンジニアをやってる以上、一度は聞いたことあるような話ですね。
確かにこれは辛そう…。

新しい記事