インタラクティブプロトタイプの作成 1/2（ホーム画面と画面遷移） プロトタイプの作成は、プロトタイプモードに切り替えて行います まず、ホーム画面、すなわち最初に表示される画面を設定します。アートボードを選択して、左上隅のホームアイコンをクリックす...
インタラクティブプロトタイプの作成 2/2（画面遷移のアニメーション） 画面遷移のインタラクションにはデフォルトで「ディゾルブ」のアニメーションが設定されています。これを「左にスライド」「右にスライド」のアニメーションに変更すると、一覧画面と詳細画面の...
オーバーレイを使用したプロトタイプの作成 Adobe XDのプロトタイプでは、アートボードの上に別のアートボードを重ねて表示できます。ドロップダウンリスト、入力用キーボードなどの表現に便利です。 まず、プロトタイプモードで...
モバイルデバイスでプレビュー モバイルデバイスを使い、XD で作業中のデザインをレビューしたり、保存済みのクラウドドキュメントを確認することが可能です。プレビューに必要な XD モバイルアプリケーションは、iO...
プレビューウィンドウでのデザインとプロトタイプのプレビュー Adobe XD のデスクトッププレビューを使用して、プロトタイプに設定したインタラクションをプレビューできます。プレビューウィンドウを表示するには、デザインモードまたはプロトタイ...
リピートグリッドを使ったインタラクションの作成 リピートグリッドから他のアートボードへの接続は、3種類の方法が選べます。 リピートグリッド全体を接続するには、リピートグリッドを選択し、接続ハンドルをドラッグして移動先のアートボー...
プロトタイプのアニメーション化 1/3（フェードイン/アウト） 自動アニメーションを使用すると、流れるようなトランジションを作成して、アートボード間のコンテンツの関係を視覚的に表現できます。 プロトタイプモードでアートボードを接続し、プロパティ...
プロトタイプのアニメーション化 2/3（拡大縮小のアニメーション） 自動アニメーションでは、移動元と移動先のオブジェクトの種類、レイヤー名、グループの階層が一致している場合、そのオブジェクトの属性が自動的にアニメーション化されます。 移動元のアート...
プロトタイプのアニメーション化 3/3（ドラッグトリガー） 自動アニメーションとドラッグトリガーを組み合わせると、実際のドラッグ操作のようなインタラクションを作成できます。 移動元と移動先のアートボードには自動アニメーションの条件を満たすオ...
タイマートランジションの作成 1/2（時間トリガーの基本） 時間トリガーを使用して、時間の経過により自動的に発生するアートボード間のトランジションを作成できます。 プロトタイプモードで、移動元のアートボードを選択し、移動先のアー...
タイマートランジションの作成 2/2（自動ループの作成） 時間トリガーをアクションと組み合わせて使用すると、ループアニメーションを作成できます。 ループアニメーションを作成するには、アニメーションの最初と最後のアートボードの外観を同じにし...
アンカーリンクの作成 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を起動し、「ファイ...
