他業種間とのデザイン共有について

こんにちは、UIデザイナーのMです。
こちらのブログに登場させていただくのは2回目となります。
前の記事を書いた時から担当案件の内容も結構変わり、デザイン業務において他業種間でのデザイン共有をどのようするかなども変わってきておりますためご紹介したいと思います。

◆仕様作成

ディレクターから案件の要望をいただき、デザイン作成が出来上がった段階でディレクター及び開発に作成したデザインで問題ないか確認するフェーズ、そして実装をお願いするフェーズ、と続くと思います。
その段階でもちろん口頭説明させていただく場としてMTGを組ませてもらうのですが、口頭だけだと聞き逃しや覚えきれないなどが発生してしまうため、仕様説明を文字に起こして記載するようにしています。

◇どのように仕様作成しているか

ディレクターがまとめた案件自体の仕様とは別に、デザインにおいての仕様も別途必要になると思います。

  • どのような配置や動きを想定しているのか
  • 導線はどこに飛ぶのか
  • hover時はどうなるのか
  • 固定なのか、画面サイズによって可変するのか etc...

など、デザインだけでは推測できない部分がたくさんあり、担当者間で共通認識を持っておくには情報が足りません。

なので、完成したデザインとは別に注釈付きの仕様もまとめています。
私が仕様作成する上で気をつけている部分は下記になります。

仕様作成のイメージ図
  • ①画面に番号を振り、対応する番号の部分の仕様がどうなるのか簡潔に文章にまとめる
  • ②既存仕様と同じものに関しては、既存仕様とわかるようにしておく
  • ③飛び先を指定したい場合はボタンやリンクの導線を記載する
  • ④追記仕様があった場合はきちんと反映させる
  • ⑤開発への相談事項がある場合は記載しておく
  • ⑥画面の中で既存と変わらない部分にはグレーのオーバーレイを敷いておく

①. 画面に番号を振り、対応する番号の部分の仕様がどうなるのか簡潔に文章にまとめる
こちらはUIの詳細を説明する上で、どの部分に対しての仕様なのかを明確にするために番号を振っています。
そして図の横に番号を振った仕様を並べて書くことにより仕様の文をまとめて読むことができます。
また、別のUIでも同じ仕様のものが出てきた場合、「(1)の仕様と同じ」など、説明を簡略化することもできます。
要件が複数に分かれている場合は(1-1)、(2-3)、(a-5)などと表記する場合もあります。

②. 既存仕様と同じものに関しては、既存仕様とわかるようにしておく
すでに実装されている既存パーツであることを明確化することによって、実装時にパーツ流用をすれば良いのだとすぐ判断できるようになり、工数削減につながります。

③. 飛び先を指定したい場合はボタンやリンクの導線を記載する
ボタン設置のUI作成をしたものの、どのページへリンクさせるのか必ず実装時に確認されることとなると思います。
なので、実装時に必要な情報はなるべく揃えておくようにします。

④. 追記仕様があった場合はきちんと反映させる
デザイン共有後、見落としや検討漏れや実装中だからこそ判明するものなどがあり、追加の仕様が必要になる場合があります。
こちらは口頭相談や社内チャットなどでやりとりすることが多いのですが、後日デザインを見返した時にその仕様が追加されていない!ということがままあります。
それを防ぐために相談して追加項目がある場合はできるだけリアルタイムで仕様にも反映させるようにします。
いつ、反映されたのか期日も記載するのがポイントです。

⑤. 開発への相談事項がある場合は記載しておく
こちらはすり合わせのMTGに持って行くときなどに、表現の相談や実装面での確認漏れがないように記載しておきます。
相談後、確認内容がどうなったか追加記載したり、相談内容が解決した場合はトルツメしてしまうこともあります。

⑥. 画面の中で既存と変わらない部分にはグレーのオーバーレイを敷いておく
仕様画面の図のデザインの方には、既存と同じで変わらない部分にオーバーレイを被せることがあります。
こうすることにより、確認すれば良い部分が明確となり、逆にデザイン側から触ってほしくない部分も的確に伝えることができます。

とても細かいですが、リモート業務が増えている中、なるべくズレのない共通認識を持って案件に携わるためには細かな配慮が必要になってくると考えています。
手間ではあるのですが、デザイン共有から開発実装までに期間が空いてしまったり、デザインを数ヶ月後などに振り返った際にも有効な手段となります。

 

◆設計図作成

設計図のイメージ図

また、私のチームではデザイン共有する際に設計図も作成することが多いです。
余白の開始ラインを揃えたり、タップエリアを考慮してもらったり、アイコンの位置は右から◯pxだったり、といざ実装してもらった時とデザインとの差異をなるべく少なくするためにこちらも作成したりしています。
細かいパーツは画面外に出して記載することもあります。

 

◆さいごに

これらの方法はあくまで私やチームメンバーが他業種間でのやりとりをなるべくスムーズに行えるように試みている手段であって、紹介したこれらが正解というわけではありません。
ぶっちゃけてしまえばその分手間と時間もかかってしまいます。
ですが、開発の方に「助かっている」と言ってもらえた時は嬉しくも感じました。
デザインを作り実装していく上でたくさんの人が関わる中、どう連携を取れば同じゴールへ進めるかを常に模索していければと思っています。
今回はその1つをご紹介させていただきました。参考になれば幸いです。
皆さんもデザイン共有する上で工夫していることなどがあれば是非教えてください!