マニュアルキャンセル

スクロール可能なアートボードの作成

検索

最終更新日 : 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. 読み込み、書き出し、その他のアプリの操作

スクロール可能なアートボードの作成方法を説明します。

XD デザインを作成するとき、アートボードの長さが足りないために、コンテンツをすべて表示できない場合があります。アートボードを長くし、デザインのニーズに応じてオプションを選択すると、アートボードを上下にスクロールして多様なデバイスサイズに対応できます。

垂直スクロールは、スクロール可能なドロップダウンリストや Web サイトをデザインする際に、スクロール効果をシミュレートするうえで役立ちます。しかし、スクロールグループを使用すると、マルチパネルインターフェイス、マップ、および水平画像ギャラリーをデザインする場合に、新しいレベルのインタラクションを追加できます。

垂直スクロールを作成する

プリセットのアートボード上アートボードの一番下の点を下方向にドラッグして、デバイス画面よりも長くなるようにします。点線は、スクロール可能なコンテンツの始まりを示します。

点線とスクロール可能なコンテンツ
デザインモードで、プロパティインスペクターの次のオプションを選択します。
- スクロール：「垂直方向」または「なし」を選択します。
- スクロール時に位置を固定：デザイン要素がコンテンツと一緒にスクロールしないように、特定の位置に固定する場合に選択します。
- ビューポートの高さ：アートボードを表示できるビューポートの高さを指定します。
垂直スクロール効果を適用すると、アートボードの内容を上下に移動できます。
アートボード上の垂直スクロール
プロトタイプモードでアートボードを接続します。
プロトタイプモードで、プロパティインスペクターの次のオプションを選択します。
- スクロール位置を保持：前のアートボードでの位置を維持しながら、次のアートボードへ移行します。詳しくは、こちらの Twitter の投稿を参照してください。
- スクロール時に位置を固定：デザイン要素がコンテンツと一緒にスクロールしないよう、固定位置に固定します。
スクロール位置を保持

スクロール時に位置を固定
アートボードをプレビューするには、デスクトッププレビューを選択します。プレビューウィンドウをドラッグして、垂直スクロールを表示します。

例とサンプルファイル

プリセットのアートボードを使用して、縦方向にスクロール可能なドロップダウンリストを作成するには、

選択ツールを使用して、アートボード名をクリックするか、アートボード間をドラッグします。またはレイヤーパネルでアートボード名をクリックして、ドキュメントウィンドウで選択することもできます。
選択したアートボードを長くするには、アートボードの下端を下にドラッグします。点線は、アートボードの元の高さを示します。
アートボード上でスクロールをプレビューするには、デスクトッププレビューオプションを使用して、XD で直接プレビューすることができます。

サンプルファイルをダウンロードして実際に試すか、このビデオで詳細をご覧ください。

視聴時間：1 分

デスクトップ用またはモバイル用にデザインを作成する際、スクロールとともに Web サイトの一部を表示し、デザイン要素をフローティングせずに固定する場合は、スクロール可能なアートボードと固定要素についてこのビデオをご覧ください。

視聴時間：1 分