【AdobeXD】デザインを簡単に共有する方法。クラウド共有、パスワード設定など
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1200,h_675/https://susanweblog.com/wp-content/uploads/2023/07/aad86ebe924d74ce421a6c6c2c5ef2b8.png)
今日のデザイン業界では、チームやクライアントとデザインを共有することが一般的となっています。
Adobe XDは、デザイン共有のための機能が豊富に揃っています。
![すーさん すーさん](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_72,h_72/http://susanweblog.com/wp-content/uploads/2023/06/FFAB46C1-3DF8-417A-88FA-2F731079CAC2.jpg)
本記事では、Adobe XDで作成したデザインをどのように共有するのか、その手順を詳しく解説していきます。
デジタルハリウッド STUDIO by LIG
![公式サイト 公式サイト](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1024,h_567/https://susanweblog.com/wp-content/uploads/2023/08/Screenshot-2023-07-31-at-12.40.57-pm-1-1024x567.webp)
実績あるカリキュラムをベースにこれまで9万人以上のクリエイターを輩出。料金→安、授業クオリティ→高。
入学金 | 0円 |
料金 | 165,000円(税込)〜 |
学び方 | 通学とオンライン |
校舎 | 上野校、池袋校、大宮校、北千住校、川崎校、町田校他 |
就職サポート | ○ |
運営会社 | 株式会社LIG |
Webデザインが学べるおすすめのスクールに関しては【初心者用】Webデザインが学べるスクール!おすすめの10校を徹底比較で詳しく紹介していますので、興味ある方はぜひチェックしてみてください。
![【初心者用】Webデザインが学べるスクール!おすすめの10校を徹底比較 【初心者用】Webデザインが学べるスクール!おすすめの10校を徹底比較](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_128,h_72/https://susanweblog.com/wp-content/uploads/2023/08/a47dd22e0a1ac2a90cbe350755d1536c-320x180.webp)
レバテッククリエイター
![公式サイト 公式サイト](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1024,h_561/https://susanweblog.com/wp-content/uploads/2023/12/Screenshot-2023-07-20-at-1.55.09-am-2048x1121-1-1024x561.webp)
Webやゲーム業界のフリーランスクリエイター向けのエージェントサービス。案件マッチングから単価交渉、契約代行までを一貫してサポート。
案件数 | デザイナー用案件数:1,000以上 |
リモート案件 | ◎ |
勤務日数 | 週3日〜 |
高単価 | ~1,400,000円/月 |
地域 | 東京 |
運営会社 | レバテック株式会社 |
フリーランスデザイナー用のおすすめエージェントに関してはフリーランスのデザイナーが登録しておくべきエージェント8選!おすすめはどこ?で詳しく紹介していますので、ぜひチェックしてみてください。
![フリーランスのデザイナーが登録しておくべきエージェント8選!おすすめはどこ? フリーランスのデザイナーが登録しておくべきエージェント8選!おすすめはどこ?](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_128,h_72/https://susanweblog.com/wp-content/uploads/2023/12/6c37732fd647ae4a005c408faf9f9051-320x180.webp)
Adobe XDを共有するシチュエーション
![Adobe XD Adobe XD](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1024,h_683/https://susanweblog.com/wp-content/uploads/2023/07/Suguru_adobe_xd_desgining_tool_31727cd9-54f4-4da8-8c0f-72c7b874df94-1024x683.png)
Adobe XDでデザインを共有するシチュエーションは多種多様です。
以下はよく使われる場面の例です。
- チームコラボレーション
- クライアントとのレビュー
- 開発者へのハンドオフ
- ユーザーテスト
チームコラボレーション
Adobe XDを使ってチーム内でデザインのアイデアを共有する場合に使用します。
新しいwebサイトやアプリのデザイン、または既存のデザインの修正に対するフィードバックなど、デザインの初期段階から最終段階までのすべてのフェーズで役立ちます。
チームメンバーはコメント機能を使ってフィードバックを書き残すことができるので、デザインの改善に役立ちます。
クライアントとのレビュー
Adobe XDを使用すると、クライアントとデザインを共有し、リアルタイムでフィードバックを得ることができます。
これにより、クライアントは実際のデザインを見ることでより具体的な修正事項や、要望を伝えることができ、プロジェクトのにおけるプロセスがスムーズに進行します。
開発者へのハンドオフ
Adobe XDでは、開発者向けに特別なリンクを生成することができます。
このリンクから、開発者はデザインの詳細なスペック、アセット、コード片などを閲覧することができます。
これにより、デザインと開発の間のギャップを埋め、デザインの意図を正確に反映させることが可能になります。
ユーザーテスト
Adobe XDはユーザーテストを実施するのにも適しています。
ユーザーは実際にプロトタイプと対話することができ、デザインの弱点やユーザビリティの問題を特定することができます。
Adobe XDを共有する方法
Adobe XDはデザインとプロトタイプを簡単に共有できるようにするためのツールとして作られています。
以下、Adobe XDでデザインを共有する際の基本的なステップです。
- プロジェクトを開く
- 共有タブを選択
- リンクの設定
- リンクを作成
- 作成したリンクを共有
ステップ①:プロジェクトを開く
![【AdobeXD】デザインを簡単に共有する方法。クラウド共有、パスワード設定など webdesign, adobexd-figma - 【AdobeXD】デザインを簡単に共有する方法。クラウド共有、パスワード設定など](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_266,h_246/https://susanweblog.com/wp-content/uploads/2023/07/Screenshot-2023-07-01-at-1.47.28-pm.png)
Adobe XDを開き、共有したいプロジェクトを開きます。
ステップ②:共有タブを選択
![【AdobeXD】デザインを簡単に共有する方法。クラウド共有、パスワード設定など webdesign, adobexd-figma - 【AdobeXD】デザインを簡単に共有する方法。クラウド共有、パスワード設定など](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1024,h_530/https://susanweblog.com/wp-content/uploads/2023/07/Screenshot-2023-07-01-at-1.46.41-pm-1024x530.png)
画面上部のメニューから「共有」タブを選択します。
ステップ③:リンクの設定
![【AdobeXD】デザインを簡単に共有する方法。クラウド共有、パスワード設定など webdesign, adobexd-figma - 【AdobeXD】デザインを簡単に共有する方法。クラウド共有、パスワード設定など](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1024,h_530/https://susanweblog.com/wp-content/uploads/2023/07/Screenshot-2023-07-01-at-1.55.10-pm-1024x530.png)
リンク
![【AdobeXD】デザインを簡単に共有する方法。クラウド共有、パスワード設定など webdesign, adobexd-figma - 【AdobeXD】デザインを簡単に共有する方法。クラウド共有、パスワード設定など](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_326,h_100/https://susanweblog.com/wp-content/uploads/2023/07/Screenshot-2023-07-01-at-2.05.18-pm.png)
既存のリンクを変更したり新規のリンクを作成することができます。
新たにリンクを作成する場合は「新規リンク」を選択、既存のリンクを変更する場合は「リンクを管理」を選択します。
表示設定
![【AdobeXD】デザインを簡単に共有する方法。クラウド共有、パスワード設定など webdesign, adobexd-figma - 【AdobeXD】デザインを簡単に共有する方法。クラウド共有、パスワード設定など](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_346,h_409/https://susanweblog.com/wp-content/uploads/2023/07/Screenshot-2023-07-01-at-2.05.47-pm.png)
表示設定は、共有する目的によって異なります。
ーデザインレビュー
このモードは、デザイン全体をレビューし、フィードバックを収集するためのものです。
他のチームメンバーやクライアントから直接コメントを受け取ることができます。
リンク先の表示のされ方:
![【AdobeXD】デザインを簡単に共有する方法。クラウド共有、パスワード設定など webdesign, adobexd-figma - 【AdobeXD】デザインを簡単に共有する方法。クラウド共有、パスワード設定など](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_774,h_612/https://susanweblog.com/wp-content/uploads/2023/07/Screenshot-2023-07-01-at-2.25.40-pm.png)
ー開発
このモードは、開発者にデザインをハンドオフするためのものです。
開発者は、このリンクからデザインの詳細なスペック、アセット、コード片などを直接取得できます。
さらに、コンポーネントの状態やレイアウトグリッドの情報、カラー、テキスト、効果の詳細なども表示されます。
リンク先の表示のされ方:
![【AdobeXD】デザインを簡単に共有する方法。クラウド共有、パスワード設定など webdesign, adobexd-figma - 【AdobeXD】デザインを簡単に共有する方法。クラウド共有、パスワード設定など](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_768,h_926/https://susanweblog.com/wp-content/uploads/2023/07/Screenshot-2023-07-01-at-2.26.26-pm.png)
ープレゼンテーション
このモードは、デザインやプロトタイプをプレゼンテーションするためのものです。
画面遷移、オーバーレイ、固定した要素などの全てのインタラクションが可能で、デザインの全体的な流れやビジョンを視覚的に示すことができます。
リンク先の表示のされ方:
![【AdobeXD】デザインを簡単に共有する方法。クラウド共有、パスワード設定など webdesign, adobexd-figma - 【AdobeXD】デザインを簡単に共有する方法。クラウド共有、パスワード設定など](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1024,h_613/https://susanweblog.com/wp-content/uploads/2023/07/Screenshot-2023-07-01-at-2.31.04-pm-1024x613.png)
ーユーザーテスト:
このモードは、ユーザーのフィードバックを集めるためのものです。
ユーザーは実際のプロトタイプと直接対話することができ、その結果からユーザビリティの問題や改善の余地を見つけることができます。
ーカスタム:
このモードは、特定の目的に合わせて設定をカスタマイズするためのものです。
例えば、特定のステークホルダーだけに情報を提供する、または特定の情報を隠したい場合などに使用します。
(以下カスタム用のオプション)
![【AdobeXD】デザインを簡単に共有する方法。クラウド共有、パスワード設定など webdesign, adobexd-figma - 【AdobeXD】デザインを簡単に共有する方法。クラウド共有、パスワード設定など](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_222,h_190/https://susanweblog.com/wp-content/uploads/2023/07/Screenshot-2023-07-01-at-2.09.02-pm.png)
必要に応じて各設定をカスタマイズすることが可能です。
ステップ④:リンクを作成
![【AdobeXD】デザインを簡単に共有する方法。クラウド共有、パスワード設定など webdesign, adobexd-figma - 【AdobeXD】デザインを簡単に共有する方法。クラウド共有、パスワード設定など](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_468,h_562/https://susanweblog.com/wp-content/uploads/2023/07/Screenshot-2023-07-01-at-2.12.48-pm.png)
選択した設定に基づいて共有リンクを作成します。
「リンクを作成」ボタンをクリックするとリンクが作成されます。
このリンクは、デザインを共有したい人に送信するか、Webサイトやソーシャルメディアで公開することもできます。
ステップ⑤:作成したリンクを共有
![【AdobeXD】デザインを簡単に共有する方法。クラウド共有、パスワード設定など webdesign, adobexd-figma - 【AdobeXD】デザインを簡単に共有する方法。クラウド共有、パスワード設定など](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_464,h_716/https://susanweblog.com/wp-content/uploads/2023/07/Screenshot-2023-07-01-at-2.14.45-pm.png)
作成したリンクをコピーし共有したい人に送信します。
(リンクをクリックするとリンク先を見ることができます。)以下用途別に共有する方法です。
- クリップのアイコン
- リンクの右側にあるクリップのアイコンをクリックするとリンクをコピーすることができます。コピーしたリンクを任意の場所でペーストすることで共有することができます。
- コードのアイコン
- デザインのコードをコピーすることができます。テキストエディタなどにコードをペーストすることでブラウザ上で作成したデザインを見ることができます。
- Beのアイコン
- Behnceというサイトでデザインを共有することができます。
リンクへのアクセス制限
作成したリンクに対してアクセス制限をかけることができます。
以下が使用できるアクセス制限です。
リンクを共有されたすべての人
![【AdobeXD】デザインを簡単に共有する方法。クラウド共有、パスワード設定など webdesign, adobexd-figma - 【AdobeXD】デザインを簡単に共有する方法。クラウド共有、パスワード設定など](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_460,h_130/https://susanweblog.com/wp-content/uploads/2023/07/Screenshot-2023-07-01-at-2.56.07-pm.png)
この設定を選択すると、共有リンクを持っている全ての人がアクセスできます。
このオプションは、デザインのフィードバックを広く収集する場合や、公開されたウェブサイトのプロトタイプを共有する場合などに適しています。
パスワードで保護された人
![【AdobeXD】デザインを簡単に共有する方法。クラウド共有、パスワード設定など webdesign, adobexd-figma - 【AdobeXD】デザインを簡単に共有する方法。クラウド共有、パスワード設定など](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_460,h_552/https://susanweblog.com/wp-content/uploads/2023/07/Screenshot-2023-07-01-at-2.56.18-pm.png)
この設定を選択すると、共有リンクを開くためには設定したパスワードの入力が必要になります。
このオプションは、デザインがまだ機密性を保つ必要がある場合や、特定の人だけに内容を共有したい場合に適しています。
招待された人のみ
![【AdobeXD】デザインを簡単に共有する方法。クラウド共有、パスワード設定など webdesign, adobexd-figma - 【AdobeXD】デザインを簡単に共有する方法。クラウド共有、パスワード設定など](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_448,h_118/https://susanweblog.com/wp-content/uploads/2023/07/Screenshot-2023-07-01-at-2.56.00-pm.png)
この設定を選択すると、特定のメールアドレスを持つ人だけがアクセスできます。
これは、Adobeのクラウドドキュメントを直接共有し、特定の人々とコラボレーションをする場合に使用します。
その他の共有方法
以下、他の代表的な共有方法です。
- データ自体をメールやクラウドを使って共有
- 共同シェアする
- 画像データやPDFに変換して送る
データ自体をメールやクラウドを使って共有
- ファイルの共有サービスを利用する
- メールで送信する
- クラウドストレージリンクを共有する
- チャットツールで送信する
ファイルの共有サービスを利用する
大きなファイルを送信する一般的な方法として、ファイル共有サービスを利用する方法があります。
DropboxやGoogle Driveなどのクラウドストレージサービスを使用して、XDのデザインファイルをアップロードし、共有リンクを作成して他の人と共有することができます。
共有リンクを送信するだけで、他の人がファイルにアクセスしダウンロードできるようになります。
メールで送信する
ファイルサイズが小さい場合や、直接送信したい場合は、メールでXDのデザインデータを送信することもできます。
デザインファイルを圧縮して添付ファイルとしてメールに添付し、送信先のメールアドレスに送信します。
ただし、ファイルサイズが大きい場合は、メールの制限に注意する必要があります。
クラウドストレージリンクを共有する
Adobe Creative Cloudを使用している場合は、XDのデザインデータをCreative Cloudにアップロードし、共有リンクを作成して他の人と共有することもできます。
Creative Cloud上で共有リンクを作成し、リンクを他の人に送信することで、ファイルにアクセスしてダウンロードできるようになります。
チャットツールで送信する
Slackやチャットワークなどのチャットツールでファイルの送信がサポートされている場合、XDのデザインファイルを直接送信することができます。
一般的には、チャットツールの添付ファイル機能を使用して、XDのデザインファイルを添付します。
ファイルが送信されると、相手はファイルをダウンロードして開くことができます。
![【無料】フリーランスが絶対に知っておくべきチャットツール5選! 【無料】フリーランスが絶対に知っておくべきチャットツール5選!](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_128,h_72/https://susanweblog.com/wp-content/uploads/2023/12/8e1186faa553fc72d2de31f7576b1360-320x180.webp)
これらの方法は、XDのデザインデータを他の人に簡単に送信するための一般的な手段です。
ただし、ファイルサイズやセキュリティの要件に応じて最適な方法を選択する必要があります。
また、ファイルのバージョン管理や編集の追跡を目的とする場合は、共同編集機能を利用することも検討してください。
共同シェアする
Adobe XDでは、Coediting(共同編集)機能を使用して、チームメンバーとリアルタイムでプロジェクトを共有・編集することが可能です。
以下にその手順を説明します。
ドキュメントをクラウドに保存
![【AdobeXD】デザインを簡単に共有する方法。クラウド共有、パスワード設定など webdesign, adobexd-figma - 【AdobeXD】デザインを簡単に共有する方法。クラウド共有、パスワード設定など](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_588,h_772/https://susanweblog.com/wp-content/uploads/2023/07/Screenshot-2023-07-01-at-2.51.29-pm.png)
共同編集を利用するには、まずドキュメントをAdobe Creative Cloudに保存する必要があります。
XDの上部メニューで「ファイル」→「保存」または「保存してクラウドドキュメントにコピー」と選択します。
共同編集を有効にする
![【AdobeXD】デザインを簡単に共有する方法。クラウド共有、パスワード設定など webdesign, adobexd-figma - 【AdobeXD】デザインを簡単に共有する方法。クラウド共有、パスワード設定など](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_386,h_86/https://susanweblog.com/wp-content/uploads/2023/07/Screenshot-2023-07-01-at-2.50.34-pm.png)
ドキュメントがクラウドに保存されたら、右上の共同編集アイコンをクリックします。
招待を送る
![【AdobeXD】デザインを簡単に共有する方法。クラウド共有、パスワード設定など webdesign, adobexd-figma - 【AdobeXD】デザインを簡単に共有する方法。クラウド共有、パスワード設定など](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_718,h_912/https://susanweblog.com/wp-content/uploads/2023/07/Screenshot-2023-07-01-at-2.50.15-pm.png)
表示されるダイアログボックスに、共同編集者のAdobe IDのメールアドレスを入力し、「編集者として招待」をクリックします。
招待を受けた人は、メールに記載されたリンクをクリックして直接ドキュメントにアクセスし、リアルタイムでの共同編集を開始できます。
このように、Adobe XDの共同編集機能は、リモートワークやチームでのコラボレーションに大いに役立つ機能です。
ただし、リアルタイム共同編集中は、編集内容がすぐに他の共同編集者に反映されるため、思慮深く作業を行うことが重要です。
画像データやPDFに変換して送る
以下は、デザインデータを画像として共有する方法です。
スクリーンショットを撮影する
デザイン画面を表示し、スクリーンショットツールを使用してデザインのスクリーンショットを撮影します。
スクリーンショットは一般的に画像ファイル形式(JPEGやPNGなど)で保存されます。
撮影したスクリーンショットを任意の方法で送信します。
デザインをエクスポートする
Adobe XDのエクスポート機能を使用して、デザインを画像ファイルやPDFに変換して送信することもできます。
エクスポート方法は以下の手順で行います。
- デザイン画面を表示し、メニューバーの「ファイル」→「エクスポート」を選択します。
- エクスポート設定ウィンドウが表示されるので、ファイルの形式(PNG、JPEG、PDFなど)を選択します。
- 必要に応じて解像度や圧縮の設定を調整し、エクスポート先のフォルダを指定します。
- エクスポートを実行し、生成された画像ファイルやPDFをチャットツールに添付して送信します。
まとめ
以上がAdobeXDで作成したデザインを他の人に共有する方法です。
Adobe XDはデザインを簡単に共有でき、コラボレーションを円滑にする強力なツールです。
適切な設定を選び、チームやクライアントとのデザインコミュニケーションを改善しましょう。