今回はAdobe XDのコンポーネントを使ってHTMLで言うaタグリンク（テキストリンク）を作成する方法を紹介します。
XDはWEBサイトの設計図のようなものを作成するのに役立ちます。WEBサイトには必ずと言っても良いほどリンクは存在すると思うのでXDで作成するワイヤーフレームの時点でリンクの繋がり（動き）も表現出来ると、その後のWEB制作がスムーズに進むかと思います。
簡単なので是非覚えてみて下さい。
XDでHTMLのaタグリンクを表現
では、今回は以下の二つのアートボードにある「リンク」のテキストをHTMLのaタグリンクの様な動きにしていきます。
まずは「リンク」のテキストに対して右クリックをして「コンポーネントにする」を実行します。
コンポーネントの説明は省きます。次で何となくの特徴を理解して下さい。
右側のツールの「コンポーネント【メイン】」の部分（ステート機能）に新しく追加したコンポーネントがあるので確認しましょう。その新しく追加したコンポーネントの「リンク」のテキストを赤色に変更して下線を追加します。
すると以下のようにコンポーネントを切り替えると動きを表現できます。オブジェクトにマウスを乗せた時も同じ動きとなります（これが特徴です。）
また、この様な”動き”を「インタラクション」って言ったりします。
次に、プロトタイプのタブに切り替えて二つのアートボードのインタラクションを繋げてあげます。そして右側のツールの設定を以下のものに変更します。
| トリガー | タップ |
| アクション 種類 | 自動アニメーション |
| イージング | なんでもOK |
| デュレーション | 0秒 |
この設定はオブジェクトをタップすると選択したアートボードに移動する指示です。
これで完成です。「リンク」のテキストをクリックするとページが変わる動きを表現出来ました。
このように非常に簡単にaタグリンクを表現出来るので、まずは今回の基礎をマスターしてみて下さい。
今回紹介したインタラクションの動きはテキストのみならず、画像やオブジェクトの集合体にも可能です。例えば、WEBサイトで言うお問い合わせボタンや、サムネイルとかにも同じ動きを追加することが出来ます。
最後に、もう少しリアルなデザインに今回紹介したインタラクションを追加すると、以下の様にWEBサイトの導線そのものの動きを表現する事が出来ます。
以上が「XDを使ってHTMLで言うaタグリンクを表現する方法」でした。
XDの醍醐味とも言える技術なので、XDを使う上では必ずこの表現は出来る様になりましょう。
