ワイヤフレームは設計で重要。
問題解決できる事がおおいです。
Takumaです。
　

【解決】

１ 問題のある事柄や、ごたごたした事件などを、うまく処理すること。また、かたづくこと。「紛争を―する」
２ 疑問のあるところを解きほぐして、納得のいくようにすること。また、納得のいくようになること。「疑問が―する」(by Yahoo！辞書)

8月頭に、ユーザーニーズから設計方針を策定するという内容の記事を書きました。

▼takumart.net「WEB広告と来訪者ニーズの合致エリア」▼
http://www.takumart.net/wordpress/archives/869

幾つか、設計関連のネタが集まってきたのでまた、まとめでもしようかとｗ
新規開発の設計でも、リニューアルや改善の設計でも、なにかしらの目的があってそれらを行います。

今回は、具体的な問題名(定義タイプ)と、それらの解決と相性がいいと考えるワイヤーアウトプットタイプを合わせてご紹介しようと思います。

■コンテンツブロック型■■■■■■■■■■■■■■■■■■■■■■■■

▼ポイント

○：おおまかなブロックで枠組みする(詳細内容は記載しない)ので紙でもできる。
○：個別案件の内容の影響が少ないため、ソフトウェアでも制作可能。
×：具体性のある情報は少ない為、情報共有が困難。

俗に言う、ラフ設計にあたるのがコレでしょうか。簡単に作れるので詳細な情報が集まっていない制作初期からでも制作可能です。
アイデアベースで素早く制作でき、ブレストなどのたたき台とかにはもってこいですね。

しかし、詳細なツメは当然ながら向いていないので実際の開発には、ここから目的別にワイヤーを作りこんでいくと思います。

▼Takumaの経験としては

・設計領域でアシスタントがついている際には解説がてらコレを行います。
(自分オンリーの場合は競合サイトのキャプチャ後、設計に入っちゃいますが)

■ディテール型■■■■■■■■■■■■■■■■■■■■■■■■■■■■

▼ポイント

○：UI 要素や情報をなるべく完成品に近い形にするワイヤーフレーム。
○：完成品の形やアイデアを共有しやすい。
×：全体像に関するディスカッションになりにくい。

詳細ワイヤーというか完成形がこれでしょうか。
細かい要素を時間がかかるものの記載することで、各ページ間やコンテンツ間での導線矛盾がワイヤーの段階で分かりやすくなります。
加えて、ワイヤーで多くの問題解決が可能なためデザインPHでの負担もすくなくなります。

▼Takumaの経験としては

・基本的には全てコレを完成系とします。
(導線関連のないように関しては、補足資料や別途資料を用意します。)

▼親和性の高い問題解決アプローチ

●主要操作の明瞭化
⇒なにが主目的の操作であるかを明示的にわかるようにする。たとえば主要操作のボタンは背景色と比較して映えるものにし、主要操作以外のボタンは背景色に似せた色にして目立たないようにする。
実際には、デザインPHの作業と思うかもしれませんが、ワイヤーの時点でユーザー訴求のパワーバランスを考慮するのは大切です。

●ブレッドクラム
⇒ブレッドスクラムはたとえばAppleのサイトに見られるような、そのページへの階層構造を指し示すUIで、「HOME ＞ Shop Mac ＞ MacBook Pro ＞ Configure」のような表示になっている。ユーザがそのページがどこに位置しているのかを把握しやすくなる。
つまりは「パンくずナビ」に代表されるインターフェースパーツですね。

■ストーリー型■■■■■■■■■■■■■■■■■■■■■■■■■■■■

▼ポイント

○：タスク設定をした上で、開始から達成までの流れが分かりやすい。
○：ページ間での導線の関係性が分かりやすい。
○：コンバージョン目的で、ある導線上ページ全体での検証がしやすい。
×：複数の機能や誘導先がある場合は混乱を招く。

サイトマップと各ページ詳細設計の中間のものですね。
ページの詳細文言や昨日は簡略しても、導線要素は配置しているニュアンスですね。

それらのページが、あるコンバージョンに即したページ遷移で並んでいるので、ツリー上では導線の流れが不明瞭な場合やチームの理解を向上させる際にはよい手法です。
しかし、複数のコンバージョンシナリオの連携や拡張性を表現する場合には、これだけでは不十分な場合があるかと思います。

▼Takumaの経験としては

・提案中期で、サイト構造を複数パターン提示する際に利用。
・ターゲットユーザー毎のペルソナを仮定した導線設計で利用。
・ECや決済系のシステムページの導線設計でも利用。

▼親和性の高い問題解決アプローチ

●遅延レジストレーション
⇒ユーザ登録なしでも商品の閲覧やカートへの追加ができて、支払いの段階ではじめてユーザ登録を要求する。
サービス利用での初期障壁をなくし、購入モチベーションがあがったところでユーザーの心理負担の大きい行動を要求する。

●プログレッシブディスクロージャ
⇒その時ユーザが必要としている情報だけを表示し、それ以外の必要がない情報は表示しない。
フォーム入力等のユーザーの心理負担を少なくして、ページを分けることで負担分散をする手法。
ステップで入力したデータや作業した内容はつねに見れるようにしておき、あとから変更できるようにする。

●ステップレフト
⇒複数のステップで作業を進める場合、現在のアクションが全アクションのどこにいるのかがわかるようにする。たとえばページの上部に「1 登録 → 2 選択 → 3 申し込み」のようなプログレスを表示しておき、そのページのところだけを色を強調してどの段階にいるのかをわかるようにする。
よりひとつのライン上でタスクを完了して欲しい場合に、ユーザーの心理負荷/不安を和らげる効果があるアプローチです。

