プリセットアートボード上で：アートボードの最下部をドラッグして、デバイス画面よりも長くなるように拡張します。 点線は、スクロール可能なコンテンツの始まりを示します。
最終更新日 :
2023年2月10日
スクロール可能なアートボードの作成方法を説明します。
XD デザインを作成するとき、アートボードの長さが足りないために、コンテンツをすべて表示できない場合があります。 アートボードを長くし、デザインのニーズに応じてオプションを選択すると、アートボードを上下にスクロールして多様なデバイスサイズに対応できます。
垂直スクロールは、スクロール可能なドロップダウンリストや Web サイトをデザインする際に、スクロール効果をシミュレートするうえで役立ちます。 しかし、スクロールグループを使用すると、マルチパネルインターフェイス、マップ、および水平画像ギャラリーをデザインする場合に、新しいレベルのインタラクションを追加できます。
垂直スクロールを作成する
デザインモードで、プロパティインスペクターの次のオプションを選択します。
- スクロール：「垂直方向」または「なし」を選択します。
- スクロール時に位置を固定：デザイン要素がコンテンツと一緒にスクロールしないように、特定の位置に固定する場合に選択します。
- ビューポートの高さ：アートボードを表示できるビューポートの高さを指定します。
垂直スクロール効果を適用すると、アートボードの内容を上下に移動できます。
プロトタイプモードでアートボードを接続します。
プロトタイプモードで、プロパティインスペクターの次のオプションを選択します。
- スクロール位置を保持：前のアートボードでの位置を維持しながら、次のアートボードへ移行します。 詳しくは、こちらの Twitter の投稿を参照してください。
- スクロール時に位置を固定：デザイン要素がコンテンツと一緒にスクロールしないよう、固定位置に固定します。
アートボードをプレビューするには、デスクトッププレビュー を選択します。 プレビューウィンドウをドラッグして、垂直スクロールを表示します。
例とサンプルファイル
プリセットのアートボードを使用して、縦方向にスクロール可能なドロップダウンリストを作成するには、
- 選択ツールを使用して、アートボード名をクリックするか、アートボード間をドラッグします。 またはレイヤーパネルでアートボード名をクリックして、ドキュメントウィンドウで選択することもできます。
- 選択したアートボードを長くするには、アートボードの下端を下にドラッグします。 点線は、アートボードの元の高さを示します。
- アートボード上でスクロールをプレビューするには、デスクトッププレビューオプションを使用して、XD で直接プレビューすることができます。
サンプルファイルをダウンロードして実際に試すか、このビデオで詳細をご覧ください。
視聴時間：1 分
デスクトップまたはモバイル向けのデザインを作成する際に、webサイトの一部をスクロール時にのみ表示し、浮動小数なしでデザイン要素をピンで固定したいと思いませんか？スクロール可能なアートボードと固定要素について詳細を見るには、このビデオをご覧ください。
視聴時間：1 分
また、XD コミュニティで、このようなチュートリアルやサンプルファイルをさらにチェックすることもできます。
ヒントとテクニック
デザインで水平スクロール効果を作成するには、スクロールグループを使用します。 スクロールグループを使用すると、水平方向、垂直方向、または両方向にスクロールできるコンテンツのウィンドウをプロトタイプ化できます。
関連リソース
ご質問または共有するアイデアがある場合
ご質問または共有するアイデアがある場合は、Adobe XD コミュニティにぜひご参加ください。 皆様からのご意見や作品をお待ちしております。
