Adobe XD ユーザーグループ広島 vol.7 - Online「エンジニアに聞いてみよう！デザインデータの理想形」でエンジニアの本音を聞いてみた！
2020.5.23に開催されたAdobeXDUG広島のオンラインイベントに参加してきました！
実際にコーディングをする人にどんなデザインだとやりやすいの？を聞いてみよう！ということで、本職コーダー（ぜんぜんそんな仕事してないけど）としても見逃せないテーマ。
コメントスクリーンとWhiteboardプラグインを使ってワイワイ。
これは楽しい。
アセットはどこまで活用すべき？アセットはチェックする？アセット登録しておいてほしい？
・アセットに登録されている＝再利用されているという認識
・繰り返し利用を明示する手段としてアセットに登録する
→ 一回こっきりのものを登録してもあまり意味がない
・マイナーチェンジは同一アセットでやってOK
・カラーと文字スタイルは特に重要
・意図がわかる名前をつけてほしい
アセットパネルはエンジニアへのメッセージ！
コーダーにどういう情報を最低限伝えるべき？
・hover／アニメーションなどの変化がわかること
・色の意図とそれを伝える名前
・余白の高さなどのデザイン上の基本ルール
→ パーツ集のようなもの
共同編集しながらパーツ集をデザイナーとコーダーが一緒に作るのはあり
デザインの不思議な揺れが意図的かどうかを明確にしたい
そのデザインデータの基本ルールを打ち合わせるのが大事
要件定義書って必要？
・モノによるｗ
レスポンシブで妙な見た目になる瞬間どうしてる？
・よほどの崩れ方をしていない限り、微妙なところは目をつぶるか、いい感じに調整する
→ 細かくブレイクポイントを区切って調整するなど
・どうしてもデザイン的にありえない見た目になる場合はデザイナーにも確認
・最初にブレイクポイントについて協議しておくと良い
・タブレットなどの中間デザインはどうしたいかの意図を教えてもらえると嬉しい
全部のデザインは必要ないけど、ルールが欲しい
XD本体ファイル、デザインスペック、zeplinどれが使いやすい？
・生ファイルが一番信用できる
・フィードバック用／コメント用としてデザインスペック／Zeplinは使える
・グラデーションの割合と角度がわからないのが困る
→ 明確な指定があるなら数値で指示があるとうれしい
→ プラグインGradientAngle
・コーダーとデザイナーの歩み寄りが必要
XDだけで伝わらない動きの細かいニュアンスをどう伝える？
・いい感じ＝文句言うなよ
・参考サイトがあるとわかりやすい
・意図を正しく表現することはできても、それに時間をかけていいのかは別問題
→ キュービックベジェ関数など。いろいろできるけどちょうどよくするのに時間がかかる。
デバイスフォントで作ってほしい部分はどう伝える？
・アセットやパーツ集、指示書などでデバイスフォントじゃないものを明示する
・フォントファミリーの指定があるかどうかを最初に確認
XDはカラマネ非対応。どうすればいいの？
・写真などはPhotoShopで書き出したものを使う
・CCライブラリなどで共有してもらえるとよい
・画像ファイル名をXD（のレイヤー）とPhotoShopの元ファイルで揃えてほしい
・ファイル名はデザイナーがつけても良い。先についている名前に合わせる
・命名規則があるのがベスト
・画像書き出しはPhotoShopが最強
・コーダーの想定とデザイナーの想定が違うことはある
・マスクは外して書き出しをしたりするのでできるようにしておいてほしい
アウトライン化したほうがいいのは？
・インストールフォントなどの違いで文字化けの懸念があるもの
・Webフォント化できないもの
・エンジニアに欲しいと言われてから用意してもOK
新人デザイナーに注意しておいて欲しいこと
・なんでもかんでもXDでやろうとするのは間違い
・基本的なルールを明確に共有して欲しい
・どうしてそういうデザインをしたのかの意図をちゃんと伝える
・コミュニケーション大事！
・相談をしよう
XDで作成したデータを渡されて困る部分は？
・コーダーとしては困ることはない
・デザイナー側は困ることがある
・イラレでつくったものがガビガビしちゃうのはPSを経由すると綺麗になる
・適切なツールを組み合わせることが前提
0.5pxのボーダー表現ができないブラウザの制限
→ 本当に必要？
→ どうしても再現したいときはニュアンスが同じになるように頑張るけれど・・・
端数を消してくれるAdobeXDプラグイン『Remove Decimal Numbers』
デザインするアートボードのサイズは？
・スマホを2倍サイズで作る必要はない
・意図が伝わるサイズが大事
https://material.io/design/layout/responsive-layout-grid.html#breakpoints%E2%80%A9
https://cccabinet.jpn.org/bootstrap4/layout/overview
ガイドの引き方
アートボードの幅に対してコンテンツのMAX幅を指定されてるのはよく見るけど。
・画面いっぱいのコンテンツ
・画面いっぱいだけど上限があるコンテンツ
・インナー幅いっぱいのコンテンツ（ブラウザ幅が縮まった時に余白をつける）
でそれぞれガイドがついているとわかりやすい
iPadProを目安にすると作りやすい？
・最大幅が広ければ広いほど作りにくい
・そういう意味では作りやすい
・PCは1080px+40pxの余白、スマホは360/375pxがよい
・375pxはデザインしにくい、360pxで破綻しやすい
※360pxはAndroidのサイズ
モバイルファーストでデザインしてる？
・ターゲットにあわせて選択して良い
・コーディングはモバイルファーストのほうが効率が良い
これはやめてほしい
・画面からはみ出るやつはレスポンシブしんどい
・突然でてくるSPA：技術的な問題があるので事前に要相談
・紙デザイン（Webで再現できないもの）
・規則性が意図せずないもの
・似てるのにちょっとずつ違う
・PCとスマホで出すものが違いすぎる、配置が違いすぎる
・要素固定指定の多様
・改行位置にやたらこだわる
・絵文字はそもそも要注意
まとめ
他のコーダーさんの話をこんなふうに聞くことがないので、とてもとてもとても楽しかった。そしてわかりみが深い。
コーダーってデザイナーさんのデザインに息を吹き込む仕事だと思っているので、デザイナーさんの意図を正確に汲み取っていいコーディングができたら嬉しい。だからこうして欲しい！をお互いぶつけ合っていいものつくりたいね。