Adob​​e XDを使ってモバイルアプリをプロトタイプする方法

Sep 15, 2025
操作方法

このチュートリアルで、Adobe XDでモバイルアプリのプロトタイプを作る方法を示しています。 Adobe XD CC（2017 Beta） 2016年 新しく開始されたAdobe XD CC いくつかの微調整があり、それを使いやすくしました。

あなたがモバイルアプリまたはWebサイトのユーザーエクスペリエンスを作成するデザイナーである場合は、タスクの異なる複数のツールの使用に使用することができます。 プロトタイピング 。

あなたは研究から始めます。それからあなたはペンと紙のアイデアをスケッチし、後であなたの考えをデザインツールに転送します。最良のフローを考え出すには、すべての資産をエクスポートして別のツールに入れてプロトタイプを構築します。そこから、プロトタイプを共有またはテストし、フィードバックを収集し、繰り返すサイクルの途中に戻り、ツールからツールへの切り替え、デザインを絞り込みます。

各デザインツールはそれぞれ問題の異なる部分に取り組みます。しかし、デザイナーとしてあなたの人生を楽にするのではなく、これらすべてのツール間の切り替えはペースを減らすだけです。

完全に接続されたワークフローを楽しむことができる単一のツールがある場合はどうなりますか？あなたが数分であなたの経験をデザインしてプロトタイプすることができるところ、フィードバックをキャプチャするためにウェブ上でそれらを共有し、それからあなたのストライドを破ることなく簡単に編集をしますか？ Adobe Experience Design CC - または、それを呼び出すように、Adobe XD - はそれをすることでした。

このチュートリアルでは、Adobe XDの主要な分野を設計、プロトタイピングし、シンプルな「チームのモバイルアプリを満たす」という主要な分野が表示されます。

製品チームメンバーを一覧表示するコンテンツページを作成します。その後、ユーザーは個々のエントリをクリックすることができます。より詳細なBIOGページに取られることができます。高忠実度デザイン、プロトタイプを作成し、フィードバックを集めるためにそれらを共有する方法を学びます。

上記のビデオを見て、以下の手順に従ってAdobe XDでプロトタイプする方法を学びます。それを作る方法をあなたに示すだけでなく、それをテストする方法についても説明します、それをアクションでプレビューする方法、そしてそれを共有してエクスポートする方法を説明します。

一部のプロセスが、Adobe XDの新しいバージョンでわずかに変更された可能性があることに注意してください。

01. Adob​​e XDをインストールして新しいデザインを開始します

Start your design by selecting the iPhone artboard from your template options

テンプレートオプションからiPhoneアートボードを選択してデザインを起動します。

まず、Adobe XD ISを確保してください コンピュータにインストールされています 。それを起動し、ようこそ画面を見て、iPhoneのアートボードテンプレートで新しいデザインを始めましょう。

02.第2アートボードを作成します

Artboardツールを使用する（ A. ）2台目のアートボードを作成するには、「iPhone - Team Page」と「iPhone - Detail Page」に、タイトルを変更します（それらをダブルクリックして）。右側のプロパティインスペクタを使用して、両方のアートボードの背景色を黒に変更します。選択ツールを使って v ）選択した場合は、デザインを介してパンするためにいつでもスペースバーを押すことができます。

03.チュートリアルアセットをダウンロードしてください

私はこのチュートリアル全体を通して使っている資産のフォルダをまとめました。あなたはそれらをダウンロードすることができます ここに 。 Finderから、「iPhone-status-bar.svg」をアートボード1の上にドラッグします。 X：8、Y：5 ）。その後、アートボード2にコピーして貼り付けて、両方のアートボードには上部のステータスバーがあります。ヒット CMD + L. これらのステータスバーを両方のアートボードにロックするため、プロパティを変更できません。ロックを解除するには、もう一度ショートカットを使用するか、[ロック]アイコンをクリックすることができます。

04.四角形を描画し、次元を設定します

アートボード1（チームページ）に焦点を当てましょう。 Rectangleツールの使用 r ）、右側のプロパティインスペクタパネルを使用して、ピンクの四角形（＃FF2BC2の枠が付いている）を描き、その寸法を375 x 230に設定します。

05.オブジェクトを並べ替える

