全員攻撃型デザインのススメ〜Adobe XDでつくるこれからのワイヤーフレーム入門〜【第2回】今すぐパワポとサヨナラできる?! Adobe XDの便利機能5つ

Adobe XDでつくるこれからのワイヤーフレーム入門

はじめまして。ビジネス・アーキテクツ（以下BA）で、アートディレクターをしている山本麻友美です。

連載第2回は、パワポやエクセルでワイヤーフレームを作成する時に「不便だ！面倒くさい！」と感じる部分と、Adobe XDで作るとこんなに「簡単で便利！」という機能を比較しながら、動くワイヤーフレームの作り方をお伝えしようと思います。
今までワイヤーフレームはパワーポイントやエクセルで作ってきたし、「いきなりAdobe XDで作ろう！と言われてもどうやったらいいかわからない・・」そんなあなたに贈ります。

なお、「全員攻撃型デザインのススメ」連載第1回では、今までの動かないワイヤーフレームでのさまざまな問題点と、動くワイヤーフレームのメリットをお伝えしました。（前回のおさらい：【第1回】デザインはワイヤーフレームが8割!?）

※そんなの読まなくても今すぐ動くワイヤーフレーム作りたい！という方は今すぐインストールしましょう！

__
Adobe XD プレビュー版 for Mac
ダウンロード

パワポ・エクセルでワイヤーフレームを作成する時の問題点

元々パワポはプレゼンテーションツール、エクセルは表計算ツールです。それぞれワイヤーフレームを作成するためのツールではないのですが、「支給されたPCに入っていたから・・」「クライアント側でも使ってるツールだから共有も楽だし・・」等の理由で、いろいろ試行錯誤して使ってきた歴史があると思います。でも、こんなことありませんでしたか？

長いページが１画面に収まらない
パーツをきれいに並べられない
同じパーツを繰り返し並べるのに時間がかかる
スマホなのに要素を詰め込みすぎた

パワポもエクセルも、ワイヤーフレーム作成に最適化されたツールではないので、上記のような問題が出てくるのではないかと思います。特にスマホが出てきてから辛くなっていたりしませんか？
そんなさまざまな問題が、Adobe XDを使うと解決できるかもしれません。Adobe XDはWebやモバイルアプリデザインに特化したグラフィックツールです。矩形や画像の貼り付け、テキスト配置などの機能はもちろん、ワイヤーフレーム作成がはかどる優れた機能も提供されています。以下に、Adobe XDを使うと得られるメリットを5つ紹介します。

ワイヤーフレーム作成がはかどるAdobe XDの優れた機能

Adobe XDの便利機能1：スマートガイドでガタガタなワイヤーフレームとさよなら！

パワポやエクセルでワイヤーフレームを作るときに、「ピクセルできれいに揃えるのが難しい」「要素間のマージンがバラバラ」など、作成しながら、もやもやと感じていた部分があったのではないでしょうか。
Adobe XDはスマートガイドがとっても便利。パーツを動かすと、ガイドラインが表示されるのはもちろん、マージンの数値もリアルタイムに表示され、いちいち整列ボタンで揃えなくても、レイアウトをさくさく進めることができます。

ba_vol02_case1-2

Adobe Experience Design (Preview) ヘルプ /
描画ツール / 距離の計測

Adobe XDの便利機能2：リピートグリッドで繰り返しパーツも楽々量産！

ba_vol02_case2 例えば、商品一覧ページのワイヤーフレームを作る場合、画像とテキストをグループ化した商品パネルを作って、ひとつずつコピーして、間隔も均一になるようにいちいち整列して・・・という、とても手間がかかる作業だったと思います。そんな面倒だった作業が、Adobe XDでは、雛形となるひとつの商品パネルだけ作って、右上のリピートグリッドボタンを押すだけ。ハンドル操作で範囲を広げるだけで、同じ要素が均一の間隔で簡単に量産できます。

ba_vol02_case2-2 しかも、改行区切りの文字要素や複数の画像ファイルを、リピートグリッド上にドラッグ＆ドロップするだけで、それぞれのパーツに一気に反映できるのでとっても便利です。

Adobe Experience Design (Preview) ヘルプ /
繰り返しエレメントの作成

Adobe XDの便利機能3：変形自在のアートボードで長いページもさくさく作成！

ba_vol02_case3 パワポやエクセルでは、最初に作ったフォーマットのサイズ変更が難しく、長いページが１画面に収まらないために、折り返したりなどの苦肉の策で作成したこともあったかと思います。
Adobe XDはパワポのように全てのページが同一サイズではなく、サイズを自由に変更できるアートボード上にページを１つずつ作成するので、対象のデバイスの画面や、コンテンツ量に合わせてページ幅を自由に変更することができます。

Adobe Experience Design (Preview) ヘルプ /
アートボードの操作

Adobe XDの便利機能4：画面遷移図とワイヤーフレームの行き来の煩わしさから解放！

ba_vol02_case4 今までワイヤーフレームを作り始める時は、まずサイトマップ（画面リスト）を作りそれぞれにIDを付け、IDに沿って画面分のシートを作る・・という儀式的とも言える作業を行うことが多かったのではないでしょうか。Adobe XDはワイヤーフレームを記述したアートボードをステージ上に自由に配置できます。アートボードのレイアウトを工夫すれば、サイトマップを兼ねる使い方ができ、レスポンシブのワイヤーフレームを作成するときでも、PCとスマホの画面を一緒に並べて管理することもできちゃいます。XDを使うと、「PCの方は反映したけど、スマホを反映し忘れてた！」なんてことが起きにくくなるかもしれませんね。

Adobe Experience Design (Preview) ヘルプ /
インタラクティブプロトタイプの作成

Adobe XDの便利機能5：ワンクリックでかんたん実機確認！

スマホ用のワイヤーフレーム作成って難しいですよね。今まで、こんな経験をしたことありませんでしたか？

確認してみたら、スマホのワイヤーなのに要素詰めすぎて押せないし、文字サイズも小さすぎた
ページ移動したときに同じ位置にボタンがないので使いにくかった
正常時のワイヤーしか作ってなかったから、エラー表示を想定してやり直しになった

Adobe XDで使われる単位はピクセルなので、実際のディスプレイサイズに合わせてワイヤーフレームを作成していくことができます。さらに、プロトタイプモードでは画面間のリンク設定ができ、プレビューボタンですぐに実機確認ができるので、要素の密度感・サイズ感や、ページ遷移時の操作感などを手軽に確認しながら作ることができます。
また、URLを生成して、作成したプロトタイプの制作チームへの共有やクライアントへの共有も容易にできます。

おわりに

連載第2回では、パワポ＆エクセルでの問題点に対して、Adobe XDを使うと解決する具体例をお伝えしました。 Adobe XDはまだMac版しかリリースされていませんが（Windows版のリリース予定あります！）、まだパワポやエクセルでワイヤーフレームを作ってるMacユーザーは、ぜひ一度試してみてください。「こんなにさくさくワイヤーフレームが作れるなんて！」という感動を味わえると思います。
また、Adobe XDはそのままプロトタイプとして実機で確認できるので、動くワイヤーフレームを作れば、プロジェクトが進み切った時に画面に不整合が見つかったり、重要な仕様が漏れていたなんていうリスクを回避するのにも役立つかもしれません。

千里の道も一歩から。とりあえず、Adobe XDをインストールして動くワイヤーフレームの第一歩を踏み出してみましょう！