ホロアースでの役割
●概要｜HOLOEARTH（Windows/PC *closed）
●担当・役職：リードUI・UXデザイナー、サブリーダー兼務。
【業務内容】
・デザインシステムを構築し、ガイドライン・各種ドキュメントを整備、チーム内の判断基準を共通化
・新規・改修画面のWF〜トランジション付きプロト〜UIデザインまでを制作
・Unity（UGUI）でのUI実装・アニメーション調整まで担当し、設計から実装確認までを一貫
・エンジニア・ディレクター・関連部署と仕様を調整・折衝し、品質と開発要件のバランスを担保
【取り組み・工夫】
・仕様整理から実装確認まで一貫して関与し、開発スピードを維持しながら企画・エンジニアの手戻りを削減
・実装構造を前提とした画面設計・状態設計で、デザインと実装の連携コストを低減
・仕様が固まりきらない状況でも提案ベースで職種間のハブとして動き、進行を推進
・ガイドライン整備により、メンバーが自律的に判断・制作できる体制を構築
・ゲームで培った直感的な操作性と「楽しませる体験設計」を、非ゲーム領域にも応用できる強みとして標準化
大規模メタバース「HoloEarth」のUIを、リードUIデザイナー／サブリーダーとして担当しました。
テーマは 「IPとしての見た目の魅力」×「長期運用・拡張に耐える仕組み」の両立。
テーマは 「IPとしての見た目の魅力」×「長期運用・拡張に耐える仕組み」の両立。
このプロジェクトでは、ひとつの課題ではなく、プロダクト戦略〜表層までいくつもの課題が絡み合っていました。
動かせる範囲が層ごとにちがうので、それぞれに合わせてやり方を整えながら、
UIをどう開発していくかに赴きを置き、
"方針づくり → 画面設計・プロト → デザインシステム → Unity実装 → 運用フェーズ”までのリードを一貫して担当しておりました。
動かせる範囲が層ごとにちがうので、それぞれに合わせてやり方を整えながら、
UIをどう開発していくかに赴きを置き、
"方針づくり → 画面設計・プロト → デザインシステム → Unity実装 → 運用フェーズ”までのリードを一貫して担当しておりました。
チーム指標を以下に定め、リデザイン開発を推進
①止まりやすいプロジェクトを、止めずに進めること。
・リデザインを定常開発と並行で動かし、迷わず進められる状態をつくりました。
②みんなが同じ基準を見られるようにすること。
・命名やステートを実装に紐づく粒度でFigmaとUnity（uGUI）に揃え、ガイドライン化して属人化とばらつきを減らしました。
③体験を、動くもので確かめること。
・プロト段階から"動くUI"を用意し、レビュー会で実装前に詰めて手戻りを減らしました。
①止まりやすいプロジェクトを、止めずに進めること。
・リデザインを定常開発と並行で動かし、迷わず進められる状態をつくりました。
②みんなが同じ基準を見られるようにすること。
・命名やステートを実装に紐づく粒度でFigmaとUnity（uGUI）に揃え、ガイドライン化して属人化とばらつきを減らしました。
③体験を、動くもので確かめること。
・プロト段階から"動くUI"を用意し、レビュー会で実装前に詰めて手戻りを減らしました。
結果として、方向性が固まりきらないなかでも、品質と開発スピードを保ったまま、サービスのクローズまで一貫して走りきれました。
サービス的はクローズしましたが、リデザインのクオリティや直近のライブシステムのUXなどは社内外からも好評を頂きカバーが出すサービスとしての積み上げとして一定の貢献が出来たかと考えております。
●メンバー構成：100〜（UI：7）サービス的はクローズしましたが、リデザインのクオリティや直近のライブシステムのUXなどは社内外からも好評を頂きカバーが出すサービスとしての積み上げとして一定の貢献が出来たかと考えております。
●担当・役職：リードUI・UXデザイナー、サブリーダー兼務。
【業務内容】
・デザインシステムを構築し、ガイドライン・各種ドキュメントを整備、チーム内の判断基準を共通化
・新規・改修画面のWF〜トランジション付きプロト〜UIデザインまでを制作
・Unity（UGUI）でのUI実装・アニメーション調整まで担当し、設計から実装確認までを一貫
・エンジニア・ディレクター・関連部署と仕様を調整・折衝し、品質と開発要件のバランスを担保
【取り組み・工夫】
・仕様整理から実装確認まで一貫して関与し、開発スピードを維持しながら企画・エンジニアの手戻りを削減
・実装構造を前提とした画面設計・状態設計で、デザインと実装の連携コストを低減
・仕様が固まりきらない状況でも提案ベースで職種間のハブとして動き、進行を推進
・ガイドライン整備により、メンバーが自律的に判断・制作できる体制を構築
・ゲームで培った直感的な操作性と「楽しませる体験設計」を、非ゲーム領域にも応用できる強みとして標準化
【UIチーム】
UIは少数精鋭で、実装まで可能な優秀なメンバーが揃っていた。荒削りな部分はフォローし、伸ばせる部分は本人に推進してもらう──各メンバーの特性を活かしながら、サービスクローズまで一貫してこのフローを走り切れたことが、このチームでの最大の成果でした。
UIは少数精鋭で、実装まで可能な優秀なメンバーが揃っていた。荒削りな部分はフォローし、伸ばせる部分は本人に推進してもらう──各メンバーの特性を活かしながら、サービスクローズまで一貫してこのフローを走り切れたことが、このチームでの最大の成果でした。
WORKS
【コンテンツマップ】
「この画面、どこに影響しているのか？」「追加するとどこに影響するか？」などサービス構成を俯瞰で把握できなかったため、ディレクターと協業し作成。最新画面のindexや機能改修が追いついていない場所など、俯瞰で全体を把握できるようにし企画側へ共有。
【ガイドライン】
レイアウト時に一貫性が保てるように各コンポーネントをLVで再整理。
Unityとの実装データを差分がないようにprefabの命名規則から合わせていくなど、実装面でのコミュニケーションコストを下げる為に活用。
【ドキュメント】
ガイドライン以外でチーム全体にルール展開が必要なものは情報切り分けてNotionへドキュメント化。
Before→After
アイテムビューワーは見た目のワクワク感を向上。
UGCアイテム拡張を見据えて全体設計を整理。
UGCアイテム拡張を見据えて全体設計を整理。
左右に合ったパネル情報をグルーピングし、操作導線を整理。
左から右へ自然と導線が向くように設計。更新でもカラム以外が増えないように。
UI Design
コンセプトはSNSボード風。訴求力高めるため動画が再生できるようにしました+モバイルの解像度でも転用しやすいレイアウトに。
ショップTOPVコン、詳細な動画再生のタイミングなどは別途エンジニア向けにUI仕様を作成し実装を進めました。（センターのビューに入ると自動再生、リピートスクロールetc）
ショップ
ホロフォンデザイン
アウトゲーム改修HUDサンプル。サンドボックスとの統一を目指したが、実装状況とプレイ体験の差異から別管理とする判断に至った。
フレンド承認時の演出サンプル（figma motion）推し同士が繋がると派手目に出して差別化
GRAPHICS
ねぽらぼSNSバナー
グラフィックデザイン集 ホロアースは楽曲も良いのでぜひ視聴してみてください！
