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

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

アンカーリンク
アートボード内でのナビゲーション体験が向上

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

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

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

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

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

詳細情報

「アンカーリンクを使用して、動物の本の可愛らしいランディングページに、一番上に戻るインタラクションを設定できます」と説明しているのは、アドビのシニア XD エバンジェリスト、Howard Pinksy です。

詳しくは、このビデオをご覧ください。 

視聴時間:3 分


これでアンカーリンクの作成方法についての説明は終わりです。単一ページの Web デザイン例が含まれたサンプル UI キットをダウンロードし、実際に操作してみてください。

ファイルを取得

次のステップ

ここではデザインにナビゲーションリンクを追加する方法について説明しました。次は、音声コマンドと再生を使用して、デザインに複数のインタラクションを追加する方法について学習してください。

ご質問または共有するアイデアがある場合

question

ご質問または共有するアイデアがある場合は、Adobe XD コミュニティフォーラムにぜひご参加ください。皆様からのご意見や作品をお待ちしております。