いいワイヤーフレームのつくりかた
京都のイノベーションデザインファーム、XIN inc.所属クリエイティブディレクターの岩本です。
大規模サイト中心に、企画や設計、コンセプトメイキング、UI/UXデザインなどに携わっています。
今回は、「ワイヤーフレーム」の良いあり方について考えてみました。
早いもので8年ほどこんな仕事に関わっているのですが、初期段階でどれだけワクワクする絵を描けるかがプロジェクトがどれだけうまくいくかに大きく左右すると感じています。
良いワイヤーは見た瞬間に「良い！」とわかったり、
逆に、出来が良くないと時間をいたずらに浪費することになったり…
自分なりの定義やベストプラクティス的なことをまとめようと思いますので何かの参考になれば幸いです。
そもそも、ワイヤーフレームって？
ワイヤーフレームとはひとことで言えば、「ウェブサイトやアプリケーションのレイアウトを示すシンプルな図」です。
主にページの構造やコンテンツの配置の視覚化を目的とするため、カラーパレットや画像などの詳細は省略し、言葉の強弱や簡単なレイアウトまでを形にします。
初期のアイデアを具体的に視覚化し、チーム全体で共有できることがその最も大きな価値です。
アイデアが実現した際の効果の見込みや、形にしてはじめてわかる問題点などなど、検討の足掛かりとして効果を発揮するものです。
個人的には、ワイヤーフレームができた段階で「これはいい！」と確信を得られないものは、その後検討を重ねてもクオリティが上がりにくいと感じています。
大げさにいえば、初期段階でワイヤーフレームの精度をあげることがプロジェクトの生死を決定づけると思っています。
もちろんブラッシュアップはある前提ですが、後工程に頼らないことが大切です。
⓪コンセプトを立てる
実現したいアイデアや要望があがった際、いきなりデザインを作ることは少ないと思います。
かといって、はじめにワイヤーフレーム制作に着手すれば良いかといえば、そうでもありません。
頭の中で「なんとなくこんな感じかな」と思っていても、実際に手を動かそうとしたら進まなくなってしまうことも多いのではないでしょうか。
そんなときはちょっと遠回りするようですが、実現したいことの整理からはじめるのが良いと思います。
・そもそも、このプロジェクトでは何を実現したいのか？
・実現のために、ユーザーに何をさせたいか？
・この画面の役割は何か？
・ユーザーは何を期待して流入し、何を得るか？
などなど、知っているつもりでも、改めて問いかけると発見があるのではないかと思います。
こういったことを整理すると、自分が作ろうとしているものが「○○を提供 / 実現する□□である」ということ、つまりコンセプトが何であるかを導けます。
コンセプトは単なる格好やプレゼンテーションのためだけでなく、制作プロセスの判断基準になり非常に便利なので、ぜひこのプロセスを踏むようにすると良いかと思います。
①必要最小限の要素で
コンセプトが固まったら、それを実現するための必要最小限の要素を洗い出します。
「必要最小限」というのがミソで、詳細すぎても曖昧すぎてもワイヤーフレームとして機能しません。焦点じゃない部分を作り込みすぎたり、決めるべき部分を決められず後々手戻りが発生したり…
良くないワイヤーフレームはプロジェクト遅延のリスクがあるため、そのような進行はできるだけ避けないといけません。
要点を抑えるためには、「理想の体験を成り立たせる」ことに振ったほうが効率が良いと思います
（仕様的な制約がある場合も多いですが、あとでアジャストする前提です）
たとえば課題が「サービスのオンボーディングが悪い」ということであれば、流入に至る訴求、情報登録のフォーム、チュートリアル、ファーストアクション…といった主要なフローを洗えればまず十分で、それ以外の要素は省き、基本的に一本道にするのがコツだと思っています。
画面ごとにざっくりと要素を配置し、役割分担をさせると全体像が見えやすくなります。
②原稿をすべて書く！
大枠の要素を洗えれば、原稿を書き入れていきます。
ここでのポイントは「原稿をすべて書き切ろう！」ということです。
よくワイヤーフレームのサンプルで「ダミーですダミーですダミーです…」といった原稿を入れているケースがあると思いますが、個人的にはこのやり方は封印しています。
サービスに表れる文言は、超初期段階でもすべて意図をもって書くべし、というのが私のポリシーです。
理由は簡単で、ダミーを入れると結局手戻りになってしまうからです。
そもそもデザインは情報を伝えるためにあり、ビジュアルは重要なファクターですがそのごく一部でしかありません。
つまりデザインにおける情報とはほとんどが「文字」を指します。
「どんな性質の情報が」「どんなトーンで」「どれくらいの量入っているか」といったことを認識できないまま「なんとなくいい感じ」ぐらいで合意をとろうとするのはリスクだと考えています。
仮に原稿がクライアントから提供されるとしても、そのアタリとなる文章をワイヤーフレームから入れておくことを強くおすすめします。
ただし原稿といっても、あくまで最終的に作るのは「ワイヤーフレーム」なので、この段階で強弱やレイアウトも本格的に検討するのが良いと考えています。
進行の都合上、文章が入る"枠"から作ることもありますが、内容を考えてからそれにふさわしい枠を考えるほうが結果的にうまくいくことが多いです。
③課題を洗い出す
何を実現すべきかを整理し、実際に原稿化 / ワイヤーフレーム化できたら、アイデアについて検証するターンに入ります。
そもそもワイヤーフレーム自体がコミュニケーションをとるためのツールという側面を持つので、関係者をなるべく多く巻き込んで検証するのが良いと思います。
・コンセプトを体現できているか
・技術的に実現可能な仕様になっているか
・進行上これから何が必要か
などといった観点でチェックを入れ、関係各所と議論します。
ワイヤーフレーム単体の検証であれば1点目を掘り下げていけば良いのですが、多様なステークホルダーが参加するプロジェクトの場合だとこの段階から懸念や要望があがってくることも多く、議論が散らかることもままあるかと思います。
非常に難度が高いですが、そのような意見があがることも想定に入れ、2点目3点目のようなポイントも事前に洗っておくといくらか整理がつきやすいです。
もちろん、ワイヤーフレームだけでは解決できない / 検証できない 話題もあると思われるので、そのことはきちんと切り分け、別の箇所で扱うといったハンドリングも必要です。
…この段階まで進めばアイデアはかなり具体性が上がっているのではないかと思います。
何度かキャッチボールを繰り返し、「ワイヤーで何が決まり、何が決まっていないか」までを明確化できれば、晴れて「いいワイヤーフレーム」の完成となります！
④おまけ：キービジュアルも考えよう
ここまでつらつらとワイヤーフレームの存在意義について語ってきましたが、「やっぱりそれではイメージつかない！」「テンションあがらない！」というときもあると思います。
（論理的に成り立っているし関係各所と合意はとれているが、決裁者のゴーサインが出ない…….といったシーンはよくあるのではないでしょうか）
そんなときは、グッとくるキービジュアルを沿えるのがおすすめです。
もちろんこの段階で自力で作る必要はありません。素晴らしいサービスの切り貼りでも十分ですし、場合によっては切り貼りですらなくても大丈夫だと思います。
重要なのは、右脳に訴えかける情報を付け加えることです。
（したがって、URLを張り付けるだけ、などはNGです）
「グッとくるキービジュアル」と「スキのないワイヤーフレーム」の合わせ技でプロジェクトの初期に一気にドライブをかけるのがおすすめです。
--
最後まで読んでいただきありがとうございます！
みなさんが「いいワイヤーフレーム」を作るために、この記事が少しでも助けになれれば幸いです。