design
岩瀬 莉奈

2022.3.28デザイン 

Webデザイナー

岩瀬 莉奈

2021年8月1日「マリンロード」は「インソースマーケティングデザイン」へ社名を変更いたしました

【Adobe XD】テキストハイパーリンク、オブジェクトのハイパーリンクの作成方法

こんにちは!今回はAdobeXDのアップデートで追加された機能、テキストハイパーリンク、オブジェクトまたはコンポーネントのハイパーリンクを作成するやり方、使い方を画像付きで紹介させていただきます。

BLOG

説明用に、XDに画像のようなアートボードを用意しました。
こちらで説明していきます。

BLOG – 1

リンクを付けたいテキストを選択します。
文章のブロック全体にリンクを付けることも、画像のように文章の一部にリンクを付けることも可能です。

BLOG – 2

右メニュー内の『ここにURLを挿入』の箇所にリンク先のURLを記入します。

BLOG – 3

URLを記入するとテキストハイパーリンクが作成され、デフォルトで下線が引かれます。
この下線は削除してもリンクは消えません。
また、メールウィンドウにリンクさせたい時は、リンク先に『mailto:メールアドレス』【例】mailto:xxx@xxx.comと記入します。

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

BLOG – 4

リンクを付けたいオブジェクトを選択し、上部のメニューからプロトタイプモードに変更します。
コンポーネントにリンクを付けることも可能です。

BLOG – 6

1.プロトタイプモードの右メニュー内の、「インタラクション」をクリックします。
2.「トリガー」を「タップ」、「キーとゲームパッド」、「音声」のいずれかに設定します。
3.「アクション」の種類を「ハイパーリンク」に設定します。
4.「アクション」の移動先にリンク先のURLを記入します。
メールウィンドウにリンクさせたい時は、リンク先に『mailto:メールアドレス』【例】mailto:xxx@xxx.comと記入します。
設定したリンク先は、プレビューやXDを共有したURL先から確認することができます。

今回紹介させていただいたリンク先の指定は、クライアント用のデザインプロトタイプだけでなく、社内的なコーダーへの指示、メモ書き等にも活用できそうです。
最後まで読んでいただきありがとうございました!

WEBサイト診断 現役ウェブ解析士が教えるWebサイトの読み解き方 イメージ
ホームページ制作サービスはこちら
ページTOPへ