マニュアルキャンセル

ハイパーリンクの作成

検索

最終更新日 : 2022年4月20日

Adobe XD プロトタイプから外部の web ページにリンクする方法について説明します。

デザイン内のテキスト、オブジェクト、またはコンポーネントは、外部の web ページやメールプログラムにリンクすることができます。ハイパーリンクを作成したら、それをプレビューし、デザインスペックを関係者と共有できます。

テキストハイパーリンクの作成

web ページやメールプログラムへのハイパーリンクテキストを設定するには、次の手順を実行します。

デザインモードで、ハイパーリンクを設定するテキストコンテナ内のテキストを選択します。
プロパティインスペクターの「ここに URL を挿入」フィールドで、次の手順を実行します。
- Web ページにリンクするには、その web ページの URL を入力します。例えば、https://www.adobe.com と入力します。
- 受信者のアドレスが入った新しいメールウィンドウにリンクするには、「mailto:」の後に受信者のメールアドレスを入力します。例えば、「mailto:john@xyz.com」と入力します。
作成したテキストハイパーリンクには、デフォルトで下線が引かれています。

ハイパーリンクを作成したら、デザインモードまたはプロトタイプモードで編集できます。

オブジェクトやコンポーネントに web ページやメールプログラムへのハイパーリンクを設定するには、次の手順を実行します。

プロトタイプモードに切り替え、ハイパーリンクを設定するオブジェクトまたはコンポーネントを選択します。
オブジェクトの青い矢印をクリックし、プロパティインスペクターで「トリガー」を「タップ」、「キーとゲームパッド」、または「音声」に設定します。
「アクション」の「種類」を「ハイパーリンク」に設定します。
「移動先」フィールドで、次の手順を実行します。

Web ページへのリンク

Web ページへのリンク

Web ページにリンクするには、その web ページの URL を入力します。

例えば、https://www.adobe.com と入力します。

メールへのリンク

メールへのリンク

「宛先」フィールドに受信者のアドレスが入った新しいメールウィンドウにリンクするには、「mailto:」の後に受信者のメールアドレスを入力します。例えば、「mailto:john@xyz.com」と入力します。
ハイパーリンクをプレビューするには、デスクトッププレビューアイコンをクリックします。

ハイパーリンクをクリックすると、ハイパーリンクが常に別のブラウザータブで開きます。

デザインスペックリンクを公開して共有すると、関係者がハイパーリンクを確認できるようになります。

https または mailto 以外のプロトコル（http やプロトコルなし）の URL を追加すると、警告が表示されます。その場合は、URL を変更するか、その URL で続行するかを選択できます。
http を使用するプロトタイプ、またはプロトコルを使用しないプロトタイプでハイパーリンクオブジェクトをクリックすると、その URL が自動的に https で開きます。例えば、URL を http://www.adobe.com または www.adobe.com と指定して追加すると、リンクは https://www.adobe.com として開きます。
プロトタイプで、http、https、mailto 以外のプロトコル（ftp など）を使用するハイパーリンクオブジェクトをクリックしても、URL は開きません。画面の下にエラーメッセージが表示されます。