ワイヤーフレームの作り方～基本のWeb知識から作成ツールの紹介まで～

Webディレクターやデザイナーであれば、制作現場においてワイヤーフレームというワードはお馴染みであることと存じます。

端的に述べると、ワイヤーフレームとはWebサイトの方向性を決定づけるのに非常に大切なレイアウト設計図です。プロジェクト全体の成否さえ左右するキーポイントといっても過言ではありません。手練れの職人たちが果たしてどのような姿勢で取り組んでいるのか。特に初心者は気になるはずです。

そういうわけで、本記事ではワイヤーフレームの役割や目的をはじめ、作り方の流れや考え方、便利なツールなどを紹介します。ぜひ、参考にしてみてください。

ワイヤーフレームの役割

ワイヤーフレームの役割は、先述した通りいわばゴールへの道標です。Webサイトに必要なコンテンツを洗い出し、配置を決め、回遊やコンバージョン獲得のシナリオを設計図一つで体系化していきます。

受け取る側に対しての目配りは当然必要です。ワイヤーフレームを具現化する制作スタッフからすると、簡素過ぎては困惑、作りすぎても窮屈、といった状況に堕する恐れがあるため、適度なバランスが求められます。

また、完成形のイメージを把握しておきたいクライアントには、あくまで設計の段階であることをきちんと補足しなければ、認識の齟齬が生まれてしまうでしょう。

ワイヤーフレームと似て非なるもの

初心者が混同しやすいものの一つがサイトマップです。単一ページの画面設計であるワイヤーフレームに対して、サイトマップは、Webサイトに紐づく各ページを含めた全体像を表します。なお、その構成を一覧にしたものがディレクトリマップです。

サイトマップ自体もページ内で伝えるユーザー向けのHTMLサイトマップと、検索エンジン向けのXMLサイトマップに分類されます。知っておいて損はないでしょう。

デザインカンプとの違いについても、理解の曖昧な方が思いのほか多い気がします。デザインカンプは完成図の見本です。写真やイラストを埋め込むところまで行い、わかりやすくビジュアライズされるため、たとえばクライアントに完成形のイメージをよりダイレクトに伝えることができます。

他方、ワイヤーフレームは再三述べている通りWebページの設計図です。大抵は文字と囲い線で作られます。目的はあくまでWebページの骨子の共有です。デザインカンプと比べるとはっきり役割が異なります。

ワイヤーフレームの作り方

ワイヤーフレームを作るにあたっては、いくつかのコツや手順を知っておくとスムーズです。もちろん、Webサイト全体のクオリティーにもつながります。意識一つで上達することもあるでしょう。

以下、ワイヤーフレームの作り方、その方法論を順序立てて解説します。

コンテンツやリソースを整理する

まずはWebサイトに載せるコンテンツやリソース（テキストやロゴ、写真など）を整理することから始めてください。

会社紹介のページなら、社名、ロゴ、所在地、電話番号、沿革、代表者挨拶……等々を洗い出せるはずです。それらを関連性で紐づけグループ化（たとえば住所と電話番号は同一グループ）し、ユーザー目線に立ったうえで訴求したい要素に優先順位を付けましょう。

コンバージョンポイントなども加味しながら、必要に応じてコンテンツやリソースそのものを削ることも大事です。極力コンパクトに整理することをおすすめします。

配置を決めて区画を整理する

Webページに明記する内容の整理に続いては配置決めです。すなわち、Webサイトのレイアウトを構築します。

ワイヤーフレームは画面設計だとお伝えしましたが、どこでどう区切るかは非常に重要なポイントです。もちろん、答えは一つとは限りません。デバイス別に加え、それぞれ何パターンか用意するようにしましょう。

レイアウトのタイプはさまざまです。シングルカラム（一列）か、マルチカラム（複数列）か、カード・タイル型か。コンテンツエリア、サイドバーエリア、それぞれにはどの要素を置くか。

制作するWebサイトの目的やコンセプト、過去のデータに基づいた裏付けなどを踏まえ、最適な区画整理を目指しましょう。

先に手書きで作成する

レイアウトが決まればワイヤーフレームの作成に着手します。ここでおすすめしたいのは手書きでのアプローチです。

とりわけ初心者の場合は、すぐに正式なデータでやり取りすると、一発採用が稀であることも踏まえ、掛けた時間が無駄になりがちです。経験を重ねれば即座に清書化も可能ですが、慣れないうちは、まず紙に書き起こしてみましょう。

正式な資料としてデジタルに落とし込む

クライアントへの提出用、あるいはプロジェクトメンバー全員で共有する正式資料としてデジタルに落とし込む作業も必要です。

