Adobe XDのオンライン共有でプロトタイプを安全にやり取りする方法

新しいツールを使う時には、まず共有方法(書き出し方法)をチェックするようにしています。

Adobe XDのオンライン共有の仕組みと、安全にプロトタイプを共有する方法について書いてみました。

オンライン共有の始め方

「ファイル」→「オンラインで共有」を選ぶと、Adobe XDのサーバにて専用のURLが発行され、作成したプロトタイプをそっくりそのままブラウザでチェックすることができます。そのURLをクライアントなり関係者に送るとき、2つの選択肢があります。

1.リンク共有の場合

こんな感じのURLに飛んでプロトタイプをチェックすることができます。

https://xd.adobe.com/view/28c012ad-2b3a-440b-a474-f65f6087c451/

このURLはAdobe側で管理しているので、Adobe IDでログインすればコメントを残すことができます。既にSlack / Backlog / ChatWorkを使っているチームの場合、新たなコミュニケーションチャネルを増やすのは正直しんどいと思いますが、他のAdobe製品と統合された時にはグッと使いやすくなるかもしれないので、アップデートに期待です。

2.埋め込み共有の場合

こんな感じのiframeタグをコピペして自社のWebサーバでプロトタイプを共有することもできます。動作デモはこちら

<iframe width="377"
        height="763"
        src="https://xd.adobe.com/embed/28c012ad-2b3a-440b-a474-f65f6087c451/"
        allowfullscreen></iframe>

ちなみに「リンク共有」「埋め込み共有」どちらを選んでも、共有URLは一般公開されることに注意です。ワイヤーフレームレベルのクリエイティブならまだしも、著作権が絡む画像・キャッチコピーや未発表情報を含んだプロトタイプが漏れるリスクがあるなら、「オンラインで共有」は使わないほうが無難です。

とはいえ「オンラインで共有」を使わないと、せっかくAdobe XDで作った入魂のプロトタイプをクライアントに触ってもらうことができず、画像で書き出して提出することになるため、せっかくの苦労が無駄になってしまいます。

なんでAdobe XDにはベーシック認証やアカウント認証が付いていないんでしょうか？

そこで、URLの構造に注目してみます。

Adobe XD オンライン共有のURL構造

こんな感じになっていますね。

リンク共有: https://xd.adobe.com/view/${プロトタイプID}
埋め込み共有: https://xd.adobe.com/embed/${プロトタイプID}

プロトタイプIDというところに自分の作ったプロトタイプがランダムに割り振られます。

さて、ここでハッカーの気持ちになってみてください。Adobe XDでオンライン共有しているプロトタイプは一般公開されているので、ハッカーはこのプロトタイプIDを適当に入れて、マッチすれば他人が作ったプロトタイプを盗み見ることができます。

プロトタイプIDが推測しづらいほど盗み見ることが困難になり、逆に推測しやすければ簡単になるというわけです。ランダムであればあるほど突破が難しくなるので、防御側(Adobe)はどんだけ推測しづらいIDを発行するのかというのが勝負どころなわけです。

具体的に、推測しづらいIDとし易いIDを比べてみます。

project-1000, project-1001 → 連番は推測しやすい
project-new, project-saishin → ありきたりな文字も推測しやすい
456e69de-cfd3-4881-9b68-53b5f6469968 → ランダムな英数字は推測しづらい

推測しやすいIDは「意味あり気」ですね。対してランダムな英数字はそれ自体に意味が無いので、ハッカーは片っ端からランダムな英数字を入れるしか無いわけです。

Adobe XD オンライン共有の場合、UUID V4という猛烈にランダムになる形式を採用しているので、第三者があなたのプロジェクトを見つけ出す確率はズバリ230京分の1です。この確率、どう思いますか?僕はこんだけ確率が低ければゼロとみなして良いと思いますが、スーパーシビアな業界(軍隊とかね)ならゼロじゃねーだろと突っ込まれるかも知れません。

例え一般公開されているとしても、第三者が見つけ出す確率はほぼゼロということが分かりました。でも、URLを知っていれば誰でも閲覧できる状態なので、万が一URLが悪いヤツの手に渡ってしまとアウトです。

漏洩リスクがほぼゼロな共有方法

アプローチとしては「オンライン共有」と使うか使わないかという2択です。

オンライン共有を使わない:
クライアントにAdobe XDのファイルを渡す。
オンライン共有を使う:
埋め込み共有の<iframe>を入れたHTMLをBasic認証などで守り、ID・パスワードが無いと見られないようにする。

1.はただのファイル提出です。クライアントがAdobe XDを持っているならOKですけど、元ファイルを編集されてしまうと、アセットがぶっ壊れたりして余計な手間が増えるかもしれません。ちなみにクライアントがAdobe XDを持っているケースに遭遇したことは今のところありません。

僕は2.をオススメします。Basic認証をかけることができれば、未公開のクリエイティブを制作サイドとクライアントどちらも安心して閲覧できます。

前述した通り第三者がオンライン共有したプロジェクトを推測する可能性は極めて低いので、埋め込み共有したHTMLを認証しないと見られないようにしておけば、うっかり全世界に向けてURLをリークしてしまっても対策する時間が稼げます。

今回の記事は99%のプロジェクトには不要です

長くなってしまいましたが、こんなマニアックな手法は滅多に使うもんじゃありません。

でも、Adobe XDオンライン共有の仕組みを知らずに使うよりも、引き出しは持っておいたほうが良いかなと思い記事にしてみました。