Adobe XDを使ったワイヤーフレームの作り方を解説！

「ワイヤーフレームを作成するには、どんなツールを使えばよいか知りたい」。

「使いやすく、思い通りのデザインができるツールが欲しい」。

と思ったことはあるのではないでしょうか？

本記事では、そういった方を対象に書いています。

Webサイト作成には、まずデザインカンプを作ることが必要になります。

デザインツールには、Photoshopなどがありますが、おすすめなのがAdobe XDです。

Adobe XDは、Webサイトのワイヤーフレームやデザイン制作に特化したツールであり、操作が簡単で動作も軽いことが特徴です。

本記事では、Adobe XDを使ってワイヤーフレームを作成する方法を解説します。

ワイヤーフレームとは

ワイヤーフレームとは、「サイトの設計図」のことです。
Webサイトのコンテンツをどんな順番で、どんなレイアウトで配置するかを示したものであり、ユーザーの利便性を意識した情報配置をするために作成します。

ワイヤーフレームを作ることで、完成後のWebサイトのレイアウトやサイズを把握しやすくなり、チーム内での意見やクライアントの依頼を視覚化できます。

結果、完成後のWebサイトをイメージしつつ、精度の高い作業が可能になるのです。

そんなワイヤーフレームに含める要素には、次のものがあります。

• サイトに掲載するコンテンツ：各図形ツールを使ってボタンなどを作成する
• テキスト・タイトル：テキスト量はレイアウトに関わるので、あらかじめ決めておく
• イメージ画像：実際に使用する画像のほうが完成後のイメージを掴みやすい

ワイヤーフレームを作るための事前準備

ワイヤーフレームは線と枠だけを用いた単純な設計図ですが、必要要素を取捨選択して設計を具体化させなければ、良質なWebサイトの作成は難しくなります。

良質なWebサイトを作るためには、「サイトの目的を達成できる設計」・「ユーザーの利便性を重視した設計」の両方が必要です。
そのため、ワイヤーフレームの作成には、要点を押さえた手順が存在しています。
以下の手順に従って作成すれば、初心者でも情報が整理されたワイヤーフレームを作成できるでしょう。

• コンセプトを明確にする
• サイトマップを作成する
• 必要な情報を整理する
• レイアウト・仕様の決定
• ツールを使って作成
• 第三者にレビューしてもらう

以下では、サイト全体の設計に必要な事前準備について、解説します。

コンセプトを明確にする

まずは、Webサイトのコンセプトを明確にしましょう。

Webサイトのコンセプトは、サイトユーザーに伝えたいこと・やってほしいことなどです。
例えば、ランディングページ、資料請求や問い合わせなどをコンセプトとして作成されています。

コンセプトを明確にすれば、Webサイトの作成目的が明確になり、優先的に配置するコンテンツは何か・どのような導線設計をすべきかなどがわかります。

サイトマップを作成する

サイトマップとは、Webサイトのページ同士の関係性を示す図です。
例えばECサイトでは、商品カテゴリーごとにページが分けられ、そこから機能別などにページが細分化されています。

サイトマップは複数ページを持つWebサイトには欠かせず、必要なページ数やコンテンツを確定させるために使います。

必要なページ・コンテンツが決まっていないままワイヤーフレームを作成すると、後で修正する羽目になるので、必ずサイトマップを作成しましょう。

必要な情報を整理する

ワイヤーフレームに必要な情報を整理することで、優先的に配置する情報とそのボリュームを決められます。

どの情報の優先順位を高くするかは、Webサイトの目的や想定ユーザーから考えましょう。
ユーザーはページを上から下へ見ていく過程で左右の情報も見るので、優先順位の高いものを上へ配置し、順位の同じものを横に並べましょう。

レイアウトや仕様を決定する

情報をどのようにページ内に配置するかを決めるステップです。

レイアウトは一般的に、以下の4つのパターンから選びます。

• シングルカラムレイアウト：縦長にカラム（列）を並べる。ユーザーのストレスが少ない
• マルチカラムレイアウト：左右のどちらかにサイドバーを配置。ユーザーのアクションがスムーズになる
• グリッドレイアウト：同じ大きさの正方形を横に並べる。一度に多くの情報を見せられる
• フルスクリーンレイアウト：スクリーン全体に一枚の画像や動画を表示。強い訴求力がある

レイアウトがなかなか決められない場合は、レイアウトを検索できるサイトなどを参考にしましょう。

また、レイアウトだけではなく、スライド表示やメニューの表示方法などの細かい仕様も決定しましょう。

Adobe XDを使ったワイヤーフレームの作り方

情報整理とレイアウトの決定後は、デザインツールを使用してワイヤーフレームを作成します。
優先順位に従ってレイアウトに沿い、わかりやすく情報を伝えられるかを重視して作りましょう。

ワイヤーフレーム作成におすすめなのが、Adobe XDです。
Adobe XDは、Webサイトのワイヤーフレーム・デザイン作成に特化したツールであり、以下の3つの特徴をもっています。

• 操作が簡単で使いやすい：メニューが簡略化され、必要な機能を直感的に使用しやすい
• 動作が軽い：画像やページを大量に追加しても快適に作業可能
• すぐにデザインを実現できる：会議で決定した仕様をすぐに反映できる

以下では、Adobe XDを使用したワイヤーフレームの作成方法について、解説します。

