見出し画像

Adobe公式 「エンジニアに意図を120%伝えるためのAdobe XDデザインテクニック」を見て...

ノハ

こんにちは、最近デザインの勉強中心になっているノハです。
そろそろコーディングも勉強しないと...

Adobe公式で為になった動画がありましたので記事にしました。

「デザインコンセプトをしっかり伝える」テーマの動画でした。
初心者に向けた説明だったので、分かりやすくエンジニアにも為になる話でした。少し書籍の内容も入っている話でした。

ディレクター(ワイヤーフレーム)、デザイナー(デザインカンプ)、エンジニア(コーディング)のフェーズ別にXDの使い方を初心者に向けた書籍だそう。


はじめに

一昔前のWEBデザインでも問題はなかったが、レスポンシブデザイン等が主流になりなかなか一筋縄では行かない行程が出できてしまったため、XDを用いてワイヤーフレーム、デザインカンプを作成し、実装することで連携しづらかった所が解消できる。

設計・・・・・パワーポイント、エクセル + XD
デザイン・・・Photoshop、Illustrator + XD
実装・・・・・HTML&CSS、JavaScript + XD

ですが...
※デザインツールだけでは埋められない溝もある
というのが、今回のテーマ。

※注意
・WEB制作における話。
・すべての現場に当てはまるものではない。

①カラー

ワークボード(ページ)によって、コンポーメント全体に透明度を指定した場合と要素に直接透明度を設定した時で、実装するエンジニアがプロパティだけ見てわかりづらく判断ができない。その結果、どんどんカラーコードや透明度がづれてデザインカンプと実装したサイトで変わるトラブルがある。

防ぐために...

　WEBサイト内で使っているすべてのカラーやテキストスタイルをドキュメントアセットに登録。
+ もう一つ工夫として、
　カラー一覧用のアートボードを作りカラー毎に名前をつける。どういうところで使うカラーなのかメモを添えると複数人使いやすくなる。

memo
　9月のアップデートでカラーがグループ化できるようになった。

②画像の書き出し

・メインビジュアルを作り込んだのに、画像を書き出して配置してもらうとイメージと色が合ってない。(XDだけの問題?)

防ぐために...

XDはカラーマネジメントに未対応のため、厳密な色が必要な画像はPhotoshopで書き出す。(Photoshopはカラーマネジメント対応されている)

・コーディングで楽をして欲しいので、画像を書き出したのにエンジニアの手間はあまり変わってない？。コードを考慮した画像では無いので、そのまま使えない＋差し替えが発生すると手間が増える。

防ぐために...

　ファイル名の付け方はエンジニアと相談し、レイヤー名を設定して書き出し対象にする。(グループ化したら書き代しやすい)
　写真に枠が入っている場合は、エンジニアはCSSで実装したいので付けない。(データを別にしたり、バックグラウンドで指定したいため)

・アイコンの位置が違う、デザイン通りではない。1つ1つのアイコンのサイズが違う問題。CSSで細かく設定はできるが、難しすぎる。(アイコンのサイズに縦横小数点があり、それが複数あると大変。)

防ぐために...

　透明の正方形を作って、その中に収めるようにアイコンの大きさを設定する。書き出すときに正方形を書き出せば、実装時もうまく配置できる。
(アイコンは正方形でコンポーメント化)

③ブレイクポイント

PC用とSP用のデザインカンプを作ったが実装との見た目が違う。

防ぐには...

　マージン、テキスト、画像の単位をあらかじめ決定し、チームで共通認識を持つ。(pxなのか%なのか)フォントサイズも大事。
　デザインカンプ間では、どういうレイアウトになってほしいかイメージを共有しよう。(ポイントをまとめたドキュメントを作っても良い。XDのコメント機能も便利)
　ブレイクポイントの設定は、チーム全体で取り組む必要がある。

④状態変化

・実データが入ったら想定外の見た目に...(新しく作り直さないと)。あらかじめ状態変化を想定したデザインをして欲しいなー。
(例えば、桁が多くなって見た目デザインが破綻等)

防ぐには...

UI Stackを参考に状態変化を想定したデザインを作る。

⑤その他

・コンポーメントにマージンを持つと死ぬ。アイコンとは違う考え方。
　ボタンならピッタリ作る。

120%意図を伝えるために

・デザインをデザイナーだけで取り組まない。
・デザインカンプは中間成果物なのでゴールではない。
・デザインカンプに向かないコミュニケーションがある。
・チームのゴールとは何か？を常に意識する。

感想

・実務で困っている問題が知らなかったので、気をつけるポイントがわかりやすく理解しやすかった。
・デザインカンプを作る際に、エンジニアに意図を伝えるための工夫する点がいくつもあって面白かったし、知らない事だらけだったので為になった。
・エンジニアも理解していたら、トラブルがもっと減るんだろうなーと感じたのでデザインやソフトの使い方の勉強も引き続きやっていこうと思いました。
・少し不安なことでも、コミュニケーションをとって後のトラブルが防げるために積極的に行ったほうが良いと感じた。

早速購入しようと思います。
ありがとうございました。

この記事が気に入ったらサポートをしてみませんか？