マニュアル キャンセル

XD でのガイドとグリッドの使用

  1. Adobe XD ユーザーガイド
  2. はじめに
    1. Adobe XD の新機能
    2. よくある質問
    3. Adobe XD でのデザイン、プロトタイプ、共有
    4. 必要システム構成
      1. ハードウェアとソフトウェアの要件
      2. Adobe XD、Big Sur、Apple Silicon | macOS 11
    5. ワークスペースの基本
    6. Adobe XD でのアプリ言語の変更
    7. UI デザインキットへのアクセス
    8. Adobe XD のアクセシビリティ
    9. ショートカットキー
    10. ヒントとテクニック
    11. Adobe XD サブスクリプションオプション
    12. XD スタータープランへの変更
  3. デザイン
    1. アートボード、ガイド、レイヤー
      1. アートボードの基本を学ぶ
      2. グリッドとガイドを使う
      3. スクロール可能なアートボードの作成
      4. レイヤーの操作
      5. スクロールグループを作成する
    2. シェイプ、オブジェクト、パス
      1. オブジェクトの選択、サイズ変更および回転
      2. オブジェクトの移動、分散および整列
      3. オブジェクトのグループ化、ロック、複製、コピー、および反転
      4. オブジェクトの線、塗りおよびドロップシャドウの設定
      5. 繰り返しオブジェクトの作成
      6. 3D 変形を使って透視図を作成
      7. ブール演算を使用したオブジェクトの編集
    3. テキストとフォント
      1. 描画ツールとテキストツールの操作
      2. Adobe XD のフォント
    4. コンポーネントとステート
      1. コンポーネントによる作業
      2. 入れ子になったコンポーネントの操作
      3. コンポーネントへの複数ステートの追加
    5. マスキングと効果
      1. シェイプでマスクを作成
      2. ぼかし効果の操作
      3. グラデーションの作成と修正
      4. ブレンド効果の適用
    6. レイアウト
      1. レスポンシブサイズ変更とレイアウトの制約
      2. コンポーネントとグループへの固定パディングの設定
      3. スタックを使用して動的なデザインを作成する
    7. ビデオと Lottie アニメーション
      1. ビデオを操作
      2. ビデオを使用したプロトタイプの作成
      3. Lottie アニメーションを操作
  4. プロトタイプ
    1. インタラクティブプロトタイプを作成
    2. プロトタイプのアニメーション化
    3. 自動アニメーションでサポートされているオブジェクトプロパティ
    4. キーボードとゲームパッドでプロトタイプを作成
    5. 音声コマンドや音声再生を使用したプロトタイプの作成
    6. タイマートランジションの作成
    7. オーバーレイの追加
    8. 音声機能付きプロトタイプのデザイン
    9. アンカーリンクを作成
    10. ハイパーリンクの作成
    11. デザインとプロトタイプのプレビュー
  5. 共有、書き出し、およびレビュー
    1. 選択したアートボードの共有
    2. デザインおよびプロトタイプの共有
    3. リンクのアクセス権限を設定
    4. プロトタイプを操作
    5. プロトタイプのレビュー
    6. デザインスペックの使用方法
    7. デザインスペックの共有
    8. デザインスペックを確認する
    9. デザインスペックのナビゲート
    10. デザインスペックのレビューとコメント
    11. アセットの書き出し
    12. デザインスペックからのデザイン素材の書き出しとダウンロード
    13. エンタープライズ版のグループ共有
  6. デザインシステム
    1. Creative Cloud ライブラリと連携したデザインシステム
    2. Adobe XD でドキュメントアセットによる作業
    3. Adobe XD での Creative Cloud ライブラリの操作
    4. リンク化アセットから Creative Cloud ライブラリへ移行
    5. デザイントークンを使用する 
    6. Creative Cloud ライブラリアセットの利用
  7. クラウドドキュメント
    1. Adobe XD のクラウドドキュメント
    2. デザインの共同作業と共同編集
    3. 共有されたドキュメントの共同編集
  8. 統合とプラグイン
    1. 外部のデザイン素材
    2. Photoshop で作成したデザインアセットの操作
    3. Photoshop からのアセットのコピー&ペースト
    4. Photoshop のデザインの読み込みまたは起動
    5. Adobe XD での Illustrator アセットの操作
    6. Illustrator のデザインの起動または読み込み
    7. Illustrator から XD へのベクターのコピー
    8. Adobe XD のプラグイン
    9. プラグインの作成と管理
    10. XD への Jira の統合
    11. XD 用 Slack プラグイン
    12. XD 用 Zoom プラグイン
    13. XD から Behance にデザインを公開
  9. XD iOS 版および Android 版
    1. モバイルデバイスでプレビュー
    2. Adobe XD モバイル版に関する FAQ
  10. トラブルシューティング
    1. 既知の問題と修正された問題
      1. 既知の問題
      2. 解決済みの問題
    2. インストールと更新
      1. XD が Windows 上で互換性がないように見える
      2. エラーコード:191
      3. エラーコード:183
      4. XD プラグインのインストールに関する問題
      5. Windows 10 で XD のアンインストールと再インストールを促すダイアログが表示される
      6. 環境設定の移行に関する問題
    3. 起動時のクラッシュ
      1. Windows 10 で起動すると XD がクラッシュする
      2. Creative Cloud からログアウトすると XD が終了する
      3. Windows でのサブスクリプションステータスの問題
      4. Windows で XD を起動すると、アプリがブロックされたという警告が表示される
      5. Windows でのクラッシュダンプの生成
      6. クラッシュログの収集と共有
    4. クラウドドキュメントおよび Creative Cloud ライブラリ
      1. XD クラウドドキュメントで発生する問題
      2. リンクされたコンポーネントに関する問題
      3. ライブラリとリンクに関する問題
    5. プロトタイプ作成、公開、レビュー
      1. macOS Catalina でプロトタイプのインタラクションを収録できない
      2. 公開ワークフローの問題
      3. 公開されたリンクがブラウザーに表示されない
      4. プロトタイプがブラウザーで正しくレンダリングされない
      5. コメントパネルが突然共有リンクに表示される
      6. ライブラリを公開できない
    6. 読み込み、書き出し、その他のアプリの操作
      1. XD での読み込みと書き出し
      2. XD での Photoshop ファイルの使用
      3. XD での Illustrator ファイルの使用
      4. XD から After Effects への書き出し
      5. XD での Sketch ファイルの使用
      6. 書き出しに表示されないサードパーティ製品

