Adobe XD をWebExportでHTML出力してみた

どうも、かわうそです。

今日のテーマ:『スマホからパソコンへデータを移動できる便利アイテムを使い方まで紹介

Adobe XDのデザインデータをHTML出力する方法を紹介します。

結論、Web Export(公式サイト)というプラグインを使用することで可能になります。
しかし、ソースコード自体は実運用するには難しい仕上がりで課題は残る、というのが正直なところです。

HTML・CSS・画像を一括書き出し「Web Export」

Web Exportを使えば

  • HTML
  • CSS
  • 画像

をワンクリックで一括書き出ししてくれます。

仕上がりはこんな感じ。使えるかどうかはさておき、見た目の再現性はよさそう。

使い方:アートボードをエクスポートするだけ

プラグインをインストールしたら、「Web Export」をクリック。


書き出したいアートボードを選択してから、「輸出 Artsboard」をクリック。


ポップアップが開くので、「Export」をクリックして、保存先を選択したら完了です。


保存先にはHTMLファイルと画像がずらずらっと吐き出されています。

「Web Export」の問題点

今のところ素晴らしいツールに思えるけれど、品質を検証し、使える使えないの判断を下していきます。

HTML

まずはHTMLから見ていきます。

大枠の構造としては
headで全体のスタイルシートとJSが読み込まれており
body配下にHTMLソースコードが展開されている、よく見る構造ですね。

ではbodyの中身を確認していきます。

なんと、、、さすがにこれで納品・ページ公開はできないソースコードです。

突っ込み放題ではありますが、具体的に何が問題か考えていきます。

SVG

このようなSVGコードがたっくさん出てきます。

SVGを簡単に言うと、拡大縮小しても画質が全く変わらない、テキストベースの画像フォーマットです。テキストベースなので、HTMLにインラインで直接書いたり、、、なんかも可能です。
※参考 https://jp.ext.hp.com/techdevice/technologysc/creator_004/

XD上で生成された四角や丸、線などの「オブジェクト」データがSVGタグとして吐き出されています。

これらはCSSで装飾ができるため不要なソースコードと言えます。

※ちなみにSVGタグの詳細は下記になります。

  • rect:長方形などの四角を描写
  • elipse:楕円や丸を描写
  • path:直線や曲線・円弧を描写

クラス名やID

設定次第で変更は可能ではありますが、IDやクラス名が連番指定だったり、繰り返し要素にも規則性がありません。

メンテナンスを絶対にさせないぞ!という意思を感じさせるような構造ですね。

モバイル対応

モバイル対応もしていません。

iPhone12Proでのviewを確認しましたが、レスポンシブには非対応です。

CSS

CSSはこんな感じです。HTMLに指定されているIDやクラスが使われています。

共通パーツにまとめてCSSを指定する効率的なコードにはなっていません。

また、potision: absolute; やtop,left,bottom,right の絶対位置指定や
overflow: hidden; などの不要なスタイル指定が多く、手直しは不可能なソースコードになっています。

画像(image)

画像オブジェクト単位で自動書き出しされました。命名規則は目をつぶりましょう。
(命名規則も個別で指定することも可能っちゃ可能ですが、めちゃくちゃめんどくさい。)

使いにくいのは、例えば3枚の画像グループを1つの画像として書き出ししたいのに、
画像オブジェクト毎 = 1枚ずつ書き出し されてしまうので、画像管理は難しそうです。

ソースコードに関しては、端末のデバイスピクセル比に応じて読み込む画像を変更してくれる
srcset属性を自動指定してくれたり、その辺は嬉しい。

JavaScript

XDのプロトタイプではスクロールでのナビゲーションの追従や、ホバーでの展開がアクションとして登録されています。

Web Exportのhtml上ではscriptは吐き出されているものの、動作はしません。

プロトタイプの動きまでは書き出しできないみたいですね。

結論:神ツールに見えて使えない

結論、使いどころが非常に難しい、実運用はできないツールだと思います。

例えばメンテナンスを完全にしないページや

複数のデザインで、どのLPが最もパフォーマンスが高いか?のような
スピード感を持って行う効果測定や捨てページが大量にある場合は

このツールを試してみてもいいのかもしれません。

フォローする