WebサイトやモバイルアプリなどのUI/UXデザイン、プロトタイプ作成、共有までを1つのアプリで実現する、Adobe XD。このチュートリアルシリーズでは、XDの基本的な使い方をご紹介しながら、デザインとプロトタイプを完成させるまでの手順を動画でわかりやすく解説していきます。まずはワイヤーフレームの作成から始めましょう。
XDことはじめStep1:まずはここから!「ワイヤーフレームを作ってみよう」

Step1-1. アプリの起動と作業画面

Adobe XDのことをまだよく知らないという方は、まずはこの動画からご覧ください。XDでの基本的な作業の流れを理解し、初めてXDを起動する際の新規ドキュメントの作り方や、デザインワークスペース(作業画面)について学習します。

Step1-2. 複数アートボードの作成

Webサイトやアプリのページとなる、アートボードを追加していきます。アートボードは何枚でも作成することができます。ここでは、アートボードツールを使って、任意のサイズのアートボードを簡単に追加し、サイズを調整する方法について説明します。

使い方のポイント
ショートカットキー

  • 全画面表示:Command +0キー(Mac)またはControl + 0キー(Windows)

Step1-3. 図形の描画

ここでは、基本的な図形の描画方法を解説します。IllustratorやPhotoshopと同様のツールを使って長方形や楕円形を描き、パスを編集してシェイプ(形状)を変更します。さらに、作成した図形に対して塗りや境界線の設定をおこないます。

使い方のポイント
図形の描き方

  • 四角形:長方形ツールでそのままドラッグ。正方形は「shift 」キー + ドラッグ
  • 三角形:長方形ツールで四角形を描き、選択範囲ツールで四角形をダブルクリック。任意の角(アンカーポイント)を1つ選択し、「 Delete」キーを押します
  • 円:楕円形ツールでそのままドラッグするか、「shift 」キー + ドラッグで正円を描きます

Step1-4. 描画ツールでかんたんなアイコンを作成

基本的な図形が描けたら、パスを編集したり、図形同士を組み合わせたりして、アイコンなどのオブジェクトを作成してみましょう。ここでは、角丸長方形、オブジェクトの整列、結合といったIllustratorでもおなじみの機能を使って電話のアイコンを作成します。

使い方のポイント
パスファインダーの種類

  • 合体:重なり合う複数のオブジェクトを1つの形状に合体します
  • 前面オブジェクトで型抜き:背面のオブジェクトから前面のオブジェクトのエリアを型抜きします
  • 交差:オブジェクトの重なり合った部分だけを残し、1つのオブジェクトとして作成します
  • 中マド:オブジェクトの重なり合った部分を切り取って、それ以外の部分を1つのオブジェクトとして作成します

Step1-5. テキストの入力

ここでは、テキストの入力方法を解説します。テキストツールで文字を入力し、フォントの種類や大きさなどを設定します。Creative CloudのフォントサービスであるTypekitから、好みのフォントを選んで使用する方法もご紹介します。

使い方のポイント
ポイントテキストとエリア内テキスト

  • ポイントテキスト:クリックした位置が始点となり、文字を入力した分だけ文字列が伸長します
  • エリア内テキスト:ドラッグして長方形のエリアを指定し、そのエリア内にテキストを入力します

Typekitのフォントはこちらからアクセスできます。

Step1-6. 画像の配置

作業に入る前に、練習用のサンプルファイル「kotohajime_wire.xd」をこちらからダウンロードしておきましょう。見本のファイルを参考にし、ある程度仕上がったワイヤーフレームに、画像を配置していきます。また、マスクによる画像の切り抜きについても解説します。

使い方のポイント

画像の配置方法

  • 四角形や円などのオブジェクトを作成し、その中に配置したい画像をドラッグ&ドロップで流し込みます
  • 画像を直接ドラッグ&ドロップで配置し、その上にオブジェクトを配置。両方選択された状態で、「オブジェクト」→「シェイプでマスク」を選ぶと画像がオブジェクトの形で切り抜かれます

Step1-7. XDの最も大きな特徴:リピードグリッドの使い方

ここでは、XDの代表的な機能の1つである、リピートグリッドの使い方について解説します。この機能を使用すると、メニューや記事のリストといった規則性のあるレイアウトに、複数の画像やテキストを一気に配置することができます。

使い方のポイント

リピートグリッドの作り方

  • 画像とテキストのグループをまとめて選択し、リピートグリッドボタンをクリック。ショートカットキーは、Command + Rキー(Mac)またはCtrl + Rキー(Windows)
  • リピートグリッドのハンドルを下方向または右方向にドラッグ
  • 複数の画像ファイルをまとめて選択し、画像エリアのいずれか1つにドラッグ&ドロップ
  • 改行して入力したテキストファイルを、テキストエリアのいずれか1つにドラッグ&ドロップ

Step1-8. 画面遷移の設定とプレビュー

ここからは、プロトタイプの作成に入ります。画面をプロトタイプモードに切り替えて、ページ間を移動するための画面遷移を設定します。さらに、プレビュー機能を使って作成したプロトタイプがどのように表示され、動作するのかをデスクトップ上で検証します。

使い方のポイント

オブジェクトとページの接続方法

  • プロトタイプモードでオブジェクトをダブルクリックし、青い矢印のハンドルをクリック&ドラッグしてワイヤーを引き出し、ダーゲット(リンク先)のアートボードの上でマウスを放します
  • 青い矢印のハンドルをクリックした際に表示されるパネルで、ターゲットのアートボードを選択することも可能です

Step1-9. 共有とフィードバック

ワイヤーフレームが仕上がったら、クライアントやチームのメンバーと共有し、フィードバックをもらいましょう。ここでは、プロトタイプをオンラインで公開し、メンバーからのフィードバックをすばやく取得、反映させる方法について解説します。

 

いかがでしたか。Step1では、IllustratorやPhotoshopと同様の描画ツールや、XD独自のリピートグリッドを使ってすばやくワイヤーフレームを作成し、プレビュー、共有するまでの工程を解説しました。Step2では、このワイヤーフレームをブラッシュアップし、デザインカンプを仕上げていきます。

このページは役に立ちましたか。