Adobe XDでプロトタイピングを始めましょう

Sep 12, 2025

操作方法

UXデザインの専門家の需要が成長し続けているため、デザイナーは高品質のプロトタイプを作成するのに十分強力な使いやすいツールを探していますが、それは毎日すでに使用しているツールになじみがあると感じています。

Adobe XD （Preview）それだけで、ユーザーがモバイルデザインのプロトタイプを簡単に作成、編集、および社交することを可能にします。新しい機能は常に機能していますが、今のところ、これらのクイックチュートリアルはAdobe XDでプロトタイピングを始めるのに役立ちます。

01.ワイヤフレームからプロトタイプを作成します

Creating prototypes is easy with Adobe XD — プロトタイプの作成はAdobe XDで簡単です

ワイヤフレームからプロトタイプを作成するには、次の簡単な手順に従います。

上部またはコマンドタブでプロトタイプをクリックします
[コマンドA]をクリックしてインタラクションを表示し、[プレビュー]をクリックしてプロトタイプを接続します。
全体的なナビゲーションとトランジションの影響を確認するには、プロトタイプの画面をクリックしてください。

02.インタラクションの作成

To create an interaction from one screen to another select an object and drag the blue arrow to the art board you want to link to — ある画面から別の画面への対話を作成するには、オブジェクトを選択し、リンクしたいアートボードに青い矢印をドラッグします。

あなたが最初に見ることは、画面の左上の青いホームボタンアイコンがあり、ホーム画面を示します。別のタイトルをクリックしてから、新しいホーム画面になりたい画面に添付されているグレーのホームアイコンをクリックして、それを変更できます。

ある画面から別の画面への対話を作成するには、オブジェクトを選択し、リンクしたいアートボードに青い矢印をドラッグします。青い矢印をクリックして空のスペースにドラッグすることで、対話を削除できます。対話を作成すると、ダイアログボックスは自動的にオプションを選択し、セグメント、緩和と期間の種類を定義します。コマンドクリックは、プロトタイプからこれを簡単に行うことができます。

プレビューにコマンドを押す。プレビューウィンドウを閉じることなく、インタラクションの青い矢印をクリックしてそこから変更することで編集できます。

03.プロトタイプを共有する

Publish to share online by simply clicking share online in the upper right corner of the screen — スクリーンの右上隅にあるShare Onlineをクリックするだけでオンラインで共有するには公開

プレビューウィンドウが開いている場合は、レコードをタップして、プロトタイプのインタラクションをクリックします。完了したら、もう一度レコードをクリックして、ムービーファイルをデスクトップに保存します。同僚が映画ファイルを表示すると、録音時にクリックしたホットスポットを示すための視覚マーキングがあります。

また、画面の右上隅にあるShare Onlineをクリックしてオンラインで共有することもできます。提供されているスペース内のタイトルを入力して、プレビューパネルを作成するためのスペースにタイトルを入力して、リンクを作成します。 Adobe XDは、任意のWebブラウザで表示できる共有可能なリンクを自動的に作成します。レビューが定義された期間をクリックしない場合、マーカーは自動的にホットスポットを示します。

また、モバイルブラウザに同じリンクを貼り付けることで、モバイルデバイスを確認することもできます。視覚的な指標は、モバイル機器でテストして現実的な経験を与えるときには表示されません。

ホーム画面にURLを保存すると、アイコンが自動的に選択されたサムネイルプレビュー画像として表示されます。

Adobe XDで必要な変更を加えることができます。改訂バージョンを共有するには、もう一度シェアをクリックするだけです。元のリンクを更新するか、新しいリンクを作成するオプションが与えられます。リンクを管理する。 Creative Cloud Assetsアカウントを介してリンクの管理をクリックします。すべてのプロシージャはプロジェクトセクションでオンラインで保存され、簡単に管理できます。

言葉：Demian Borba.

Demian BorbaはProduct Manager forです Adobe XD 。

Adobe XDでプロトタイピングを始めましょう

01.ワイヤフレームからプロトタイプを作成します

02.インタラクションの作成

03.プロトタイプを共有する

操作方法 - 最も人気のある記事

How to implement light or dark modes in CSS

ペンとインクに文字を描く方法

あなたのサイトにUIアニメーションを追加する

拡散を始めましょう

Photoshopで現実的な波を描く方法

オイルのブラシストロークを改善する

Adobe Indesignを使用して誤字のポスターを作る

キャッシュフローを効果的に管理するための5つの方法

カテゴリ

Adob​​e XDでプロトタイピングを始めましょう

01.ワイヤフレームからプロトタイプを作成します

02.インタラクションの作成

03.プロトタイプを共有する

操作方法 - 最も人気のある記事

カテゴリ

Adobe XDでプロトタイピングを始めましょう