Adobe XDとは

こんばんはdaissh04です。

本日はAdobe XDについて紹介したいと思います。

Adobe XDを初めて聞いたという方も、存在を知っている方も、

実際に何ができて、Web制作にどのように活かせるのか、という全体像を抑えている人は少ないと思います。

私もその一人でした。XD上でかなり精巧なデザインを作成することができることは知ってましたが、それからどうするのかが分からず、web制作に置いてのメリットを図り損ねていました。

XDに関する説明をいくつか紹介すると

・初めての方にも使えるUI/UXツール

・ユーザー操作性をデザイン、プロトタイプ化、共有するためのプラットフォーム

と、あんまりイメージ湧きませんよね。

なので一日触り倒しました笑

結論からいうとAdobe XDは

コーディングの全前行程をXD一つで全てできる

Web制作の行程を以下とすると

・デザイン設計

・素材（画像、イラスト等）の作成

・クライアントとの合意

・コーディング

XDはデザイン設計、素材の作成、クライアントの合意をカバーできます。

デザイン設計

XDでブログのスマホ画面を設計して見ました。

この程度であれば1時間以内の操作で終わります。

操作もEXCELの図形挿入を触ったことがあれば、すぐにできちゃいます。

更にアートボートというキャンパスにデザインをしていくのでがこのアートボードが数々のデバイスのサイズが用意されてます。 iphoneシリーズから、ipodまでとレスポンス対応を考えると非常にありがたいですよね

作業としても一旦スマホのコンテンツを作成してしまえば、拡大縮小ですぐにできてしまいます。

またスライドショーや、画面の遷移を表現できたりもしますが、ここでは割愛します。

私個人の意見ですが、プロトタイプにどこまで時間をかけるかと考えた時に、そこまで作り込む必要はないかなと感じます。

 クライアントの合意

 共有という機能を使います。

 右上のリンクをクライアントに送信すると

クライアントがこのような画面を開くことができます。

先ほど設計したスマホ画面が表示されてますね。・

そしてコメントのピン留機能もあるので、クライアントがコメントを残してくれます。

この繰り返しをして、デザイン仕様の合意をすることが可能です。

クライアントとしても、より完成形に近い形でデザインを見ることができ、以前のようにPDFや書類に指摘をする必要もありません。円滑なコミュニケーションができますね

CSSの書き出し 

 ここが一番わかりにくい箇所であり、ただXDがWeb制作に置いてどれだけ貢献できるのかを測る箇所だと思います。

今はXDのデザインからhtmlコードを書き出すことはできません。ただCSSなら可能です。

先ほどの共有の画面からこのようにかく要素のCSSコードを書き出すことができます。

これをhtmlコードを自分でコーディングしてかく要素に当てていくイメージですね

どうでしたか？XDがweb制作に置ける立ち位置を理解してもらえたでしょうか？

残念ながらhtmlとcssを同時に書き出し、webにアップするというところまでは自動化できませんが、web制作の多くの工程をカバーでき、そして工数削減が期待できるのではないでしょうか？

私はこちらを積極的に取り入れて今後の活動に繋げたいと思いってます