ここでは、ガイドとグリッドを使用してデザインアセットを整列させる方法について説明します。

デザインの作業では、ガイドを使用してアートボード上でオブジェクトを揃えたり、アートボード上の要素間の間隔を管理したりすることができます。グリッドは、デザイン要素(画像、字形、段落)を整理し、レイアウトの対称性を確保するためのフレームワークとして機能します。

ガイドとは?
XD のガイド

グリッドとは?
XD のレイアウトグリッドと方眼グリッド

こんにちは、Jeanee と申します。ビジュアルデザイナーのリーダーとして、複数のアートボードとオブジェクトがある XD の UX デザインプロジェクトに取り組んでいます。

 
  • ガイドを使ってオブジェクトのレイアウトと配置をスピーディに行うためのリソースを探しています。

 

  • グリッドを使用して、デザインプロジェクト内でオブジェクト構造を整列させ、定義する方法についてサポートを必要としています。

以前のバージョンが必要になることは頻繁にあります。このような課題を抱えている場合は、アートボード内でガイドやグリッドを作成し、使用する方法についての以下の説明を参照してください。

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

無料体験版アプリを入手

この機能を試す

サンプルファイル

.xd、6 MB

始める前に

ガイドの作成と管理

アートボードをデザインカンバスにレイアウトすると、アートボードの上部と左部に領域が追加され、ドラッグによってガイドを引き出せるようになります。水平方向および垂直方向の中心への迅速なスナップ、複数のアートボード間のコピーとペースト、アートボードの削除、表示と非表示の切り替えを行うことができます。

以下では、ガイドの作成と管理の方法について説明します。

ガイドの追加

ガイドのコピーとペースト

ガイドの削除

ガイドのクリア、非表示、ロック

ガイドの作成

アートボード内でオブジェクトの垂直方向の位置を整列させ配置するには、垂直ガイドを使用します。アートボード内でオブジェクトの水平方向の位置を整列させ配置するには、水平ガイドを使用します。 

垂直ガイド

アートボード内へのガイドの追加

垂直ガイドを作成するには、アートボードの左の線にポインターを合わせ、 アイコンが表示されるまで待ちます。アイコンをクリックしたまま、目的の位置にドラッグします。

水平ガイド

アートボード内へのガイドの追加

水平ガイドを作成するには、アートボードの上の線にポインターを合わせ、 アイコンが表示されるまで待ちます。目的の位置にドラッグ&ドロップします。

