私は、UXデザインアプリケーションであるUXPinのCEOであるMarcin Trederです。そして、ベテランのUXデザイナー兼UXチームのマネージャーでもあります。
みなさんにワイヤーフレーミングとデザインドキュメントの作成をご覧いただけることを大変嬉しく思います。毎日の仕事をより簡単にするための応用テクニックをみなさんが楽しんで学習することを願っています。
この記事では、ワイヤーフレームの作成方法やデザインドキュメントの作成方法を紹介します。私自身の経験を踏まえたヒントをお伝えすると同時に、私が犯した重大なミスをみなさんは避けられることを期待しています。
記事は実践向けに作成されています。なので、少しのデザイン哲学と多くの実話を期待していてください。
すべてのデザインドキュメントの事例は、UXPinによって作成されています。
ワイヤーフレーム、プロトタイプ、モックアップの違い
数年前、多くのデザイナーではないIT関連の友人が、同じデザイン成果物を異なる名称で呼んでいることに気が付きました。彼らは、ワイヤーフレームとプロトタイプ、モックアップが完全に同じものだと思っていたのです。
ワイヤーフレームとプロトタイプ、モックアップを同一のものとしてしまうと、UXデザイナーからの成果物に期待すべきことが一切わからず、混乱を招いてしまいます。「なぜこれはクリックできないのですか？」「ここをクリックするとは知らなかったので……。」といったコメントをUXデザインプロジェクトでは頻繁に耳にします。
ワイヤーフレームをプロトタイプと混同しているということは、建築の青写真（建築計画）とモデルハウスが同じものだと思い込んでいるようなものです。
みなさんはモデルハウスに住もうとするかもしれません。しかし、ただの紙である青写真では快適な滞在を期待することはできません。
モデルハウスと青写真は、建築における異なるコミュニケーション手段です。
- 青写真は、建築計画として用いられ、建物がどのように建てられるべきかを詳細に記述したものです。
- モデルハウスは、未来の住人のためのお試しを提供します。
同じような違いがワイヤーフレームとプロトタイプ、モックアップに適用できます。これらは見た目が違い、異なることを伝達し、異なる目的を果たすのです。
しかし、モデルハウスと青写真には共通点があります。どちらも完成品である実際の家を表します。同じように、ワイヤーフレームとプロトタイプ、モックアップにはまったく同じ共通の性質があります。これらすべてのドキュメントは、完成品を示しているのです。
まさかと思うでしょうが、プロトタイプとワイヤーフレーム、モックアップ間の違いは、私が自分のUXデザインチームのメンバーに必ず最初に教えることです。
そう、非常に重要なのです。
ワイヤーフレームとプロトタイプ、モックアップの詳細について検討してみましょう。そうすればみなさんも、特定の状況で何を使うかというアイデアを把握することができるでしょう。
ワイヤーフレーム
ワイヤーフレームとは、低忠実度なデザインの表現です。以下を見ればわかりやすいでしょう。
- コンテンツのメイングループ（何を？）
- 情報の構造（どこで？）
- UIにおけるインタラクションの説明と視覚化（どのように？）
ワイヤーフレームは、ただの意味のないグレーの箱の組み合わせに見えますが、そうではありません。デザインの骨組みだと考えてください。そして、ワイヤーフレームは完成品におけるすべての重要な要素を表す必要があることを覚えておいてください。
「表現」はここで重要な単語であり、適切な忠実度、つまりスピードバランスを見つけるのに役立つでしょう。詳細にこだわりすぎてはいけませんが、その一方ですべての重要な項目を含め、最終デザインを表すものを作成する必要があります。プロジェクト全体のため、そして共に働く開発者やビジュアルデザイナー、コピーライター、プロジェクトマネジャーなど、優れたワイヤーフレームを必要とする人々のために、道を作っているのです。
実際に、これは都市の地図を作るのと同じです。すべての道がマップに記載されているものの、大幅に簡略化されています。地図を見ることで都市構造は理解できますが、その都市の美しさを感じることはできません。
ワイヤーフレームは素早く作られるべきであり、ほぼすべての時間はチームメンバーとのコミュニケーションや、考えるために費やすべきです。ワイヤーフレーム作成の作業は大急ぎで行わなければなりません。
視覚化は見た目が美しくなければなりませんが、ワイヤーフレームは大幅に簡略化したものです。白、黒、グレーが主に使われています（リンク部分に青を使うこともあります）。
もしアイコンの選択や画像のアップロードなどに時間がかかりすぎるようであれば、画像部分に四角い図形を用い、適切な説明を付けたプレースホルダーを使用するなど、より簡易化した方法で表現する必要があります。私たちは、ワイヤーフレームを低忠実度の成果物と呼びます。
優れたワイヤーフレームは明白な方法でデザインを伝え、チーム全体に道を作り出すということを覚えておいてください。
ワイヤーフレームを使うタイミング
ワイヤーフレームはプロジェクトのドキュメントとして使われます。ワイヤーフレームは静的であり、特定の時点におけるインターフェースとのインタラクションを決めているため、言葉で補う必要があります。インタラクションを説明するちょっとしたメモや、必要であれば複雑な技術資料などが当てはまります。
しかしながら、ワイヤーフレームはもう少し気軽に使うこともできます。時間がかからずシンプルな形式であるため、チーム内での内部コミュニケーションのためのわかりやすい下絵としても用いることができます。もし開発者からどのようにすればいいのかという質問がきたら、短時間で作成したワイヤーフレームで回答することができます。
次のことを考慮してください。UXPinは、数日ごとにリリースを繰り返す開発サイクルの短いスタートアップです。私たちはタスクを簡単に視覚化するために、たとえ規模の小さいものでもワイヤーフレームを使います。誤解をなくすことができ、そして安価だからです。
ワイヤーフレームは試験材料としてはほとんど使われません。しかし、初期段階におけるゲリラ型の調査でフィードバックを集めるのには役立つかもしれません。つまり、方法論的な純度をあまり気にせず、素早く知見を得たい場合です。
デザインストーリー全体のコンテキストの中に置かれるワイヤーフレームは、近年悪評を受けているものの、驚くほど効果的に用いることもできます。ワイヤーフレームはやはり、複雑なプロジェクトの初期段階として不可欠なのです。
プロトタイプ
プロトタイプはワイヤーフレームと混同されがちですが、完成品の忠実度が中～高なものです。プロトタイプはUIのインタラクションをシミュレーションします。ユーザーは以下のことが実行可能になります。
- コンテンツの体験とインターフェースとのインタラクション
- 完成品と似た方法で主なインタラクションをテストする
プロトタイプは、ユーザーとインターフェース間の最終的なインタラクションのシミュレーションです。完成品とまったく同じではないかもしれませんが、大部分で似ている必要があります（グレーがかった大ざっぱなものでないことは確かです）。インタラクションは最終的な体験とかなり似たものでなければなりません。インターフェースとバックエンドのメカニズムの相互依存関係は、コスト削減と開発サイクルの促進のために省略されることが多いです。
プロトタイプを使うタイミング
プロトタイプはユーザーテストで最大限の可能性を発揮します。最終的なインタラクションのシミュレーションは、開発が実際に始まる前にインターフェースのユーザビリティを確認するのに、最適な素材です。
プロトタイプは通常、想像しやすいドキュメントではありません。なぜなら、インターフェースを理解するための、ある程度の努力を「読み手」に強いるからです。その一方で、インターフェースが具体的でわかりやすいため、デザインドキュメントにおいてもっとも人を引きつけるフォームでもあります。
プロトタイプ作成はデザインコミュニケーションの中でも、比較的高価で時間のかかるものだということを覚えておいてください。私は、開発において再利用できるプロトタイプの作成をおすすめします（そのために、HTMLやCSS、そしてJavaScriptを自分自身でコーディングしなければいけません）。比較的単純なプロジェクトにおいて、特に効果を発揮します。
適切に作成してユーザーテストと組み合わせることで、プロトタイプ作成の効果を感じられるでしょう。
モックアップ
モックアップとは、忠実度が中～高程度の、静的なデザイン表現物です。多くの場合モックアップは、ビジュアルデザインの設計図や、実際のビジュアルデザインを指します。良くできているモックアップとは、以下のようなものです。
- 情報構造を表し、コンテンツを視覚化して基本的な機能を静的な方法で示している
- プロジェクトのビジュアルを実際にレビューするよう促す
モックアップは、とあるソフトウェア会社の名前のせいで、ワイヤーフレームと混同されることが良くあります。
モックアップを使うタイミング
モックアップは、ステークホルダーから早い段階で同意を得たい場合に役立ちます。 モックアップはその視覚的な特徴のおかげで、忠実度が低い成果物というような抵抗感がなく、プロトタイプよりも素早く作成することができます。フィードバックを集めるのに優れており、もし全体的なデザインストーリーのコンテキスト内に配置するのであれば、とても優れたドキュメントの一部となり得るでしょう。
まとめ
どこから始めればいいか
デザインプロセスにおける伝達手段を選ぶ前に、以下のことをする必要があります。
- 解決しようとしている問題の特定
- ターゲットグループの調査
- 競合他社がその領域で行っていることの確認
- 全体的な製品要求の設定
これが最低条件です。そこから、どの成果物があなたにとってもっとも適切かを考えてください。あなたの製品とチームを考えてみてください。すべてにとって最適なものは何でしょうか？ 公式的なドキュメントか、あるいは非公式の簡単なスケッチと対面での議論でしょうか？ また、しっかりしたユーザー調査を行う時間とお金がありますか、それとも単純に地元のカフェに行き、数人の潜在顧客にスケッチを見せますか。
あなたにはどのようなスキルがありますか？ コーディングはできますか？
自分自身について見直してみることで、適切な成果物を選ぶ過程を通して、チームとプロジェクトがあなたを導いてくれるでしょう。
もちろん、すべての成果物を作成することも可能であり、多くの場合そうするでしょう。このステップを行うことを、不安に思わないでください。ワイヤーフレーム、プロトタイプ、モックアップのすべてには意味があり、適切に作成すれば素晴らしいデザインに近づけるはずです。
このコースでは、低忠実度の成果物の作成と、その成果物に基づいた一貫性のあるデザインドキュメントの作成に焦点を当てていきます。
