見出し画像

200万DLを突破した作業集中プロダクト「gogh」のデザイン思想

ambrの小澤です。私は現在、アバター作業集中アプリ「gogh(ゴッホ)」のデザイン全般を担当しています。

goghは2024年にβ版をリリースして以来、熱量あるユーザーさんに支えられ、モバイルアプリ版で200万ダウンロード、PC版(Steam)の販売本数は20万本を突破しました。ユーザーの7割以上が海外の方というグローバルに展開するプロダクトであり、国内外の著名なVTuberやイラストレーターさんにもご愛用いただいています。

現在、ambrにおいてデザイナーは私1人という体制です。この記事では、デザイナーとしてgoghというプロダクトに対してどのような思考でデザインに向き合っているのか、その裏側をご紹介します。本記事を通じて、ambrに興味を持っていただけたら嬉しいです。

⸺まずはambrに入社した経緯と、自己紹介をお願いします

私はフロントエンドエンジニアからキャリアをスタートし、その後プロダクトデザイナーへ転身しました。ベンチャーでの新規事業のデザインから、大企業でのPoC・DX推進まで幅広く経験してきました。

キャリアを考える中で、既存の顧客に決まった予算内でサービスを提供するよりも、自分たちでゼロイチの事業を立ち上げ、真っ直ぐに新規ユーザーへ届けるプロダクト開発に挑戦したいという思いが強くなっていきました。

そんな折、今から3年前に弊社の代表が「新たなSNSサービスをつくります」とツイートしているのを偶然見かけ、直接DMを送ったのがすべての始まりです。入社が決まり、少人数のチームでひたすらプロトタイプをつくっては検証する、という日々がスタートしました。

⸺現在、goghにおいてどのようなデザイン業務を担当していますか?

企画からユーザーの目に触れるあらゆる接点まで、広範囲を担当しています。

初期段階で最も注力したのは、プロトタイピングによる企画の可視化です。PSF(Problem Solution Fit)やPMF(Product Market Fit)を達成する前のフェーズでは、無数にある可能性の中から本当にユーザーに刺さるものを素早く見つけ出さなければなりません。そのため、プロトタイプを「つくっては捨てる」というサイクルを高速で回し、アイデアの検証を加速させました。実はgoghも初期段階ではアバターの撮影アプリとして構想していましたが、この泥臭い検証の過程で「みんなで作業に集中するアプリ」へと大きくピボットした経緯があります。

構想にあった機能の半分を削ぎ落とし、リリース時にはあえてミニマムな状態で世に出すことになりました。これにより価値検証のスピードが上がっただけでなく、その後の開発に影響しうる機能群が減ったことで、開発フェーズが進んでも柔軟に身動きが取れるという大きな恩恵がありました。最近ではVibe Codingも積極的に活用し、プロトタイピングの速度と質をさらに高めています。

画像

普段は本番環境のUI構築や、開発チームへスムーズに実装を引き継ぐためのカンバン作成といった実務も担っています。また、公式HP(gogh.gg)やディープリンクの案内ページ、Shopifyを用いた公式ストアなど、Webのフロントエンド周りのデザインと実装も行っています。他にも、ambrのプレスリリースや資料など、ブランドに関わるビジュアル制作にも携わっています。

画像


⸺goghをデザインするうえで、とくに意識していることは何ですか?

プロジェクト初期に定義したデザイン原則があり、意思決定の土台として大切にしています。

画像

1つめは「没入感」です。3Dアプリにおいてスマートフォンは、仮想空間とユーザーをつなぐ「窓」であると捉えることができます。goghにおける主役はあくまでアバターであり、ユーザー自身の時間です。その体験を阻害しないよう、UIの存在をいかに意識させないかが重要になります。そのためHUD(ヘッドアップディスプレイ)は極力最小限に留め、視界を遮らないよう必要な時にだけ表示し、5秒経過したら自然にフェードアウトして消えるといった細かな仕様を取り入れています。

画像

2つめは「あるべきところにあるUI」であることです。ゲームUIでは、世界観や見た目を重視するあまり、メニュー項目がただ羅列されていてどこに何があるか分からないという問題がよく見られます。goghではWebにおける知見を活かして情報設計を行い、直感的に操作を把握できるよう工夫しています。

画像

たとえばホーム画面では、WindowsやMacのデスクトップOSの概念を参考に、左側にアプリ群のアイコンを配置しました。画面右上には画角や環境など画面の変化に関わる要素を集約していますが、それらもただ並べるのではなく「ビューの操作」と「環境の操作(さらに室内と屋外)」に分離して表示しています。そしてマルチルームの移動に関する操作は右下にまとめるなど、ユーザーの無意識のメンタルモデルに沿った配置を意識しています。