ガイドのコピーとペースト

これでガイドを利用できるようになりました。作成したガイドは、ガイドをコピー、ガイドをペーストオプションを使用して、すばやく複製できます。

ガイドをコピー

アートボード内のガイドのコピー

アートボードからガイドをコピーするには、アートボードを選択し、表示ガイドガイドをコピーをクリックします。

ガイドをペースト

アートボード内でのガイドのコピー

コピーしたガイドをペーストするには、「表示」をクリックするか、アートボード上で右クリックし、ガイドガイドをペーストを選択します。

ガイドの削除

ガイドは、個別に削除することも、複数を一度に削除することもできます。

ガイドを削除するには、ガイドをクリックしてアートボードの外にドラッグします。

アートボード上の複数のガイドを削除するには、アートボードを選択し、アートボードを右クリックして「表示」オプションをクリックします。ガイドガイドを消去を選択します。

アートボードに追加されたガイドを消去

ガイドの非表示とロック

ガイドを一時的に非表示にし、必要に応じて有効にするには、「ガイドをすべて隠す」オプションを使用します。

また、誤って移動したり調整したりしないように、すべてのアートボードのガイドをロックすることもできます。

macOS と Windows でガイドを非表示にしたり、ロックしたりするには:

ガイドを隠す

ガイドを隠す

  • 上部のメニューバーから、表示ガイドをすべて隠すオプションをクリックします。また macOS では、Command+; を使用して、ガイドを非表示にすることもできます。
  • アートボードを右クリックし、ガイドガイドをすべて隠すを選択します。また Windows で、Ctrl+; を使用してガイドを非表示にすることもできます。

ガイドをロック

すべてのアートボードでガイドをロック

  • 上部のメニューバーから、表示ガイドをすべてロックオプションをクリックします。また macOS では、Command+Shift+; を使用して、ガイドをロックすることもできます。
  • アートボードを右クリックし、ガイドガイドをすべてロックを選択します。また Windows で、Ctrl+Shift+; を使用してガイドをロックすることもできます。

スマートガイドを使用したオブジェクトのスナップ整列

基本的なガイドの作成方法と管理方法は以上です。次は、オブジェクトやアートボードを作成または操作する際に、スマートガイドを使用してガイドを一時的にスナップする方法を説明します。 

スマートガイド

スマートガイドはデフォルトで有効です。オブジェクトやアートボードを移動する際、スマートガイドを使用すると、オブジェクトやアートボードを他のオブジェクトまたはアートボード、あるいはその両方を基準として、スナップ整列により整列、編集、変形することができます。

グリッドを使用したオブジェクトの配置

XD のガイドの基本については以上です。次はレイアウトグリッドまたは方眼グリッドを使用して、デザイン構造を定義し、アートボード内のオブジェクトを整列させる方法について説明します。 

レイアウトグリッドまたは方眼グリッドを追加するには、1 つ以上のアートボードを選択します。プロパティインスペクターのグリッドセクションに移動し、「レイアウト」または「方眼」を選択します。

レイアウトグリッド

レイアウトグリッド内でのオブジェクトの配置

レイアウトグリッドは、デザインオブジェクトの整列や、異なる画面サイズ用のデザインに便利な列グリッドです。このグリッドは、ニーズに合わせて簡単かつ迅速に調整できます。

正方形グリッド

方眼グリッドの配置

方眼グリッドの水平線と垂直線を使用すると、モバイルアプリやアイコンのデザインで、オブジェクトのサイズを正確に設定し、整列させることができます。

グリッドの環境設定

レイアウトグリッドと方眼グリッドをアートボードに追加した後は、プロパティインスペクターのグリッドセクションで環境設定を調整して、グリッドの表示オプションをカスタマイズできます。以下では、グリッドサイズ、列数、段間のプロパティ、グリッドのマージンを変更する方法について説明します。

方眼グリッドの環境設定

方眼グリッドのグリッドサイズは、デザインのニーズに応じて変更できます。

方眼グリッドサイズの変更

方眼グリッドにおけるグリッドサイズとは、グリッド線間の距離です。グリッドサイズの値を編集するには、プロパティインスペクターの「方眼の大きさ」フィールドに必要な数値を入力します。

レイアウトグリッドの環境設定

アートボードにレイアウトグリッドを適用した場合、プロパティインスペクターのグリッドセクションで、列数、列幅、段間のプロパティ、余白サイズを設定できます。

列数の変更

レイアウトグリッドの列数の変更

