マニュアルキャンセル

アンカーリンクの作成

検索

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

Adobe XD ユーザーガイド
はじめに
デザイン
1. アートボード、ガイド、レイヤー
2. シェイプ、オブジェクト、パス
3. テキストとフォント
  1. 描画ツールとテキストツールの操作
  2. Adobe XD のフォント
4. コンポーネントとステート
5. マスキングと効果
6. レイアウト
7. ビデオと Lottie アニメーション
プロトタイプ
共有、書き出し、およびレビュー
デザインシステム
クラウドドキュメント
統合とプラグイン
XD iOS 版および Android 版
1. モバイルデバイスでプレビュー
2. Adobe XD モバイル版に関する FAQ
トラブルシューティング
1. 既知の問題と修正された問題
  1. 既知の問題
  2. 解決済みの問題
2. インストールと更新
3. 起動時のクラッシュ
4. クラウドドキュメントおよび Creative Cloud ライブラリ
5. プロトタイプ作成、公開、レビュー
6. 読み込み、書き出し、その他のアプリの操作

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

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

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

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