ワイヤーフレームの役割と作り方【Web制作】

Web制作を生業にしている人であれば、「ワイヤーフレーム」（Wire Frame）はなじみがある呼称であるかと思います。

この記事はワイヤーフレームの位置づけや目的、役割についてのレポートです。

ワイヤーフレームとは何か？

Web制作業界において、ワイヤーフレームは「ページ構成」といった意味を持つ情報設計のための設計図です。

情報設計とは、ページ内のどこに、どのようなテキストや画像を配置するかなどのレイアウト形式を可視化する作業となります。

どのタイミングでワイヤーフレーム作ればいのか？

ワイヤーフレームは、新規ページ制作やページ改修の際、要件定義がある程度済んだ後に、デザインやコーディングに入る前の段階で作成することになります。社内外の認識合わせのために利用するドキュメントです。デザイナーは主にこのワイヤーフレームを元に実デザインを制作していくことが主流です。

デザイナーが作る場合もありますが、現在のWebサイトの制作フローでは、分業し専門の担当かWebディレクターが作成する場合が多いのではないかと思います。

ワイヤーフレームは何のために必要か？

制作スタッフとの共有

デザイナーやマークアップエンジニアといった、制作スタッフと、どういうページを作っていくのかの認識合わせや、テキストをコピペするためのマスター原稿、社内資料としての共有があげられます。

クライアントとの共有

クライアントとの認識合わせのために利用することもありますが、この段階で内容をすべて承認してもらうため、というよりは、主要ページのデザインと併せて、その他のページの概要や骨組みをお知らせするための、補足資料として利用する機会が多いのではないかと思います。

この段階で、ワイヤーフレームに書いてある内容はあくまでこれからデザインするページの骨組みにしかすぎず、フォントもレイアウトもページの長さも実際のページとは異なるため、レイアウトや内容含めた見た目について判断しづらいのは当然です。

この段階でレイアウトや内容含めた見た目の承認を迫るのは進行上無理があり、時間の無駄になりかねません。見た目については、デザイン提案やプロトタイプの確認で行うべき作業となります。

ただし、見た目、デザインではなく、カルーセルを入れるとか、動的な動作の挙動などといった機能追加や改修の提案・イメージ確認を目的とする場合は、ワイヤーフレームレベルでも、十分に承認していただくための資料として成立します。

また、テキスト主体のページの原稿や素材確認としての目的であれば、確認資料としては有効です。

どこまでワイヤーフレームを作り込めばよいのか？

ワイヤーフレームは、見た目の確認を目的にはしませんので、シンプルかつ見やすい作りにすることをおススメします。フォントサイズは6px程度あれば、ディスプレイ上または印刷しても十分に視認性は保たれます。また、ワイヤーフレームには該当するURLを入れるなど、そのページの位置づけがわかるようにしておくことも重要です。

ワイヤーフレームのレイアウト

WEBサイトのレイアウト形式をどうするかは、ある程度ワイヤーフレー上でも検討・表現しておきます。どのようなレイアウト形式を採用するかは全体のページ数、サイトマップ、構成、情報量により検討します。具体的にはグローバルナビゲーションの内容・形式、サイドナビゲーションの有無、位置、本文レイアウトのカラム数の検討になります。

レスポンシブデザインでは、PCとスマートフォンで見え方が変わりますので、両方のワイヤーフレームを制作します。

グローバルナビゲーションの設計はサイトマップ制作から

サイト全体のページ数、コンテンツの仕分けをサイトマップをつくることによって明確化し、整理します。これにより自ずとページの重みづけをすることもでき、グローバルナビゲーションに入れるべき大項目をどのコンテンツにするかを検討する手助けになります。

ワイヤーフレーム制作のポイント

ワイヤーフレームは、あくまで骨組みですので、中途半端に色をつけたり、画像を配置したりする必要は全くありません。変に作り込むと逆に誤解を生むリスクもあります。画像を使うとしたらせいぜいロゴくらいです。見た目の判断はデザインフェーズで行うため、ワイヤーフレーム段階では極力シンプルを旨とするべきです。

