マニュアル キャンセル

ハイパーリンクの作成

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

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

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

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

  1. デザインモードで、ハイパーリンクを設定するテキストコンテナ内のテキストを選択します。

  2. プロパティインスペクターの「ここに URL を挿入」フィールドで、次の手順を実行します。

    • Web ページにリンクするには、その web ページの URL を入力します。例えば、https://www.adobe.com と入力します。
    • 受信者のアドレスが入った新しいメールウィンドウにリンクするには、「mailto:」の後に受信者のメールアドレスを入力します。例えば、「mailto:john@xyz.com」と入力します。

    作成したテキストハイパーリンクには、デフォルトで下線が引かれています。

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

オブジェクトまたはコンポーネントのハイパーリンクを作成する

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

  1. プロトタイプモードに切り替え、ハイパーリンクを設定するオブジェクトまたはコンポーネントを選択します。

  2. オブジェクトの青い矢印をクリックし、プロパティインスペクターで「トリガー」を「タップ」、「キーとゲームパッド」、または「音声」に設定します。

  3. 「アクション」の「種類」を「ハイパーリンク」に設定します。

  4. 移動先」フィールドで、次の手順を実行します。

    Web ページへのリンク

    Web ページへのリンク
    Web ページへのリンク

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

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

    メールへのリンク

    メールへのリンク
    メールへのリンク

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

  5. ハイパーリンクをプレビューするには、デスクトッププレビューアイコンをクリックします。

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

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

注意事項

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

http、https、mailto 以外のプロトコルを使用した場合のエラーメッセージ
http、https、mailto 以外のプロトコルを使用した場合のエラー

詳細情報

XD でのハイパーリンクの操作について詳しくは、こちらの 2 分間のビデオをご覧ください。

関連リソース

ご質問または共有するアイデアがある場合

コミュニティで質問する

質問やアイデアを共有するには、Adobe XD コミュニティにご参加ください。皆様からのご意見や作品をお待ちしております。

ヘルプをすばやく簡単に入手

新規ユーザーの場合