UIデザイナーのUnity事情 〜ワークフロー心得編〜

Transcript

1. CONFIDENTIAL UIデザイナーのUnity事情 ワークフロー心得編

2. CONFIDENTIAL CONFIDENTIAL UIデザイナーって どのぐらいUnityをいじるの？

3. CONFIDENTIAL CONFIDENTIAL エンジニアとの二人三脚 ※特にクライアントエンジニア

4. CONFIDENTIAL CONFIDENTIAL 画面デザインだけが役割ではない デザイナー エンジニア 実装 画面デザインです 実装します〜

5. CONFIDENTIAL CONFIDENTIAL 形式的な分担では効率が悪い デザイナー エンジニア 画面デザイン です 実装しました デザイナー なんかイメージと違

   うなぁ エンジニア 調整しました

6. CONFIDENTIAL CONFIDENTIAL ・ニュートラルなアニメーション ・シームレスな遷移　etc ゲームのUIデザイン インタラクションデザインに依るところが多い

7. CONFIDENTIAL CONFIDENTIAL チームメンバーの共通認識 Adobe XD ProtoPie こちらのイメージややりたいことを具現化し てチームメンバーへ、作ろうとしているもの の方向性やゴールの共有する 世の中には優れたモックツールが多く存在

   するので、ツールの力を借りて効率よくイ メージのすり合わせを図る

8. CONFIDENTIAL CONFIDENTIAL Unityでゲーム画面に血を通わす デザイナー 画面デザインはできた 動かしていくぞ！ この機能ってuGUIでは手間か かるな…。

9. CONFIDENTIAL CONFIDENTIAL エンジニアとの二人三脚 デザイナー エンジニア ◦◦は△△なので □□□できるようにしたいのです が、可能ですか？ ••のコンポーネントを用意した ので活用してください

   ◆◆の入力で表示の調整が可 能になっています

10. CONFIDENTIAL CONFIDENTIAL ・技術的な相談 貪欲な姿勢 既存機能では再現が困難な表現などは、実現可能性をエンジニアに相談してみる！ 弊社エースエンジニア曰く「思いつくことで、出来ないことはないです」とのこと。 惚れてまうやろ！ ・作業の効率化 工程の多い手間のかかる作業などが発生した場合、エンジニアのサポートを検討するようにしています。 スクリプトによる自動処理や独自コンポーネントの実装などで、作業の工数を圧縮しクリエイティブな時間を捻出！

    ・前提条件のすり合わせ 画面デザインをそのまま実装するのではなく、機能単位でエンジニアと「作るもの」の認識合わせを心がけています。 あとから、静的な要素が実は動的なもので…となると場合によっては構造から作り直すことになり工数が圧迫されることも。 ・拡張性についての認識合わせ 現状は要素が収まっているレイアウトでも、リリース後に要素が倍に増えますなど運用上の都合でレイアウトが崩壊してしまうケースも あります。デザイナー、エンジニア間でUIの拡張性についても認識を合わせておかないと、改修が困難になったり、無理のあるレイアウ トになったりします。

11. CONFIDENTIAL CONFIDENTIAL ・命名規則（各種アセットやprefab内部） ・構造のルール ・独自コンポーネントの必要性 どんなことに注意すればよいのか 初期段階でルールを決めておく

12. CONFIDENTIAL CONFIDENTIAL prefab内部の命名規則 / 構造 MainContainer Contents 繰り返されない要素群 ◦◦◦Content LayoutGroup要素群

    ◦◦◦Layout Scroll要素 ◦◦◦ScrollView DetailContainer 固定のテキスト ◦◦◦Label 動的なテキスト ◦◦◦Text 固定の画像 装飾類　◦◦◦Ornament 横罫線　HorizontalLine 縦罫線　VerticalLine 動的な画像 ◦◦◦Icon ◦◦◦Graphic（キャラ） リスト（リピート）要素 ◦◦◦Cell タブ タブ全体　◦◦◦TabView タブ部分　Tabbar ※土台や背景画像は親の Rect TransformにImageで指定 破綻しがちなPrefab内の 階層構造を定義しておく

13. CONFIDENTIAL CONFIDENTIAL カテゴリー サブカテゴリー 識別子 備考 ボタン 通常 Button_ 土台のあるもの

    チェックボックス Button-Check_ ラジオ Button-Radio_ トグル Button-Toggle_ アイコン系 Button-Icon_ 矢印、◦や×など土台がなくアイコンの形状をしているもの タブ Button-Tab_ ダイアログ Dialog_ 入力ボックス Input_ プログレス Progress_ 土台 汎用、ユニーク Foundation_ 角丸の場合はR値を記載 ユニークは何の土台かが分かるように名称を記載 UIアセットの命名規則の一例 識別子による検索性の向上

14. CONFIDENTIAL CONFIDENTIAL Unity Assets内の構造 直感的で解りやすい構造が大切！

15. CONFIDENTIAL CONFIDENTIAL 独自コンポーネント 拡張性の高いUnityの特性を活かして 作業効率化を図れるコンポーネントをカスタマイズしていく文化も大切 ScrollViewまわりの実装に必要な コンポーネントの良いところどりをして 一つのコンポーネントに集約 スクロール内のリスト用Prefabのセット プレビュー機能

    ないものは作ってしまえ！ ※費用対効果の検証は必要

16. CONFIDENTIAL CONFIDENTIAL あったらいいな

17. CONFIDENTIAL CONFIDENTIAL 作業データとアセットデータの融合 UI UIParts Component リンク配置 リンク配置

18. CONFIDENTIAL CONFIDENTIAL 作業データとアセットデータの融合 UI UIParts Component リンク配置 リンク配置 UI 作業データの最小単位が

    Unityで扱われるUIアセットを担う！ ※スライスデータの共存に難あり

19. CONFIDENTIAL CONFIDENTIAL PSD to Prefab UI UI ワンクリックでPSDのデザインがPrefab化される

20. CONFIDENTIAL CONFIDENTIAL ご清聴ありがとうございました