デザインモードで、テキストオブジェクトの中からハイパーリンクを設定するテキストを選択します。
最終更新日 :
2022年3月21日
Adobe XD プロトタイプから外部の web ページにリンクする方法について説明します。
デザイン内のあらゆるテキスト、オブジェクト、コンポーネントには、外部の web ページやメールアドレスへのリンクを設定できます。 ハイパーリンクを作成した後、そのリンクをプレビューしたり、デザインスペックを関係者と共有したりすることができます。
テキストハイパーリンクの作成
テキストに web ページやメールアドレスへのハイパーリンクを設定するには、次の手順を実行します。
安全な web ページにリンク
安全な web ページ（https）にリンクするには、その web ページの URL を入力します。 例えば、https://www.adobe.com と入力します。
メールアドレスにリンク
メールアドレスにリンクするには、「mailto:」の後に受信者のメールアドレスを入力します。 例えば、「mailto:john@xyz.com」と入力します。
デザインモードでテキストハイパーリンクを定義した場合の動作は次のとおりです。
- カンバス上では、ハイパーリンク化されたテキストに、デフォルトで下線が表示されます。
- テキストの一部だけがハイパーリンク化されている場合、カンバス上でそのテキストオブジェクトを選択すると、「ここに URL を挿入」フィールドにダッシュ（—）が表示されます。
- プロトタイプモードで、ハイパーリンクが含まれているテキストオブジェクトを選択すると、ハイパーリンクがプロパティインスペクターに表示されます。
- テキストハイパーリンクは、デザインモードまたはプロトタイプモードで編集できます。
オブジェクトまたはコンポーネントのハイパーリンクの作成
オブジェクトやコンポーネントに web ページやメールアドレスへのハイパーリンクを設定するには、次の手順を実行します。
安全な web ページにリンク
安全な web ページ（https）にリンクするには、その web ページの URL を入力します。 例えば、https://www.adobe.com と入力します。
メールアドレスにリンク
メールアドレスにリンクするには、「mailto:」の後に受信者のメールアドレスを入力します。 例えば、「mailto:john@xyz.com」と入力します。
ハイパーリンクをプレビューするには、デスクトッププレビューアイコンをクリックします。
ハイパーリンクをクリックすると、ハイパーリンクが常に別のブラウザータブで開きます。
デザインモードとプロトタイプモードでのテキストのハイパーリンク化
デザインモードでテキストにハイパーリンクを定義できるだけでなく、プロトタイプモードでテキストオブジェクトにハイパーリンクを定義できます。 デザインモードで定義されたハイパーリンクは、プロトタイプモードで定義されたハイパーリンクに優先します。 デスクトッププレビューまたはプロトタイプリンクの動作は次のとおりです。
- ハイパーリンクが定義されていないテキスト部分をクリックすると、プロトタイプモードで定義されたハイパーリンクが開きます。
- デザインモードでテキストオブジェクト内のテキスト全体にハイパーリンク化し、プロトタイプモードで「タップ」トリガーを使用してテキストオブジェクトをハイパーリンク化した場合、プロトタイプモードで定義したハイパーリンクは機能しません。
XD アプリ：
- https または mailto 以外のプロトコルを持つ URL、プロトコルを持たない URL、または無効なドメインを持つ URL を追加すると、警告が表示されます。 この場合は URL を修正します。
デスクトッププレビューおよびプロトタイプリンクの動作は次のとおりです。
- https または mailto 以外のプロトコルを持つハイパーリンク、プロトコルを持たないハイパーリンク、無効なドメインを持つハイパーリンクをクリックした場合、URL は開かず、 画面の下にエラーメッセージが表示されます。
- 有効なドメインを持つハイパーリンクをクリックすると、XD はリンク先の web サイトに対してセキュリティチェックを実施します。 セキュリティチェックが失敗すると、セキュリティ警告が表示されます。 この場合、続行するか、URL を終了するかを選択できます。
詳細情報
XD でのハイパーリンクの操作について詳しくは、こちらの 3 分間のビデオをご覧ください。
関連リソース
ご質問または共有するアイデアがある場合
質問やアイデアを共有するには、 Adobe XD コミュニティにご参加ください。 皆様からのご意見や作品をお待ちしております。
