今回はAdobe XDでページ内のアンカーポイントを行き来するアンカーリンクを作成する方法を紹介します。
アンカーリンクは、WEBサイトでは結構多用する要素なのでXDで方法を覚えておけばワイヤー作成時に分かりやすくなり、作業者との認識違いも減り作業効率が上がります。
アンカーとは、ページリンクをさらに細かく指定する場合に使用されます。 ページリンクはそのページにジャンプするのに対してアンカーを配置することにより、そのページの５行目といった具合に表示する行位置まで指定することができるのです。 とても便利なアイテムです。
XDでアンカーリンクを作成する方法
では早速XDでアンカーリンクを作成する方法を紹介します。約5分で出来る程非常に簡単に出来ます。
①まずは見た目となるデザインを適当に作成します。今回はサンプルなので白黒でシンプルな見た目にしておきます。
②グロナビのボタンをアンカーリンクにしていきます。なので、クリック範囲を作成するために各々の「アンカー1」〜「アンカー5」を下記の赤枠の様に囲っていきます。
③プロトタイプモードに移動して②で作成した「アンカー1」とページ内の「見出し1」繋げます。
トリガーを「タップ」アクションを「スクロール先」にするとアンカーリンクの出来上がりです。
④そのままだと何か一つのアンカーをクリックするとグロナビが最上部にいってしまうので、グロナビ部分を「スクロール時に位置を固定」にしましょう。
⑤グロナビを固定にすると、その分の高さがズレてしまいます。
なので以下の部分で「Y-オフセット」を調整しましょう。（今回は-150にしたらバッチリでした。）
最後にプレビューで動作の確認をしてみて下さい。以下の様に動いていればOKです。
以上が「【超簡単】XDでアンカーリンクを作成する方法」でした。
こんなに簡単にこういった表現が出来るのはさすがXDだと思います。
今回紹介したページ内スクロールを応用すれば他にも色んな表現が出来ますので、まずは基本まで。
