デザインデータの読み解き
この記事は🗓クラスター Advent Calendar 2021 13日目の記事です。
前回は@MSA-iさんで「Unityの作業効率を上げる系Editor ScriptのTips集」でした。チーム向けにツールを効率化を上げたり統一を図るのは大事ですよね。よい記事でした！
こんにちは。クラスター株式会社でデザイナーとして働いているよしおか こうです。
これまでclusterのVR・モバイル・デスクトップ・WebのUIデザイン、及びUnity UIを使ったデザインの実装（レイアウト／アニメーション）をやってきました。
clusterのUIデザインと実装
クラスター初のデザイナーとして入社した僕がUnity UIを組めたこともあり、clusterのデザイン実装はデザイナーが行うフローが主流でした。しかし今後のより高度な実装や開発規模の拡大を見据え、今年2021年の春頃からデザインの実装はエンジニアにやってもらうことになりました。
データを通じてコミュニケーション
さて、自身で完結していた頃は少しでも制作コストを抑えるため、デザインデータのつくりは程々にして、細かい詰めは実装時に調整していました。UnityでUIを組むのに慣れているとこれが結構スピーディに実装を進めることができるんです。特に急を要する時はワイヤーだけ書き起こし、デザインはUnity UIで行ったこともあります。（負債にしかなりません。絶対に真似しないようにしましょう。）
ですが他の人が実装するとなれば話は別です。ただ画があるだけでは多種多様な解釈が発生し、思ってもみない実装をしてしまい二度三度手間になったりします。UIデザインのデータにはデザインデータにしっかり意図を込め、データを通じてコミュニケーションをとる必要があります。
デザインデータで何を気にかけるべきなのか
デザインと実装のどちらもやってきた身として、デザインする時にデータをどう気にかけてきたのかメモしていきたいと思います。実装する人はデザインデータのどこをどう見れば良いのかの参考にしてもらえると幸いです。
必ず名前をつける
とても基本的なことですが何にでも名前をつけることは大切です。完璧でなくていいです。語彙の無さから字面が不恰好であっても、とにかく名前をつけるようにしています。
名前があるとないでは、何の機能や意図をもってつくられたのかの判別に雲泥の差が出ます。デザインデータを見る人すべての負荷を軽減し、作業のスムーズさに影響を及ぼします。
レイヤーやオブジェクトはもちろん、テキストやカラースタイルなど、名前をつけられるものは何でもつけ、定義を明確にしておきます。実装側でも同名のプリセットなどを用意すれば、実装とのズレを減らすだけでなく作業の効率化にもなります。
意味のある構造をつくる
UIデザインツールのレイヤーは、グラフィックを主としたデザインツールとはちょっと意味合いが異なっています。IllustratorやPhotoshopなどのレイヤーはグラフィック制作の効率化に必要なものです。一方でFigmaやSketch、XDなどのレイヤーは、グルーピングの意図を込めつつ構造を定義する役割を担っています。
デザイナーの考えるUIの構造は、実装で必要になる構造とはもちろん異なるかとは思います。ですが構造が視覚化されることでレイアウトの意図はより明白になりますし、何よりUIデザインを行う時デザイナーが情報の構造（関係性）について考える際の助けにもなります。
ツールの機能を適切に使う
要素の原点を指定するConstraints、複数からなる要素のレイアウトをコントロールするAuto Layout、UIの要素を効率よく管理するLibrary、Componentなど、ツールごとで呼び名は異なりますが、UIデザイン向けにつくられた機能には慣れておいたほうが良いです。
これらの機能を使った値や設定はそのまま実装の時に参考になります。デザイナーから実装する人へのバトンとしてとても大切です。デザイナーとしても画面サイズのバリエーションに対応させたり、次回デザインする人が画面を一から作らなくて済んだり、効率的に進めるためのバトンとしても機能してくれる重要なものです。
値は読み替えるもの
先ほど値を実装の参考すると書いたものの、ツールの値が実装側の環境と概念が一致していることは少ないです。
ほとんどは簡単な読み替えで済むものですが、ツールと実装で特に差がありがちなのがテキストです。差を気にせずに実装すると、デザインが途端に間の抜けた感じになったり、情報を見過ごしたりといったことが起きるようになります。
デザインではフォントやウェイトの選択、文字や行の間隔、テキストボックスの余白など、様々な要素を使って画面全体をコントロールします。テキストはデザイナーが最も気にかけてデザインしている部分と言っても過言ではありません。実装する時にはデザインデータの中でも特に細心の注意を払いたいところです。
コメントを残す
補足を入れなければ伝わらないこともあります。特に注意して見てもらいたい箇所はもちろん。値を見れば一目瞭然であっても、細かくて見落としそうな箇所にコメントを残すなどすれば、実装の漏れや齟齬を減らすことができます。
挙動のイメージをモーションで伝える
モーションのデザインはUIのトランジションなどに限った話ではありません。ユーザーがUIをコントロールしている時のイメージを伝えるためにモーションを使うこともあります。
ユーザーの一連の動作と連動したUIの挙動は、テキストでは細かすぎて逆に伝わりづらくなります。その点モーションであれば細かなニュアンスが漏れることも少なく、より確度の高いデザインを効率よく実装することができます。
まとめ
ここまでに書いてきたことは口頭でやり取りすることは可能ですし、そうしたほうが早い場面もあります。ですがそれではやり取りした人同士でしかノウハウが溜まりません。何より同じやり取りを他のメンバーが繰り返し行っている可能性が高いです。
データやドキュメントが人に見られる形で丁寧に残っていることはとても大切です。あとに続く人がいつでも学ぶことができますし、わからなくなった時に人の記憶という曖昧なものに頼らなくて済みます。組織をスケールさせるのであれば、読み解くのに苦労しない法則性のあるデータとそれらの情報を明文化することはなお重要です。
終わりに
特にいつも気にかけていたことを中心にまとめました。今回はこの辺りで終わりにしたいと思います。今後はUnity UIを組むことがはほぼほぼないと思うので、ノウハウを残すためにも今度は実装寄りの話をたくさん書ければなと思います。
正直なところ色んな人の助けになったり、扱いやすいデザインデータに関してはまだ僕も道半ばと感じる次第です。デザイナーはよりデザインに邁進し、実装する人が喜んで組んでくれるような仕組みづくりを目指して今後も励んでいきたいと思います。
次回の🗓クラスター Advent Calendar 2021はulphaさんの「iOS開発から見るcluster」です。cluster全体で見れば短い期間だけどiOS開発も幾重にリリースを重ねてきています。楽しみですね！
Discussion