KLab福岡Meetup 「禍つヴァールハイトを支えるレイアウト業務」 デザイナーが行うUNITYレイアウト実装のメリットについて

1. 禍つヴァールハイトを支えるレイ
アウト業務
デザイナーが行うUnityレイアウト実装のメリット
UI/UXグループ 山内豊

2. 自己紹介
山内 豊
クリエイティブ部 UI/UXグループ 福岡拠点
webデザイン会社を経て2013年KLab入社。
UIデザイン・設計業務の他、アプリ内webページの実装や、デザイナーのためのフォトショップスクリプ
ト制作なども行っています。
現在は禍つヴァールハイトでUNITYレイアウト実装をメインに担当しています。

3. 禍つヴァールハイト制作チームでは当初
全てのUIデザイナーが
Unityのレイアウトを調整する
という目標がありました

4. エンジニア
デザイナー
デザイン
レイアウト
UI実装
指示書作成 微調整の指示
微調整
過去案件のフロー

5. デザイン
実装
レイアウト 微調整
エンジニア
デザイナー
禍つヴァールハイトのフロー

6. 全てのデザイナーが実装するフローにすることはできませんでし
たが…
UIデザイナーがUnityのレイアウトを調整する
というところは達成できました！！

7. 1. 制作がUnityのレイアウトを触るための内製ツール
2. 制作がUnityのレイアウトを触るメリット
3. 制作がUnityを触るために必要なスキルセット
4. まとめ
本日のながれ

8. 制作がUnityの
レイアウトを触るための
内製ツール

9. 制作がUnityのレイアウトを触るにあたり、大阪開発チームから特
に以下の内製ツールを用意していただきました。
1.レイアウトを触るための内製ツール
PSD
コンバーター
スプライト
スワップ
リファレンス

10. PSDコンバーター
PSDをprefabに変換してくれるツールです。レイヤーを切り出してアトラス化してくれたり、
既存アトラスの場合はバイネームで差し替えたりしてくれます。
1.レイアウトを触るための内製ツール
PSD Unity

11. スプライトスワップリファレンス
指定したスプライトを入れ替えてくれます。スプライトの差し替えが必要な場合は、一括
で変換してくれます。
1.レイアウトを触るための内製ツール
素材A 素材B

12. その他にもたくさんのツールを作っていただきました。
禍つヴァールハイトのUI業務はかなり効率がよかった！
→UIに非常に協力的だった大阪開発チームの援助のおかげ
1.レイアウトを触るための内製ツール

13. 制作がUnityの
レイアウトを触るメリット

14. 2.制作がUnityのレイアウトを触るメリット
大きくは以下の4つになるかと思います。
1. 設計書・指示書の工数削減
2. クライアントのレイアウトを制作側で担保
3. 成果物のクオリティ維持
4. アトラスの管理・画角対応

15. メリットその1
開発に渡す設計書・指示書の工数を減
らすことができる

16. たとえばこういったデザインの場合
2.制作がUnityのレイアウトを触るメリット

17. 設計書・指示書を作成します
サイズ・座標の
指定、画像の指
定
フォントサイズ・座
標の指定画像の
指定、サイズの指
定
サイズ・座標の指
定、アイコン画像の
指定
サイズ・座標の指定
各要素サイズ・座標
の指定、アイコン画
像の指定
2.制作がUnityのレイアウトを触るメリット

18. 指示書・設計書の工数の負担がとても大きい
制作がレイアウトを作成することで・・・
弊社ではスケッチ等のレイアウトツールを使って指示書の工数を大きく削減しているチームもあります。禍つで
はタイミング的に導入できませんでしたが、デザイナーがUnityのレイアウトを触るにしろ触らないにしろ便利に
なるので、今後積極的に試していきたいと思っています。
2.制作がUnityのレイアウトを触るメリット
→詳細な指示書の作成工数をクライアント実装工数に！

19. PSDデータのルール決め
1. レイヤー名を素材名にする
2. 空白を含んだサイズの素材は、実サイズのレイヤーを用意す
る
3. 新規に追加した素材はレイヤー名で新規と分かるようにする
2.制作がUnityのレイアウトを触るメリット

20. 特殊な実装をする場合・・・
・開発にレイアウト構成を説明しなければいけない
2.制作がUnityのレイアウトを触るメリット

21. 制作がレイアウトを組めば…
・作りの実装を伝える必要がなくなる
・デザインとの見え方の違いも確認できる
→将来的な修正リスクを削減することができる
2.制作がUnityのレイアウトを触るメリット

22. メリットその2
デザインガイドラインでは網羅できな
い、クライアントのレイアウトルールを
制作側で担保できる

23. 例えばこういったボタン上テキストの場合、指示書には
フォント・サイズ・シャドーなどについて記載しますが・・・
フォント：FOT-スキップ Std B
サイズ：24px
シャドー：距離4, サイズ2
2.制作がUnityのレイアウトを触るメリット

24. 実際にレイアウトを実装するためには、これだけでは不十
分だったりします。
フォント：FOT-スキップ Std B
サイズ：24px → 文字数が横幅を超えるとき
は？テキストの範囲は？
シャドー：距離4, サイズ2 → Unityコンポーネ
ントでの数値は？
2.制作がUnityのレイアウトを触るメリット

