Adobe XD でのアートボードの使用

XD でアートボードを使用してデザインプロジェクトを作成する方法を説明します。

Jeanee は、UX デザインプロジェクトのリーダーを務めるグラフィックデザイナーです。彼女はグループメンバーに Adobe XD の使用を推奨しています。グループメンバーは、UX のデザインとツールに関する様々な専門知識を持つ人々です。

 
  • 彼女は、プロジェクトをスピーディに開始するのに役立つリソースを探しています。

 

  • 彼女は、使い方を学習するためのチュートリアルと、外出先で勉強するためのサンプルファイルを必要としています。

Jeanee は、基本的なデザイン用語を学習し、アートボードを使用して初めてのプロトタイプを XD で作成しています。これ以降では、彼女がどのように学習を進めることができるか見ていきましょう。

Adobe XD を初めてご使用ですか?

無料体験版アプリを入手

この機能を試す

サンプルファイルを入手

.xdc、142KB

準備

XD の基本については、以下を参照してください。

4 段階の簡単な手順でアートボードを設定

アートボードとは何でしょうか?アートボードとは、アプリケーションの画面または Web サイトのページを表します。これにより、デザインプロセスが合理化され、1 つのドキュメントで複数の画面サイズに対応するインタラクティブなデザインを作成できます。アートボードを使用して XD プロジェクトを作成してみましょう。

ここからは、以下のステップに従ってアートボードの設定方法を説明します。

新規アートボードの作成

Adobe XD には、様々なバージョンの iPhone、iPad、Web などに対応する、一般的な画面サイズ用のアートボードが用意されています。用意されている以外のサイズが必要な場合は、カスタムアートボードを作成できます。

ホーム画面

カスタムアートボード

プリセットのアートボードサイズを使用するか、カスタムアートボードを作成します。

XD アプリケーション

アートボードのプロパティ

追加のアートボードを作成するには、アートボードツール を使用します。プロパティインスペクターからアートボードプリセットを選択して適用します。

Photoshop と Illustrator の既存のアートボードの使用

PhotoshopIllustrator の既存のアートボードは、再作成する必要なしに XD に読み込むことができます。

Photoshop と Illustrator の既存のアートボードの使用

XD で、ファイル/読み込みを使用して、XD で Photoshop や Illustrator のアートボードを開きます。すべてのアートボードやレイヤーが元のファイルのまま、編集可能な状態で開きます。

詳しくは、XD で Photoshop アセットを使用するためによく使われる 5 つの方法についての記事(英語)をご覧ください。

アートボードの管理

アートボードのサイズを変える必要が生じても心配はいりません。サイズを変更できます。また、デザインのニーズに応じて名前も変更できます。追加のアートボードを作成し、その配置を管理する場合は、複製して再配置することができます。

名前の変更

再配置

アートボードのタイトルをダブルクリックします。

サイズ変更

サイズ変更

アートボードの端に表示されている円形のハンドルをドラッグします。

複製

アートボードのコピー & ペースト

アートボードを選択し、Ctrl または Command+D キーを押します。

整列と分布

整列と分布

複数のアートボードを選択し、プロパティインスペクター「整列と分布」をクリックします。アートボードをドラッグして再配置します。

レイアウトグリッドまたは方眼グリッドの適用

アートボードに追加するデザインコンテンツの基本構造を定義するには、レイアウトグリッドを適用します。アートボード上にオブジェクトやテキストをレイアウトすると同時に、デザインコンテンツをすばやく計測して整列させるには、方眼グリッドを使用します。

レイアウトグリッド

レイアウトグリッド

1 つ以上のアートボードを選択し、プロパティインスペクターの「グリッド」セクションで「レイアウト」を選択します。

正方形グリッド

レイアウトグリッド

1 つ以上のアートボードを選択し、プロパティインスペクターの「グリッド」セクションで「方眼」を選択します。

アートボードのデザイン

これで、最初のアートボードが作成されました。以下では、ビジュアル要素とテキスト要素の追加方法、背景の変更方法、スクロールエフェクトの作成方法を説明します。

ビジュアル要素とテキスト要素の追加

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

ビジュアル要素とテキスト要素の追加

基本的なアートボードが完成したので、次は背景色の作成や変更、グラフィックの追加、テキストスタイルの作成と書式設定を再利用可能なアセットでおこなう方法を見ていきましょう。編集可能なグリッドに要素を繰り返し配置するには、リピートグリッドを使用します。

ビジュアル要素とテキスト要素の追加

要素を追加

描画ツールを使用して、カスタム要素を作成するか、ファイル/インポートを選択して、イメージやアイコンなどの既存の要素をデバイスフォルダーからインポートします。テキストツールを使用して、テキストスタイルを作成、書式設定し、再利用可能なアセットに取り込みます。

アートボードの背景色を変更するには、プロパティインスペクターで「塗りつぶし」を選択し、カラーピッカーからカラーを適用します。

繰り返し要素の作成

繰り返し要素

リピートグリッドを使用して、リストやカードベースのレイアウトなど、繰り返し可能な要素を持つオブジェクトを作成します。

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

デザインに垂直および水平のスクロール効果を追加するには、スクロールグループを使用して、コンテンツのウィンドウをプロトタイプ化します。

デスクトップとモバイルでスクロールのリアルなシミュレーションを実現するには、アートボード上に要素の固定位置を設定し、他の要素が下方向にスクロールできるようにします。

垂直方向のスクロール

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

ビューポートの高さを超えてアートボードを拡張するには、マーカーを使用します。マーカーは、コンテンツにアクセスするためにスクロールする必要がある位置を示します。

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

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

デザイン要素を特定の位置に固定するには、プロパティインスペクターで「スクロール時に位置を固定」を選択します。

最終デザイン

これでアートボードに関する十分な知識が習得できました。これまで学んだことを実際に試し、デザインプロジェクト用にさらに素晴らしいアートボードを作成してください。

変更される可能性あり

最終デザインをダウンロードして、デザインプロジェクトの外観を確認します。

詳細情報

基本的な作業については、以下の 4 分間のサンプルビデオをご覧ください。また、サンプルファイルをダウンロードすると、ビデオとともに実際に作業してみることができます。

サンプルファイル

ヒントとテクニック

これで XD のアートボードの基本を習得できました。以下では、役立つヒントとコツを示します。

  • アートボードの端からオブジェクトまでの距離を測定するには、オブジェクトをクリックし、Option キー(macOS の場合)または Alt キー(Windows の場合)を押します。
  • アートボードのスクロールオプションをオフにするには、アートボードを選択し、プロパティインスペクターで「スクロール」を「なし」に変更します。

アートボードの操作に関するプロ向けのその他のヒントについては、Twitter で XD プロダクトマネージャーの @Elainecchao をフォローしてください。

次のステップ

ここでは、アートボードの作成、管理、および共有について説明しました。次のステップでは、カスタムアートボードガイドを作成し、グリッドを使用してアートボードを配置する方法について説明します。

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

コミュニティで質問

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

アドビのロゴ

アカウントにログイン