発注側のためのワイヤーフレーム活用方法
ワイヤーフレームとは、アプリやWEBサイトにおいて、「何を、画面のどこに、どのように表示するか」を視覚的に示した設計図です。
ユーザに届けたい情報を画面内でどのように配置し、メリハリをつけて美しく表示するかを決め、それに従ってコンテンツをはめ込みます。
今回はワイヤーフレームの目的と目的別の作り方、活用方法について解説します。
■ワイヤーフレームを作るのは何のため？
ワイヤーフレームを作るのは、「制作に関わる全ての人が完成品の正確なイメージを共有するため」です。
製作を始める前に完成品の設計図を作り、発注者やデザイナー、開発者などの関係者が共有することで、後戻り工程の発生を抑えてスムーズな進行を支えます。
後戻り工程が発生するのは、概ね発注側からの「追加要望」です。
つまり、製作を進めるうちにクライアント企業の社内から出てくる、「この情報を目立つ位置に置きたい」「もっと○○なイメージにするべきだ」といった要望です。
要望を出した側にとっては「これくらいなら可能じゃないか？」という内容であっても、場合によっては無理難題になってしまいます。全体の再構成が必要な大工事になることもあるでしょう。
このような「困った追加要望」が出てしまう原因は、双方が持つイメージのズレにあります。
製作の早い段階でイメージを正確に共有し、基礎設計をフィックスすることで、イメージのギャップを取り除き、後戻りのリスクを抑えることができます。
■ワイヤーフレームの作り方
-定番の型から選ぶ
WEBサイトやアプリのデザインには、いわゆる「定番の型」があります。まずは定番の型から、イメージに近いものを探しましょう。
・Wireframe Showcase
などの、おしゃれなサイトのワイヤーフレームをまとめたサイトからピックアップしてもいいでしょう。
また、
・WordPress
・Wix
・Jimdo
など、CMSで提供されているデザインテンプレートも参考になります。
「他にはない斬新なデザイン」は、どうしても「見づらく使いにくいデザイン」になりがちです。既存のデザインでは実現できない、どうしてもこだわりたい部分がある場合は、デザイナーとかなり突っ込んだ議論をする必要があるでしょう。
-手書き
原始的な「手書きワイヤーフレーム」が一番わかりやすい場合もあります。
とくにサイトやアプリの規模がそこまで大きくない場合は、デスクに紙を広げてデザインを俯瞰しながらの打ち合わせが最も理解しやすいでしょう。
また、レスポンシブWEBデザイン（PC・タブレット・スマホなど、端末に合わせて自動的にレイアウトを変える）を採用する場合、すべての端末に対するレイアウトを用意する必要があります。それぞれのレイアウトを見比べたいとき、画面の大きさがイメージしやすい手書きワイヤーフレームは理解に役立つでしょう。
ただし、開発規模が大きい場合やインタラクティブな動的コンテンツ（ゲーム性の追加など）を採用したい場合は、紙上での表現は難しくなります。
参考…手書きワイヤーフレーム用PDF「Paper Browser」
-オフィスツール
・Excel
・PowerPoint
など、誰もが知っているオフィスソフトも侮れません。
これらのメリットは「誰もが持っていて、誰でも使える」ことです。
ただし、正確なデザインができるツールではありません。あくまで発注側の意志を伝えるための手段と割りきって、詳細なデザインは発注先のデザイナーに任せましょう。
-ワイヤーフレーム製作ツール
さらに突っ込んで、厳密なデザインをしたい場合は、ワイヤーフレーム製作に特化したツールの利用もおすすめです。
・Cacoo
・iPlotz
・mockingbird
などがおすすめです。初心者向け、デザイナー向け、開発者向けなどそれぞれに特徴があります。
ECサイト向け、スマホアプリ向けなど、上記以外にも多くのツールがリリースされているので、発注先とツールを揃えたり、自分の使いやすいツールを探してみてもいいでしょう。
■どこまで作って、どこから任せるべきか？
便利なツールを使っていると、色やボタンの大きさ、フォントなど、細部を作りこみたくなってしまうことがあります。神は細部に宿るものであるため、ついこだわりたくなってしまうかもしれません。
しかし、色調などの細部は、その分野で研鑽を続けてきたプロのデザイナーに任せるべき部分です。発注側は何よりも、「一番伝えたい情報が何か」をはっきりさせましょう。
その上でワイヤーフレームに合意し、それに基いて製作を進められれば、
社内上層部からの理不尽な要望に振り回され、予想外の後戻り工程で追加費用がかさんで、完成品はなんだか全体的にダサくなってしまった…
などの、ありがちな失敗を避けることができるでしょう。
株式会社キャパでは、アプリの企画・開発についてご相談を承っています。
アプリを作りたいので、具体的な提案が欲しい。頭の中にあるアイデアを本当に実現できるのか知りたい。予算内に収まるのか？
などのお客様のご相談に、親身に応じます。
