フロントエンドエンジニアから、デザイナーさんに意識してほしい10のこと
フロントエンドエンジニアとデザイナーさんは日々協力してプロダクトを作っていく関係にあります。デザイナーさんが作ってくれたものをエンジニアが素早く実現できるよう、いくつかエンジニアから意識してほしいことをまとめました。
なんでこんな話になったのか
（前置きなので次の章まで飛ばしてOKです）
デザイナーさんから「この画面をこんな風に作ってください」とXDやSketch、PSDなどいろいろな形で渡されることがあると思います。
僕の個人的な意見・経験ですが、いざ実装するぞとなったときに
「あれ…ここってどうしたらいいんだろう？」
と迷って作業のスピードが落ちてしまうことがとてもストレスに感じていました。できればノンストップでいきたいなあと思うわけです。
手が止まるたび、デザイナーさんに「ここってどうしたらいいですか？」と質問するのが何か新しい画面を作るときに必ず発生していました。
「（いつも聞いてるんだから、そろそろ最初からそれを考慮してくれないかな…）」と理由もなく怒っているめんどくさい彼女状態になっていることに気づきました。
これじゃマズいということでデザイナーさんと相談した結果、
「デザインデータをエンジニアに渡す前にチェックしてほしいことリスト」を作ってもらえるといいかも、ということになったので作りました。
1. テキストの内容が増減したときの挙動をデザインから読み取ることができますか？
例えばTwitterを想像してみてください。ツイートには「おはよう」などの短いものから、ニュースを伝える長いものまであります。エンジニアはそのどちらでも表示が崩れないように実装しなければなりません。
画像の悪い例を見てみるとどうでしょう…？
すべて「こんにちは」としか書かれていなく、本文が長くなったときにどう処理すればいいかが見えてきません。
せっかく同じタイプのUIコンポーネントが複数並んでいるのですから、うまく利用して欲しいです。長い文章のときは最大で2行まで表示するのか、全文表示させるのかまでわかるとエンジニアからの質問が一つ減ります。
2. コンテンツが空っぽのときに表示される内容は決まっていますか？
リスト表示をする画面（例えばTODOリストアプリ）があったとして、表示する中身が何もない場合にはどうするかを決めてほしいです。
「データがありません」と表示するのもいいですし、「おや？リストが空っぽのようです、タスクを追加しましょう！」とボタンを出してあげるのも親切でいいですよね。
エンジニア側でも候補は浮かぶんですが、結局デザイナーさんに「どうします？」と聞かなければいけないので手が止まってしまいます。
先回りしてこういうパターンではどうするかなどの
デザインも作っておいてもらえると助かります。
3.状態が複数ある場合の「ある程度の」考慮はされていますか？
ユーザーの種別がいくつもあるサービスの場合を考えてみてください。無料会員と有料会員で表示する内容が違う場合など、結構そういうケースは多いと思います。（ログイン状態、ログアウト状態でもいいですね）
こういうときに、◯◯の状態のときはどんな表示をしたらいいのか、エンジニアはお手上げ状態になります。また質問が増えます。
コード上にいろんな状態について書かれていることが多く、割とエンジニアはこのあたりを把握しているケースが多いです。だからデザインを見たときに「あのときはどうするんだろう」「このときは…？」とハテナがたくさん浮かんできます。
「デザイナーさんも完全に把握してくれ！」なんて無茶は言わないです。そして、デザインをするときに考慮しなければいけないケースがわからなければ、聞いてください。きっと教えてくれます。
思ったより考慮しなきゃいけないケースが多かったとき、引かないでください…🙇
4. オーバーなデータを入れてみてデザインが破綻しないか確認しましたか？
キレイなデザインにまとめてもらうのはいいんですが、もうちょっと現実や未来を見ましょうよというやつです。
今日現在はよくても、半年後にはユーザー数が100万人を突破しているかもしれない、クラウドファンディングで5000兆円集めるかもしれないですよね？画像の例でいくと、カウンターは崩れてしまうことが想像できると思います。
試しに「ちょっとオーバーかな？」というデータを入れてみて検証をしてみてください。作ったデータがおかしくなるようであれば、「最初のデータ」＋「おかしくならないように調整した状態」とセットでエンジニアに渡してあげてください。
5.異なるデバイスでどう表示されるかイメージしてみましたか？
メニュー表示とか、そういった画面系のデザインでは特に注意してほしいポイントです。普段作っているサイズとは違う端末でどう表示されるかをイメージして欲しいです。
画像の通り、大きくなったときに要素間が広がるのか、まわりの余白が大きくなっていくのかはエンジニアでは判断がつかないケースが多いです。
そしてできれば異なるデバイスで組んでみたバージョンのデザインも一緒に渡してもらえると、エンジニアは意図を汲み取れると思います。
6. ブラウザ標準のモノでいい場合はそうわかるようにどこかに書きましたか？
たとえば都道府県を選ぶ HTML のselect要素とかを想像してほしいです。
イマドキはどのサイトも「クリックする前」のデザインはゴリゴリに作られていることが多いですが、クリックしたら出てくるやつはあまり見ませんよね。
それをオシャレな感じで作られたものがデザインカンプに含まれていたら、エンジニアは「これを作らなきゃいけないのか」という目で見ます。
デザイナーさんが「ブラウザ標準のものを使ってほしい」と思っているのであれば、そうわかるように書いてもらえるとエンジニアは気がラクになります。
エンジニアはずーーーっとパソコンを触っているので、標準と違うことには結構敏感だったりします。
7. ネイティブ解像度でデザインしている場合、各UIパーツの数字は2で割り切れますか？
【わかる人向け】
@2x 解像度で作っているなら、2で割り切れますか？
@3x 解像度で作っているなら、3で割り切れますか？
Adobe XDの場合、デバイスごとの解像度が実機の解像度とは異なります。これが論理解像度と言われるものです。
画像素材とかは実機の解像度で作らないといけないので、あえてこれに2倍、3倍した解像度のアートボードを自作して作っているデザイナーさんもいるかと思います。問題はその方々です。
たとえば罫線の太さ。2倍の解像度にしたのであれば、2で割り切れるか確認してください。CSSの世界では、JavaScriptで動的に計算した結果、小数点以下になることはあっても、人間の手で小数点以下の数字を指定することは稀です。
8. 文言は合っていますか？画面間でブレはありませんか？
エンジニアに一度渡す前に、文言が合っているかをチェックしてください。
誤字っているくらいならまだわからなくもないですが、明らかに違う部分は負債になります。
将来この画像を見たときに文言が違っているのかわからなくなることだってあると思います。そうしたときにはもうお手上げです。
「文言くらい大したことないじゃん」と思うかもしれませんが、
「文言がちゃんとしているに越したことはない」と言わせてください。
9. デザインガイドラインで定義されていない要素がホバーやクリックされたときのデザインは用意されていますか？
最近はあちこちで「デザインガイドライン」、「コンポーネントリスト」なんてワードを聞きますよね。
しかし、キャンペーン用のLPなどでは目立たせたいため敢えてガイドラインでは定義されていない新しいボタンのスタイルなどを作ることがあるかもしれません。問題はこのときです。
ボタンにカーソルをあわせたとき、ボタンをタップしたときに視覚的なフィードバックを付ける必要が出てきますが、新しいもの相手にはエンジニアはお手上げです。
別のドキュメントでもなんでもOKです、わかるようにしてもらえると
きっとそのキャンペーン用LPはさらにいいものになると思います。
10. デザインガイドラインで定義されていない色を使っていませんか？
デザインガイドラインで画面で使う色について定義しているケースで起きる話です。
たとえば僕の所属するチームでは、「黒の定義が多すぎる、少なくしよう」とガイドラインを決めて「もしガイドラインにない黒色が出てきたら勝手に直しちゃいますね」なんて話をしています。
そうは言っても、デザイナーさん的には勝手に直してほしくないケースだってありますよね。そんなときには「ここはあえてこの色なのでそのままで」みたいな指示があると安心です。
それをむやみやたらにされると、ガイドラインを作った意味がなくなるわけですが…w
まとめ
・テキストの内容が増減したときの挙動をデザインから読み取ることができますか？
・コンテンツが空っぽのときに表示される内容は決まっていますか？
・状態が複数ある場合の「ある程度の」考慮はされていますか？
・オーバーなデータを入れてみてデザインが破綻しないか確認しましたか？
・異なるデバイスでどう表示されるかイメージしてみましたか？
・ブラウザ標準のモノでいい場合はそうわかるようにどこかに書きましたか？
・ネイティブ解像度でデザインしている場合、各UIパーツの数字は2で割り切れますか？
・文言は合っていますか？画面間でブレはありませんか？
・デザインガイドラインで定義されていない要素がホバーやクリックされたときのデザインは用意されていますか？
・デザインガイドラインで定義されていない色を使っていませんか？
エンジニアはなんでもできちゃう生き物です。
どうとでもなってしまうだけに、デザイナーさんの「どうしたいのか」がわからないととても不安になってしまいます。
なにより、質問がちょいちょい飛んでくるとデザイナーさん自身も作業の手を止めて確認したり、デザインを修正したりする必要が出てくるはずです。
お互いの幸せのためにも、ぜひ上の10個を意識してデザインデータを作ってもらえると助かります 🙏🙏
【11/6 18:30 変更】箇条書きをいい感じに直しました