見栄えを整えるだけでなく、テンプレートに活用することもできます。作り込みも可能です。とはいえ、凝りすぎるのはあまりおすすめしません。なるべくシンプルに、なおかつ迅速に対応しましょう。

ワイヤーフレーム作成ツールを選ぶ際のポイント

ワイヤーフレームを作成する際、いくつかの共有方法・形式が存在します。デジタル化が主流であることを踏まえたうえで、使えるツールやサービスもさまざまです。

そのなかで、どれを選ぶかのポイントは状況に応じて変わります。以下、まずはおさえておきたい基礎知識です。

インストール型とクラウド型

ワイヤーフレームは、不特定多数の人間が編集することも考慮しなければなりません。

たとえば、オフィスソフトのExcelやPowerPointはいわゆるインストール型です。作業を行う度にローカル環境へ対象ファイルを用意する必要があります。一方、ブラウザなどを介しWeb上で確認や編集ができるGoogleドライブのようなクラウド型のサービスでもワイヤーフレームは作成できます。

考慮すべきは相手にとっての利便性

いくら便利なツールだとしても、利用する人間が使いこなせなければ意味がありません。制作側はITの専門家であるため比較的どのようなツールでも対応できるでしょう。しかし、クライアントだと、どうしても難しいケースが考えられます。

画期的かつ便利なシステムが導入されたからといって、飛びつく人は意外なほどに少ないものです。したがって、相手に合わせたツール選びを心がけましょう。

おすすめのワイヤーフレーム作成ツール

それでは、実際にWebサイトの制作現場で多く使われているワイヤーフレーム制作ツールを紹介します。自身が置かれている環境やクライアントとの共有のしやすさなどを踏まえつつ、これまで使ったことのないものがあれば、ぜひ試してみてはいかがでしょうか。

Excel／PowerPoint

ExcelやPowerPointはビジネスツールとして広く普及されているソフトです。多くの企業で採用されているため、ITにそう精通していないクライアントでも共有しやすいと考えます。

その一方で、表現の幅はどうしても狭くなりがちです。また、共同編集にも不向きだといえます。変更や修正作業は、基本、一人が専従することになるでしょう。

Googleドキュメント／Googleスライド

GoogleドライブのサービスにあるGoogleドキュメントやGoogleスライドでワイヤーフレームを作成する方もいらっしゃいます。

インストール型のオフィスソフトに似たUIでありながら、先述した通り、オンラインで編集可能なクラウド型ツールです。スマートフォンやタブレットなどでも、随時、確認作業を行えます。他方、表現できることはそう多くありません。

Cacoo（カクー）

Cacooはクラウド型の作図ツールです。もちろん、ワイヤーフレーム作成にも向いています。また、ワイヤーフレーム用にテンプレートが用意されている点も魅力的です。

一般的にはあまり知られていないツールのため、人によっては慣れるまで時間が掛かるかもしれませんが、基本的には操作難易度は高くないと考えます。なお、タブレット、スマホでの編集はできません。

Adobe XD

Adobe XDは、まさしくWebサイトやスマホアプリのワイヤーフレームを作るためのツールです。多くのWebディレクター、デザイナーから絶大な支持を得ているといっても過言ではないでしょう。

直感的な操作性、コメント機能など、ありがたい要素がてんこ盛り。外部サイトで配布されているテンプレートも活用しない手はありません。無料で使えるプランもあるため、まだ触れたことのない方ならお試し的に利用してもいいでしょう。

インストール型のツールのため、編集できるのはパソコンのみですが、共有のURLを発行すれば、他の端末でもチェックは可能です。

Sketch

Adobe XD同様、Sketchもまた多くのWebディレクター、デザイナーから重宝されています。Mac専用のためWindowsのマシンでは使用できません。また、メニューが英語表記のため、なかには戸惑う方もいらっしゃるでしょう。それでもシンプルな機能や操作性には定評があります。

インストール型のツールのため作業環境はPCのみですが、アプリを使いスマホで画面を確認することは可能です。

良質なワイヤーフレームを作れるようになる秘訣

Webサイト制作のいわば起点として、ワイヤーフレームは欠かせません。

もちろん、ただ作ればいいわけではなく、担当者は時間短縮、共有しやすい仕組み、伝わる表現等々のポイントを意識する必要があります。拙稿でもお伝えしたように、手書きでアウトラインを固めてから清書化するなど、最初のうちは慎重に進めていくことも大事でしょう。

どのツール、サービスが便利か。関わる人たちにとってもその選択は適切か。こうした問答も咄嗟に整理できることが求められます。慣れないうちは難しいのも確か。だからこそ、まずは基本をおさえ、経験を増やすことが肝要です。そして、なるべく思考する。良質なワイヤーフレームを作れるようになる秘訣があるとするならば、おそらくその積み重ねではないでしょうか。