■コラボレーション型■■■■■■■■■■■■■■■■■■■■■■■■■

▼ポイント

○：自由にコンテンツブロックや UI 要素を動かせる。
○：会議や会話で出て来たアイデアを形にしやすい。
×：長期保管には向かない為、完成品を作る必要がある。

代表とされるツール例として以下がありますが、
・Post-It Note(付箋)
・UIマグネット(外部サイト)
その場でサイト構成要素を動かせるのが利点の手法です。

▼Takumaの経験としては

・利用機会自体は会議の場合のみですね。リテラシーが低い人との修正イメージの共有に使ったことがあります。
(※大抵の場合はデスク上で完成させて、提案資料としてまとめてしまうので・・・)

▼親和性の高い問題解決アプローチ

●寛大なフォーマット
⇒例として、検索機能にさまざまな入力フォームやチェックオプションを用意するのではなく、ひとつの入力フォームだけを用意して、あとはバックエンドシステムの方が入力されたキーワードから内容を推察して動作する。
そんな、たくさんのオプションや入力フォームを用意するのとくらべてUIがすっきりさせる等のインターフェースの工夫です。
(※開発の際にはバックエンドシステムの開発は大変なものになりますが)

●サブスクリプションプラン
複数の月次サービスがある場合の掲載パターン。だいたいプラン名、価格、使える機能、申し込みボタンをそれぞれ表にまとめて一瞥してわかるようにしておく。サブスクリプションは順序(たとえば金額順)ごとに記載する。
つまりは、販売企画等とのコンテンツの連携性が必要なので会議の場なのでこのワイヤー手法は有効だと思います。

■半プロトタイプ型■■■■■■■■■■■■■■■■■■■■■■■■■■

▼ポイント

○：クリック、ポップアップ、表示・非表示といったウェブサイトにあるインタラクションが盛り込まれている。
○：具体的なサイト稼動イメージがわきやすい。
○：完成品に近い使い心地を再現することが出来る。
×：共有する手段が限定される可能性がある。
×：制作時間が多くかかりやすい。

ウィジェット等のアプリでの作成がベースになるでしょうか。

例として動画つきの解説サイトですが、
・リッチインタラクション(外部サイト)

分かりやすいく、インタラクティブに特化しているWEBという媒体では非常に有効な手段だと思いますが、閲覧環境を選ぶのが弱点でしょうか。

このような専門ソフトを使わなくても、グラフィック系ソフトでワイヤーを起こしてラフデザインとしてしまう手法もあります。
・インタラクティブプロダクトのデザインにこそFireworksを(外部サイト)

▼Takumaの経験としては

・ラフデザインやワイヤー画像をHTMLのイメージマップでリンク要素を埋め込んでレビュー。
それ以外は、あんまりやった事がないですね。
(具体的な導線シナリオとデザインは切り離して進めるほうが経験上プロジェクトはスムーズにいくものでｗ)

▼親和性の高い問題解決アプローチ

●アカウントレジストレーション
⇒アカウント登録してパーソナルデータを保持することで、そのユーザに適したコンテンツを提供する。たとえばオンラインショッピングであれば、過去のショッピングデータを保持しておいて、そのユーザが好むと推測されるショッピングデータを掲示するといったもの。
つまりは、リコメンドに代表されるコンシェルジュ的アプローチですね。amazonが代表的ですが、ユーザーにメリットを十分に理解してもらえないと使われないままですので。登録することでユーザにどういったメリットがあるかをすべて紹介することで、ユーザがアカウント登録したいとおもうようにすることが大切。

●入力必須フィールド
⇒入力フォームがいくつかある場合、「入力必須」といった指定をつけてどのフィールドは値を入力しなければいけないかを明示する。こうすることでユーザはすべてのフィールドに値を入力する必要がなくなる。できればオプションのフィールドは表示しないようにして、必要なフィールドだけを表示するようにした方がいい。

●ホバーコントロール
⇒多くの情報を掲示しなければならない場合では、ページが煩雑になりがち。こういったケースでは、表示するデータは隠蔽しておき、マウスが対象の要素の上にきた場合にホバー表示させるといったことで回避することもできる。

■まとめ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

「半プロトタイプ型」以外に関しては、提案時も含めると大体やってました。
主にツールとしてはofficeツールがメインですが、経験上ワイヤー作成時にはスピードが要求されます。

提案スケジュールや開発スケジュールの中で、全てやらなくても「どんな問題があって」「どんな改善アプローチ」が必要カによって、ワイヤーの手法を変えるのは非常に賢い方法だと思います。
ちなみに、Takumaの場合にワイヤーで問題可決しているタスクに関しては以下参照。

▼takumart.net「WEB開発のプロジェクトワークフロー」▼
http://www.takumart.net/wordpress/archives/830

ワイヤーができる事の多さを痛感した今日この頃です。

■参考文献■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

▼ワイヤーフレーム制作の５つのアプローチ▼
http://www.yasuhisa.com/could/article/5-approaches-of-wireframes/

▼知っておきたいUIデザインパターン10選▼
http://journal.mycom.co.jp/news/2009/06/25/034/index.html

■P.S:今日の気になったサイト■■■■■■■■■■■■■■■■■■■■■

▼資生堂　マキアージュ | MAQuillAGE Express▼
http://www.shiseido.co.jp/mq/express/

●んで、一言
レトロアメリカ風なイメージで英語新聞タッチにしあげられたデザイン。
これだけだと、デザインがカッコイイだけなのですが、それだけでない！！

ロールオーバーすると、その領域の記事が「日本語表記になる！！」
セカンド以降に関しては、特に革新的なアプローチがあにものの、これだけで「すげえ」と思ったりｗ

全体的にカッコイイので一見してはいかが？

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■