【Adobe XD】コンポーネントの使い方！追加、コピー、編集方法
susan すーさんのweblog
【AdobeXD】デザインを簡単に共有する方法。クラウド共有、パスワード設定など
susan
記事内に商品プロモーションを含む場合があります
今日のデザイン業界では、チームやクライアントとデザインを共有することが一般的となっています。
Adobe XDは、デザイン共有のための機能が豊富に揃っています。
本記事では、Adobe XDで作成したデザインをどのように共有するのか、その手順を詳しく解説していきます。
Webデザイナーにおすすめのパソコンはこちら！
Webデザインが学べるおすすめのスクールに関しては【初心者用】Webデザインが学べるスクール！おすすめの10校を徹底比較で詳しく紹介していますので、興味ある方はぜひチェックしてみてください。
あわせて読みたい
【初心者用】Webデザインが学べるスクール！おすすめの10校を徹底比較
フリーランスデザイナー用のおすすめエージェントに関してはフリーランスのデザイナーが登録しておくべきエージェント8選！おすすめはどこ？で詳しく紹介していますので、ぜひチェックしてみてください。
あわせて読みたい
フリーランスのデザイナーが登録しておくべきエージェント8選！おすすめはどこ？
Contents
Adobe XDを共有するシチュエーション
Adobe XDでデザインを共有するシチュエーションは多種多様です。
以下はよく使われる場面の例です。
シチュエーション例
- チームコラボレーション
- クライアントとのレビュー
- 開発者へのハンドオフ
- ユーザーテスト
チームコラボレーション
Adobe XDを使ってチーム内でデザインのアイデアを共有する場合に使用します。
新しいwebサイトやアプリのデザイン、または既存のデザインの修正に対するフィードバックなど、デザインの初期段階から最終段階までのすべてのフェーズで役立ちます。
チームメンバーはコメント機能を使ってフィードバックを書き残すことができるので、デザインの改善に役立ちます。
クライアントとのレビュー
Adobe XDを使用すると、クライアントとデザインを共有し、リアルタイムでフィードバックを得ることができます。
これにより、クライアントは実際のデザインを見ることでより具体的な修正事項や、要望を伝えることができ、プロジェクトのにおけるプロセスがスムーズに進行します。
開発者へのハンドオフ
Adobe XDでは、開発者向けに特別なリンクを生成することができます。
このリンクから、開発者はデザインの詳細なスペック、アセット、コード片などを閲覧することができます。
これにより、デザインと開発の間のギャップを埋め、デザインの意図を正確に反映させることが可能になります。
ユーザーテスト
Adobe XDはユーザーテストを実施するのにも適しています。
ユーザーは実際にプロトタイプと対話することができ、デザインの弱点やユーザビリティの問題を特定することができます。
AdobeXDの学習におすすめの書籍
Adobe XDを共有する方法
Adobe XDはデザインとプロトタイプを簡単に共有できるようにするためのツールとして作られています。
以下、Adobe XDでデザインを共有する際の基本的なステップです。
基本的な⑤ステップ
- プロジェクトを開く
- 共有タブを選択
- リンクの設定
- リンクを作成
- 作成したリンクを共有
ステップ①：プロジェクトを開く
Adobe XDを開き、共有したいプロジェクトを開きます。
ステップ②：共有タブを選択
画面上部のメニューから「共有」タブを選択します。
ステップ③：リンクの設定
リンク
既存のリンクを変更したり新規のリンクを作成することができます。
新たにリンクを作成する場合は「新規リンク」を選択、既存のリンクを変更する場合は「リンクを管理」を選択します。
表示設定
表示設定は、共有する目的によって異なります。
ーデザインレビュー
このモードは、デザイン全体をレビューし、フィードバックを収集するためのものです。
他のチームメンバーやクライアントから直接コメントを受け取ることができます。
リンク先の表示のされ方：
ー開発
このモードは、開発者にデザインをハンドオフするためのものです。
開発者は、このリンクからデザインの詳細なスペック、アセット、コード片などを直接取得できます。
さらに、コンポーネントの状態やレイアウトグリッドの情報、カラー、テキスト、効果の詳細なども表示されます。
リンク先の表示のされ方：
ープレゼンテーション
このモードは、デザインやプロトタイプをプレゼンテーションするためのものです。
画面遷移、オーバーレイ、固定した要素などの全てのインタラクションが可能で、デザインの全体的な流れやビジョンを視覚的に示すことができます。
リンク先の表示のされ方：
ーユーザーテスト:
このモードは、ユーザーのフィードバックを集めるためのものです。
ユーザーは実際のプロトタイプと直接対話することができ、その結果からユーザビリティの問題や改善の余地を見つけることができます。
ーカスタム:
このモードは、特定の目的に合わせて設定をカスタマイズするためのものです。
例えば、特定のステークホルダーだけに情報を提供する、または特定の情報を隠したい場合などに使用します。
（以下カスタム用のオプション）
必要に応じて各設定をカスタマイズすることが可能です。
ステップ④：リンクを作成
選択した設定に基づいて共有リンクを作成します。
「リンクを作成」ボタンをクリックするとリンクが作成されます。
このリンクは、デザインを共有したい人に送信するか、Webサイトやソーシャルメディアで公開することもできます。
ステップ⑤：作成したリンクを共有
作成したリンクをコピーし共有したい人に送信します。
（リンクをクリックするとリンク先を見ることができます。）以下用途別に共有する方法です。
- クリップのアイコン
- リンクの右側にあるクリップのアイコンをクリックするとリンクをコピーすることができます。コピーしたリンクを任意の場所でペーストすることで共有することができます。
- コードのアイコン
- デザインのコードをコピーすることができます。テキストエディタなどにコードをペーストすることでブラウザ上で作成したデザインを見ることができます。
- Beのアイコン
- Behnceというサイトでデザインを共有することができます。
リンクへのアクセス制限
作成したリンクに対してアクセス制限をかけることができます。
以下が使用できるアクセス制限です。
リンクを共有されたすべての人
この設定を選択すると、共有リンクを持っている全ての人がアクセスできます。
このオプションは、デザインのフィードバックを広く収集する場合や、公開されたウェブサイトのプロトタイプを共有する場合などに適しています。
パスワードで保護された人
この設定を選択すると、共有リンクを開くためには設定したパスワードの入力が必要になります。
このオプションは、デザインがまだ機密性を保つ必要がある場合や、特定の人だけに内容を共有したい場合に適しています。
招待された人のみ
この設定を選択すると、特定のメールアドレスを持つ人だけがアクセスできます。
これは、Adobeのクラウドドキュメントを直接共有し、特定の人々とコラボレーションをする場合に使用します。
その他の共有方法
以下、他の代表的な共有方法です。
その他の共有方法
- データ自体をメールやクラウドを使って共有
- 共同シェアする
- 画像データやPDFに変換して送る
データ自体をメールやクラウドを使って共有
共有方法
- ファイルの共有サービスを利用する
- メールで送信する
- クラウドストレージリンクを共有する
- チャットツールで送信する
ファイルの共有サービスを利用する
大きなファイルを送信する一般的な方法として、ファイル共有サービスを利用する方法があります。
DropboxやGoogle Driveなどのクラウドストレージサービスを使用して、XDのデザインファイルをアップロードし、共有リンクを作成して他の人と共有することができます。
共有リンクを送信するだけで、他の人がファイルにアクセスしダウンロードできるようになります。
メールで送信する
ファイルサイズが小さい場合や、直接送信したい場合は、メールでXDのデザインデータを送信することもできます。
デザインファイルを圧縮して添付ファイルとしてメールに添付し、送信先のメールアドレスに送信します。
ただし、ファイルサイズが大きい場合は、メールの制限に注意する必要があります。
クラウドストレージリンクを共有する
Adobe Creative Cloudを使用している場合は、XDのデザインデータをCreative Cloudにアップロードし、共有リンクを作成して他の人と共有することもできます。
Creative Cloud上で共有リンクを作成し、リンクを他の人に送信することで、ファイルにアクセスしてダウンロードできるようになります。
チャットツールで送信する
Slackやチャットワークなどのチャットツールでファイルの送信がサポートされている場合、XDのデザインファイルを直接送信することができます。
一般的には、チャットツールの添付ファイル機能を使用して、XDのデザインファイルを添付します。
ファイルが送信されると、相手はファイルをダウンロードして開くことができます。
あわせて読みたい
【無料】フリーランスが絶対に知っておくべきチャットツール5選！
これらの方法は、XDのデザインデータを他の人に簡単に送信するための一般的な手段です。
ただし、ファイルサイズやセキュリティの要件に応じて最適な方法を選択する必要があります。
また、ファイルのバージョン管理や編集の追跡を目的とする場合は、共同編集機能を利用することも検討してください。
共同シェアする
Adobe XDでは、Coediting（共同編集）機能を使用して、チームメンバーとリアルタイムでプロジェクトを共有・編集することが可能です。
以下にその手順を説明します。
ドキュメントをクラウドに保存
共同編集を利用するには、まずドキュメントをAdobe Creative Cloudに保存する必要があります。
XDの上部メニューで「ファイル」→「保存」または「保存してクラウドドキュメントにコピー」と選択します。
共同編集を有効にする
ドキュメントがクラウドに保存されたら、右上の共同編集アイコンをクリックします。
招待を送る
表示されるダイアログボックスに、共同編集者のAdobe IDのメールアドレスを入力し、「編集者として招待」をクリックします。
招待を受けた人は、メールに記載されたリンクをクリックして直接ドキュメントにアクセスし、リアルタイムでの共同編集を開始できます。
このように、Adobe XDの共同編集機能は、リモートワークやチームでのコラボレーションに大いに役立つ機能です。
ただし、リアルタイム共同編集中は、編集内容がすぐに他の共同編集者に反映されるため、思慮深く作業を行うことが重要です。
画像データやPDFに変換して送る
以下は、デザインデータを画像として共有する方法です。
スクリーンショットを撮影する
デザイン画面を表示し、スクリーンショットツールを使用してデザインのスクリーンショットを撮影します。
スクリーンショットは一般的に画像ファイル形式（JPEGやPNGなど）で保存されます。
撮影したスクリーンショットを任意の方法で送信します。
デザインをエクスポートする
Adobe XDのエクスポート機能を使用して、デザインを画像ファイルやPDFに変換して送信することもできます。
エクスポート方法は以下の手順で行います。
デザインのエクスポート手順
- デザイン画面を表示し、メニューバーの「ファイル」→「エクスポート」を選択します。
- エクスポート設定ウィンドウが表示されるので、ファイルの形式（PNG、JPEG、PDFなど）を選択します。
- 必要に応じて解像度や圧縮の設定を調整し、エクスポート先のフォルダを指定します。
- エクスポートを実行し、生成された画像ファイルやPDFをチャットツールに添付して送信します。
まとめ
以上がAdobeXDで作成したデザインを他の人に共有する方法です。
Adobe XDはデザインを簡単に共有でき、コラボレーションを円滑にする強力なツールです。
適切な設定を選び、チームやクライアントとのデザインコミュニケーションを改善しましょう。
Webデザインの勉強をしたい方はこちらの記事がおすすめ！
Webデザイナー用のエージェントをお探しの方はこちらの記事がおすすめ！
副業案件をお探しの方はこちらの記事がおすすめ！
ABOUT ME
30代web業界未経験
→オーストラリアにIT留学
→現地インターンを1年半経験
→フリーランスwebデザイナー・エンジニアとして活動
→月収80万円達成！