境界線を回すか、または塗りつぶし、右側の「目」アイコンをクリックします。ヒット Shift + CMD + [ それを背中にずっと送信するか、またはに行きます オブジェクト＆gt;アレンジ＆gt;戻って送る 。 16進値を使用して色を変更したい場合は、色アイコンをクリックし、ネイティブカラーピッカーがポップアップすると、上部の2番目のタブを選択し、ドロップダウンを「RGBスライダー」に変更します。

06.ヘッダーを作成します

テキストツールを使用する（ t ）、クリックしてチームページのヘッダーを作成します。鉱山はHelvetica Bold、20、#ffffff、x：18、y：123.チームメンバーのリストをまとめるのを始めましょう。チームメンバーの写真が座る灰色の広場を描きます（100 x 100、x：8、y：238、境界線のない#d0d0d0）。

07.別の長方形を追加します

この右側には、白い長方形（260 x 100、x：108、y：238、境界線のない#ffffff）が必要です。今のところ、プレースホルダーのテキストを使用して、必要に応じてスタイルを付けます。

08.矢印アイコンを追加します

このボックスを表示するにはタップできる領域になります。矢印アイコンを含めます。 ArtBoardからのポイントへのXDキャンバスにFinderから 'Path.SVG'をドラッグします。それから、x：330、y：279に再配置します。

09.あなたのヘッドショットを置きます

Finderから、ヘッドショットを灰色の正方形の場所にドラッグします。

10.リストを作成します

Use the powerful Repeat Grid feature to create your list of team members

チームメンバーのリストを作成するには、強力なリピートグリッド機能を使用します。

今私達は私達のリストを作成することができます。この時点で、通常はトップアイテムをコピーして貼り付け、コピーされたバージョンをダウンしてマージンを調整します。あなたは新しいアイテムのために同じことをするでしょう、そしてあなたが余白を変更したいならば、あなたは手動でそれをする必要があります。

Adobe XDではなく - リピートグリッド機能を使用できます。繰り返したい項目を選択し、右側のプロパティインスペクタの[繰り返しグリッド]ボタンをクリックしてください。 CMD + R. そして、グリーンハンドルを使用してアイテムを垂直に繰り返します。タブレットバージョンでは水平方向に繰り返すこともできます。

11.余白を調整します

繰り返しグリッドの余白を調整し、アイテムの端に移動して、クリックしてドラッグします。マージンを7に設定しましょう。繰り返しグリッドをアートボードの下部にドラッグします。私たちは今遊ぶべき4行があります。

12.テキストフィールドを編集します

Drag all the headshots onto the grid

すべてのヘッドショットをグリッドにドラッグします

プロパティ（色、xおよびyの位置など）はグローバルですが、各アイテムのコンテンツは一意になる可能性があります。個人の名前と役職の各タイトルにテキストフィールドを編集します。ダブルクリックしてグリッドとグループを入力できます。 CMD +クリックしてください グループ内または繰り返しグリッド内の任意の要素を直接選択する。これで、すべてのヘッドショットを一度にグラブし、それらをグリッドにドラッグしてこの画面で終了する必要があります。

13.暗くなった効果を生み出す

アートボード2にジャンプしましょう（詳細ページ）。繰り返しますが、プレースホルダの長方形（375 x 444、X：0、Y：0、＃ボーダーなし）から始めて、ヘッドショットをドラッグして埋めます。画像の不透明度を60パーセントに変更して後ろに送信することで、暗くなった効果を生み出します（ Shift + CMD + [ ）。

14.別の矢印を追加します

次にヘッドショットアイテムをロックします（ CMD + L. そして、ユーザーがチームリストに戻ることができることを示すために別の矢印（ 'back-arrow.svg'）を追加します。これはx：20、y：40に座る必要があります。それ以外の場合は、SVGがヘッドショットを置き換えるため、最初に画像をロックすることが重要です。

15.連絡先情報バーを追加する

各ページにピンクのバーを含めたい、チームメンバーの連絡先の詳細をリストします（375 x 45、X：0、Y：400）。テキストツールを使用する（ t ）「プレースホルダリンク」を読んだテキスト要素を作成し、それを中心に、それをスタイル、それをX：169、Y：416に配置する。

16.テキスト要素のより多くのインスタンスを作成します

繰り返しグリッドツールを使用して、このテキスト要素の2つのインスタンスを作成しましょう。まず、テキストを繰り返しグリッドに変換します（ CMD + R. そして、グリッドを水平に拡張しながらオプションキーを押したままにします。美しい、そうではありませんか？直接 - テキストを選択します（ CMD +クリックしてください そして、「電子メール」、「Twitter」と「LinkedIn」を読むために内容を変更します。

17.名前とバイオボックスを作成します

デザインを終了するには、チームメンバーの名前とBIOGを含むホワイトボックス（360 x 214、X：8、Y：445）を作成します。まず、プレースホルダ 'Person Name'を使用してテキスト要素を追加します。 BIOGを保持するテキスト要素の場合は、エリアテキストを使用します。これを行うには、テキストツールを選択します（ t ）そしてクリックしてドラッグして、コピーの領域を定義します。繰り返しますが、現在のプレースホルダテキストを入力して、そのスタイリングプロパティを調整します。

他のチームメンバーのためのアートボードを作成します

Duplicate your detail page so there is one for each team member

詳細ページを複製して、チームメンバーごとに1つがある

それでは、他のチームメンバーのための新しいアートボードを作りましょう。まず主画像のロックを解除します（ CMD + L. その後、Artboard 2のタイトルをクリックして選択してヒット CMD + C. それをコピーする。ズームアウトする （ CMD + - またはTrackPadを使用してズームしてください） CMD + V 3つの新しいアートボードを貼り付けます。各ページにBIOG情報を追加します。名前とヘッドショットの画像を更新して、アートボードをキャンバスに配置します。涼しい！私たちのデザインは今では終了しました。

19.フローを設定します

アプリのフローを定義し始める時が来ました。プロトタイプは千の会議の価値がある可能性があるので、私たちは私たちのデザインの意図を伝えるために1つを作成します。単にプロトタイプモード（左上）にジャンプし、ユーザーがタップする項目を選択します（保留 cm cm 直接選択し、ワイヤを右アートボードにドラッグします。マウスが解放されると、セグメント、緩和、期間を設定できます。簡単です。

20.接続します

Wire each item on your list to its respective detail page

各項目をあなたのリストにそれぞれの詳細ページに配線する

アートボード1のリストの各アイテムにそれぞれの詳細ページに配線しましょう。これらのそれぞれについて、セグメントを左にスライドさせるように設定し、緩和を緩和させたい。次に、詳細ページのそれぞれの背面矢印をアートボードに戻すことができます1 - 今回はセカブをスライドするように設定してください。ブーム - 私たちのプロトタイプは準備ができています。

21.プロトタイプをテストします

Any changes to your design will be reflected immediately in the preview

あなたのデザインへの変更はすぐにプレビューに反映されます

プロトタイプをテストするには、右上の[再生]ボタンをクリックします（プレビュー）。デザインやワイヤを更新するには、プレビューウィンドウを閉じる必要はありません。変更を開始するだけで、自動的にプレビューウィンドウに反映されます。

22.ビデオを作ります

プロトタイプをテストするときに、相互作用のビデオを録音するのは簡単です。プレビューウィンドウを開くと、[レコード]ボタンをクリックして録音を開始して停止します。 '.mov'ファイルを保存して、利害関係者と共有します。

23.あなたの仕事を共有しましょう

Share prototypes on the web

プロトタイプをWeb上で共有する

Web上のプロトタイプを共有するには、右上の最後のボタン（オンラインで共有）をクリックしてください。 [リンクの作成]ボタンをクリックしてください。すべての資産がCreative Cloudにアップロードされ、リンクが作成されます。変更が必要な場合は、デザインモードに戻って変更して再度共有できます。全体の流れが動作します。

24.ファイルをエクスポートします

You can export designs as PNGs for Web, iOS and Android at different sizes, or SVGs

デザインは、さまざまなサイズ、またはSVGSのWeb、iOS、およびAndroidのPNGとしてエクスポートできます。

XDから、Web、IOS、およびAndroid用のPNGをさまざまなサイズ、および最適化されたSVGファイルをエクスポートできます。

25.結果を楽しんでください

おめでとう！ Adobe Experience Design CC（プレビュー）の基本を習得しました。 Webおよびソーシャルメディアであなたのプロトタイプを共有してください - 追加する #adobexd. だから私たちはあなたの仕事を見ることができます。

この記事は最初に登場しました ネットマガジン 問題280。 ここでネットを購読する 。

関連記事

  • プロトタイピングの落とし穴を回避する方法
  • モバイルアプリでアニメーションを使用する方法
  • より良いモバイルUXデザインのための10のヒント

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

BlenderのEeveeとのインテリアを作成する方法

操作方法 Sep 15, 2025

Atypique-Studio：Poliigon.comからのテクスチャを含みます - テクスチャは再配布されないかもしれません ..

これらのヒントを含むグラファイトからもっとゲットする

操作方法 Sep 15, 2025

過去3年間、私はイラストのための媒体としてグラファイトを使って、最初に機械的鉛筆でのみ�..

BBCのパフォーマンスブースターのキャッシュ

操作方法 Sep 15, 2025

昨年BBCニュースアプリのユーザーテストセッション中に、ユーザーの1人のユーザーが本当に私�..

Procreateで古典的なおとぎ話のシーンを描く

操作方法 Sep 15, 2025

PROCREATEはすぐに私のGo-digital Paintingアプリになりました。の携帯性のおかげで iPad Pro. ..

3.jsでインタラクティブ3Dビジュアルを作成する

操作方法 Sep 15, 2025

このWebGLチュートリアルでは、CO2レベルが変更されたときに世界が何が起こるのかを示す3D環境�..

新郎は魅力的に毛皮のような生き物

操作方法 Sep 15, 2025

ページ1/3： ページ1 ページ1 2�..

クリエイティブデザインの短縮を満たす秘密

操作方法 Sep 15, 2025

私のチューターの一人が一度彼がペンと紙のようなもの以外何もない、彼の人生の残りのために刑務所に閉じ込められたならば、彼はそれを�..

美しい水彩画絵画を作る方法

操作方法 Sep 15, 2025

鉱山は水彩画のかなり印象的なスタイルです 絵画技術 ここで、詳細は、音の構成、�..

カテゴリ