Adobe XDでアプリのUIを作成してみた![TOPページ編]

 2016.11.14  2017.09.20

Adobe XD(Adobe Experience Design CC)は、スマートフォン、タブレット、デスクトップ用のwebサイトやアプリのUI/ワイヤーフレームを作成したり、その作成したファイルで画面遷移を設定し、実機などで動作のプレビューができるUI/UXデザイン・プロトタイピングツールです。現在はベータ版がリリースされています。

このAdobe XDを使用して、ユーザーがレシピを投稿する「みんなのレシピ」という架空のアプリ(サイト)のUIを2ページを作成してみたいと思います。 ワイヤーフレームとしてはデザインし過ぎかもしれませんが、使い方を学ぶことが目的なのでご了承くださいませ! ※記事中の画像はクリックすると拡大します。

recipe

スタート画面でアートボードのサイズを決める

まずはTOPページを作成します。 あらかじめスマートフォン、タブレット、デスクトップのサイズが用意されていますが、カスタムでサイズを指定することもできます。今回はスマートフォンのiPhone6/7で作成します。

adobe xdスタート画面

要素(オブジェクト)を作成して配置する

スタート画面の「iPhone6/7」をクリックすると、横375×縦667のアートボードが表示されます。この上でUIを作っていきます。
まず画面左上のメニューで「デザイン」が選択されているのを確認します。(画像1:赤枠1)
TOPページの要素は、テキスト、アイコン、テキストフィールドです。 photoshopやillustratorを使っている方なら直感的に分かると思いますが、左側のツールパレット(画像1:赤枠2)で要素を作っていきます。

xd_top01画像1

背景色を変えるには、移動ツール(左パネル一番上)でアートボードを選択して、右パネルの「アピアランス>塗り」で色を選びます。色はスウォッチに登録できるので便利です。(画像1:赤枠3)

矩形を角丸にするのも簡単です。角の内側にカーソルを近づけると●ポチが現れ、ドラッグで角丸のサイズを変更できます。もちろん右パネルで数値による変更や個別にサイズを変更することも可能です。

xd_top02画像2

アイコンはこちらでお借りしました。aiデータをコピペして貼り付けています。サイズの変更はできますが、色は変更不可。色も変えられるといいのにな〜!!!(要望)
テキストは左パネルのテキストツールで入力します。カーニングや行間は右パネルで設定できます。が!テキストに下線が引けないのですよね。サイトの場合、リンクの下線の有無って重要じゃないですか? Adobeさん、よろしくお願いします!!(要望)

オブジェクト間の距離計測

アートボードにおけるオブジェクトの位置やオブジェクトとオブジェクトの間のサイズをリアルタイムで表示することができます。移動している間も数値が変化します。option(alt)を押しながら要素をクリックすると、アートボードに対する位置などが表示されます。

xd_top04

レイヤーパネルとシンボル

左パネル下部に「レイヤーパネル」と「シンボル」のアイコンがあります。 「レイヤーパネル」をクリックすると、アートボードのレイヤー構造が表示されます。photoshopなどのレイヤーと同じ感じですね。
「シンボル」をクリックすると、シンボルを管理するパネルが開きます。作成したボタンやアイコンなどをシンボルとして登録しておくと、再利用可能なオブジェクトになり、使用されている全てのオブジェクトに変更が適用されます。

xd_top03画像3

次はレシピ一覧ページを作成します!

Pocket