ハイパーリンクの作成 Adobe XD では、任意のオブジェクトから Web ページを開いたりメールアプリを起動するハイパーリンクを作成できます。アクションに「ハイパーリンク」を選択できるトリガーは以下...
複数のフローを含んだプロトタイプの作成 ひとつの XD ドキュメントに複数のインタラクションのフローを定義できます。フローの定義はプロトタイプモードで行います。 まず、ホームアートボードを設定して、フローの開始点を定義し...
音声コマンドや音声再生を使用したプロトタイプの作成 2/2（音声とオーディオの再生） Adobe XDでは、プロトタイプに音声によるテキストの読み上げや、オーディオを使用した効果音を追加できます。 音声UIのプロトタイプを作成していて、遷移したら音声が再生されるよう...
音声機能付きプロトタイプのデザイン Adobe XDは、音声を使って体験をデザインし、音声機能付きプロトタイプを共有できます。デザイナーは、音声技術やコーディングに関する知識がなくても、音声をプロトタイプに簡単に追加...
音声コマンドや音声再生を使用したプロトタイプの作成 1/2（音声コマンドの使用） Adobe XD は、音声 UI（VUI）のプロトタイプを作成できます。そのための機能のひとつが、音声をトリガーとする音声コマンドです。 プロトタイプへの音声コマンドの追加はプロト...
キーボードを使用したプロトタイプの作成 Adobe XD には、キー入力により操作できるプロトタイプを作成する機能があります。 設定はプロトタイプモードで行います。遷移先のアートボードに接続ハンドルをつないでから、トリガ...
インタラクティブプロトタイプの作成 1/2（ホーム画面と画面遷移） プロトタイプの作成は、プロトタイプモードに切り替えて行います まず、ホーム画面、すなわち最初に表示される画面を設定します。アートボードを選択して、左上隅のホームアイコンをクリックす...
インタラクティブプロトタイプの作成 2/2（画面遷移のアニメーション） 画面遷移のインタラクションにはデフォルトで「ディゾルブ」のアニメーションが設定されています。これを「左にスライド」「右にスライド」のアニメーションに変更すると、一覧画面と詳細画面の...
オーバーレイを使用したプロトタイプの作成 Adobe XDのプロトタイプでは、アートボードの上に別のアートボードを重ねて表示できます。ドロップダウンリスト、入力用キーボードなどの表現に便利です。 まず、プロトタイプモードで...
モバイルデバイスでプレビュー モバイルデバイスを使い、XD で作業中のデザインをレビューしたり、保存済みのクラウドドキュメントを確認することが可能です。プレビューに必要な XD モバイルアプリケーションは、iO...
プレビューウィンドウでのデザインとプロトタイプのプレビュー Adobe XD のデスクトッププレビューを使用して、プロトタイプに設定したインタラクションをプレビューできます。プレビューウィンドウを表示するには、デザインモードまたはプロトタイ...
リピートグリッドを使ったインタラクションの作成 リピートグリッドから他のアートボードへの接続は、3種類の方法が選べます。 リピートグリッド全体を接続するには、リピートグリッドを選択し、接続ハンドルをドラッグして移動先のアートボー...
プロトタイプのアニメーション化 1/3（フェードイン/アウト） 自動アニメーションを使用すると、流れるようなトランジションを作成して、アートボード間のコンテンツの関係を視覚的に表現できます。 プロトタイプモードでアートボードを接続し、プロパティ...
プロトタイプのアニメーション化 2/3（拡大縮小のアニメーション） 自動アニメーションでは、移動元と移動先のオブジェクトの種類、レイヤー名、グループの階層が一致している場合、そのオブジェクトの属性が自動的にアニメーション化されます。 移動元のアート...
プロトタイプのアニメーション化 3/3（ドラッグトリガー） 自動アニメーションとドラッグトリガーを組み合わせると、実際のドラッグ操作のようなインタラクションを作成できます。 移動元と移動先のアートボードには自動アニメーションの条件を満たすオ...
タイマートランジションの作成 1/2（時間トリガーの基本） 時間トリガーを使用して、時間の経過により自動的に発生するアートボード間のトランジションを作成できます。 プロトタイプモードで、移動元のアートボードを選択し、移動先のアー...
タイマートランジションの作成 2/2（自動ループの作成） 時間トリガーをアクションと組み合わせて使用すると、ループアニメーションを作成できます。 ループアニメーションを作成するには、アニメーションの最初と最後のアートボードの外観を同じにし...
アンカーリンクの作成 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回 プラグイン「プレゼンテーション」を使ってスライドの土台を準備する このレッスンでは、プラグイン「プレゼンテーション」を使って、簡単にプレゼン資料の枠組を作成し、様々なアニメーションを加えていく方法を解説します。 Adobe XD を起動し、「ファ...
Adobe XDでアニメーションするプレゼン用スライドを作成する 全4回 スライド画面の切り替えに、緩やかな動きを追加する このレッスンでは、プラグイン「プレゼンテーション」を使って、簡単にプレゼン資料の枠組を作成し、様々なアニメーションを加えていく方法を解説します。 Adobe XD を起動し、「ファ...
Adobe XDでアニメーションするプレゼン用スライドを作成する 全4回 スライド内のコンテンツをダイナミックに変形して注目を集める このレッスンでは、プラグイン「プレゼンテーション」を使って、簡単にプレゼン資料の枠組を作成し、様々なアニメーションを加えていく方法を解説します。 Adobe XD を起動し、「ファ...
Adobe XDでアニメーションするプレゼン用スライドを作成する 全4回 スライド内の強調したい場所に、動きをつけて視線を誘導する このレッスンでは、プラグイン「プレゼンテーション」を使って、簡単にプレゼン資料の枠組を作成し、様々なアニメーションを加えていく方法を解説します。 Adobe XD を起動し、「ファ...
Adobe XDで縦横スクロールできるカレンダーをデザイン 全4回 縦と横にドラッグできるインタラクションの設定（スクロールできるカレンダー 4/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 を起動し、「ファイル」→「開く」からダウンロードしたサンプルファイルを選...
CCライブラリを活用！Photoshopの精度とAdobe XDの速度を両立させるワークフロー 全4回 CCライブラリを使ってPSDデータをAdobe XDで活用 このレッスンでは、CCライブラリを利用して、PSDデータを編集可能な状態のまま、XDのアートボードに配置する方法を紹介します。 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回 スライド式ドロワーメニュー④ インタラクションを設定 このレッスンでは、Adobe XDを使って、実際に操作可能なドロワーメニューのプロトタイプを作成する手順を学びます。 Adobe XDを起動し、「ファイル」→「開く」メニューから、...
マウスオーバーで見た目が変わるボタンをデザイン 全3回 マウスオーバーで不透明度が変わるボタンをデザイン このレッスンでは、Adobe XDのアニメーション機能を使って、マウスオーバーすると不透明度が変わるボタンのプロトタイプをデザインする手順を学びます。 Adobe XDを起動し、「...
マウスオーバーで見た目が変わるボタンをデザイン 全3回 マウスオーバーで背景色が変わるボタンをデザイン このレッスンでは、Adobe XDのアニメーション機能を使って、マウスオーバーすると背景色が変わるボタンのプロトタイプをデザインする手順を学びます。 Adobe XDを起動し、「フ...
マウスオーバーで見た目が変わるボタンをデザイン 全3回 マウスオーバーで形状が変わるボタンをデザイン このレッスンでは、Adobe XDのアニメーション機能を使って、マウスオーバーすると形が変わるボタンのプロトタイプをデザインする手順を学びます。 Adobe XDを起動し、「ファイ...
