ホロアースでの役割
●概要
HOLOEARTH(Windows/PC *closed)


大規模メタバース「HoloEarth」のUIを、リードUIデザイナー/サブリーダーとして担当。
コンセプト策定→UX改善→画面設計・プロト → デザインシステム → Unity実装 → 運用までの業務を担当してました。

プロダクトコンセプト:
開発テーマは「ホロライブの会社が作るメタバースとしての魅力」×「長期運用・拡張に耐える仕組み」の両立でした。

●チーム構成
・メンバー構成:100〜(UI:7)
・担当・役職:リードUI・UXデザイナー、サブリーダー兼務。


●業務内容

・デザインシステムを構築し、ガイドライン・各種ドキュメントを整備、チーム内の判断基準を共通化
・新規・改修画面のWF〜トランジション付きプロト〜UIデザインまでを制作
・Unity(UGUI)でのUI実装・アニメーション調整まで担当し、設計から実装確認までを一貫
・エンジニア・ディレクター・関連部署と仕様を調整・折衝し、品質と開発要件のバランスを担保

●尽力したこと
・仕様整理から実装確認まで一貫して関与し、開発スピードを維持しながら企画・エンジニアの手戻りを削減
・実装構造を前提とした画面設計・状態設計で、デザインと実装の連携コストを低減
・仕様が固まりきらない状況でも提案ベースで職種間のハブとして動き、進行を推進
・ガイドライン整備により、メンバーが自律的に判断・制作できる体制を構築
・ゲームで培った直感的な操作性と「楽しませる体験設計」を、非ゲーム領域にも応用できる強みとして標準化
CONCEPT
BEFORE AFTER
アイテムビューワーは見た目のワクワク感を向上。
UGCアイテム拡張を見据えて全体設計を整理。

左右に合ったパネル情報をグルーピングし、操作導線を整理。

左から右へ自然と導線が向くように設計。更新でもカラム以外が増えないように。

コンセプトはSNSボード風。訴求力高めるため動画が再生できるようにしました+モバイルの解像度でも転用しやすいレイアウトに。

ショップTOPVコン、詳細な動画再生のタイミングなどは別途エンジニア向けにUI仕様を作成し実装を進めました。(センターのビューに入ると自動再生、リピートスクロールetc)

ショップデザイン

LEAD WORKS

ガイドライン制作
レイアウト時に一貫性が保てるように各コンポーネントをLVで再整理。
Unityとの実装データを差分がないようにprefabの命名規則から合わせていくなど、実装面でのコミュニケーションコストを下げる為に活用。

コンテンツマップ制作
チームの悩み「この画面、どこに影響しているのか?」「追加するとどこに影響するか?」などサービス構成を俯瞰で把握できなかったため、ディレクターと協業し作成。最新画面の状態や機能改修が追いついていない場所など、サービスの開発状況を俯瞰で把握できるようにし、チームメンバーへ共有。

ドキュメント整備
ガイドライン以外でチーム全体にルール展開が必要なものは情報切り分けてNotionへドキュメント化。

世界観構築例

ホロフォンデザイン

アウトゲーム改修HUDサンプル。サンドボックスとの統一を目指したが、実装状況とプレイ体験の差異から別管理とする判断に至った。

フレンド承認時の演出サンプル(figma motion)推し同士が繋がると派手目に出して差別化

GRAPHICS

ねぽらぼSNSバナー

グラフィックデザイン集 ホロアースは楽曲も良いのでぜひ視聴してみてください!


You may also like

Back to Top