プリセットのアートボード上アートボードの一番下の点を下方向にドラッグして、デバイス画面よりも長くなるようにします。点線は、スクロール可能なコンテンツの始まりを示します。
- シェイプ、オブジェクト、パス
- テキストとフォント
- コンポーネントとステート
- マスキングと効果
- レイアウト
- ビデオと Lottie アニメーション
- 既知の問題と修正された問題
- インストールと更新
- 起動時のクラッシュ
- クラウドドキュメントおよび Creative Cloud ライブラリ
- プロトタイプ作成、公開、レビュー
- 読み込み、書き出し、その他のアプリの操作
- Adobe XD ユーザーガイド
- はじめに
- プロトタイプ
- 共有、書き出し、およびレビュー
- デザインシステム
- クラウドドキュメント
- 統合とプラグイン
- XD iOS 版および Android 版
-
トラブルシューティング
- 既知の問題と修正された問題
- インストールと更新
- 起動時のクラッシュ
- クラウドドキュメントおよび Creative Cloud ライブラリ
- プロトタイプ作成、公開、レビュー
- 読み込み、書き出し、その他のアプリの操作
スクロール可能なアートボードの作成方法を説明します。
XD デザインを作成するとき、アートボードの長さが足りないために、コンテンツをすべて表示できない場合があります。アートボードを長くし、デザインのニーズに応じてオプションを選択すると、アートボードを上下にスクロールして多様なデバイスサイズに対応できます。
垂直スクロールは、スクロール可能なドロップダウンリストや Web サイトをデザインする際に、スクロール効果をシミュレートするうえで役立ちます。しかし、スクロールグループを使用すると、マルチパネルインターフェイス、マップ、および水平画像ギャラリーをデザインする場合に、新しいレベルのインタラクションを追加できます。


垂直スクロールを作成する
-
点線とスクロール可能なコンテンツ 点線とスクロール可能なコンテンツ -
デザインモードで、プロパティインスペクターの次のオプションを選択します。
- スクロール:「垂直方向」または「なし」を選択します。
- スクロール時に位置を固定:デザイン要素がコンテンツと一緒にスクロールしないように、特定の位置に固定する場合に選択します。
- ビューポートの高さ:アートボードを表示できるビューポートの高さを指定します。
垂直スクロール効果を適用すると、アートボードの内容を上下に移動できます。
アートボード上の垂直スクロール アートボード上の垂直スクロール -
プロトタイプモードでアートボードを接続します。
-
プロトタイプモードで、プロパティインスペクターの次のオプションを選択します。
- スクロール位置を保持:前のアートボードでの位置を維持しながら、次のアートボードへ移行します。詳しくは、こちらの Twitter の投稿を参照してください。
- スクロール時に位置を固定:デザイン要素がコンテンツと一緒にスクロールしないよう、固定位置に固定します。
スクロール位置を保持 スクロール位置を保持 スクロール時に位置を固定 スクロール時に位置を固定 -
アートボードをプレビューするには、デスクトッププレビュー を選択します。プレビューウィンドウをドラッグして、垂直スクロールを表示します。
例とサンプルファイル
また、XD コミュニティで、このようなチュートリアルやサンプルファイルをさらにチェックすることもできます。
ヒントとテクニック
デザインで水平スクロール効果を作成するには、スクロールグループを使用します。スクロールグループを使用すると、水平方向、垂直方向、または両方向にスクロールできるコンテンツのウィンドウをプロトタイプ化できます。
関連リソース
ご質問または共有するアイデアがある場合
ご質問または共有するアイデアがある場合は、Adobe XD コミュニティにぜひご参加ください。皆様からのご意見や作品をお待ちしております。