読者です 読者をやめる 読者になる 読者になる

CGメソッド

CG制作に関してのヒント

MENU

【UX/UI】UI仕様書についてのメモ

デザインやプログラムをするわけでもない領域の仕事は、成果物が見えずらいこともあって、何故時間がかかっているのか理解されないことがあります。

かといって中間役がいないといないで、それぞれの作業者または特定の誰かに負荷がかかるので、専任は必要だと思っています。

UI仕様書に関する私的なメモ書きです。

遷移図

要件定義、機能仕様書から遷移図(UML図、シーケンス図)を作成。

しっかり設計するべきなのに、不完全のまま次のフェーズに行くことが多い。

guiflow

設計する前に下記のようなツールを使って一旦整理するのもあり。

min.hatenablog.jp

画面設計書

絵を起こさないと見えないのか、仕様書が不完全のまま渡されたり、画面が見えたら後出しで追加されたり。

類似の製品の体験や画面に関するところをすべてスクショ撮ったり。

その中で抜けを確認したり。

作業に入る前の準備でだいぶ工数が削られるのですが、しっかり準備と理解ができてないとそれはそれで何回も見直しことになります。

Adobe XD

ワイヤフレーム(+プロトタイピング)を作成できるツール。

以前はPhotoshopで作成してしたが、こちらのほうが圧倒的に作成が早いです。

自前のUIkitを作成し、シンボルをうまく使いながら制作すると捗ります。

※Adobe XDの編集はMACかWindows10の環境でしか使えません。

min.hatenablog.jp

UI仕様書

ワイヤフレームのレビューの為のドキュメント化。 地味に修正から、再更新のドキュメント化にコストがかかる

PowerPoint / Excel

○誰でも扱える

×複数人で同時にコメントできない。

Google Slides / Google Spreadsheets

○複数コメント可。通知表示もちゃんとしている

×アカウントのログインが必要。オフィスよりは動作が重い。

Adobe XD

○ログインしなくても誰でもコメント可、資料可の手間が省ける

×コメントが気が付きにくい。通知も流れてしまう。でも今後の機能更新しだいで化ける可能性。

InVison

○レビューに特化している機能が多い

×すべて英語。チェックする誰しもが人が、新しいサービスに適応できるとは限らない。

その他のUI仕様書

UI素材表

パーツのリスト。

・パーツ画像 ・命名 ・サイズ ・用途 ・更新情報

など記載。

わかりやすいように図を追加したり、更新情報をこまめに記述しても誰も見てなかったり。

各画面の素材構成図

パーツリストだけではまず理解してもらえないので、Adobe XDの編集データまたはそのキャプチャ画像を用意。

普段から、名前やレイヤー構造を整理しながら作ると○。

とはいえキャプチャに矢印なり、コメントなり加えたりしていくうちにやはりコストがかさんでいく

UIデザインリスト

もちろんリストのパーツだけ作ればよいわけではないので、どの画面のデザインが必要か、洗い出しが重要。

もちろん完成後も仮素材と本素材の差分を確認する必要もあり、その差が大きいと調整するコストがかかります

UIアニメーション仕様書

プロトタイピングでUIアニメーションのモックも作成できると良いが、大抵は後回しに。

Unityで自分で作ったほうが早いと言って、作ってしまうとコスト増

感想

作業するためのドキュメントをいくら苦心して作成しても、うまくいかないことも伝わらないことがあるので、結局は担当者とコミュニケーションをとる必要もあり、それはそれで時間がかかります。

あと成果物が見えない人への理解がない発言は結構傷ついたりします(逆の場合はモチベーションが上がります)