Adobe XDでプロトタイプを構築する

Sep 15, 2025

操作方法

（画像クレジット：未来）

現代のWebおよびアプリの設計では、対話が新しいページまたは画面を開いていない場合が多い場合があります。対話型コンテンツを作成するための現代的なアプローチは、ユーザがコンテンツを変更することの経験によって驚くべきそして驚かれるように設計インターフェース要素間の遷移を必要とする。これはすべて、リフレッシュなしで同じ画面またはページで発生します。これらの種類の相互作用を設計し、それらを適切に機能させるように洗練することは時間がかかることがありますが、コードを書く前にやる価値があります。

これはAdobe XDが開発中の最後の数ヶ月が正しく過ごしたものです。 1つの画面でコンテンツを作成すると、そのコンテンツを新しい画面上の新しい状態に移動し、遷移するには「auto-animate」オプションを選択します。両方の画面で同じであるすべてのコンテンツは、ある位置から別の位置に自動的にアニメートされます。両方の画面ですべてのコンテンツが表示されたくない場合は、最初のコンテンツを目に見えなくし、その場所に移行します。

そのような他のアドビソフトウェアについて調べてください アドビの寸法 。

8個の必須プロトタイピングとビルドツール

ここでは、これを行うアプリプロトタイプを作成する方法を説明します（詳細については アプリを作成する方法 チュートリアルで、最高のもののランダウンをチェックしてください。それを超えて、XDの新しい機能により、ユーザーは自分の音声との対話を制御できます。これをデザイン機能として、アプリがユーザーにどのように話すことができるかも、いくつかの興味深いデザインの機会を提供することができます。

プロジェクトファイルをダウンロードしてください このチュートリアルのために。

01.プロジェクトの開始

Build prototypes with Adobe XD: Starting the project — XDをインストールして新しいプロジェクトを開始します（画像クレジット：Webデザイナー）

Adobe XDがない場合は、ダウンロードしてインストールすることができますここに。インストールが完了したら、ソフトウェアを開き、[ウェルカム]画面でダウンロードする画面サイズを選択できます。この場合、iPhone 6/7/8はこのプロジェクトの正しいサイズですが、あなたは利用可能なさまざまなサイズがあるのを見るでしょう。

02.最初の画像をインポートします

Build prototypes with Adobe XD: Import the first image — あなたの最初のイメージを見つけて輸入する（画像クレジット：Webデザイナー）

画像をインポートする方法はさまざまな方法がありますが、この最初のインスタンスではファイル＆gtに進みます。インポート。プロジェクトファイルから[資産]フォルダを選択し、インポートする最初のイメージは 'sky.png'になります。画面上部に配置して、ただのピクセルをダウンロードします。

03.キャビンを置きます

Build prototypes with Adobe XD: Place the cabin — さらなる画像を持ってきてください（画像クレジット：Webデザイナー）

デザインの次の画像は 'cabin.png'になります。前の手順で行ったのと同じ方法でこれをインポートしてから、画面を埋めるように配置してください。最後に、イメージ 'Trees.png'をインポートして、湖の上の木と一緒に画面の下部に置きます。

04.ロゴを持ってきてください

これらの画像が別々のレイヤーである理由は、それらが別々に移動できるスクリーン間で遷移が作成されるようになることです。 [ファイル]メニューに移動して[インポート]を選択します。今回は「logo.ai」を選択します。これはベクトル画像です。この画像を画面の上部中央に置きます。

05.丸を追加します

Build prototypes with Adobe XD: Add a circle — サークルツールを使用してロゴを描きます（画像クレジット：Webデザイナー）

円形のツールを選択して、ロゴよりわずかに大きい円を描きます。右側の[プロパティ]パネルで、ストロークを削除して背景を黒くします。背景を選択して、円がまだ黒くなるように輝度を-30に減らします。

06.グラフィックを並べ替えます

Build prototypes with Adobe XD: Reorder the graphics — ロゴの下に円を送ってください（画像クレジット：Webデザイナー）