」フィールドに値を入力します。Web デザインでは、通常、12 列または 16 列のグリッドが使用されます。 

列幅と段間のプロパティの変更

レイアウトグリッドの段間のプロパティの変更

列幅を変更するには、「列の幅」フィールドに値を入力します。独自の段間幅を定義するには、「段間幅」のデフォルト値を編集します。

これで列数、段間幅、列幅が変更できました。次では、アートボードのマージンを調整する方法について学習します。マージンとは、レイアウトグリッドとアートボードの端との間の距離です。マージンの調整方法については、次を参照してください。

リンクされた左マージンまたは右マージンの変更

リンクされた左マージンまたは右マージンの変更

リンクされた左右のマージンを調整するには、 アイコンをクリックして値を編集します。

各辺のマージンの変更

すべての辺のマージンを変更

上、下、左、右のマージンを個別に調整するには、 アイコンをクリックして値を入力します。

グリッドを活用したその他の作業

グリッドの環境設定を指定する方法については以上です。次は、グリッドカラーを追加し、グリッドの表示と非表示を制御する方法について説明します。

カラーを追加

グリッドを表示またはグリッドを隠す

カラーを追加

グリッドの外観を修正するには、プロパティインスペクターのカラーピッカーを使用して、グリッドカラーを追加、変更します。

レイアウトグリッドと方眼グリッドへのカラーの追加

A. カラーフィールド B. カラースライダー C. スポイト 

方眼グリッドの場合は「方眼の大きさ」、レイアウトグリッドの場合は「」の横にあるボックスをクリックします。

カラーピッカーから、次の操作を実行できます。

  • カラーフィールドとカラースライダーを使用して色を調整する。
  • スポイトツールを使用してアートボードから色を選択する。
  • カラースライダーを使用するか、パーセンテージの値を入力して、塗りの不透明度を設定する。値を 0 に設定すると、レイアウトグリッドがアウトラインビューに切り替わります。

グリッドの表示または非表示

レイアウトグリッドと方眼グリッドの表示と非表示を変更するには、レイアウトグリッドを隠す、方眼グリッドを隠す、またはレイアウトグリッドを表示、方眼グリッドを表示を使用します。

レイアウトグリッドを隠す

レイアウトグリッドの表示と非表示

  • 表示/レイアウトグリッドを隠すを選択します。macOS では、Command+Shift +' を使用して、レイアウトグリッドを非表示にすることもできます。
  • プロパティインスペクターで、「グリッド」ドロップダウンリストからグリッドの種類を選択し、ドロップダウンリストの横にあるチェックボックスを選択します。Windows では、Ctrl+Shift+" を使用して、レイアウトグリッドを非表示にすることもできます。

方眼グリッドの表示

方眼グリッドの表示または非表示

  • 表示/方眼グリッドを表示を選択します。macOS では、Command+' を使用して、方眼グリッドを表示することもできます。
  • プロパティインスペクターで、「グリッド」ドロップダウンリストからグリッドの種類を選択し、ドロップダウンリストの横にあるチェックボックスを選択します。Windows では、Ctrl+" を使用して、方眼グリッドを表示することもできます。

ビデオ:ガイドとレイアウトグリッドを追加する方法

「デザインプロジェクトの作業では、ガイドを配置することで、オブジェクトの整列や、要素間隔の適切な調整が容易になります」(Howard Pinsky、シニア XD エバンジェリスト)

ヒントとテクニック

  • オブジェクトをレイアウトグリッドまたは方眼グリッドにスナップするには、オブジェクトのいずれかの端がグリッドのスナップ領域に入るまで、オブジェクトをグリッドの方にドラッグします。
  • ガイドはカンバス上に描画された選択されたオブジェクトまたは最上位オブジェクトにスナップします。スナップ動作を一時的に無効にするには、(macOS)または Ctrl(Windows)を押します。
  • ガイドをカンバス上で 10 px 単位で移動するには、Shift キーを押します。
  • 方眼グリッドまたはレイアウトグリッドの表示をデフォルトに戻すには、プロパティインスペクターの「グリッド」セクションで「初期設定を使用をクリックします。

次のステップ

ここでは、ガイドとグリッドを使用して、アートボード内のオブジェクトを配置し、整列させる方法について説明しました。次のステップでは、リピートグリッドを使用して、繰り返し可能な要素を持つオブジェクトの作成方法について説明します。

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

コミュニティで質問

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

アドビのロゴ

アカウントにログイン