見出し画像

XDのプロトタイプ

Adobe XD Advent Calendar 2017の6日目の記事です。

Advent Calendar 自体初めての参加です。
来年にかけて、アウトプット力を高めていくことが今の目標です。

XDのキモはやはりプロトタイプの公開機能ではないかと思います。
余談ですが、現在僕の勤務している会社では、Adobe のクラウドサーバーにデーターをアップするため、XDの使用が許されないレガシーな環境に身を置いています。

そんなプロトタイプの仕組みについて、調べてみて色々と妄想したのが、今回の主題です。

XDのプロトタイプの仕組み

XDでレイアウト・デザイン、Qiita 的に言うと Surface を作成します。
Surface という呼び名はMSが思い起こされますが、とてもいいなぁと思います。デザインって言っちゃうと、なんか意味が大き過ぎるんですよね。

リンクの結びつけやエフェクトの設定などを行い、プロトタイプを公開すると xd.adobe.com のドメイン以下でプロトタイプを見ることができます。公開したプロトタイプは iframe で embed することもできるようです。

この公開したプロトタイプを開発者ツールなどで見てみると、アートボードごとに一枚の PNG 画像として書き出されていて、一枚画像をの上に絶対配置でリンクなどが載せてある構造のようです。

大きな一枚画像の上に span でマークアップされた要素が乗っているのがわかります。キャッシュ対策用と思われますが画像名が xxxx.png/version/0 みたいになっていて、xxxx.png?v=0 とか書くよりクールですね。

先日の正式版から Beta 機能として追加された「デザインスペック」に関しても、基本的には同じ仕組みです。
このデザインスペックは、本当に便利な気がします。「あれ?ここのマージン何pxだったっけ?」っていうことはよくあるし、サイト構造を共有するドキュメントとしても優れていますよね。

現状は配置したオブジェクトベースのサイズなどが中心ですが、レイアウトグリッドを使った場合などは、グリッドの情報も見えるようになれば、より便利ですね。

XDプロトタイプに関する妄想

XDのプロトタイプは画像が重いのか、初回の表示は遅めです。
現状はプロトタイプ用途なので仕方ないですが、もっと軽くしようと思えば、なんとかできそうな気もします。

カタログサイトとかプロモーション、LP なんかは正直 XDのプロトタイプ形式なサイトでもいいんじゃないかと思うことがあります。(実際、それに近いようなサイトも時々見かけます。)
表示速度さえ上げれれば、UX 的にも優れているのではと。
UX や デザイン、制作期間を重視して、HTMLやCSSのコーディングを省略するみたいなスタイルがあってもイイのではと妄想してしまいます。

HTML によるコーディングのメリットとしては
① SEO
② アクセシビリティ
上記 2点が大きいと思います。 
XDのプロトタイプで本文テキストを、デバイスフォントとしてレンダリングする設定ができれば ① は割とクリアできそう。
② はなかなか難しいですね。音声デバイス用と併用で、音声読み上げだけで内容が伝えられるものを別途作るというのは...難しいっすね。

XDでのデザイン→デバイスでの確認があまりに簡単で、楽しいので、同じ流れでサイト公開までできないか妄想してしまうのでした。




この記事が気に入ったらサポートをしてみませんか?