Adobe XDを使ったワイヤーフレームの作り方を解説！
2022.04.28
「ワイヤーフレームを作成するには、どんなツールを使えばよいか知りたい」。
「使いやすく、思い通りのデザインができるツールが欲しい」。
と思ったことはあるのではないでしょうか？
本記事では、そういった方を対象に書いています。
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を起動した直後にアートボード作成画面が表示されます。
自分の作りたいサイトのサイズに合わせてアートボードを作りますが、選択肢にない場合はカスタムサイズに数値を入力しましょう。
ガイド表示・アートボードのサイズ変更
選択ツールでアートボードの左端を選択し、クリック・ドラッグすることでガイド線を表示できます。
アートボードのサイズを変更するには、アートボード選択後に二重丸マークを上下に動かし、調整します。
コンテンツを作成する
基本的に図形を配置することで、ワイヤーフレームの作成を進めていきます。
図形の配置方法は以下のとおりです。
- 長方形ツールを選択
- サイズをマウスで調整
- 図形を編集する
図形の色が表示されている部分を編集するには、次の2つの方法があります。
- サイドメニューでサイズを設定する
- 図形を選択し、メニュー部分の色が表示されている部分を選んで変更
- 図形を選択し、二重丸をドラッグすることで角を丸くする
また、線を引くには線ツールを選んでマウスをドラッグし、線を引きます。
太さはサイドメニューから変更できるので、用途に合わせて使いましょう。
テキストや画像の挿入方法
サイドメニューのTマークを選択すると、テキストを入力できます。
入力したい箇所をマウスでクリックし、任意のテキストを入力しましょう。
完成イメージを高めるために画像を追加したい場合は図形を作成し、そこに任意の画像をドラッグ&ドロップして、図形内に収まった状態で追加できます。
プロトタイプを作成する
プロトタイプとは、ワイヤーフレーム内のボタン等の要素をクリックしてページを遷移できるようにしたものです。
主にチーム内などでWebサイトの完成イメージを高めるために作成されるものです。
Prototypeと書かれたタブをクリックすると、ワイヤーフレームのページ全てが表示されます。
ページ内のボタンなどの要素を選択し、青いアイコンをドラッグし、遷移先のページでボタンを離しましょう。
ワイヤーフレーム内のボタンとページがリンクされます。
URL発行・画像書き出しでデータを共有する
Adobe XDでは、ワイヤーフレームのデータを共有できます。
共有には、以下の2つの方法があります。
URLを発行するには、Adobe XDのShareタブをクリックし、共有画面にしましょう。
リンク設定メニューの表示設定では、デザインレビューを選ぶことでリンクのアクセスを制限できます。リンクを作成をクリックすると、URLが表示されます。
画像に書き出すには、ファイル→書き出し→すべてのアートボードを選び、ファイル形式を選択して保存します。
一部ページのみを書き出すときは、ファイル→書き出し→選択したオブジェクトを選びましょう。
初心者でもクオリティの高いワイヤーフレームを作る方法
「初心者でも、クオリティの高いワイヤーフレームが作れるの？」と疑問に思う人もいるでしょう。
Adobe XDには、画面のレイアウトやSNSアイコンなどのテンプレートが存在しています。
UIキットというテンプレートを使えば、より短時間でワイヤーフレームの作成が可能です。
UIキットの使い方
UIキットは、以下の3つの手順でインストールできます。
- UIキット配布サイトにアクセス
- ダウンロードをし、解凍する
- Adobe XDで解凍後のファイルを開く
UIキットにはWires jpなどがあります。
他にも数多くあるので、検索してみましょう。
プラグインを使い、便利で自分好みの作業環境にできる
Adobe XDは元のままでも利便性の高いツールですが、プラグインという拡張機能を使うことで、より便利なツールとして使えます。
本記事ではビジネスサイト作成を想定し、以下の2つのプラグインをご紹介します。
Adobe XDにプラグインを追加するには、以下の方法で操作しましょう。
- プラグイン→プラグインを見つけるを選ぶ
- プラグインの名前を検索窓に入力して検索
- インストールボタンを押してインストール
プラグインの使い方を確認していきましょう。
Quick Mockupプラグインの使い方
Quick Mockupは、ワイヤーフレームに使用頻度の高いサンプルを挿入できるプラグインです。
ほとんどのUI要素を作成する必要がないので、作業効率を大幅にアップできます。
Quick Mockupの使い方は、以下のとおりです。
- サイドメニューのプラグイン一覧からQuick Mockupを選ぶ
- テーマ一覧や画像・ボタンなどのテンプレートを選択する
- 挿入された要素をドラッグして移動させる
Split Rowsプラグインの使い方
Split Rowsは、入力したテキストを1行ごとに分割できるプラグインです。
Adobe XDで挿入したテキストは、挿入後にクリックしても一つの塊として扱われ、任意の箇所を変更できません。
しかしSplit Rowsを使えば任意のテキストだけを変更できるので、後からテキストを変える必要が生じたときも対応できます。
Split Rowsも、サイドメニューのプラグイン一覧から選ぶことで使用できます。
まとめ
今回はAdobe XDを使用したワイヤーフレーム作成の方法について、解説しました。
Adobe XDを使えば、より効率的にワイヤーフレームとデザインの作成を進められます。
ぜひ使い方をマスターして、快適にワイヤーフレーム、デザインを作成していきましょう。
関連
SEO対策コンテンツSEO
SEO基礎SEO対策
Google関連SEO対策
Webサイト制作Webデザイン
