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

Adobe XDのUIキットを使ってwebデザイン制作を加速化→提案型デザイナーになるススメ
日本語ワイヤーフレームキットWires jp
https://www.behance.net/gallery/67284971/Wires-jp
Adobe XDには日本語に適したワイヤーフレームのキットが用意されています。
ダミー文章が日本語で用意されているので、ワイヤーフレームの段階でAdobeStockのカンプ画像を差し込んでクライアントに提出すると制作が捗りそうです。
サクッとワイヤーフレームを作ってクライアントにイメージの擦り合わせを行いたい時に重宝しそうです。
Adobe XDのUIキットを使ってwebデザイン制作を加速化させる
Adobe XDのアドオンを開くとプラグイン、UIキットをダウンロードできます。
Adobe XDのUIキットを使ってwebデザイン制作を加速化させる
XDで待望の機能だったCSSがHTMLとCSSを書き出せるプラグインが登場しました!!
Web ExportとCopy CSSがオススメです。webコーディングする人には便利な拡張機能です。

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

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

会社内のAdobe XDの利用について

複数人で作業していてサイト構成のモヤモヤ感を埋めてくれるツールがAdobe XDのような気がします。
直接人に会って打ち合わせをしないリモートワークとAdobe XDは相性いいと感じています。

Follow me!