最終更新日 :
2021年8月25日
これらのヒントやコツを使用して、Adobe XD でプロトタイプをデザインまたは作成します。
Adobe XD を使用するうえで役立ついくつかのコツを紹介します。
一般的なヒントとコツ
- デザインでアイテムのグループをコピー&ペーストするのではなく、リピートグリッドツール(プロパティインスペクターで利用可能)を使用することをお勧めします。
- シェイプを選択し、Option キー(Mac の場合)または Alt キー(Windows の場合)を押しながらその新しいコピーをドラッグすることで、シェイプを複製できます。
- エレメントをロックするには、Mac ではオブジェクト/ロック(または Command + L)を使用します。 これはロックの状態を切り替えるため、エレメントをロック解除する場合もこのコマンドを使用できます。 Windows では、オブジェクトを右クリックして、コンテキストメニューから「ロック」を選択します。
- Command キーまたは Ctrl キーを押して、ダイレクト選択を有効にします。 ネストされたオブジェクトを選択することもできます。
- 画像をシェイプにドロップしてすばやくマスクします。シェイプの塗りつぶしは画像になります。
- 画像を読み込んで編集可能なマスクを作成し、その上にシェイプを描画します。 両方を選択し、オブジェクト/シェイプでマスク(Mac の場合)を選択するか、オブジェクトを右クリックしてコンテキストメニューから「シェイプでマスク」を選択します。 マスクされたグループをダブルクリックして、マスクまたは画像を後で編集することができます。
描画とテキスト
- スナップガイドをオフにするには、Command/Ctrl キーを押し続けます。
- アンカーポイントをダブルクリックして、曲線と角度を切り替えることができます。
- Option/Alt キーを押しながら曲線ハンドルをドラッグして、曲線ハンドルを独立させます (もう一度依存させるには、ダブルクリックして角度に戻り、再度ダブルクリックします)。
- ペンツールを使って描画するときに、アンカーポイントを選択できます。
- ダブルクリックしてグループの編集コンテキストに入るか(このコンテキストでエレメントを追加できます)、単に Command/Ctrl を押して、グループ内のオブジェクトをクリックして選択します。
- テキストアイテムを選択してから、新しいアイテムを作成し、最初のアイテムから 2 番目のアイテムにすべてのスタイルを適用します。
- パスの組み合わせ(合体、前面オブジェクトで型抜き、交差、重なる部分を中マド)は非破壊的です。 また、オン/オフを切り替えることができます。
コンテンツの読み込み
- Illustrator からコンテンツを読み込むには、Illustrator でベクターシェイプを選択してコピーし、Adobe XD にペーストします。
- Photoshop からビットマップコンテンツを読み込むには、ビットマップまたはテキストレイヤーですべてを選択(Command + A または Ctrl + A)(または最初にベクターレイヤーまたはグループをスマートオブジェクトに変換)してから、Adobe XD にペーストします。 ペーストされたレイヤーは、ビットマップになります。 選択ツールを使用して対象を選択し、Photoshop からコンテンツをコピーすることもできます。 次に、メニューから、編集/コピー(現在のレイヤー上の選択内容を取得)を選択するか、編集/結合部分をコピー(選択範囲内のすべてのレイヤー上の選択内容を取得)を選択します。
- Sketch からコンテンツを読み込むには、1 つ以上のレイヤーまたはグループを選択し、「書き出し可能にする」をクリックします。 形式として SVG を選択し、Sketch から Adobe XD にレイヤーをドラッグ&ドロップします。 これにより、Adobe XD で編集可能なベクターコンテンツが生成されます。
- アセット(PNG、JPG、TIFF、GIF、SVG)をインポートするには、Macではファイル > インポートを使用するか、ドラッグ&ドロップするか、FinderからAdobe XDに画像をコピー&ペーストします。
Windowsでは、ハンバーガーメニューをクリックしてインポートをクリックするか、ドラッグ&ドロップするか、ファイルエクスプローラーから画像をコピー&ペーストします。
ブラウザーから Adobe XD にコピー&ペーストすることもできます。
キーボードコントロール
- 角丸の半径を調整する場合、Option キーを押し続けて、角丸を個別に調整できます。
- エレメントを移動またはサイズ変更するときにスナップを一時的に無効にするには、Command キーまたは Ctrl キーを押し続けます。
- Shift キーを押しながらエレメントをサイズ変更して、エレメントの縦横比を固定します。
- 初期設定(左上隅にある)ではなく、中央から描画するには、Alt キーを押しながらシェイプを描画します。
- 選択したアイテムの不透明度をすばやく変更するには、次の数値キーを押します: 1 = 10%、2 = 20%など。0 = 100%です。
- 矢印キーを使ってシェイプまたはコントロールポイントを移動する場合、Shift キーを押し続けると 10 px 単位で移動できます。
- スペースバーを押しながら、手動モードを操作します。 クリック&ドラッグで、カンバス全体に拡張できます。
アートボード
- アートボードを選択するには、アートボードのタイトルをクリックするか、Command/Ctrl キーを押しながらその背景をクリックするか、その背景をダブルクリックします。
- 空のアートボードを選択するには、アートボードの背景をクリックします。
- アートボード(とその内容)を複製するには、アートボードを選択し、Command キー(Mac の場合)または Alt キー(Windows の場合)を押しながらドラッグしてコピーを作成します。
- アートボードの名前を変更するには、そのタイトルをダブルクリックします。
リピートグリッド
- リピートグリッドで繰り返されるアイテム間の間隔を調整するには、リピートグリッドを選択し、エレメント間のスペースの上にマウスを移動して、ドラッグします。 リピートグリッド内のアイテムを編集する場合、Esc を押して、編集モードを終了する必要があります。
プロトタイプ化とプレビュー
- アートボード(またはアートボード全体)の任意のオブジェクトを選択し、ワイヤーをドラッグして、アートボード間のインタラクションをトリガーできます。
- 設定したインタラクションの接続を解除するには、接続先からワイヤーを外すようにドラッグします。
- Web デザインで、ディゾルブトランジションを使用できます。
- アートボード間のすべての接続を表示するには(アートボードから直接トリガーされたものを除く)、プロトタイプモードで Command + A キー(Mac の場合)または Ctrl + A キー(Windows の場合)を押します。
- プレビューウィンドウにアートボードと現在の選択内容が表示されます。 何も選択されていない場合は、プレビューウィンドウがホームアートボードと共に開きます。
- インタラクティブプロトタイプのプレビューウィンドウから記録できます。 タイトルバーの記録アイコンをクリックし、記録を開始します。
- 記録を停止するには、記録ボタンを再度クリックするか、Esc を押します。
- 設計したエクスペリエンスのタイプに基づいて、プロトタイプ上でキーボードショートカットやゲームパッドトリガーを使うことができます。
共有
- 共有するには、Creative Cloud デスクトップアプリまたはその他のアドビアプリケーション(Photoshop、Illustratorなど)にアドビアカウントでログインする必要があります。
Adobe ID、Enterprise ID、Federated IDがすべてサポートされています。
- 最初はインタラクションを追加しないでデザインファイルを共有した場合、すべてのアートボードがアップロードされ、ユーザーはキーボードの矢印キーを使用して移動できます。 アートボードの順序は、左上を起点として、そこから右へと移動する順序になります。
- デザインにインタラクションが含まれている場合は、ホームアートボードに接続されているアートボードのみがアップロードおよび共有されます。
- ホームアートボードとして定義したアートボードが、共有されたデザインを表示したときにユーザーに最初に表示されるアートボードです。
- ホームアートボードを変更するには、プロトタイプモードで、アートボードの横のホームアートボードアイコンを選択します。 このホームアートボードアイコンは、選択されているアートボード(または選択したターゲットの接続先)に対してのみ表示されます。
- モバイルの Web ブラウザーにプロトタイプを表示したとき、デバイスのホーム画面にそのプロトタイプのショートカットを保存できます。 これにより、プロトタイプはネイティブアプリケーションであるかのように表示されます。