3つめは「アクションを促進するUI」です。プロダクトのバイラル成長において、シェアのしやすさは重要です。あらゆる箇所にシェアへの導線を自然に配置し、SNSへ投稿する際のテキストにはディープリンクを含めることで、招待を受けた人がアプリを開いてすぐにフレンド申請を行えるように設計しています。

また、メタバース空間でありがちな「入室したものの、何をすればいいか分からず放置される」という離脱要因に対しては、画面中央に「すきな席に座って作業をはじめよう」と端的なメッセージを表示するようにしました。エラー画面や確認モーダルにおいても、状況の説明だけで終わらせず「次に何をすべきか」を必ずセットで提示し、ユーザーの手を止めさせないよう工夫しています。

画像

そして最後が「各デバイスに最適化されたデザイン」です。画面に収まる情報量はもちろん、タッチやスワイプといった指の操作と、マウスによるクリックやドラッグ、さらにはキーボードのショートカットなど、デバイスごとに体験の前提がまったく異なります。

たとえばアイテムを回転させるUIの場合、画面幅が狭いモバイルではHUD上にコントローラーを配置しますが、空間を広く使えるPCでは3D空間内で直接円形のUIを操作できるようにしています。音楽プレイリストも同様に、スマホではタップしやすい選択画面にし、PCでは一覧性を重視したレイアウトにするなど、それぞれの環境で最も心地よい手触りになるよう最適化を行っています。

画像


⸺いまambrでデザインに携わる面白さはどこにありますか?

冒頭でも触れた通り、goghはすでにグローバルで広く使われているプロダクトです。ユーザーの7割以上が海外の方であり、英語や中国語をはじめとする多様な文化圏のユーザーが実際にアプリを楽しみ、熱狂している様子を直に確認することができます。世界中で数多のソフトウェアが乱立する現代において、これほど勢いよく伸びているグローバルプロダクトの成長期に携われる機会は、そう多くないはずです。

また、チームの規模感も非常に意思疎通がしやすく、毎週木曜日にはメンバー全員が同じテーブルを囲んで作業をするなど、プロダクトの成長と課題を全員で共有し、共に喜べるカルチャーがあります。

デザインの観点で見ても、goghには取り組むべき課題と可能性が無数に残されています。画面演出やUIアニメーションといったインタラクションの質をさらに引き上げ、デザイナー自身がUnityへ直接UIを組み込んでいくことで、デザインの力そのものをプロダクトの強力なMoat(競争優位性)にしていきたいと考えています。同時に、トンマナや世界観の言語化を進め、より強固なブランドを構築していくフェーズでもあります。

画像

さらに、ambrでは既存プロダクトだけでなく、ゼロイチの新規事業に関わるチャンスも豊富にあります。数億人がプレイするRobloxプラットフォームでのグローバルヒットを狙うプロジェクトや、世界観やアート性を重視した新しいゲーム開発も動き始めています。ご自身の生み出すデザインの品質が、ユーザーの継続率や事業の売上に直結する手応えを存分に味わえる環境です。

⸺最後に、どのような方と一緒に働きたいですか?

自ら手を動かし、没入感のある美しいUIアートを共に考え、形にしていける方を探しています。

ambrの環境では、つくったUIがすぐに世界中のユーザーへと届きます。一時期Steam版ではほぼ毎週アップデートをリリースしていたほど、圧倒的なスピード感を持ってデザインとリリースを繰り返せる環境です。だからこそ、最新のゲームUIトレンドに常にアンテナを張り、より良いユーザー体験を追求し続けられる方にとって、これ以上ないポジションになると思います。

現在進行中の新規事業では、これまで以上に世界観を重視したアートやアニメーションの構築が求められます。機能としての使いやすさはもちろんのこと、ユーザーの心を動かすビジュアル表現の領域でも力を発揮していただける方とお会いしたいです。

画像

現在ambrでは、グローバルに展開する新規および既存ゲームのUIデザインをリードしていただけるUIアーティスト(中途)を募集しています。この記事を読んで、少しでも私たちのプロダクトづくりやデザインへのこだわりに共感していただけたなら、ぜひ一度カジュアルにお話ししませんか?
皆様からのエントリーを、心よりお待ちしております。

ambrの採用選考に関する情報はこちら

エントリーはこちら


いいなと思ったら応援しよう!

ピックアップされています

あなたのnoteを伸ばす共同運営マガジン

  • 72,608本

コメント

コメントするには、 ログイン または 会員登録 をお願いします。
200万DLを突破した作業集中プロダクト「gogh」のデザイン思想|ambr
word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word

mmMwWLliI0fiflO&1
mmMwWLliI0fiflO&1
mmMwWLliI0fiflO&1
mmMwWLliI0fiflO&1
mmMwWLliI0fiflO&1
mmMwWLliI0fiflO&1
mmMwWLliI0fiflO&1