巷で良く聞かれる「UXデザインとは？」意味が広義にわたるため明快に答えることが出来る人はなかなか少ないのではないでしょうか？ただ「ハラハラという会社で提供するUXデザインとは何？」と聞かれたらこう答えると思います。

“ルック＆フィールによって発生する体験の価値をよりよくする為の作業”

UXデザインを正しく運用・開発するためにはIA（情報アーキテクチャ）とそれを実行する手法（ステートメントシート、ペルソナ、カスタマーエクスペリエンスマップ、ワイヤーフレームなど）を組み合わせる必要があります。

今回はそういったツールの中で制作過程におけるレイトステージにおいて弊社で最もハードに使われる「ワイヤーフレーム」と「プロトタイプ」を組み合わせる開発方法を少しだけご紹介いたします(あくまでもアプリの操作法では無くワークフローの一部を抜粋したものになります)

基本的な流れはワイヤーフレーム→プロトタイプの流れで作りますがツールの組み合わせ方は自由です。

1.ワイヤーフレーム(付箋)

写真はドリルダウンで体験するカメラアプリのワイヤーフレームなので直線構造型となっています。

弊社ではSNSやCtoCなどのアプリが多いのでその場合は中央から放射状に広がるハブ＆スポーク型構造を採用することも多いです。スマートフォン画面に類似したサイズ感の付箋に画面の必要要素を書いて並べます。

リンク要素もしっかり入れましょう。付箋ではありますがここでページ遷移をイメージできるインタラクティブなワイヤーができれば後工程はグッと楽になります。

例えば画面遷移が自動で行われる場合は青い付箋、通常の体験フローは赤、共通でSDK(API)などが入る画面は黄色、など使いわけて一連の体験を仮で落とし込んでいきます。絵の上手い下手は関係ないのでご安心を。

ホワイトボートに直接描くよりも付箋の方が入れ替えたりできるので便利です。ページが縦に長い場合は付箋を縦に繋げればこれまた編集が簡単です。

2.ワイヤーフレーム(PowerPoint)

次は先方や開発者にも展開できるワイヤーフレームを作成します。この時重要なのは付箋ワイヤーフレームで不足要素が無かったかを検証しながら作ることです。

弊社は基本ワイヤーフレームをパワーポイントで作成します。ただ、より俯瞰性が必要な場合は次の項で説明するCacooなどを使います。ページの流れが表現できるアプリケーションであればキーノートなど好きなもので良いと思います。

3.ワイヤーフレーム(Cacoo)

この作業は前項で述べたモノと似ていますが大きく違うのが外部要因（サーバーやSDKなど）が入り込むことが多いのでアプリだけでなくその部分との繋がりがわかるように作成する必要があります。

Webで言うサイトマップ上にした方が分かりやすい場合があるので場合によっては高機能なcacooのようなワイヤーフレームサービスをつかった方がいいかもしれません。

この工程のポイントはワイヤーフレームに落とし込む時点で機能を絞り込めれば結果的にプロトタイプの機能を兼ねたモノが出来上がるということです。プロトタイプが不必要にはなりませんがそこの作業で悩む時間は結果減ります。

開発時間を圧縮することはコストカットにも繋がるので併用できるツールを作るつもりで作業した方が良いですね。

4.ペーパープロトタイプ(プロトタイピングパッド&POP)

UIデザインをグラフィックに落とし込む前に手描きで試作品を作ることをペーパープロトタイプと言います。人に見せるとなると少し躊躇しますが後ほど出てくるアプリケーションのPOPなどに落とし込んでしまえば絵の上手い下手では見られにくいのでご安心を。

プロトタイピングパッドはUI Stencilなどで買えますが日本で購入するならTHEGUILDさんの出しているものがイイと思います。

パッドに描き込んだだけでは全体の繋がりや依存関係が把握できないのでPOPなどのアプリを使って描いたプロトタイプを取り込み、各ボタン箇所にホットスポットでリンクを設定することで紙芝居形式で簡易な仮想アプリを作ることができます。

招待制のURLを発行できますのでクライアントにWebブラウザを使って確認してもらうこともできるのでリスクヘッジが出来ることも大きな魅力です。

社内でディスカッションなどする場合は先に付箋ワイヤーフレームを作ることもありますがケースバイケースですね。

5.UIデザイン(Photoshop)

photoshopなどでページ全体のUIのデザインを行います。ポイントはこの後の6の工程に入った時にもう一度この工程に戻ってくること意識して適度にラフに組んでおくことです。

6.ペーパープロトタイプ(Briefs)

一連の作業で一番骨が折れるのですが作ったUIデザインのトーン&マナーがそのアプリの促すべき体験とマッチするかどうかを判断することも含めとても大事な作業なので気が抜けません。

弊社では以前ご紹介したBriefsをメインで使用しています。各ページのリンクやトランジションの表現も豊富なのと依存関係を可視化する機能もついていますので俯瞰と接近の両方でアプリが正しく機能するかをチェックできます。

この工程で根本的なUIデザインのトーン&マナーの改修が入ることは避けたいですが機能させるべき部分に不具合があった場合は5のUIデザインとの工程を何度も行き来して練りあげていきます。

まとめ

それぞれのアプリケーションの使い分けのポイントは大きく分けて2つ「ページの数」と「依存関係の複雑さ」です。ボリュームが増大しページ毎のリンク情報が複雑になる場合は前もって俯瞰できる方法で作業を行う方が良いでしょう。

さて、いかに多くの地味な工程を踏まえてUXデザインが作られていくことがわかるのではないでしょうか？弊社では必ず上記の工程を踏むわけではなく予算や納期などの現実的な制約を鑑みて組み合わせたり割愛したりしています。

これらは成果物で全てを提出することもできますがその場合はご予算との相談になるかと思います。