CC)は、スマートフォン、タブレット、デスクトップ用のwebサイトやアプリのUI/ワイヤーフレームを作成したり、その作成したファイルで画面遷移を設定し、実機などで動作のプレビューができるUI/UXデザイン・プロトタイピングツールです。現在はベータ版がリリースされています。XDを使用して、ユーザーがレシピを投稿する「みんなのレシピ」という架空のアプリ(サイト)のUIを2ページを作成してみたいと思います。※記事中の画像はクリックすると拡大します。[プロトタイプ編]目次スタート画面でアートボードのサイズを決める要素(オブジェクト)を作成して配置するオブジェクト間の距離計測レイヤーパネルとシンボルスタート画面でアートボードのサイズを決めるまずはTOPページを作成します。スマートフォン、タブレット、デスクトップのサイズが用意されていますが、カスタムでサイズを指定することもできます。今回はスマートフォンのiPhone6/7で作成します。要素(オブジェクト)を作成して配置するスタート画面の「iPhone6/7」をクリックすると、横375×縦667のアートボードが表示されます。この上でUIを作っていきます。画面左上のメニューで「デザイン」が選択されているのを確認します。(画像1:赤枠1)TOPページの要素は、テキスト、アイコン、テキストフィールドです。photoshopやillustratorを使っている方なら直感的に分かると思いますが、左側のツールパレット(画像1:赤枠2)で要素を作っていきます。画像1背景色を変えるには、移動ツール(左パネル一番上)でアートボードを選択して、右パネルの「アピアランス>塗り」で色を選びます。色はスウォッチに登録できるので便利です。(画像1:赤枠3)矩形を角丸にするのも簡単です。角の内側にカーソルを近づけると●ポチが現れ、ドラッグで角丸のサイズを変更できます。右パネルで数値による変更や個別にサイズを変更することも可能です。画像2アイコンはこちらでお借りしました。aiデータをコピペして貼り付けています。サイズの変更はできますが、色は変更不可。色も変えられるといいのにな〜!!!(要望)テキストは左パネルのテキストツールで入力します。カーニングや行間は右パネルで設定できます。!テキストに下線が引けないのですよね。Adobeさん、よろしくお願いします!!(要望)オブジェクト間の距離計測アートボードにおけるオブジェクトの位置やオブジェクトとオブジェクトの間のサイズをリアルタイムで表示することができます。移動している間も数値が変化します。option(alt)を押しながら要素をクリックすると、アートボードに対する位置などが表示されます。レイヤーパネルとシンボル左パネル下部に「レイヤーパネル」と「シンボル」のアイコンがあります。「レイヤーパネル」をクリックすると、アートボードのレイヤー構造が表示されます。photoshopなどのレイヤーと同じ感じですね。「シンボル」をクリックすると、シンボルを管理するパネルが開きます。作成したボタンやアイコンなどをシンボルとして登録しておくと、再利用可能なオブジェクトになり、使用されている全てのオブジェクトに変更が適用されます。[一覧ページ編]AboutフリーランスのWebデザイナーです。Web制作/デザイン/写真に関するメモや、仕事/育児/家事の両立に役立ちそうなことも書けたらと思っています。楽天ROOMやってます。reserved...。