ワイヤーフレーム

ワイヤーフレームは、画面設計のために作られるWebサイトの下書きのようなものです。
ここで戦略コンセプトや動線シナリオなどで決定した内容を整理し、掲載する情報をページのレイアウトに落とし込んでいきます。

テキストや画像の配置を紙やドキュメントで作成することが多く、ページごとでまとめられます。
ワイヤーフレームは開発前の段階で「どんなページにするのか」を協議していくにあたって骨格となっていくもの。この情報を元にコンテンツの内容やビジュアルデザインを検討していくため、重要な役割を持っています。

ワイヤーフレームとモックアップ

実は、現在のワークフローではワイヤーフレームを制作する機会は減っていて、代わりにモックアップを用い、画面設計を行う機会が増えています。
モックアップは専用のソフトを必要とするため、手書きやPowerPointなどで作られるワイヤーフレームのように目の前で協議の内容を修正し、変更しながらブラッシュアップしていくことはありません。

そのため、一見ワイヤーフレームの方が協議向けのような気がしますが、実際にはモックアップの利用頻度の方が増えています。
その理由として、ワイヤーフレームには少なくないデメリットが存在することが挙げられます。

ワイヤーフレームのデメリット

こまごまとしたデメリットや、企業様の見えない部分まで挙げていくとそれなりの数になります。
これを割愛し、企業様と制作会社の間で起こり得る問題点のみに絞ると下記5点になります。

  • 設計者の意図がコーダーに伝わりにくい
  • ファイル構造やヘッダー情報の定義をページ内で表現できない
  • 使い勝手の良し悪しが分かりにくい
  • 修正の効率が悪い
  • ページごと、デザインごとに作成が必要になる

設計者の意図がコーダーに伝わりにくい

企業様と直接やりとりをするのはWebサイトを実際に制作していく、いわゆるコーダーと呼ばれているエンジニアではありません。
もう少しWeb全体の知識を持つ、しかし、自分で一からWebサイトを構築していくわけではない「プロジェクトマネージャー」と呼ばれる存在です。
そのため、ワイヤーフレームに落とし込んだ「意図」を1つひとつコーダーに伝えていかなければなりません。
時としてイメージしている内容とそれぞれの解釈に乖離が発生し、思っていたものと違った出来上がりになることもあります。

ファイル構造やヘッダー情報の定義をページ内で表現できない

紙やドキュメントで表現されるワイヤーフレームには内部構造やページごとのヘッダー情報などを別々で定義する必要があります。
特に、ヘッダーは近年利便性を求めて複雑化しており、ワイヤーフレームで表現するのが非常に困難になっています。
各ページのデザインとは別の場所で協議が必要となるため、それぞれの関連性が分かりにくくなってしまう可能性があります。

使い勝手の良し悪しが分かりにくい

多くのウェブ関係者がUIやUXの重要性を口にする中、Webサイトの設計図段階で「使い勝手」が協議できないのは致命的です。
ボタンの配置は問題ないか。見やすいか、押しやすいか、どのページにリンクさせるのかを頭で思い描いたイメージにある程度委ねる必要が出てきます。

しかし、サイトの動作や使い勝手などを想像によって判断していくのは限界があります。
紙のページをめくったり、新しいファイルを開いてイメージしたりするのも手間がかかり、非効率です。
何より「共通のイメージ」を持ってプロジェクトを進めているとは言い難い状況に陥ります。

そのため、使い勝手を判断するためには「ある程度操作性を体験できる」ようなものが必要となります。

修正の効率が悪い

使い勝手の良し悪しの部分でも少し触れましたが、ワイヤーフレームにはいくつか「非効率」なポイントがあります。
プロジェクトを進めていく中で作業効率は工程にも影響してくるため、大小関係なく効率的な方がスムーズに進みます。

例えば、ヘッダーやフッター以外にもページ内に共通要素がいくつか存在しています。
1ヶ所に修正が入ったとしてもすべてのページを直す必要があり、書き直したりドキュメントを修正したりと非効率です。
効率的にしようと共通部分だけ別ファイルで作成してしまうと、今度はページレイアウトが分かりにくくなってしまいます。

ページごと、デザインごとに作成が必要になる

ページごとに紙やファイルを用いてデザインを協議しなければならないというのは前述の通りですが、Webにはそれ以外にもデザイン要素が存在します。
例えばレスポンシブ対応する場合、1ページに対してパソコンとスマートフォン、多い時にはタブレットまで、複数のデザインを協議しなければなりません。

もちろん、モックアップなどを用いても協議する内容が減るわけではありませんが、1ページに3パターン。10ページ作るだけで最低30ページのファイルをめくりながらそれぞれを協議していくのは効率的とは言えません。
さらに、通常、ファイル管理はページごとに行われますが、デザインチェックはPC・スマートフォンなどのデバイスごとに対応した方が分かりやすいため、非効率を強いてしまうことにもなりかねません。

モックアップを採用するケースが増えている

上記のデメリットは工夫次第である程度軽減できるケースもあります。
しかし、使い勝手の良し悪しのように中にはワイヤーフレームを使用する時点で解決できない問題もあるため、その動きを体験として確認できる「モックアップ」を採用するケースが増えています。

もちろん、企業の担当者様がワイヤーフレームでの確認・意思決定に慣れているようなケースをはじめ、事情がある場合は画面設計にワイヤーフレームを採用することもあります。
もし、モックアップではなくワイヤーフレームで協議を進めていきたい場合はお気軽にご相談ください。