デザインレビューで伝えて欲しいことを聞いてみた【デザイナーと働く #2】

はじめに

こんにちは。モバイルアプリの運用を担当しているkobayashiです。 本記事は【デザイナーと働く #1】デザイン要件で伝えて欲しいことを聞いてみたの続編です。今回は、デザイン要件を元に作ってもらった制作物のレビューを通して、デザイナーとの仕事をよりスムーズに進めるためのポイントをご紹介します。

デザインレビューで自分が伝えたいことが伝わらなかった経験がある方、デザイナーとの業務をもっと円滑にしたい方の参考に少しでもなればと思います。

概要

今回は、デザイン要件を受けてデザイナーが制作したアイコンのレビューをするという形式で要望の伝え方を考察したいと思います。正直１回目にもらったものでも満足度は高かったのですが、更に良くするべく、色々とデザイナーに相談をしてみました。

登場人物のおさらいです。

kobayashi

• 事業会社にて制作会社のデザイナーとやりとりをしていたことがある
• デザインの話題は好きだがそこまで詳しくない
• 現在はモバイルアプリの運用支援（カスタマーサポートやコンテンツ）を行なっている

たなか　ゆきこ

• デザイナー歴16年
• UI.UXデザイナー
• 現在はモバイルアプリのデザインを行なっている

 要望詳細

作ってもらったアイコンはこちらです。これだけでも十分素敵！ですが今回は欲を出してみます。

• ハートをもう少し目立たせて欲しい
• メールの線が細く見えるが、アイコンが小さく表示された時に潰れないか
• 全体的に余白が多いのでもう少し中の文字やピクトグラム（人物など）を大きくして欲しい
• 可能であればモバイルだってことも伝えたい
• rとtの文字のつまりが気になる
• 優しい感じはするが、緑の色はもう少しフレッシュな感じが良い

相変わらずふわっとしている気もしますが、初見のレビューで気になった内容はこんな感じです。

デザイナーからのコメント

私が作った要件に関して、たなか　ゆきこさんにコメントをもらいました。以下、kobayashiは「k」、たなか　ゆきこさんは「ゆ」とします。

ハートをもう少し目立たせて欲しい

ゆ: 目立つってところを考えたいんだけど、例えば他の画像と区切りをつけたいのか、最初に目に入って欲しいのかとかイメージある？目立つことで、何を表したいのかと言っても良いのだけど。

k: 何を表したいか・・・どちらかというと、ハートと背景が馴染みすぎているというか、人が欠けて見えるのが気になってます。

ゆ: なるほど、そういうことか。少しメリハリがあった方が良いかもね。

ゆ: どうしたいというよりは、嫌だと思っているところを伝えてくれるだけでも良いと思う。目立たせる＝優先順位高くしたいのかな？と最初は思ったので、まずは違和感を相談してほしいかな。

k: なるべく具体的に指示した方が良いかと思ってましたが、気負わなくていいのかも。

改善→違和感を伝え、相談する

「ハートと背景が馴染みすぎているというか、遠目で人が欠けて見えるのが少し気になってます。解決策としてハートを目立たせるとかもアリかなと思いますが、他に何か良い方法ありますか？」

ポイント

• 目立つ＝優先順位が高い
• 違和感の理由を伝える
• 解決策を相談する

メールの線が細く見えるが、アイコンが小さく表示された時に潰れないか

ゆ: そうだね。メールの線は少し太くしてみようか。

k: はい、時間が経つと結構アイコン小さく表示されるので、もう少し太い方が良いかと思いました。

ゆ: 今回は私もアイコン使っているから表示場所確認できたけど、発注する場合はどこにどう使われる伝えた方がいいかも。デザイナーは表示される場所に当てはめてデザインを確認しているから。

ゆ: 例えば今回はこんな感じで確認している。

k: おおーこう見るとそこまで気にならないけど、やっぱりもう少し太い方がいいです。

改善→どこでどう使われるのか伝える

「今回のアイコンはブログに使います。一定期間はこのくらいのサイズで表示されますが、しばらくすると１サイズ小さく表示されるので、メールの線はもう少し太くして欲しいです。具体的な表示場所は後でURLをお送りします。」

ポイント

• どこでどう使われるのかあらかじめ伝える

全体的に余白が多いのでもう少し中の文字やピクトグラム（人物など）を大きくして欲しい

ゆ: ピクトグラムは機能上のお話が一つ。マウスオーバー（アイコンにカーソルを合わせること）で画像が拡大するけど、その時画像が切れてもOKかどうか、他のアイコンとの比較はどうかとかを考えるかな。

k: 画像は切れない方が良いですね。

ゆ: 本当に余白をなくしたいのか？文字が読みにくかったから大きくしたいのか？とかメールとかのやりとりだと結構すれ違うので、対面コミュニケーションしたい感じの部分。

k: 確かに「大きく」ってすれ違ってやりとりが増えるイメージがあります。「ただ大きくして」だと比較対象がないから、比較対象を伝えた方がスムーズですね。

改善→比較対象を伝える

「マウスオーバーすると拡大されるのでその時アイコンが切れない程度に大きくしたいです。このアイコン（具体的な比較対象）くらいには大きくしたいです。」

ポイント

• 具体的に比較できる対象を伝える

 優しい感じはするが、緑の色はもう少しフレッシュな感じが良い

ゆ: フレッシュはイメージの行き違いがありそうだから、多分いくつか見本を持ってくると思う。

k: んーなんと言ったら良いでしょうね。

ゆ: なんでフレッシュにしたいと思ったの？蛍光色？ビタミンカラー？鮮やかなイメージ？

k: 優しい感じはするのですが、少しくすんで見えるかなと。灰色だからですかね。

ゆ: そう言う意味ね。自分にはどう見えているかを言葉にしてくれるとありがたい。

改善→自分にはどう見えているかを伝える

「優しい印象なんですが、きもちくすんで見える気がします。もう少しくっきり見えるようにして欲しいです。」

ポイント

• 自分にはどう見えているか伝える

アイコン完成！

• ハートは人物の中に
• グリーンはくっきりした色に
• メールは線が太く
• 最初の要件で出していた「モバイル」が背景に

その他諸々調整してもらい、素敵なアイコンが完成しました！

まとめ

• 目立つ＝優先順位が高い
• 違和感の理由を伝える
• 解決策を相談する
• どこでどう使われるのかあらかじめ伝える
• 具体的に比較できる対象を伝える
• 自分にはどう見えているか伝える

今回も色々と引き出してもらいました。イメージをうまく伝えられない場合は、変に気負わずに相談してみると会話の中で明らかになることが多いと感じました。最近こういうレビューをすることは少ないですが、必要な時には、ポイントを意識して実践したいと思います。

やりとりの中で、私が普段気をつけていることに対してもコメントをもらったので、次回番外編としてその内容をお伝えしたいと思います。お楽しみに。