Chatwork Creator's Note

ビジネスチャット「Chatwork」のエンジニアとデザイナーのブログです。

ビジネスチャット「Chatwork」のエンジニアとデザイナーのブログです。

読者になる

プロジェクトでデザインを共有する目的と流れ

f:id:cw-take:20180413121123p:plain

こんにちは。デザイナーの @cw-take です。

今回はデザインを共有する目的と、ChatWork でデザインする上で必要な共有のタイミングについて、個人的な考えを整理してみました。

なぜこの記事を書こうと思ったか

UI 変更のリリース延期が 2 度続きました。「このデザインで公開されると思ってなかった」という声がリリース直前でメンバーからあがってきたためです。

原因を考えると、デザインの共有不足が大きかったと感じました。1 度目は必要な相手に必要なタイミングで共有ができておらず、デザイン部内のレビューも不十分なまま進めてしまいました。2 度目はレビューや共有を InVision だけでおこない、実装後の画面を見せずにリリースしようとしていたため、当日まで「本当にリリースされる見た目」が同じプロジェクトのメンバーでもわからない状態でした。

リリースを直前で延期すると予定の再調整に多くの人が巻き込まれます。まわりに迷惑をかけないためにも、デザイン共有の目的から一度見直しておきたいと思いました。

デザイン共有の目的

共有はチームとしてデザインをつくりあげるために必要です。

デザインする中で、技術的な視点からエンジニアの意見が必要になることもありますし、よりユーザーに近い視点として開発者以外(エンジニア、デザイナー以外)の意見が必要になることもあります。最終的なデザインの決定はデザイナーがしますが、デザインを決めるまでの過程で同じチームメンバーの意見が必要になります。

また、デザインはプロジェクトの目的や機能と強く結びついている上に見た目で変化がわかりやすいので、デザイナー以外にも多くの人が注目しています。もし共有不足でまわりの確認が取れていないデザインを進めると、必ずどこかでストップがかかり、デザインを決めるのに余計な時間がかかってしまいます。

わかっていてもできないデザイン共有

デザイン共有の目的や、共有が不足したときのリスクは意識していても、人にデザインを見せるタイミングをつい逃してしまうことがあります。それは共有のために説明を用意する手間や、相手の意見を聞く怖さがあるからです。

こういった「わかっていてもできない」状態は、自分の中でデザイン共有の流れを具体的にしておくことで抜け出しやすくなります。

デザイン共有の流れ

デザインを共有する上で重要なのはタイミング共有する内容です。

プロジェクトでデザインを決めるときは、つぎのようなタイミングで共有が必要だと思います。

  1. プロジェクトの要件を具体的にしたいとき
  2. デザインの詳細な見た目を決めたいとき
  3. リリースするデザインを決めたいとき
  4. 使い勝手を検証したいとき

また、共有する際はつぎのことを意識して伝えます。

  • 共有する相手
  • 制作物
  • 制作の目的
  • 制作物の補足

それぞれ詳細を見ていきたいと思います。

1. プロジェクトの要件を具体的にしたいとき

  • 共有する相手 ... プロジェクトメンバー
  • 制作物 ... 手書きのラフなイメージか、Keynote などで作成したワイヤーフレーム
  • 制作の目的 ... 現実的なデザインの決定と必要な制作物の洗い出し
  • 制作物の補足 ... 制作物だけでは伝わらない挙動や遷移先の説明

たたき台としてまずはラフなイメージを提出して、デザインの大枠を確認します。この時点では形にできてない部分も多いので、頭の中のイメージをよく言葉で補足します。

2. デザインの詳細な見た目を決めたいとき

  • 共有する相手 ... デザイン部メンバー
  • 制作物 ... Sketch などでデザインの見た目を整えた 2, 3 枚の絵
  • 制作の目的 ... 視覚的な綺麗さと使い勝手の確認をするため
  • 制作物の補足 ... プロジェクトの目的と、提出したデザインを選んだ背景

デザインを載せる媒体にあった見た目になっているか、想像できる使い勝手でひっかかるところはないか、同じデザイナーの目を通して確認してもらいます。

3. リリースするデザインを決めたいとき

  • 共有する相手 ... プロジェクトメンバー、デザイン部メンバー
  • 制作物 ... InVision などでつくったプロトタイプ
  • 制作の目的 ... 遷移先や表示の確認、仕様の抜け漏れがないかを確認するため
  • 制作物の補足 ... 制作物だけでは伝わらない挙動や遷移先の説明

実装に入る前にデザインを決めます。このあと、実装済みのプロトタイプで使い勝手を検証したときに大きな問題がでなければ、ここで決めたデザインでリリースされることになります。

4. 使い勝手を検証したいとき

  • 共有する相手 ... 社内全員
  • 制作物 ... 実装済みの、ほとんど本番と同じ環境で使えるプロトタイプ
  • 制作の目的 ... 想定外の問題がないか確認するため
  • 制作物の説明 ... プロジェクトの目的と検証してもらいたいポイントの簡潔な説明

影響の大きい変更はユーザーに公開する前に社内で検証します。普段使いをする中でそれまで気づかなかった問題を発見し、デザインを一部再考することも少なくありません。

おわりに

記事の内容を振り返ると、これは共有というよりデザインの決裁フローに近いかもしれません。ただ、チームでデザインをつくるために共有が必要という点と、そのために必要な流れを整理することはできました。

共有するのがしんどいな、怖いなと思ったときはここに立ち戻って、あらためてデザイン共有の目的や流れを確認したいと思います。

また、今回はつくったデザインを共有する流れを紹介しましたが、つくり途中のデザインを共有することも重要です。途中のデザインを普段から共有しておくことで、そのデザインにした理由を一から相手に説明する必要がなくなりますし、自分一人でデザインの不安を抱え込む気持ちがなくなります。ChatWork にはこのつくり途中のデザイン共有をする場もあるので、これはまた別の機会に!(書くのはぼくじゃないかもですが! 😜 )

(おまけ)デザインを共有されたら

他のデザイナーからデザインを共有されることもあります。そんなときはつぎのことを確認するようにしています。

  • 依頼された要件(プロジェクトの目的など)を満たしたデザインになっているか
  • ChatWork のガイドラインに沿ったデザインになっているか
  • 見やすく、使いたくなるデザインになっているか