Adobe XDのUIキットを使ってwebデザイン制作を加速化→提案型デザイナーになるススメ

日本語ワイヤーフレームキットWires jp
https://www.behance.net/gallery/67284971/Wires-jp
Adobe XDには日本語に適したワイヤーフレームのキットが用意されています。
ダミー文章が日本語で用意されているので、ワイヤーフレームの段階でAdobeStockのカンプ画像を差し込んでクライアントに提出すると制作が捗りそうです。
サクッとワイヤーフレームを作ってクライアントにイメージの擦り合わせを行いたい時に重宝しそうです。

Adobe XDのアドオンを開くとプラグイン、UIキットをダウンロードできます。

XDで待望の機能だったCSSがHTMLとCSSを書き出せるプラグインが登場しました！！
Web ExportとCopy CSSがオススメです。webコーディングする人には便利な拡張機能です。

「Copy CSS 」はオブジェクトクリックしてプラグインメニューから「Copy CSS 」をクリックするとCSSがコピーできる。
ショートカットはShift+Alt+⌘+C。
webデザイナーからするとめちゃくちゃありがてぇ〜（＞_＜）
癖のない基本に忠実そうなコードだし。 pic.twitter.com/ULTKRcLGJI
— Mika (@design_lb_mika) 2018年10月25日

従来のPhotoshop、Illustratorのデザイン制作とXDを比べた感想

本来はクライアント側に具体的なイメージが固まってない時はデザイン画像から作りこむのではなくてワイヤーであるレイアウト構成してイメージの擦り合わせを行なってからデザインを提出すべきなんですよね。
日本のweb制作の現場では構成（ワイヤー）→デザイン制作の流れ作業が一番うまくできていない気がします。
構成も文章もないのにデザイナーにPhotoshopでLPデザイン作れとかいうディレクターがいたりとかね。。
苦労して作ったデザインがイメージ違うとかでクライアントに却下されたりとかしょっちゅうあったしね。。。
そういうヒアリングする時間もなく、ヒアリングに協力的ではないクライアントにはAdobeXDは役に立つツールになるのではないかと思います。
操作が簡単なXDだとクライアントと意見を交わしながらデザインや構成を作る事も可能ですし。
具体的な要望や意見がないクライアントにはXDでサクッとダミー文章とダミー画像を入れて提出してみる方法がいいかもしれませんね。
デザイナー側もUIキットから作成する場合だとゼロからデザイン制作してるわけじゃないので負担も減ります。
PhotoshopやIllustratorではできなかった複数パターンのデザイン提出も可能になってきそうです。