マニュアル キャンセル

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

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

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

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

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

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

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

    点線とスクロール可能なコンテンツ
    点線とスクロール可能なコンテンツ

  2. デザインモードで、プロパティインスペクターの次のオプションを選択します。

    • スクロール:「垂直方向」または「なし」を選択します。
    • スクロール時に位置を固定:デザイン要素がコンテンツと一緒にスクロールしないように、特定の位置に固定する場合に選択します。
    • ビューポートの高さ:アートボードを表示できるビューポートの高さを指定します。

    垂直スクロール効果を適用すると、アートボードの内容を上下に移動できます。

    カスタムサイズのアートボード上の垂直スクロール
    アートボード上の垂直スクロール

  3. プロトタイプモードでアートボードを接続します。

  4. プロトタイプモードで、プロパティインスペクターの次のオプションを選択します。

    • スクロール位置を保持:前のアートボードでの位置を維持しながら、次のアートボードへ移行します。詳しくは、こちらの Twitter の投稿を参照してください。
    • スクロール時に位置を固定:デザイン要素がコンテンツと一緒にスクロールしないよう、固定位置に固定します。
    スクロール位置を保持
    スクロール位置を保持

    スクロール時に位置を固定
    スクロール時に位置を固定

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

例とサンプルファイル

また、XD コミュニティで、このようなチュートリアルやサンプルファイルをさらにチェックすることもできます。

ヒントとテクニック

デザインで水平スクロール効果を作成するには、スクロールグループを使用します。スクロールグループを使用すると、水平方向、垂直方向、または両方向にスクロールできるコンテンツのウィンドウをプロトタイプ化できます。


関連リソース

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

コミュニティで質問

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

ヘルプをすばやく簡単に入手

新規ユーザーの場合