中途半端に「デザイン」することは時間の無駄であり、見る側に余計な誤解や思い込みを生むリスクもありますので、要注意です。あくまでワイヤーフレームとしての見た目の整理や整合性をとることに留めるべきです。

ワイヤーフレーム作成ツールは何を使うか？

Cacoo他、様々なワイヤーフレーム作成ツールがあります。弊社でも色々使ってみましたが、Webサイトのワイヤーフレームを作る場合は、PowerPoint一択に落ちついています。

PowerPointを利用する理由としては、このソフトは誰もがある程度、扱うことができ、編集も可能である点です。また操作も簡便です。（PowerPointをインストールしていないビジネスユーザーはまずいないでしょう）

そのため、複数社かつ複数人で共同編集作業を行う場合は、その利点が十二分に発揮されます。その他のソフトは残念ながら誰もがインストールしているわけではありません。

もちろん、プロジェクト関係者が全員共通のワイヤーフレーム作成ツールを持っていれば問題はありませんが、コストの問題もあり、あまり現実的ではないかもしれません。バージョン管理も共有サーバやDropBox上で管理していけば問題ありません。

一方でワイヤーフレーム作成の際にPowerPointを使うデメリットとしては、実寸ではない点が挙げられますが、元々見た目の確認を目的にはしていないため弊社ではあまり気にしません。長いページの場合は、ページを分割せざるを得ないため分量が多くなるのが多少、ストレスになる程度です。

またWindows版とMac版との互換性が今だにいまいちなので、フォントが変わることで文字がはみ出たりする場合がありますが、特にクライアント企業はほとんどがWindowsユーザーであるため、Windows版を利用していればこれが致命的なミステイクになることは無いかと思います。

弊社では、WindowsとMacでほぼ見た目が変わらない、Meiryo UI（メイリオの文字幅・文字間を縮めたフォント）を利用しています。

PowerPointは大規模サイトで使えるか？

結論としては十分に使えます。共通パーツ・モジュール化をすることができないPowerPointですが、共通部分は1シートにまとめて、その後のページでは、例えばヘッダやフッタは「共通フッタ」「共通フッタ」といった記載で共通化して記載する方法や、検索置換を駆使するなどの工夫で、量産や更新の際もそれほど不都合は感じません。

というのも、大規模サイトといっても共通化したページデザインを適用するため、ワイヤーフレームも、共通テンプレートの種類の確認で済むためです。

もちろん、身内のみで共有や編集する目的のワイヤーフレームであれば、Cacooなどのツールで作成しバージョン管理するのは有効だと思いますし、やりやすい手法で柔軟に対応していけば良いのかと思います。

その場合は、関係者間でツールの使い方の共通認識・ルールを設けておくことが必要です。

Adobe XDやSketch

汎用的なパーツが揃っていることと、パーツを共通化でき原寸でワイヤーフレームを作ることができ、プレビューも可能である点が大きなメリットです。

Adobe XDやSketchは、ワイヤーフレームというよりスマホアプリなど、スマートフォン中心のプロトタイプの制作で力を発揮するツールであると言えます。

当然ながら共同作業の場合は、ソフトのライセンスを関係者全員が購入していることが前提となります。

まとめ

このように、ワイヤーフレーム（のみならずですが）などのアウトプットは、そのドキュメントの利用目的を重視すべきであって、間違ってもワイヤーフレームを作ること自体を目的にしない、ということがプロジェクト全体の効率化のポイントになります。

ワイヤーフレームはあくまでも制作過程の派生資料ですので、そこに、いたずらに時間をかけるよりも、コンテンツやデザインのクオリティアップに時間をかけるべきです。

ワイヤーフレームは最終的なアプトプットであるデザインの下書き、という位置づけになります。