ホロアースでの役割
●概要
HOLOEARTH(Windows/PC *closed)
大規模メタバース「HoloEarth」のUIを、リードUIデザイナー/サブリーダーとして担当。
コンセプト策定→UX改善→画面設計・プロト → デザインシステム → Unity実装 → 運用までの業務を担当してました。
プロダクトコンセプト:
開発テーマは「ホロライブの会社が作るメタバースとしての魅力」×「長期運用・拡張に耐える仕組み」の両立でした。
●チーム構成
・メンバー構成:100〜(UI:7)
・担当・役職:リードUI・UXデザイナー、サブリーダー兼務。
●業務内容
・デザインシステムを構築し、ガイドライン・各種ドキュメントを整備、チーム内の判断基準を共通化
・新規・改修画面のWF〜トランジション付きプロト〜UIデザインまでを制作
・Unity(UGUI)でのUI実装・アニメーション調整まで担当し、設計から実装確認までを一貫
・エンジニア・ディレクター・関連部署と仕様を調整・折衝し、品質と開発要件のバランスを担保
●尽力したこと
・仕様整理から実装確認まで一貫して関与し、開発スピードを維持しながら企画・エンジニアの手戻りを削減
・実装構造を前提とした画面設計・状態設計で、デザインと実装の連携コストを低減
・仕様が固まりきらない状況でも提案ベースで職種間のハブとして動き、進行を推進
・ガイドライン整備により、メンバーが自律的に判断・制作できる体制を構築
・ゲームで培った直感的な操作性と「楽しませる体験設計」を、非ゲーム領域にも応用できる強みとして標準化
HOLOEARTH(Windows/PC *closed)
大規模メタバース「HoloEarth」のUIを、リードUIデザイナー/サブリーダーとして担当。
コンセプト策定→UX改善→画面設計・プロト → デザインシステム → Unity実装 → 運用までの業務を担当してました。
プロダクトコンセプト:
開発テーマは「ホロライブの会社が作るメタバースとしての魅力」×「長期運用・拡張に耐える仕組み」の両立でした。
●チーム構成
・メンバー構成:100〜(UI:7)
・担当・役職:リードUI・UXデザイナー、サブリーダー兼務。
●業務内容
・デザインシステムを構築し、ガイドライン・各種ドキュメントを整備、チーム内の判断基準を共通化
・新規・改修画面のWF〜トランジション付きプロト〜UIデザインまでを制作
・Unity(UGUI)でのUI実装・アニメーション調整まで担当し、設計から実装確認までを一貫
・エンジニア・ディレクター・関連部署と仕様を調整・折衝し、品質と開発要件のバランスを担保
●尽力したこと
・仕様整理から実装確認まで一貫して関与し、開発スピードを維持しながら企画・エンジニアの手戻りを削減
・実装構造を前提とした画面設計・状態設計で、デザインと実装の連携コストを低減
・仕様が固まりきらない状況でも提案ベースで職種間のハブとして動き、進行を推進
・ガイドライン整備により、メンバーが自律的に判断・制作できる体制を構築
・ゲームで培った直感的な操作性と「楽しませる体験設計」を、非ゲーム領域にも応用できる強みとして標準化
CONCEPT
BEFORE AFTER
アイテムビューワーは見た目のワクワク感を向上。
UGCアイテム拡張を見据えて全体設計を整理。
UGCアイテム拡張を見据えて全体設計を整理。
左右に合ったパネル情報をグルーピングし、操作導線を整理。
左から右へ自然と導線が向くように設計。更新でもカラム以外が増えないように。
コンセプトはSNSボード風。訴求力高めるため動画が再生できるようにしました+モバイルの解像度でも転用しやすいレイアウトに。
ショップTOPVコン、詳細な動画再生のタイミングなどは別途エンジニア向けにUI仕様を作成し実装を進めました。(センターのビューに入ると自動再生、リピートスクロールetc)
ショップデザイン
LEAD WORKS
ガイドライン制作
レイアウト時に一貫性が保てるように各コンポーネントをLVで再整理。
Unityとの実装データを差分がないようにprefabの命名規則から合わせていくなど、実装面でのコミュニケーションコストを下げる為に活用。
コンテンツマップ制作
チームの悩み「この画面、どこに影響しているのか?」「追加するとどこに影響するか?」などサービス構成を俯瞰で把握できなかったため、ディレクターと協業し作成。最新画面の状態や機能改修が追いついていない場所など、サービスの開発状況を俯瞰で把握できるようにし、チームメンバーへ共有。
ドキュメント整備
ガイドライン以外でチーム全体にルール展開が必要なものは情報切り分けてNotionへドキュメント化。
世界観構築例
ホロフォンデザイン
アウトゲーム改修HUDサンプル。サンドボックスとの統一を目指したが、実装状況とプレイ体験の差異から別管理とする判断に至った。
フレンド承認時の演出サンプル(figma motion)推し同士が繋がると派手目に出して差別化
GRAPHICS
ねぽらぼSNSバナー
グラフィックデザイン集 ホロアースは楽曲も良いのでぜひ視聴してみてください!