25. 指示書を元に開発にレイアウトを組んでもらうことの懸念点
・実装箇所、開発担当者によって微妙に変わる
・都度確認作業が起きると作業のスピード感が損なわれる
→曖昧になりやすいレイアウトルールをきっちりと決めることがで
きる
2.制作がUnityのレイアウトを触るメリット

26. 禍つでは、以下のようにUnityクライアントルールを制作し、チーム
が制定・運用しながら実装しました。
2.制作がUnityのレイアウトを触るメリット

27. クライアントルールがあれば…
→画面によるUIの揺れを減らすことができる
クライアントルールを内製ツールに取り込んでもらえば…
→実装がより効率的になる
2.制作がUnityのレイアウトを触るメリット

28. メリットその3
成果物のクオリティを維持しやすい

29. エンジニア
デザイナー
デザイン
レイアウト・
UI実装
指示書作成 微調整の指示
微調整
過去案件のフロー
ここで初めてUnityの画
面を確認
2.制作がUnityのレイアウトを触るメリット

30. デザイン
実装
レイアウト
微調整
エンジニア
デザイナー
禍つヴァールハイトのフロー
この段階でUnityの画面
を確認できる
更に実装後の画面の
確認・微調整ができる
一次アウトプット ニ次アウトプット
微調整

31. 微調整が発生したときも…
→調整依頼がなくなり、制作で調整をして完結できる
成果物のクオリティ向上が期待できる！
2.制作がUnityのレイアウトを触るメリット

32. メリットその4
アトラスの管理・画角対応を早い段階
からできる

33. 共通アトラス 各画面ユニークアトラス
禍つヴァールハイトのアトラス
・全画面共通で読み込まれるアトラス
・各機能で読み込まれるユニークアトラス
2.制作がUnityのレイアウトを触るメリット

34. 開発にレイアウトを実装してもらうと、
・制作がアトラスの状況を把握しづらい
・不要素材・似た素材が複数存在して、誰が把握しているかわか
らなくなる
禍つヴァールハイトでは・・・
・すべて制作側で管理する！！
2.制作がUnityのレイアウトを触るメリット

35. 禍つヴァールハイトの画角対応
・以前のフローの場合は、各画角の場合のデザインを指示書に記
載
→レイアウト実装時に対応する
・対応漏れ画面を極力なくす
・制作側で対応できない箇所の早期発見
2.制作がUnityのレイアウトを触るメリット

36. 画角対応の例
iPhoneX系 iPad系
フッター・サイドがセーフエリアに入っていないかを
確認(iPhoneXの場合ドックバーとかぶっていない
か）。入っている場合はそれぞれマージンを取る。
スクロールは原則上下にストレッチ。その
他要素は適宜配置。
2.制作がUnityのレイアウトを触るメリット

37. 制作がUnityを触るために必
要なスキルセット

38. 制作がUnityを触るために必要な
３つのスキル
3.制作がUnityの触るために必要なスキルセット

39. 必要なスキルセット1
UIシステムに関する知識

40. UIシステムに関する知識
・標準のRect Transformコンポーネント
・レイアウト系コンポーネント
3.制作がUnityの触るために必要なスキルセット

41. Rect Transformコンポーネント
・ピボットとアンカーを使ってわかりやすいレイアウトに！
3.制作がUnityの触るために必要なスキルセット
例：

42. 3.制作がUnityの触るために必要なスキルセット

43. 3.制作がUnityの触るために必要なスキルセット

44. 3.制作がUnityの触るために必要なスキルセット

45. 3.制作がUnityの触るために必要なスキルセット

46. 装備種によって出し分
けられるので、入れ物
のみ用意する。
表示要素が減る場合があ
るので、アイコン2つとテ
キストオブジェクトを
Layout Group系コンポー
ネントで組む。
レイアウト系のコンポーネント
・動的な要素の見せ方も制作が担保する
3.制作がUnityの触るために必要なスキルセット

47. 3.制作がUnityの触るために必要なスキルセット
パフォーマンスや実装の兼ね合いから、制作が組んだレイアウト
以外の方法で実装して頂く場合もありますが…
制作がレイアウトを組むことで、”こういう見せ方をしたい”と開発
の方に
Unity上で伝えることができる

48. 必要なスキルセット2
内製コンポーネントに関する知見

49. 3.制作がUnityの触るために必要なスキルセット
内製コンポーネントに対する知識
・テキスト
・グラデーションコンポーネント
背景画像が動的な文言に敷いて
ある。contents size fitterコン
ポーネントとlayout groupコン
ポーネントを使ってレイアウトを
組む。

50. 必要なスキルセット3
バージョン管理システムに関する知識

51. 3.制作がUnityの触るために必要なスキルセット
バージョン管理システムの知識
・ブランチの最新化
・マージ
・コンフリクトの解消

52. まとめ

53. 7.まとめ
UI制作のゴールは、PSDではなくUnity=ゲームエンジン！
PSD Unity

54. 7.まとめ
UIデザイナーがUnityのレイアウトを調整することで・・・
・UIの統一感が上がる！！
・成果物がデザイン表現に近づく！！
・遊んでいただくユーザー様のゲームに対する信頼を得ることが
できる！！

55. ご清聴ありがとうございました！
今後共禍つヴァールハイトをよろしく
お願いします！