今サークルはロゴの後ろに移動する必要があります。オブジェクト＆gtを選択してください。手配して後方を送ってください。他のアドビ製品のように、それもそうです CMD / CTRL + [ レイヤーの順序でグラフィックを後方に移動する。その間、右角ブラケットを使用して、オブジェクトを順番に転送します。

07. MICをドロップします

Build prototypes with Adobe XD: Drop the mic — マイク画像を配置してサイズを変更し、その周りに円を描く（画像クレジット：Webデザイナー）

'mic.ai'画像をインポートし、画像を比較的小さくするようにイメージのサイズを変更します。これを画面の下部に置きます。これを中心に円を描き、取り外したように塗りつぶしをオフにします。それからストロークを白と2ピクセルの幅にします。 'MIC'画像の周りに位置します。

08.テキストメッセージ

テキストツールを使用して、マイクを下に検索するには「speak」という単語を追加します。テキストを白くし、それをHelvetica Neue Condensed Blackに変更します。画面の左下に、[アセット]パネルのアイコンをクリックして開きます。画面で選択したテキストを使用すると、「文字スタイル」の横にある '+'アイコンをクリックしてテキストのこのフォーマットを保存します。

09.グループに参加してください

画面の左下にあるレイヤーパネルのアイコンを選択します。画面で、「検索」テキストを選択してください。 シフトクリック 円とマイクのアイコンを追加します。オブジェクトに移動してグループを選択します。レイヤーパネルでは、このグループの「検索」の名前を変更します。特にこれらをアニメートするときは、グループに名前を付けるのに役立ちます。

10.ロゴをグループ化します

ロゴとサークルを一緒にグループ化します（画像クレジット：Webデザイナー）

最後のステップと同様に、ロゴとその周りのぼかしの丸を選択してから、それらをまとめてグループ化します。レイヤーパネルで、後で再度編集する必要がある場合は、グループ全体の「ロゴ」の名前を変更します。現時点では、最初の画面のデザインが完了しました。

11.余分な要素

Build prototypes with Adobe XD: Extra elements — アニメーション目的のためにいくつかのデザイン要素を持ってきてください（画像クレジット：Webデザイナー）

最初の画面が完成しても、追加する必要があるデザイン要素がまだあります。これは、画面間の要素の位置を変更することによってアニメーションの作成方法です。長方形のツールと保留に行く シフト 画面に正方形を追加するには、境界線を白くします。

12.様々な輸入品

Build prototypes with Adobe XD: Different import — オペレーティングシステムのフォルダから画像をドラッグする（画像クレジット：Webデザイナー）

オペレーティングシステムを介してアセットのフォルダを開く。 'cabin1.png'イメージを選択して、前の手順で作成した正方形に直接ドラッグします。これで自動的にマスクされます。ダブルクリックして画像の位置を編集し、キャビンが正方形に表示されていることを確認します。

13.ラベルを追加してください

Build prototypes with Adobe XD: Add a label — テキストツールを使用して、アセットにラベルを追加します（画像クレジット：Webデザイナー）

テキストツールを使用して、テキストの下にあるラベル「フォレストキャビン」を追加し、[アセット]パネルを使用してステップ8から保存されたスタイルのテキストをスタイル化します。画像とラベルを選択してそれらをまとめてグループ化します。レイヤーパネルにあるグループ 'Left Cabin'に名前を付けます。

14.グループを複製します

Build prototypes with Adobe XD: Duplicate the group — 繰り返しグリッドを使用する代わりにインタフェース要素をコピーして貼り付けます（画像クレジット：Webデザイナー）

通常、Interface要素を繰り返すことは、「繰り返しグリッド」ツールに最適なジョブです。ただし、これは特定のアニメーションを必要とします。これは繰り返しグリッドでは機能しません。画像とテキストグループを選択してから、オリジナルの横にあるようにそれをコピーして貼り付け、代わりにイメージ 'cabin2.png'を追加します。

15.名前の変更をもう一度コピーします

Build prototypes with Adobe XD: Rename then copy again — 必要に応じてコピーしたテキストを更新します（画像クレジット：Webデザイナー）

テキストを「スノーキャビン」に変更し、レイヤーパネルでこの「右キャビン」の名前を付けます。左右のキャビンを選択してそれらを複製し、下の重複を置き、「cabin3.png」と「cabin4.png」のテキストと画像を更新します。これらの両方をグループ化し、グループの「下部キャビン」に名前を付けます。

16.テキストのタイトル

テキストの「キャビンの検索結果」を使って、ページにテキストを追加します。これにRockwellの書体を付け、これを資産パネルの文字スタイルに保存します。これで、画面の下部に「下のキャビン」グループを右に配置し、この画面に見えないように外観をゼロにします。

17.不透明度の変更

Build prototypes with Adobe XD: Changing opacity — 左右のキャビンの不透明度をゼロに設定します（画像クレジット：Webデザイナー）

現在左右のキャビンを選択し、それらを画面の下部に移動し、外観スライダをゼロにします。検索テキストに対してもう一度繰り返します。私たちが別の画面に移動すると、これらはすべて新しいポジションにアニメートします。レイヤーパネルで、他のすべてのキャビングループの上にある「左側のキャビン」を動かします。

18.画面を複製します

Build prototypes with Adobe XD: Duplicate the screen — 画面を複製してからロゴを移動して目に見えないようにします（画像クレジット：Webデザイナー）

その名前をクリックしてアートボードを選択してから、アートボードをダブルクリックし、名前を 'Home'に変更します。 ArtBoardをコピーして貼り付けて、「検索」の名前を変更します。ロゴを選択して画面のほぼオフにするまでに移動してから、その外観をゼロに減らします。

19.背景を動かします

Build prototypes with Adobe XD: Move the backgrounds — 背景やその他の要素を動かします（画像クレジット：Webデザイナー）

スカイ画像を選択して、画面上で少しぎくしゃくします。キャビンの画像を選択して、キャビンが画面の上部になるまで上に移動します。次に木の画像をクリックしてキャビンの上に移動します。最後に「検索」グループを選択し、外観をゼロに下げます。

20.新しい要素が現れます

Build prototypes with Adobe XD: New elements appear — 今新しい要素を現れるようにします（画像クレジット：Webデザイナー）

レイヤーパネルで検索結果を選択し、その外観を100までにします。画面上に移動します。左車体、右のキャビン、下部のキャビンにこれを繰り返します。ペンツールを使用して、単純なバックボタンを描き、その周囲に円を追加します。背景をぼかし、それの明るさを-30にします。

21.戻るボタンを完成させます

背中の矢印と円を選択し、それらをまとめてグループパネルに「戻る」ボタンを名前に付けます。 XDインターフェイスの左上の「プロトタイプ」を押すと、「プロトタイプ」モードに切り替えます。ホームスクリーンを選択し、青い矢印を検索画面にドラッグし、ポップアップパネルが表示されます。

22.音声コマンド

Build prototypes with Adobe XD: Voice command — 音声コマンドを追加するのは簡単です（画像クレジット：Webデザイナー）

トリガーを音声に変更し、「検索」という単語を「音声」コマンドとして制御します。アクションを自動アニメーションに変更し、スナップするように緩和します。期間1.5を作ります。検索画面で、戻るボタンをクリックして青い矢印を「ホーム」画面にドラッグします。タップするトリガーを変更するだけです。

23.プロトタイプをテストする

Build prototypes with Adobe XD: Test the prototype — Playボタンを押してプロトタイプをテストします（画像クレジット：Webデザイナー）

XDインターフェイスの右上にある右上には、PLAYボタンがあります。これをクリックすると、作業用プロトタイプが画面に表示されます。ホームページでは、Voiceコマンド 'search'を話しながらスペースバーを押す必要があります。スペースバーを手放すと、次の画面に移動し、グラフィックインターフェイスをポジションにアニメートします。

24.戻ってきて

Build prototypes with Adobe XD: Going back — 戻るボタンを押してホームスクリーンに戻ります（画像クレジット：Webデザイナー）

移行が実行されると、戻るボタンを押してホームスクリーンに戻ることができます。プロトタイプを閉じて検索画面をクリックしてから、右側の青い矢印をクリックします（ドラッグしないでください）。トリガを時間に変更し、遅延を0にして、音声再生にアクションを設定します。スピーチの「検索結果を利用可能なキャビンの検索結果」にしてください。

25.音声確認

Build prototypes with Adobe XD: Speech confirmation — 音声確認をテストしてからデザインビューに戻ります（画像クレジット：Webデザイナー）

再生ボタンでこれをテストして、検索の音声確認が聞こえます。これを試したときにプロトタイプを閉じます。別の画面が作成される予定であるため、XDインターフェイスの左上の[デザイン]ビューをクリックしましょう。名前をクリックしてからコピーして貼り付けて、検索画面をクリックしてください。

26.画像を拡大縮小します

Build prototypes with Adobe XD: Scaling the image — 新しい画面の名前を変更してキャビンイメージのサイズを変更します（画像クレジット：Webデザイナー）

新しい画面の「キャビン」の名前を変更します。 [左車]レイヤーの画像をダブルクリックします。画面を埋めるようにコーナーハンドルのサイズを変更してから、その画面をカバーするように画像を中に置きます。検索結果のテキストをクリックして、表示から削除するには外観をゼロにします。

27.新しいスクリーン要素

Build prototypes with Adobe XD: New screen elements — いくつかの新しい要素を持ち込む時が来ました（画像クレジット：Webデザイナー）

グループの一部であるため、「フォレストキャビン」テキストをダブルクリックします。テキストサイズを26ピクセルに拡大して、画面上で少し上に移動します。 Helvetica Neue媒体の画面に14ピクセルのサイズでテキストを追加し、背景に際立って白くします。見出しの下にあるラインツールに白い線を追加します。

28.ボタンを作成します

Build prototypes with Adobe XD: Create a button — ボタンとして使用する丸みを帯びた長方形を作成します（画像クレジット：Webデザイナー）

デザインの下部にある画面に長方形を描画するには、Rectangleツールを使用します。コーナーハンドルをドラッグしてこの形状の丸い角を与えます。これに「保護区」という単語を追加してください。

29.プロトタイプモードに移動します

Build prototypes with Adobe XD: Move to Prototype mode — すべての場所に、プロトタイプモードに切り替えます（画像クレジット：Webデザイナー）

すべてのデザイン要素は、アプリのデザイン全体のために所定の位置にあります。左上隅に「プロトタイプ」をクリックして「プロトタイプ」モードに移動します。検索画面で、画像とテキストの「フォレストキャビン」グループをクリックしてください。これから青いハンドルを「キャビン」画面にドラッグします。

30.アニメーション設定

Build prototypes with Adobe XD: Animation settings — アニメーション設定を調整して、それらをティックに刻むようにしてください（画像クレジット：Webデザイナー）

画面間の移行のポップアップパネルで、[トリガー]をタップしてから[Action Auto-Animate]を選択します。スナップとして緩和し続けますが、これの持続時間を0.6秒に減らします。これにより、アニメーションがドラッグしないようになります。最初の画面の2番目の画面への移動は、より長い移行を必要とする多くの動きを持っていました。

31.戻るボタンをリンクします

Build prototypes with Adobe XD: Link up the back button — 戻るボタンをリンクしたら、テストする準備が整いました（画像クレジット：Webデザイナー）

最後の画面から戻るボタンを選択して、このバックから「検索」画面にドラッグします。前の遷移からのすべての設定は記憶されるべきです。これでPlayボタンをクリックしてこれを先に進む準備が整いました。

32.オートアニメーション

Build prototypes with Adobe XD: Auto-animate — 今すぐ自動アニメイトがどのように機能しているかを確認できます（画像クレジット：Webデザイナー）

Auto-Animateで表示されるものは、画像が画面を埋めるように展開され、新しいテキストがフェードインしている間、不要になった要素が消えます。戻ってきたときに反対は起こります。これにより、自動アニメートを3つの画面にまたがるのが良いことを確認するための良い方法があります。

33.プロジェクトを保存します

Build prototypes with Adobe XD: Save the project — プロジェクトのローカルコピーを保存することを忘れないでください（画像クレジット：Webデザイナー）

デフォルトでは、プロジェクトは自動的にCreative Cloudに保存されるべきですが、問題がある場合には、自分のハードドライブにコピーを保存することをお勧めします。ファイル＆gtをクリックします。保存し、自分のコンピュータに場所を変更し、プロジェクトに適切な名前に名前を付けます。

4.プロジェクトの共有

Build prototypes with Adobe XD: Sharing the project — Shareボタンを使用して、プロジェクトを他の人に送信する（画像クレジット：Webデザイナー）

プロトタイピングの全点は他の人々のプロジェクトをテストすることです。幸いなことに、これをそよ風にするXDインターフェースの右上にある共有ボタンがあります。 [共有]ボタンをクリックし、表示された[ドロップ]メニューで[レビューのオプション共有]を選択します。

35.プロトタイプを公開します

Build prototypes with Adobe XD: Publish prototype — 人々がプロジェクトをブラウザにテストできるようにパブリックリンクを作成する（画像クレジット：Webデザイナー）

次の画面では、自動アニメーションのサポートがWebでまだ利用できないと言われていますが、それはすぐに来ています。 [Public Linkの作成]をクリックして、Webブラウザのパブリックリンクを参照するために、右上のリンクをクリックします。プロトタイプで音声コマンドを使用するには、スペースバーを押し下げます。

ビデオバージョン

Build prototypes with Adobe XD: Video version — あるいは、ビデオとしてのインターフェースをアクションで録音することができます（画像クレジット：Webデザイナー）

別のプロトタイプは、インターフェイスをアクションに記録することで共有できます。 [共有]ボタンをクリックして[ビデオの録音]を選択します。これはウィンドウを開き、これを閉じると、画面の録音をMP4ファイルとして保存するように求められます。これはプロトタイプを共有するための便利な方法です。

この記事はもともとCreative Web Design Magazineの第285号に掲載されました ウェブデザイナー 。 ここに問題285を購入してください または ここでWeb Designerを購読してください 。

関連記事：

モバイルアプリデザイン：初心者のガイド
vue.jsを使ってアプリを作成する方法
モバイルアプリでグリップします

Adob​​e XDでプロトタイプを構築する