Webデザイナーの私が1年以上ワイヤーフレームを使用しなかった理由

多くのWebデザイナーは、Webサイトを作りはじめる前にワイヤーフレームを作成するでしょう。クラインアントに安心感を与えて意思統合をとるため、または、スムーズにデザインできるように。

私がこの記事で提案したいこと、それは、ワイヤーフレームに頼るのはやめにしようということです。

短時間で簡素に作られたワイヤーフレームには、大切な要素が欠落していることがあります。また、ワイヤーフレームありきでデザインしたWebサイトは視覚的魅力も大きく削がれます。
そもそも、サービスや製品を、たった1人のデザイナーが考えた枠組みに沿って作ってしまって良いものでしょうか。

この記事では、ワイヤーフレームを使うべきではない理由と、代わりにやるべき5つの項目をご紹介します。

ワイヤーフレームとは？

ワイヤーフレームは、いわば“Webサイトの設計図”です。
求められるユーザーエクスペリエンスを捉え、ユーザーを導きたいゴールまでのプロセスを明示する必要があります。

UXデザインの重要性については、Emma Drewsが、優れた記事を書いています。

Wireframes by Top UX Designers

なぜ、ワイヤーフレームが機能しないのか？

ワイヤーフレームはクライアントやチームメンバーの同意を得る段階で大きく貢献しますが、その反面デメリットも抱えています。
ひとたび同意を得てしまえば、その仕様から外れるデザインを反映することは難しくなります。きちんと考察せず、作業的にワイヤーフレームを作ってしまった場合、望ましくないものができあがっているでしょう。

また、ワイヤーフレームがあることによってUIデザイナーの役目は大きく減ります。UXデザイナーのスキルがより重要視され、UIデザイナーがデザインする自由度が下がるのです。ワイヤーフレームがデザイン工程を円滑にさせるという考えは正しいといえません。

さらに、その視覚的な魅力は皆無です。ワイヤーフレームに用いられた灰色のボックスは、9割方カラフルな色に変更されるでしょう。
本来、開発の上流工程を合理的にすすめるための方法として生まれたワイヤーフレームですが、実際はデザイナーの問題解決を妨げてているのです。

以下に、ワイヤーフレームを使うべきではない理由をまとめました。

1. ワイヤーフレームは、結果としてサイトやプロダクトの完成品になり変わります。
2. ホワイトボードに描いたものを、デジタル化することは無駄に時間を使います。
3. 見栄えがいいだけのワイヤーフレームでは役に立ちません。
   あなたが無駄な時間と労力を使わないためにも、UXデザイナーにワイヤーフレームの作成を任せた方がいいでしょう。
4. ワイヤーフレームをUXデザイナー1人が作ってしまうと、イノベーションが起こりません。
   また、反映されなかった人たちの意見は、ワイヤーフレームに対しての疑問へと変わります。
5. 解決策が限られます。同意されたワイヤーフレームの中から解決策を探さなければならなくなります。
6. 決まったワイヤーフレームに背くことは、非常に難しいです。

ワイヤフレームに代わる手法とは？

私が提案する解決策は、次の通りです。

1.プロトタイプをつくる

あなたが考えたユーザーエクスペリエンスの全てをマッピングし、プロトタイプで確認します。
また、プロトタイプは紙に書かれたワイヤーフレームより簡単に理解できます。
プロトタイプがデモとして優れている理由についてはedchaoが書いた素晴らしい記事、 Dropbox’s redesignを参照してください。

Influencing redesign

2.ペンとメモでラフを書く

基本に戻ることができます。これをデジタル化すると大変時間がかかるので、スマートフォンで写真を撮り、アートボードの隣に置いてください。

３.共同設計

ユーザーに見せる、デザインを試す、サイトを改善する、ユーザーと会話をする、付箋に書きとめる、良いプロダクトやサービスを見る、など。
共同設計の詳細については、Jenny Arden Airbnbの記事を読んでください。

Co-designing with Hosts at Airbnb

4.仕様書を作成する

ワイヤーフレームの構成要素から、仕様を文章にしてください。
仕様書は、使用方法と機能の仕組み、見出しの語数など、詳細を記録したものです。

5.デザインフレームを作ろう

本記事の内容を踏まえて作られたワイヤーフレームを、私たちは「デザインフレーム」と呼んでいます。
デザインフレームはUXデザイナーとUIデザイナーが協力して、正しいフォントやボタンなどを決めます。

ワイヤーフレームを使用するというアイデア自体は良いものです。しかし、これまでのWebデザインの現場においては、作成したワイヤーフレームの使い方を誤っていました。

最善の策は、ワイヤーフレームをチーム内部でだけ共有することです。
クライアントの同意を得るためではなく、チーム内で思考の記録・共有をするためのツールとして使ってください。

まとめ

私は多くのワイヤーフレームを作りましたが、より良いデザインを実現するための解決策はワイヤーフレームを枠組にとどめておくことです。
コンテンツやインタラクションについては、ワイヤーフレームで決めるのがいいでしょう。しかし、メインビジュアルの写真や絵などのユーザーエクスペリエンスはデザインする必要があります。

良い結果を得るためには、良いユーザーエクスペリエンスを生み出す必要があります。
そのためには、UXデザイナーとUIデザイナーが協力して、問題を解決しなければなりません。

（翻訳：Yuri Tanaka)