harahara

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

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

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

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

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

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

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

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

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

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

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

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

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

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

続きは、以下よりご覧ください。
harahara