This post is Private. Only a writer or those who know its URL can access this post.

Article information
Show article in Markdown
Report article
Help us understand the problem. What is going on with this article?

AdobeXDでAmazonのUIを作成してみた

More than 1 year has passed since last update.

はじめに

今回はAdobeXDを使ってAmazonのUIを作成し、その中でAdobeXDの使い方を学んでいこうと思います。

目次

  1. 完成形
  2. スタート画面
  3. デザインモードとプロトタイプモード
  4. デザインの作成
  5. プロトタイプの作成
  6. プレビュー

1. 完成形

AmazonUI

ezgif.com-video-to-gif.gif
ezgif.com-video-to-gif (1).gif

2. スタート画面

AdobeXDを立ち上げると最初にデバイスから選択する形でアートボードのサイズを選択します。今回は「Web1920」を選択しました。「カスタマイズ」を選択すると任意のサイズでデザインすることが可能です。

3. デザインモードとプロトタイプモード

スクリーンショット 2018-12-20 15.46.43.png

デザインモード

デザインモードではその名の通りデザインを作成します。デバイスの選択が終わるとデザイン画面が立ち上がります。左上にデザインとプロトタイプという2つのタブがありますが、最初はデザインタブがアクティブになっています。左側にあるツールを用いて、複数の画面をデザインすることができます。

プロトタイプモード

プロトタイプモードでは複数作成したアートボードの画面遷移を設定するためのモードです。実際のデバイスでボタンを押した時にどの画面にどのように遷移するのかを確認することができます。

4. デザインの作成

アートボードの作成

まずはアートボードを複数作成し、それぞれに名前をつけておきます。今回はログインボタンをクリックした時にログイン画面に遷移させるため、アートボードを2つ作成し、それぞれに「Home」、「LogIn」という名前をつけました。アートボードを増やすには、ツールバーの下から2番目にあるアートボードツールを選択した状態でキャンバスをクリックします。またはツール選択後に右側に表示されるプロパティパネルから選択することもできます。
スクリーンショット 2018-12-20 15.49.47.png

拡大と縮小

機能 キー
全画面表示 ⌘+0
100%表示 ⌘+1
200%表示 ⌘+2
拡大 ⌘+shift++
縮小 ⌘+ー

UIキットの取得

AdobeXD用のUIキットをダウンロードすることで、最新のApple、Google、Microsoftデバイス用のUIリソースを簡単に扱えるようになります。ダウンロードはスタートアップスクリーンのUIキットセクションにあるリンクをクリックするか、ファイルメニュー→UIキットの取得の順に選択し、使用するUIキットをダウンロードします。必要に応じてUIキットからデザイン要素やカラーをコピー&ペーストして使用します。(今回は使いません。)

アセット

AdobeXDでは作成したパーツやカラーをアセットとして保存することができます。こうすることで後から同じパーツを簡単に画面に追加したり、一気に変更することができます。テーマカラーやよく使うパーツはアセットに登録しておきましょう。アセットにしたパーツはドラッグ&ドロップで簡単に使うことができますが、そのままの状態ではシンボルグループになっているので、変更を加える場合はオブジェクト→シンボルグループの解除をしておきましょう。(解除しておかないと、全てのパーツに変更が適用されてしまいます。)
スクリーンショット 2018-12-20 15.45.03.png

パーツの配置

準備が整ったので、早速パーツを配置していきます。まずはじめにヘッダーの部分を作成します。サーチバーはオブジェクトツールを使って作成します。サイズは8の倍数にすると良いです。オブジェクトツールを使ってサーチバーのボタンとカテゴリ部分を作成した後、オブジェクトツールを使ってサーチアイコンを作り、グループ化してアセットに追加しておきます。サーチバーは角が丸くなっているので、プロパティパネルから調整しておきましょう。AdobeXDではPhotoshopやIllustratorを使って作ったパーツを取り込むこともできますが、簡単なパーツであればAdobeXD内で作成する方が楽です。
スクリーンショット 2018-12-19 14.50.07.png

リピートグリッド

AdobeXDの最も優れた機能の一つがリピートグリッドです。この機能を使うことによって同じパーツを均等に繰り返し配置することができます。一つパーツを配置したらプロパティパネルからリピートグリッドを選択します。パーツが黄緑色の破線で囲まれたら、水平方向または垂直方向に広げることによってパーツが複製されます。リピートグリッドで複製したパーツはその間隔も一度に変更することができます。この機能を使って作成したパーツは全てグループ化されているので、一つ一つのパーツに変更を加えたい場合は右のプロパティパネルからリピートグリッドの解除を選択します。AmazonのUIはこれを多用します。
スクリーンショット 2018-12-19 17.28.44.png
スクリーンショット 2018-12-19 17.28.56.png

画像の挿入

AdobeXDでは選択した画像を自動でマスクしてくれる便利な機能が備わっています。今回は全てガッキーの画像を用います。写真を選択したらそのままオブジェクトにドラッグ&ドロップするだけです。

5. プロトタイプの作成

左上のプロトタイプタブを選択し、パーツクリックすると矢印が現れるので、遷移したい画面へと繋ぎ、遷移のアニメーションを選択します。
スクリーンショット 2018-12-20 15.52.54.png

6. プレビュー

プレビューは右上の再生ボタンから行えます。ちなみに公開プロトタイプとしてURLを作成すればAdobeXDを持っていない人もブラウザからプロトタイプの確認ができます。めっちゃ便利!

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした