アンカーリンクの作成

最終更新日 : 2023年2月10日

ここでは、アートボード内でのナビゲーション体験を改善するためのアンカーリンクの作成方法を説明します。

Adobe XD では、プロトタイプを作成する際にアンカーリンクを作成して、アートボードの特定のセクションにスクロールすることができます。長いページフォームや長いテキスト記事をデザインするときは、アンカーリンクを使用することで、ナビゲーションの高速化とユーザビリティの向上を図ることができます。

アートボードの特定の部分にすばやく移動することで、スクロール操作のような効果を実現できます。以下の手順に従って操作してください。

プロトタイプモードに切り替えます。アンカーリンクを追加するアートボードでオブジェクトを選択します。

プロトタイピングワイヤーをアートボードの下方向にドラッグし、リンク先のポイントまで延ばします。

プロトタイピングワイヤーをクリックして、プロパティインスペクターにインタラクションパネルを表示します。このパネルには、次のオプションがあります。

トリガー：「タップ」に設定します。
「アクション」の「種類」：「スクロール先」に設定します。単一のトリガーに対して複数のアクションを許可することができます。詳しくは、この記事を参照してください。
移動先：移動先レイヤーを選択します。
Y オフセット：ワイヤー接続されたオブジェクトの上端からの Y オフセット値を入力します。 Y オフセットハンドルをアートボードの左側にドラッグして、Y オフセット値が変更されたことを確認します。ワイヤー接続されたオブジェクトより上はすべて負のオフセット値であり、下は正のオフセット値です。
イージング：イージング効果をシミュレートするためのオプションを選択します。例えば、アニメーションをプロトタイプからイーズイン / アウトする場合は、「イーズイン / アウト」を選択します。
デュレーション：デュレーションを入力します。遷移する 2 つのアートボードの間に設定できる最大デュレーションは 5 秒です。