Web制作者必見！ワイヤーフレームの基本講座
WEB制作
2015.09.11
確認！ワイヤーフレームとは？
ワイヤーフレームは、WEBページのおおまかなコンテンツを書き示す「レイアウト図」の呼称です。
WEB制作の設計段階で作るワイヤーフレームは、実際にWEB制作を行うWEBデザイナーへの指示や、制作依頼をしているお客様との打合せに使われる設計図となっています。
またワイヤーフレームがあることで「自分達が作るページのイメージが明確になる」という利点もありますので、意識合わせやコミュニケーションツールとしても活用できる図面と言えるでしょう。
なぜワイヤーフレームを作るのでしょうか？
ワイヤーフレームを作っているプロジェクトチームでは、「何を、どこに、どんな形で」というイメージが固まっているため、打合せや制作がスムーズに進む傾向があります。
またワイヤーフレームを作っておけば、「ここはどういう機能ですか？」という問い合わせにも対応しやすくなりますので、まだWEBページが完成していない段階でも、ユーザと制作側の認識が合わせやすくなると言えるでしょう。
スピード重視で制作を進めるアジャイル開発であっても、最初にワイヤーフレームを作成しておいた方が、「意識のズレ」が少なくなります。
ワイヤーフレームのあるWEBサイトは、サイトのリプレースもしやすくなりますので、将来的なことを考えて、「制作が終わってもワイヤーフレームを資料として残しておく」というのもプロジェクトとして必要なことであると言えそうです。
ワイヤーフレームはどんな流れで作るのでしょうか？
ワイヤーフレームを作る際には、「サイトに掲載する情報の整理」から作業がスタートします。
「何を掲載したいのか？」という部分を洗い出せない限りは、「どこに掲載するのか？」というレイアウトの部分が確定しないため、まずは必要な情報を集めて要件定義を行うようにしてください。
収集した情報は同じジャンルで「グルーピング」をすると、サイトマップも作りやすくなります。
またレイアウトについては、シングルページ、フルスクリーン、マルチカラムなどの種類がありますので、実際に収集した情報量と「見やすさ」などから検討していくと良いでしょう。
レイアウトが決まったら、紙と鉛筆を使って下書きをしていく形となります。
PowerPointなどのツールを使った清書はいちばん最後のステップですので、まずは「紙の上に収集した情報を全て並べること」からワイヤーフレーム作成を行ってみてください。
ワイヤーフレーム作成ツール紹介① PowerPoint
Microsoft Officeに入っている「PowerPoint」は、シェア率の高いワイヤーフレーム作成ツールです。
企業内ではPowerPointでプレゼンテーションを行うことも多いため、「誰もが使えるツールが良い」と感じている皆さんにはおすすめ度の高い位置付けとなるでしょう。
https://products.office.com/ja-JP/powerpoint
ワイヤーフレーム作成ツール紹介② Cacco
オンライン上で動作する、「ワイヤーフレーム専用のツール」です。
オンラインツールのメリットは、「複数人で同時編集ができる」というポイントです。
また手軽に使えるテンプレートも豊富に用意されているため、「毎回ワイヤーフレームを必ず作る」という皆さんには、一度は使ってみるべきツールと言えるでしょう。
PowerPointと比べて描画エリアも広いため、お客様用として「見やすいワイヤーフレーム作り」を行う際にも、便利に使えるツールとなっています。
ワイヤーフレーム作成ツール紹介③ POP
スマートフォンアプリを通して手書きのワイヤーフレームを読み込み、最終的にモックアップまでできる便利なツールです。
Dropboxとの同期も可能なため、バックアップ環境も万全です。
またこのツールは「スマートフォンアプリ用のワイヤーフレーム作成」に適していますので、自分が収集した情報のレイアウト時に活用してみると良いでしょう。
小規模プロジェクトでは紙で作るケースもある！
1～3人程度の小規模チームの場合は、紙のままでWEB制作をスタートすることも可能です。
「毎回必ずツールでワイヤーフレームを作る！」と張り切ってしまうと、スケジュールが厳しいプロジェクト抱えた時に「ワイヤーフレームを作らない」という状態となってしまいますので、見せる相手や日程などを考えて臨機応変に作業した方が良さそうです。
ワイヤーフレームを作る際の注意点を教えてください！
自分以外の人にワイヤーフレームを見せる際には、「理解しやすいこと・読みやすいこと」を重視して作成するようにしてください。
また情報のサイズ感がわからないと、設計図として成り立たないこともありますので、挿入するコンテンツのボリュームを表現した方が、プロジェクトに携わる人みんながイメージを掴みやすいワイヤーフレームになることでしょう。
ワイヤーフレームは「構成図」として使う資料となるため、お客様の気持ちを左右するようなデザインや配色に関する記述は省いた方が良さそうです。
まとめ
アジャイル開発でも作っておくべき、ワイヤーフレームについて解説してみました。
大きなプロジェクトではワイヤーフレームを「コミュニケーションツール」と位置づけることもありますので、メンバーの意識合わせとモチベーションを向上させるためにも、必要不可欠なツールであると言えそうです。
