全員攻撃型デザインのススメ〜Adobe XDでつくるこれからのワイヤーフレーム入門〜【第1回】デザインはワイヤーフレームが8割!?

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

はじめまして。ビジネス・アーキテクツ（以下BA）という会社で、企画からUIデザインまで、浅く広く担当している荒木です。

Adobe Experience Design CC（以下Adobe XD）が発表された当初、個人的には新しいUIデザインツールのβ版として注目していました。ところが、実際に使い始めてみると、これは即戦力の「最強ワイヤーフレーム作成ツール」であると考えるようになりました。実際の仕事でも試験的に導入していますが、BAでの過去のプロジェクトと比較しても、Adobe XDでワイヤーフレームを検討することで、デザインとして考えなければいけないことの8割は完了すると言っても過言ではないレベルです。

そんな時、タイミング良くこの連載のお話を頂いたため、なぜAdobe XDがワイヤーフレーム作成に使えるのか、これから数回に渡って紹介していきたいと思います。
※ そして、この記事を読み飛ばしてでも、今すぐインストール&使ってみることをお勧めします。

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

これまでのワイヤーフレームの問題点

Webサイトやアプリの制作において、避けては通れないのがワイヤーフレーム。これからつくるものが要件を満たし、要素の抜け漏れやユーザーの使い勝手など、構造上の問題がないかを検討するための画面設計図です。これまでBAが扱ったプロジェクトでは、その多くがPowerPointやExcelによって作成され、紙ベースでの確認・承認を経て制作チームに渡される、という流れが一般的でした。

一方で、昨今のユーザー環境やサービスモデルの変化により、ワイヤーフレームに求められる質・量・制作スピードは日に日に高くなっており、既存のワークフローでは問題が発生することも多くなっていると感じます。以下に、よくある問題パターンを2つほど紹介します。

パターン1：デザインや実装を始めると想定外の問題が発覚する

https://blog.adobe.com/media_ef5f5151cb8e3867eb1a52fc05b88e1831dbeea8.gif

ワイヤーフレームを起点にデザインや実装が始まるオーソドックスな進行で発生しやすいパターン。プロジェクトが進むにつれ、似たような画面がいくつも存在し無駄が多いことが発覚したり、ワイヤーフレームの時点では検討が漏れていた要素が発覚。運が良ければ多少の修正で解決することもあるが、その時点では既に根本的解決が難しく、最悪の場合開発スケジュールやコストに影響が出ることも…。

パターン2：意思決定者が、ワイヤーフレームを見ても実はピンときてなかった

https://blog.adobe.com/media_d0737d18aad1a2c37eb1ba6f1778e83a1e156f15.gif

上流工程で紙ベースの検討・承認を進めた結果、いざデザインが出来上がると実は意思決定者が想像していたものと異なり、「ワイヤーフレームで確認したのに…」という声も虚しく、終盤で大幅にやり直すことになる恐怖のちゃぶ台返しパターン。誰しも一度は経験があるのではないでしょうか。

これらの問題は、インタラクティブな機能が前提となった昨今のプロジェクトにおいて、より顕著になってきています。これは、要件やコンセプトを”初めて”画面の形に置き換える「ワイヤーフレーム作成」という作業が、実はUIの骨格を決める上でも非常に重要なフェーズになってきている、ということだと思います。これまでの紙ベースのワイヤーフレームでは十分な検討や合意形成が難しい、という認識を既に持たれている方も多いのではないでしょうか。

ワイヤーフレーム作成はデザインの重要な第一歩

https://blog.adobe.com/media_392377319b73bb1bea98da7e0dc18485ba3f6af7.gif

上記のような問題を回避するため、昨今、早期のプロトタイプ作成による合意形成を推奨する声も増えてきました。しかし、プロトタイプと聞くと、デザイナーやエンジニアのスキルが必要不可欠と思われることが多く（もちろんその方がスムーズに行くことも多々ありますが）、「まずはワイヤーフレームをつくってからプロトタイプについて考えよう」といった進行になりがちです。ですが、安心してください。デザイナーやエンジニアでなくとも、ワイヤーフレーム作成スキルがあれば、十分にプロトタイプはつくれます。

そもそも、ワイヤーフレームは一種のプロトタイプです。機能・UI検討も含むプロダクト全体の設計図であり、その時点で既に「デザイン」は始まっています。しかし、それがディスプレイに表示されるものであるにも関わらず、「紙に印刷された動かないワイヤーフレーム」で検討を進めることで、個別画面での成立に意識が向いてしまい、重要なタスクである「全体を俯瞰した検討」が不十分なまま、「なんとなく収まったので後はデザイナーの腕次第」といった流れになりがちだったように思います。結果的に、最後にバトンを受け取る制作チームの能力にクオリティが大きく依存するワークフローは、先に述べたような様々な問題を引き起こすリスクとなっていました。

この問題はAdobe XDでワイヤーフレームを作成することで、大きく改善することができます。Adobe XDは、「実際の表示サイズ」で、「ページ遷移を含む全体像を動的に」検討出来るツールです。しかも、**簡単にチームと共有して「一緒に検討する」**こともできます。私がこの連載でお伝えしたい「Adobe XDでつくるこれからのワイヤーフレーム」とはつまり、**プロトタイプにもなり得る「動くワイヤーフレーム」のことであり、それをチームで活かす「全員攻撃型のワークフロー」**ということになります。

というわけで、まとめです

https://blog.adobe.com/media_9a586efd9fc5a23d4c1b4df7918c903c08346fc8.gifAdobe XDの操作画面

前置きが長くなりましたが、ここまでの話を簡単にまとめます。

ワイヤーフレームはデザインの第一歩。それ以降の成功を左右する極めて重要なもの
動かない紙のワイヤーフレームでは問題の検討・発見が難しい
Adobe XDなら実際の画面で確認出来る、動くワイヤーフレームが簡単につくれる
チーム内での共有も容易

Adobe XDは、Webサイトやアプリの制作に関わる人なら誰もが利用すべき、新しいデザインツールになると思います（そしてWindows版のリリース予定もあります！）。今回紹介しきれなかった利点もまだまだありますので、次回以降、Adobe XDを使ったワイヤーフレームの作成方法や、それに伴うチームを巻き込んだ活用方法を具体的に紹介していきたいと思います。
※ 再度お伝えしますが、この記事を読み飛ばしてでも、今すぐインストール&使ってみることをお勧めします。