アートボードを作成する

アートボードは、いわば絵を描くキャンバスに該当するものです。
Adobe XDを起動した直後にアートボード作成画面が表示されます。

自分の作りたいサイトのサイズに合わせてアートボードを作りますが、選択肢にない場合はカスタムサイズに数値を入力しましょう。

ガイド表示・アートボードのサイズ変更

選択ツールでアートボードの左端を選択し、クリック・ドラッグすることでガイド線を表示できます。

アートボードのサイズを変更するには、アートボード選択後に二重丸マークを上下に動かし、調整します。

コンテンツを作成する

基本的に図形を配置することで、ワイヤーフレームの作成を進めていきます。

図形の配置方法は以下のとおりです。

1. 長方形ツールを選択
2. サイズをマウスで調整
3. 図形を編集する

図形の色が表示されている部分を編集するには、次の2つの方法があります。

• サイドメニューでサイズを設定する
• 図形を選択し、メニュー部分の色が表示されている部分を選んで変更
• 図形を選択し、二重丸をドラッグすることで角を丸くする

また、線を引くには線ツールを選んでマウスをドラッグし、線を引きます。
太さはサイドメニューから変更できるので、用途に合わせて使いましょう。

テキストや画像の挿入方法

サイドメニューのTマークを選択すると、テキストを入力できます。
入力したい箇所をマウスでクリックし、任意のテキストを入力しましょう。

完成イメージを高めるために画像を追加したい場合は図形を作成し、そこに任意の画像をドラッグ&ドロップして、図形内に収まった状態で追加できます。

プロトタイプを作成する

プロトタイプとは、ワイヤーフレーム内のボタン等の要素をクリックしてページを遷移できるようにしたものです。
主にチーム内などでWebサイトの完成イメージを高めるために作成されるものです。

Prototypeと書かれたタブをクリックすると、ワイヤーフレームのページ全てが表示されます。
ページ内のボタンなどの要素を選択し、青いアイコンをドラッグし、遷移先のページでボタンを離しましょう。

ワイヤーフレーム内のボタンとページがリンクされます。

URL発行・画像書き出しでデータを共有する

Adobe XDでは、ワイヤーフレームのデータを共有できます。

共有には、以下の2つの方法があります。

• URLを発行する
• 画像に書き出す

URLを発行するには、Adobe XDのShareタブをクリックし、共有画面にしましょう。
リンク設定メニューの表示設定では、デザインレビューを選ぶことでリンクのアクセスを制限できます。リンクを作成をクリックすると、URLが表示されます。

画像に書き出すには、ファイル→書き出し→すべてのアートボードを選び、ファイル形式を選択して保存します。
一部ページのみを書き出すときは、ファイル→書き出し→選択したオブジェクトを選びましょう。

初心者でもクオリティの高いワイヤーフレームを作る方法

「初心者でも、クオリティの高いワイヤーフレームが作れるの？」と疑問に思う人もいるでしょう。

Adobe XDには、画面のレイアウトやSNSアイコンなどのテンプレートが存在しています。
UIキットというテンプレートを使えば、より短時間でワイヤーフレームの作成が可能です。

UIキットの使い方

UIキットは、以下の3つの手順でインストールできます。

1. UIキット配布サイトにアクセス
2. ダウンロードをし、解凍する
3. Adobe XDで解凍後のファイルを開く

UIキットにはWires jpなどがあります。
他にも数多くあるので、検索してみましょう。

プラグインを使い、便利で自分好みの作業環境にできる

Adobe XDは元のままでも利便性の高いツールですが、プラグインという拡張機能を使うことで、より便利なツールとして使えます。

本記事ではビジネスサイト作成を想定し、以下の2つのプラグインをご紹介します。

• Quick Mockup
• Split Rows

Adobe XDにプラグインを追加するには、以下の方法で操作しましょう。

1. プラグイン→プラグインを見つけるを選ぶ
2. プラグインの名前を検索窓に入力して検索
3. インストールボタンを押してインストール

プラグインの使い方を確認していきましょう。

Quick Mockupプラグインの使い方

Quick Mockupは、ワイヤーフレームに使用頻度の高いサンプルを挿入できるプラグインです。
ほとんどのUI要素を作成する必要がないので、作業効率を大幅にアップできます。

Quick Mockupの使い方は、以下のとおりです。

1. サイドメニューのプラグイン一覧からQuick Mockupを選ぶ
2. テーマ一覧や画像・ボタンなどのテンプレートを選択する
3. 挿入された要素をドラッグして移動させる

Split Rowsプラグインの使い方

Split Rowsは、入力したテキストを1行ごとに分割できるプラグインです。

Adobe XDで挿入したテキストは、挿入後にクリックしても一つの塊として扱われ、任意の箇所を変更できません。

しかしSplit Rowsを使えば任意のテキストだけを変更できるので、後からテキストを変える必要が生じたときも対応できます。

Split Rowsも、サイドメニューのプラグイン一覧から選ぶことで使用できます。

まとめ

今回はAdobe XDを使用したワイヤーフレーム作成の方法について、解説しました。

Adobe XDを使えば、より効率的にワイヤーフレームとデザインの作成を進められます。

ぜひ使い方をマスターして、快適にワイヤーフレーム、デザインを作成していきましょう。