» ブログ・webサイト・ランディングページにイラストを活用してみませんか?

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

投稿日時2018年11月2日 タグ

カテゴリ 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のような気がします。

リモートで働いてるweb制作会社ではAdobe XDでワイヤーとデザインをしてデザイン確定してからコーディング作業を行っています。

新人の私が間に入ってデザインしてもXDのデザインさえあればWP組み込む後工程の人へイメージと内容は伝わったようです。

直接人に会って打ち合わせをしないリモートワークともAdobe XDは相性いいですよ。

プロフィール

名前:Mika

徳島の田舎でweb制作会社でリモートワーク勤務しています。
フリーランスの案件ではwebデザインとイラストを受注しています。

フリーのお仕事のご相談ありましたらお気軽にお問い合わせください。

現在はwebコーディングのみのお仕事は控えさせて頂いております。