この記事はcluster Advent Calendar 2019 18日目の記事です。
前回はkyokomiさんによる「clusterのserverについて(入門編)」でした。プログラムがわからなくても、clusterがどんなデータをやりとりしているかわかるいい記事でした。

はじめに

デザイナーのよしおか こうです。今は主にUIデザインの仕事に注力しています。

今日の記事では、今まで紹介する機会のなかったclusterのデフォルトアバターのデザインについて書きたいと思います。

簡素な形で何も話すことがなさそうですが、今のデザインになるまで紆余曲折があり、読み応えある内容になるのではと思います。

初期デザインの誕生

まだ“.”の付いたclusterがベータ版もリリースされていない頃、今のように共通のビジュアルではなく、プレイヤーが顔や体などのパーツを選ぶことができ、かつバリエーションを量産しやすいデザインを模索していました。

first_avatar_idea_sketch.png

しかし、割けるリソース量を見積もりがそれでも上回ってしまいました。パーツを選ぶ方式をやむなく諦め、共通したビジュアルのアバターをデザインすることになります。

ビジュアルを共通化するにしても、アバターそれぞれのパーソナリティだけは外せませんでした。ふとした雑談で、顔にSNSのプロフィール写真を使うだけでも十分パーソナリティを得られるのでは?となり、スケッチもせず、すぐさまモデリングしたのがこの初期のアバターでした。

今のデザインに至るまでの道のり

SNSのプロフィール写真を使ったアバターでベータ版がリリースされ、ここからさらにVRの体験を良くしていくため、アバターのハンドコントローラーへの対応が進められます。ここからが完成までの長い道のりの始まりです。

最初のブラッシュアップ

floating_boxy_humanoid_first_design.png

最初にブラッシュアップしたのが、この簡素に箱が浮いているアバターです。VRで重要な表現の1つである目の表現もこの頃に取り入れられました。

uvmap.gif

モデリングまで進んだアバターでしたが、実際に使うと難点にぶつかります。頭と手をプレイヤーの身体と完全に同期させると、手が足の位置よりも下になってしまい、絵のような雰囲気が出ずに微妙なビジュアルになってしまいまいた。

problem_image

平均的な頭身デザインへ

アバターとプレイヤーの一体感を出すためにデフォルメされた頭身を使うのが困難だったため、ここから人として平均的な頭身のデザインを考えるようになりました。

humanoid_avatar_sketch.png

様々な案をあげる中で、他にも肩を感じさせるデザインでアバターとの一体感を高めたい、足は動かせないので動いた時に身体とのズレを感じさせないデザインが良い……など、他にも改善点がいくつか出てきたので、それらを解消しつつデザインを仕上げていきました。

humanoid_avatar_design.png

過去最多のアイデアスケッチを描き、やっとのことでイメージが固まったこの時は「いいのができた!」と大変気分が“高揚”していたことを覚えています。

ただ、デザインは時間が経ってから見るとまた違って見えてきます。いったん寝かせてからまだ詰めるべき場所はないか判断することにしました。

愛着さを求めて

ダメでした。寝かせて冷静に見てみた印象は、“なんか怖い”というもの以外何もありませんでした。

社内で他のメンバーにも見せてみたところ、“感情を失ってそう”、“かつて人間だったもの”、“スターウォーズのクローントルーパー感(イメージボードの1つとしてグリーヴァス将軍があげられていたので大変よく的を得た評価)”との評価を頂きました。ダメだという確信をさらに得たのを覚えています。

再びアイデアスケッチを描き続け、次に良さそうとなったのは、この浮遊しているアバターでした。

floating_humanoid_avatar.png

先のアバターのような怖さを無くすため、頭身を下げて手も大きくデフォルメし、少し愛着さを感じられるデザインを目指しました。

身体とアバターの頭身のズレから出るビジュアルの問題は、手を長めにデザインしつつ体を浮遊させることで解決できました。浮いていて移動時に歩くことがないので足とのズレもあまり感じさせません。

ただ、今までよりも人らしさに近づいたためか、顔にプロフィール写真が貼られていると違和感がありました。なので、最終的には名札のようにプロフィール写真を胸元に配置するデザインにしました。

floating_avatar_art.png

パーソナリティの欠落

モデリングも進み、clusterの正式版リリースに向けて開発が順調に進む中、アバターをたくさん並べた画を撮る機会があり、あることに気がつきます。

実際に並べてみると、目線は胸元のプロフィール写真ではなく、アバターの顔を見てしまうことに気がつきました。そのため、それぞれに全くパーソナリティを感じられないアバターになってしまっていました。

non_personality.png

1.png

そして箱型へ…

プロフィール写真が顔の位置にあることこそがパーソナリティを表すために重要だと気付き、これまでの工夫を最初のデザインにすべて取り込んでいきました。

final_boxy_humanoid_sketch.png
横からでも個々の特徴が出るよう、写真の端が伸びて表示されるようなデザインに

モデリング後、もちろん様々なプロフィール写真を設定したアバターをたくさん並べ、それぞれにパーソナリティが感じられるか確認しました。これでめでたく現在のデフォルトアバターの完成となったわけです。

jumbotron_bg.png

ちなみに頭のアンテナは、初期の頃から“かわいい”という理由で付いています。ロボアバターとの愛称で呼ばれることもありますが、実はロボットのような見た目を特に目指したわけではありません😅

top_image4.png

clusterの前身とアバター

デフォルトアバターについての長い話が終わったのですが、もう少しだけ“おまけ”の話を書きたいと思います。

クラスター株式会社は、創業時の社名はFictbox株式会社という名前で“fict”というサービスを開発していました。バーチャル空間に入り、みんなで動画を見ることができる……今のclusterの原点でもあります。

当時、メンバー全員でサービスのイメージを共有できるよう、アバターの様子を交えたコンセプトアートを制作しました。

fictbird_concept_art

clusterをよく知っている人には、とても見覚えのあるアバターがたくさんいますね。そう、“しゃちょー”こと弊社代表の加藤のアバターです!

c57b90ff-e3c9-4d6b-876e-b9487640040d.png

この鳥型のアバターは、サービス名のfictに合わせて“fictbird”と呼んでいます。

この頃はまだVRデバイスにハンドコントローラーはなかったため、身体との一体感を高めるよう意識して、手の無いアバターをデザインしていました。パーソナリティを出せるよう色違いの他、帽子のような被りもののオプションも考えていました。

IMG_1119

fict.gif
試しにモデリングしてみた帽子

さらにバリエーションを出すため、同じ形の雰囲気を持った他の動物もいます。動物の種類はこの形の雰囲気の作りやすさで作るかどうか選んでいました。

colorlist.png
上からトリ、ハリネズミ、オットセイ、ウサギ、シカ

walking.gif

clusterでの採用に至っていない理由は、cluster最初のアバターと同じく制作コストの問題と、弊社加藤が普段嘆いている通りバーチャル空間で“握手”できないからです(笑)

終わりに

現在のデフォルトアバターになってからもう3年近く経ちます。clusterには自身を自由に表現できるカスタムアバターが実装され、様々なツールやサービス、デバイスの進化によって、カスタムアバターの利用もさらに容易になってきています。

デフォルトアバターの役目も今後は少なくなっていきそうですが、また何か新たな役割を持ったデフォルトアバターをデザインする機会があるかもしれません。その時は今回のように皆さんに紹介できたらいいなと思っています。

最後まで読んでいただき、ありがとうございました。

明日のcluster Advent Calendar 2019 19日目は、Mizoguchi Michiakiさんの「多様性とクラスター社の価値観」です。お楽しみに!