【Adobe XD】ハイパーリンクを使って外部リンクを設定する方法を解説

AdobeXDハイパーリンクの設定方法

みなさんこんにちは。しゅん(@shun_webdesign)です。

今回はAdobe XDでハイパーリンクの設定方法について紹介します。

ハイパーリンクを設定して情報共有しやすくする

ハイパーリンクを設定することでエンジニア、コーダーにリンクの指定箇所がわかるようになります。

コーディングする方にはわかるかもしれませんが、どこにどのリンクを設定するかわからないことがわかりにくいことが多々あります。

このリンクの指示や設定があらかじめXDで設定ができるということです。

設定方法
  1. ハイパーリンクをするデザインを用意。
  2. デザインモードの画面右プロパティから「ここにURLを挿入」にリンクを入力。
  3. 完了

下記からさらに具体的に説明していきます

合わせて読みたい

AdobeXD Tipsまとめ 【Adobe XD】保存版これだけ見とけば大丈夫!今から使えるTipsまとめ

そもそもハイパーリンクってなに?

簡単に説明するとハイパーリンクはインターネット上構築されたウェブページを相互に結びつけるリンクのことです。

HTMLではaタグを使って、このように設定できます。

HTML
<a href="https://shuns.me/">ハイパーリンク</a>

XD以外にもエクセルなどで設定ができることでも知られています。

ページ内リンクについてはこちら

XDでのアンカーリンク設定方法 【Adobe XD】たったコレだけ!ページ内にリンクを設定してスクロールさせる

設定方法

先程デザインモードから設定する方法を紹介しました。

プロトタイプから設定する方法を紹介します。

プロトタイプからの設定方法
  1. ハイパーリンクをするデザインの用意。
  2. プロトタイプの画面へ移動。
  3. ハイパーリンクを設定するオブジェクトを選択。
  4. 画面右から「インタラクションを追加」をクリック。
  5. トリガーから「タップ」「キー、ゲームパッド」「音声」いずれかを選択。
  6. アクションから種類「ハイパーリンク」を選択。
  7. 「ここにURLを挿入」にリンクを入力。
  8. 完了

設定手順

ハイパーリンクをするデザインの用意

クリック(タップ)してリンク先へ移動するオブジェクトを配置します。

今回はテキストを配置します。

画像やオブジェクトごとにも設定可能です。

プロトタイプの画面へ移動

プロトタイプ(⌥2)の画面へ移動します。

ハイパーリンクを設定するオブジェクトを選択

先程ボード上に配置したテキストをクリックします。

インタラクションを追加

プロトタイプ画面右のインタラクションから「+(インタラクションを追加)」のアイコンをクリックします。

トリガーの選択

トリガーから「タップ」「キー、ゲームパッド」「音声」いずれかを選択します。

今回は「タップ」を選びます。

アクション「ハイパーリンク」を選択

アクションから種類「ハイパーリンク」を選んでください。

リンクを入力

「ここにURLを挿入」にリンクを入力します。

入力欄横にチェックマークが表示されたら完了です。

プレビューからクリックして指定先のリンクへ移動できれば完了です。お疲れさまでした。

まとめ

リンクの共有機能を使えば簡易的なサイトの代わりにも使えそうですね。(もちろんできる限り1から作ったほうがいいと思います)

今回はXDでのハイパーリンクの設定方法について以下2つ紹介しました。

  • デザインモードの画面右プロパティから「ここにURLを挿入」にリンクを入力。
  • プロトタイプからアクション種類「ハイパーリンク」を選択し、「ここにURLを挿入」にリンクを入力。

最後まで見ていただきありがとうございます!是非記事の共有をよろしくお願いします。

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA