IAできるかな第6話：ワイヤーフレームとプロトタイプの違い、……から始まるエトセトラ（前編） - MGAスタッフブログMGAスタッフブログ

気付いたら沢山出てますね。

インフォメーションアーキテクトの宮内です。

比較的当たり障りの無い感じの記事で、2ヶ月近く先延ばしにしていた「IAできるかな」第6話目です。
ちなみにここ2ヶ月の当たり障りのない記事リストはこちらです。

この辺りの記事もお手すきの際にチェックしてもらいつつ、
今回も「自分なりの」IA周辺をいろいろと考えていきたいと思います。

「手書きのワイヤーフレーム」だけど「ペーパープロトタイプ」ではない？

今回の記事を書くにあたって、前回の記事を読み返していたんですが、1つ気がついたことがありました。

記事の最後で、手書きのワイヤーフレームの話をしたのですが、これって「ペーパープロトタイプ」って表記しなかったのだろうと。むしろ「ペーパープロトタイプ」の方が馴染みがある人の方が多いような気もします。

……で、2ヶ月前の自分がなぜ「ペーパープロトタイプ」と書かなかったのか、いろいろと考えてみました。
理由はすぐに分かりました。

ワイヤーフレームーとプロトタイプは何が違う？

プロトタイプについて、書籍『IAシンキング』ではこう定義されています。

• プロトタイピング(試作品)は「2枚以上あって、相互に行き来が可能なもの」
• ペーパープロトタイプのように、実際の画面の遷移・操作を表現/検証できる状態のものを指す

そう、前回自分が例に挙げていた「手書きのワイヤーフレーム」は画面上に必要な要素とそのプライオリティを反映・検証するためのもので、画面の遷移や操作を検証する、……にまでは至っていないため、「ペーパープロトタイプ」とは呼ばずに「手書きのワイヤーフレーム」と表記していたのでした。……たぶん。

前述のプロトタイピングは、Webサービス等の機能や画面の変化・遷移の検証に有効だと思う一方、企業サイトといった静的なコンテンツではあまり採用しない印象が強いです。
機能や遷移が複雑なサービスにくらべ、画面上の変化が単純である程度想像しやすい（サイトマップ等を併用することで補完できる？）のがその要因かもしれません。

弊社ではWebサービスの開発は行っていないため、「手書きのワイヤーフレーム」＋αで十分ではあったのですが、ここ最近IAやHCD等々とは違う方面からプロトタイプ、プロトタイピングという言葉を耳にする機会が増えてきました。

レスポンシブWebデザインとプロトタイピング

そう、弊社内では「レスポンシブルWebデザイン」とか「レスポンシブデザイン」とか「レスポンシブでー」とか言うと宮内がキレ気味注意してくることでお馴染みの「レスポンシブWebデザイン」（以下RWD）の影響で、「プロトタイプ」を良くみるようになりました。

弊社の本棚にRWD関連の書籍が、既に4冊程あるのですが、どれもプロトタイプを使った制作を強く勧めています。

ここで言う「プロトタイプ」の目的は画面の遷移・操作の検証、という側面もあるのですが、特に「画面の解像度によって表示を変化することの検証」…という側面が大きく、事前にプロトタイプを制作し、意図したレイアウトの変化や動きの実装が可能か予め検証するという目的があります。また、実際のレイアウトの変化をクライアントに確認してもらい、実装のイメージを共有するという目的もあると思います。

また、RWDのような柔軟なレイアウトを採用する際、画面毎にデザインカンプを用意するにはコストが掛かり過ぎますし、”Desiging in the browser”と呼ばれるような直接プロトタイプのソースをいじりながらデザインを固めていく手法に移行する方が効率が良くかつ現実的な判断という側面もあります。

実装の検証と効率化の側面から、これまで馴染みの無かった現場にもプロトタイピングは徐々に広がりつつ、……あるのかもしれません。（実際のところは良く分かりませんが…）

ワイヤーにする？プロトタイプにする？それとも…

……で長々と書きましたが、こういった流れの中、ワイヤーフレームってどう位置づけたらよいのでしょうか？

少なくとも、きっちりとワイヤーを組んでいくよりも、柔軟に対応できるものに移行する必要がありそうです。個人的には、前回の最後に触れたような、

デザイナーやディレクター等々も交えて、その画面上に必要であろう要素を付箋に書き出す
ヘッダー・コンテンツ・フッターの枠だけ書いた紙の上に、それらの要素が必要であろうエリアにペタペタ貼っていく
要素に不足が無いか、不要な要素は無いか、どの要素がこの画面の中で重要なのか、議論しながら付箋に書いたり貼ったりする
要素とそのプライオリティがある程度見えてきたところで、その紙に直接手書きでワイヤーを書いてみる
手書きのワイヤーを使って、さらに詳細を（手書きで）検討する
ある程度まとまったら、それをスマートフォンで写真を撮ってひとまず完了

といったところまで「手書きのワイヤー上で」ざっくりと検討・検証し、方向性を固め、そこからプロトタイプ制作に移る流れが良いのかなとぼんやり考えています。

では、具体的にどのように作っていくのか……、

については、具体的な試みも踏まえつつ、また改めて考えてみたいと思います。（つづく）