Adobe XD でのビデオの操作 XD は動画を埋め込んだプロトタイプを作成し、レビュー用に共有できます。XD にビデオを読み込むには、アートボードに動画ファイルをドラッグするか、メニューからファイル／読み込みを選...
Adobe XD での Lottie アニメーションの操作 XD はアートボードに Lottie アニメーションを配置して、プロトタイプとして共有できます。XD に Lottie アニメーションを読み込むには、アートボードにファイルをドラッ...
スタックを使用した動的なデザイン 2/2（スタックの使用方法） スタックはネストして利用できます。例えば、水平方向スタックを有効にしたカード型 UI をいくつか縦に並べてグループ化し、そのグループに垂直方向スタックを有効にすると、スタックがネス...
スタックを使用した動的なデザイン 1/2（スタックの作成方法） スタックを利用するには、グループまたはコンポーネントのレスポンシブサイズ変更を有効にします。次に、プロパティインスペクター内のスタックのチェックボックスをオンにすると、グループのレ...
3D変形を使用したデザインの作成 2/2（3D変形の使用したプロトタイプの作成） 3D 変形はプロトタイプの動きの表現に利用できます。立体感のある動きが欲しいときに有効な使い方です。 まず、同じオブジェクトを配置した2つのアートボードを用意します。次に、どちらか...
3D変形を使用したデザインの作成 1/2（3D変形の使用方法） オブジェクトやグループに対して3D変形を有効にすると、X 軸と Y 軸に沿って回転させたり、Z 軸方向に移動できるようになります。 3D 変形を有効にするには、プロパティインスペク...
オブジェクトの整列、分布 列パネルを使用すると、オブジェクトを整列させたり、等間隔に並べることができます。整列に使用できるオプションは以下の通りです。 上揃え、上下中央揃え、下揃え 左揃え、左右中央揃え、右...
オブジェクトの配置 Adobe XD ではオブジェクトを描画すると、描画した順に手前に表示されます。 レイヤーパネル内のレイヤーは、オブジェクトの重なり順に並べられています。最前面に表示されているオブ...
オブジェクトの移動 オブジェクトの移動には、いくつかの方法が利用できます。 マウスをつかってオブジェクトをドラッグ キーボードの矢印キーを使用 プロパティインスペクターに XY 座標を入力 マウスを使...
オブジェクトの複製、コピー、反転 オブジェクトを複製するには、目的のオブジェクトを選択し、Opt/Alt キーを押しながら選択されたオブジェクトをドラッグします。Mac では編集／複製をクリックしてオブジェクトを複...
オブジェクトのグループ化、ロック 複数のオブジェクトをグループ化すると、まとめて移動や拡大縮小したり、線の塗りなどのプロパティを変更できます。グループ化するには、対象のオブジェクトをすべて選択した状態で右クリックし...
シェイプの合成 単純なシェイプの組み合わせから複雑なシェイプを作成することができます。そのためには、組み合わせたいシェイプを選択し、プロパティインスペクター内の次のいずれかのオプションをクリックし...
グリッドの操作 Adobe XD では、方眼グリッドとレイアウトグリッドの 2 種類のグリッドが利用できます。方眼グリッドはマス目に沿って、レイアウトグリッドはカラムに沿って、オブジェクトを整列し...
アートボードの操作 2/2（サイズ変更、移動、ズーム） アートボードを選択するには、選択ツールを使用して、アートボードのタイトルをクリック、またはアートボードの背景をダブルクリックします。Mac では Cmd+3 、Windows では...
アートボードの操作 1/2（作成、名前の変更、スクロール） XD ドキュメントには複数のアートボードを含めることができます。モバイル、タブレット、デスクトップ用など異なるサイズのアートボードを並べることもできます。アートボードの作成は、事前...
スクロールグループの作成 スクロールグループを使用すると、アートボード内に、独立したクロール領域を定義できます。水平方向、垂直方向、または両方向へのスクロールを指定できます。 スクロールグループを作成するに...
スクロール可能なアートボードの作成 アートボードの長さが足りないために、コンテンツをすべて配置できない場合、アートボードを長くしてスクロール可能にすることができます。アートボードを縦に伸ばすには、アートボードの下辺を...
ブレンド効果の適用 Adobe XDのブレンド効果を使用すると、複数レイヤーを組み合わせて、目を引くユニークな効果をつくり出したり、画像を自然に合成することができます。 ブレンド効果はデフォルトでは「...
ぼかし効果の適用 Adobe XDでは、オブジェクト全体をぼかしたり、オブジェクトにぼかしマスクを追加することができます。 オブジェクト全体をぼかすには、ぼかしたいオブジェクトを選択してから、プロパ...
レイヤーの操作 1/2（レイヤーパネルの表示、検索と絞り込み） Adobe XD のレイヤーパネルを開くと、アートボード一覧を表示したり、作業中のアートボードに関連付けられたレイヤーを確認できます。レイヤーパネルにアクセスするには、ツールバーの...
レイヤーの操作 2/2（追加、並び替え、グループ化、名前変更など） ドキュメント内のオブジェクトは、それぞれ個別のレイヤー内に配置されます。そのため、レイヤーをグループすると、それらのレイヤーに含まれるオブジェクトをグループ化できます。レイヤーをグ...
描画ツール 1/3（長方形） 長方形や正方形を描画するには、長方形ツールを選択します。アートボード上で希望のサイズになるまで斜めにドラッグすると長方形を描画できます。Shift キーを押しながらドラッグすると正...
描画ツール 2/3（楕円形、多角形） 楕円や円を描画するには、楕円形ツールを選択します。アートボード上で希望のサイズになるまで斜めにドラッグすると楕円を描画できます。Shift キーを押しながらドラッグすると円を描画で...
描画ツール 3/3（線、ペン） 線ツールを選択し、始点をクリックして終点までドラッグすると、直線を描画できます。Shift キーを押しながらドラッグすると、水平、垂直、45度の線を描画できます。 ペンツールを使用...
オブジェクトの選択、サイズ変更および回転 1/2（選択） オブジェクトを選択するには、選択ツールを使い、目的のオブジェクトをクリックします。複数のオブジェクトを選択するには、選択ツールをドラッグして選択範囲を指定するか、Shift キーを...
オブジェクトの選択、サイズ変更および回転 2/2（サイズ変更と回転） オブジェクトのサイズを変更するには、オブジェクトを選択して、丸形のハンドルをドラッグします。サイズ変更時にアスペクト比を固定するには、プロパティインスペクターでロックアイコンをクリ...
オブジェクトの塗り、線、ドロップシャドウの設定 1/3（塗り） Adobe XD でオブジェクトへカラーの塗りを適用するには、まずオブジェクトを選択して、次にカラーピッカーを表示します。 カラーフィールドとカラースライダーを使用して色を調整する...
オブジェクトの塗り、線、ドロップシャドウの設定 2/3（線、アウトライン） Adobe XD でオブジェクトへ線を適用するには、まずオブジェクトを選択します。プロパティインスペクターで「線」が有効になっていると、カラーピッカーを表示して色を変えたり、サイズ...
オブジェクトの塗り、線、ドロップシャドウの設定 3/3（ドロップシャドウ、シャドウ内側） Adobe XD でオブジェクトにドロップシャドウを追加するには、対象のオブジェクトを選択し、プロパティインスペクターの「ドロップシャドウ」をクリックして有効にします。 ドロップシ...
テキストツール 1/2（テキストの作成と編集） テキストツールを選択し、テキストを開始する場所をクリックすると、テキスト入力を開始できます。Esc キーを押してテキストの変更を確定するか、Return キーを押して次の行に移動す...
テキストツール 2/2（その他の機能） テキスト変換として適用可能なオプションには、テキストを「すべて大文字／小文字にする」、「単語の先頭の文字のみ大文字にする」、「上付き文字や下付き文字にする」が用意されていあます。テ...
繰り返しオブジェクトの作成 リピートグリッド機能は、カードUIの様にオブジェクトを繰り返し配置するデザインの作成を効率化します。 繰り返し配置したい一連のオブジェクトを選択し、リピートグリッド機能では、オブジ...
デザイン素材の書き出し Adobe XD からデザイン素材を PNG、SVG、JPG、PDF 形式で書き出せます。書き出したいオブジェクトを選択し、ファイル／書き出し／選択したオブジェクトを選択するか、シ...
レスポンシブサイズ変更とレイアウトの制約 近年では数々な解像度を持つデバイス向けのデザインを作成する必要があります。Adobe XD のレスポンシブサイズを使うと、オブジェクトのサイズを変更する際、オブジェクトの関係を維持...
コンポーネントへの複数ステートの追加 1/3（ホバーステート） コンポーネントに複数のステートを追加すると、ユーザーの操作によって外観が変化するインタラクティブなコンポーネントを開発できます。 ステートを持つコンポーネントの代表的な例には、ボタ...
コンポーネントとグループへの固定パディングの設定 Adobe XD では、グループまたはコンポーネントに固定パディング値を設定できます、パディングを固定すると、コンテンツに応じて自動的に背景の大きさが変わります。たとえばラベルに合...
コンポーネントへの複数ステートの追加 2/3（インタラクションの追加） コンポーネントのステートにインタラクションを指定して、タップ操作で表示するステートを切り替えることが可能です。アートボード間のインタラクションと同様の指定を行いますが、接続先にステ...
コンポーネントへの複数ステートの追加 3/3（リピートグリッドでの応用） マスターコンポーネントに追加されたステートは、そのコピーであるインスタンスでも利用できます。リピートグリッドにインスタンスを配置すれば、複数インスタンスの配置を一度にまとめて行えま...
デザインの共同編集 Adobe XD では、他のデザイナーとのリアルタイム共同編集から、関係者やユーザーの協力によるフィードバックの収集まで、デザインプロセスのあらゆる段階でエンドツーエンドの共同作業...
Webデザインの表現を広げるレイアウト 全4回 画面全体に広がるマルチカラムレイアウトを作成する このレッスンでは、マルチカラムグリッドを設定して、その上にいくつかの少し凝った Web サイトのレイアウトを作成する手順を解説します。 Adobe XD を起動し、「ファイル」→「...
Webデザインの表現を広げるレイアウト 全4回 画面に固定されたサイドメニューを作成する このレッスンでは、マルチカラムグリッドを設定して、その上にいくつかの少し凝った Web サイトのレイアウトを作成する手順を解説します。 Adobe XD を起動し、「ファイル」→「...
Webデザインの表現を広げるレイアウト 全4回 メイスンリーレイアウトを作成する このレッスンでは、マルチカラムグリッドを設定して、その上にいくつかの少し凝った Web サイトのレイアウトを作成する手順を解説します。 Adobe XD を起動し、「ファイル」→「...
Webデザインの表現を広げるレイアウト 全4回 ブロークングリッドレイアウトを構造化する このレッスンでは、マルチカラムグリッドを設定して、その上にいくつかの少し凝った Web サイトのレイアウトを作成する手順を解説します。 Adobe XD を起動し、「ファイル」→「...
Adobe XDで縦横スクロールできるカレンダーをデザイン 全4回 スケジュール表とデータ用パーツの作成（スクロールできるカレンダー 1/4） このレッスンでは、縦や横にスクロールできる、カレンダーアプリ UI のつくり方を解説します。 Adobe XD を起動し、「ファイル」→「開く」からダウンロードしたサンプルファイル...
Adobe XDで縦横スクロールできるカレンダーをデザイン 全4回 縦方向にタイムラインを作成（スクロールできるカレンダー 2/4） このレッスンでは、縦や横にスクロールできる、カレンダーアプリ UI のつくり方を解説します。 Adobe XD を起動し、「ファイル」→「開く」からダウンロードしたサンプルファイル...
Adobe XDで縦横スクロールできるカレンダーをデザイン 全4回 横方向に日付軸を作成（スクロールできるカレンダー 3/4） このレッスンでは、縦や横にスクロールできる、カレンダーアプリ UI のつくり方を解説します。 Adobe XD を起動し、「ファイル」→「開く」からダウンロードしたサンプルファイル...
Adobe XD でアニメーションするランディングページをデザイン 全3回 ページのイントロアニメーションを作成（アニメーションするランディングページ 1/3） このレッスンでは、ページを読み込んだ際に表示されるイントロアニメーションのつくり方を解説します。 Adobe XD を起動し、「ファイル」→「開く」からダウンロードしたサンプルファ...
Adobe XD でアニメーションするランディングページをデザイン 全3回 ページのパララックス効果を作成（アニメーションするランディングページ 2/3） このレッスンでは、ドラッグ操作でパララックス効果を表現するインタラクションのつくり方を解説します。 Adobe XD を起動し、「ファイル」→「開く」からダウンロードしたサンプルフ...
Adobe XD でアニメーションするランディングページをデザイン 全3回 ページスクロール時のフェードイン効果を作成（アニメーションするランディングページ 3/3） このレッスンでは、スクロールするとコンテンツがフェードイン表示されるインタラクションのつくり方を解説します。 Adobe XD を起動し、「ファイル」→「開く」からダウンロードした...
EC サイトでよく使われる UI パーツをつくる 全3回 カルーセル（EC サイトのよくある UI パーツをつくるシリーズ） このレッスンでは、クリック操作で3枚の商品画像がループするカルーセルのつくり方を解説します。 Adobe XD を起動し、「ファイル」→「開く」からダウンロードしたサンプルファイル...
EC サイトでよく使われる UI パーツをつくる 全3回 ドロップダウン（EC サイトのよくある UI パーツをつくるシリーズ） このレッスンでは、色違いの商品を選択するドロップダウンのつくり方を解説します。 Adobe XD を起動し、「ファイル」→「開く」からダウンロードしたサンプルファイルを選択して「開...
EC サイトでよく使われる UI パーツをつくる 全3回 画像ズームとカウンター（EC サイトのよくある UI パーツをつくるシリーズ） このレッスンでは、商品画像のズーム機能と購入数を指定するカウンターのつくりを解説します。 Adobe XD を起動し、「ファイル」→「開く」からダウンロードしたサンプルファイルを選...
Adobe XD でつくるグラフィックのアニメーション表現 全3回 アニメーションするローディングアイコンを作成 このレッスンでは、半円のローディングアイコンをアニメーションさせる方法を解説します。 Adobe XD を起動し、「ファイル」→「開く」からダウンロードしたサンプルファイルを選択し...
Adobe XD でつくるグラフィックのアニメーション表現 全3回 Illustrator で作成したロゴをアニメーションさせる このレッスンでは、Illustrator で作成した手書き風のロゴをアニメーションさせる方法を解説します。 Adobe XD を起動し、「ファイル」→「開く」からダウンロードしたサ...
Adobe XD でつくるグラフィックのアニメーション表現 全3回 Adobe XD で作成したイラストをアニメーションさせる このレッスンでは、Adobe XDで作成したイラストをアニメーションさせる方法を解説します。 Adobe XD を起動し、「ファイル」→「開く」からダウンロードしたサンプルファイル...
Adobe XD でシェイプを加工してつくる装飾表現 全3回 菱形を合体して波線をつくる このレッスンでは、Adobe XD の描画ツールを使って波線をつくる方法を解説します。 Adobe XD を起動し、「ファイル」→「開く」からダウンロードしたサンプルファイルを選択...
Adobe XD でシェイプを加工してつくる装飾表現 全3回 放射状の太陽線をつくる このレッスンでは、Adobe XD の描画ツールを使って太陽線をつくる方法を解説します。 Adobe XD を起動し、「ファイル」→「開く」からダウンロードしたサンプルファイルを選...
Adobe XD でシェイプを加工してつくる装飾表現 全3回 文字数に応じて伸縮するリボンをつくる このレッスンでは、Adobe XD の描画ツールとレイアウト機能を使ってラベルに応じて変形するリボンをつくる方法を解説します。 Adobe XD を起動し、「ファイル」→「開く」か...
CCライブラリを活用！Photoshopの精度とAdobe XDの速度を両立させるワークフロー 全4回 CCライブラリを使ってPSDデータをAdobe XDで活用 このレッスンでは、CCライブラリを利用して、PSDデータを編集可能な状態のまま、XDのアートボードに配置する方法を紹介します。 Adobe XDを起動し、「ファイル」→「開く」から...
CCライブラリを活用！Photoshopの精度とAdobe XDの速度を両立させるワークフロー 全4回 Adobe XD内のグラフィックスをPhotoshopで編集する このレッスンでは、CCライブラリ経由でXDドキュメントに配置したPSDデータを編集する方法と、その際の注意点を紹介します。 Adobe XDを起動し、「ファイル」→「開く」からダウ...
CCライブラリを活用！Photoshopの精度とAdobe XDの速度を両立させるワークフロー 全4回 Adobe XDのドキュメントアセットで直しに強いスタイル管理 このレッスンでは、XDでのアセット管理やグローバルスタイル管理に便利なドキュメントアセットの使い方について解説します。 Adobe XDを起動し、「ファイル」→「開く」からダウンロ...
CCライブラリを活用！Photoshopの精度とAdobe XDの速度を両立させるワークフロー 全4回 アセットの使い回しに便利なAdobe XDのコンポーネント このレッスンでは、コンポーネントを利用した効率的なデザイン変更の手順を解説します。 Adobe XDを起動し、「ファイル」→「開く」からダウンロードしたサンプルファイルを選択して「...
PSDから始める！Adobe XDでWebデザインを簡単レイアウト 全4回 Adobe XDのパディングとスタックで簡単レイアウト このレッスンでは、Adobe XDの便利なレイアウト機能「パディング」と「スタック」を解説します。これらの機能を使うと、オブジェクトの間隔を揃える作業や、オブジェクトの並び順の変更...
PSDから始める！Adobe XDでWebデザインを簡単レイアウト 全4回 PSDデータをAdobe XDで開いてレイヤーを確認・編集 このレッスンでは、PSDデータをAdobe XDで開く手順とその際の注意点、さらにレイヤー操作や画像のマスクなどのXDの基本操作を解説します。 Adobe XDを起動し、「ファイル...
PSDから始める！Adobe XDでWebデザインを簡単レイアウト 全4回 リピートグリッドで繰り返し要素をラクラク配置 このレッスンでは、Adobe XDのリピートグリッドを使って、繰り返し要素の配置作業を効率化する方法を解説します。 Adobe XDを起動し、「ファイル」→「開く」からダウンロード...
PSDから始める！Adobe XDでWebデザインを簡単レイアウト 全4回 レスポンシブ対応を素早く行えるAdobe XDの便利機能 このレッスンでは、Adobe XDのレスポンシブサイズ変更の機能を使って、素早くモバイル用の画面デザインからPC用の画面をつくる方法を解説します。 Adobe XDを起動し、「ファ...
表示されるとアニメーションするグラフを作成 全3回 表示されるとアニメーションする円グラフを作成 このレッスンでは、Adobe XDのアニメーション機能と破線を使って、表示されるとアニメーションする円グラフをつくる方法を解説します。 Adobe XDを起動し、「ファイル」→「開...
表示されるとアニメーションするグラフを作成 全3回 表示されるとアニメーションする棒グラフを作成 このレッスンでは、Adobe XDのアニメーション機能と破線を使って、表示されるとアニメーションする表示されるとアニメーションする棒グラフをつくる方法を解説します。 Adobe X...
表示されるとアニメーションするグラフを作成 全3回 表示されるとアニメーションする折れ線グラフを作成 このレッスンでは、Adobe XDのコンポーネントのステート機能を利用して、表示されるとアニメーションする折れ線グラフを作成する方法を解説します。 Adobe XDを起動し、「ファ...
タップで見た目が変わるボタンをデザイン 全3回 タップで見た目が変わるいいねボタンをデザイン このレッスンでは、Adobe XDのアニメーション機能を使って、タップすると見た目が変わるボタンのプロトタイプをデザインする手順を学びます。 Adobe XDを起動し、「ファイル」...
タップで見た目が変わるボタンをデザイン 全3回 タップで見た目が変わるハンバーガーボタンをデザイン このレッスンでは、Adobe XDのアニメーション機能を使って、タップすると見た目が変わるボタンのプロトタイプをデザインする手順を学びます。 Adobe XDを起動し、「ファイル」...
タップで見た目が変わるボタンをデザイン 全3回 タップで見た目が変わるチェックボックスをデザイン このレッスンでは、Adobe XDのアニメーション機能を使って、タップすると見た目が変わるボタンのプロトタイプをデザインする手順を学びます。 Adobe XDを起動し、「ファイル」...
モバイル画面のスライド式ドロワーメニュー 全4回 スライド式ドロワーメニュー① カード型UIをつくる このレッスンでは、Adobe XDを使って、カード型UIをデザインする手順を学びます。 Adobe XDを起動し、「ファイル」→「開く」メニューから、ダウンロードしたサンプルファイ...
モバイル画面のスライド式ドロワーメニュー 全4回 スライド式ドロワーメニュー② 繰り返し要素を配置 このレッスンでは、Adobe XDのリピートグリッドの機能を使って、繰り返しオブジェクトを配置する手順を学びます。 Adobe XDを起動し、「ファイル」→「開く」メニューから、ダ...
モバイル画面のスライド式ドロワーメニュー 全4回 スライド式ドロワーメニュー③ メニュー画面の作成 このレッスンでは、Adobe XDを使って、ドロワーメニューのデザインをデザインする手順を学びます。 Adobe XDを起動し、「ファイル」→「開く」メニューから、ダウンロードした...
マウスオーバーで見た目が変わるボタンをデザイン 全3回 マウスオーバーで不透明度が変わるボタンをデザイン このレッスンでは、Adobe XDのアニメーション機能を使って、マウスオーバーすると不透明度が変わるボタンのプロトタイプをデザインする手順を学びます。 Adobe XDを起動し、「...
マウスオーバーで見た目が変わるボタンをデザイン 全3回 マウスオーバーで背景色が変わるボタンをデザイン このレッスンでは、Adobe XDのアニメーション機能を使って、マウスオーバーすると背景色が変わるボタンのプロトタイプをデザインする手順を学びます。 Adobe XDを起動し、「フ...
マウスオーバーで見た目が変わるボタンをデザイン 全3回 マウスオーバーで形状が変わるボタンをデザイン このレッスンでは、Adobe XDのアニメーション機能を使って、マウスオーバーすると形が変わるボタンのプロトタイプをデザインする手順を学びます。 Adobe XDを起動し、「ファイ...
レスポンシブデザインを手軽につくる 全1回 レスポンシブデザインを手軽につくる このレッスンでは、XDのレイアウト機能とリピートグリッドを使って、モバイル画面のUIをデザインし、それをPC用の画面に効率よく展開する手順を学びます。 アートボードを縦に伸ばしてス...
全てのアートボードのスタイルを一括変換 全1回 全てのアートボードのスタイルを一括変換 このレッスンでは、XDのアセットパネルを活用し、すべてのアートボードのスタイルを一括返還する方法を解説します。 アセットボードを確認する 画面左のアセットパネルを確認します。パネル...
