ワイヤーフレームとは？IA担当者が解説するwebサイトの設計方法

2021/10/18

ディレクション

Webサイトに限らずですが制作会社に依頼をしたことがある企業の担当者さんの多くはワイヤーフレームという言葉を聞いたことがあるかもしれません。
ワイヤーフレームはwebサイトの制作にはかかせない重要な資料であり設計図であるといえますが、まだまだその重要性は浸透していません。
特に制作側の説明が不足していたりするとワイヤーフレームを提出されていてもデザイン性のない要望に沿わない制作物のような印象を持たれてしまします。
ワイヤーフレームは制作側もクライアント側にとっても重要なIA（情報設計）を可視化した設計図であり共通認識を強化するための資料としても重要なコミュニケーションツールとなり得ます。

今回はワイヤーフレームがどいうもので何に役立つのかについて解説していきます。

ワイヤーフレームはIA（情報設計）と密接な関係にあります。
前回IA（情報設計）についての記事を公開していますので合わせて読んでいただけるとより内容を把握しやすくなるのでぜひご一読ください。

IA（情報設計）とは何か　重要性と効果

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

ワイヤーフレームを定義する

Wepotではワイヤーフレームの役割を以下のように定義しています。

IA（情報設計）で導き出したさまざまなデータから算出した情報を可視化してまとめたものであり、制作していくwebサイトの具体的な設計仕様書として制作側とクライアントとの間の共通言語としてのコミュニケーションツールの一つ。

つまり、デザインを実際に進めていく上での設計図であるということです。
ワイヤーフレームはあくまでも設計図であるため、白黒の状態で作成することが多く装飾もほぼない状態で作成することもしばしばです。
ただし、装飾やレイアウトで多少のデザイン性を含めたほうがお互いに有益に進めることができる場合や納期が短い場合などはワイヤーフレームであっても多少のデザイン性を持たせてデザイン提案の一つとして作成する場合もあります。

ワイヤーフレームは制作側とクライアントとの間で齟齬なくプロジェクトを進める上でのコミュニケーションツールの一つである必要があるので、Wepotではクライアントの要望に合わせて臨機応変に作成することを心がけています。

ワイヤーフレームの役割

ワイヤーフレームが設計仕様書であるということはなんとなくご理解いただけたのではないでしょうか。
ただし、ここまでの内容はあくまでもWepotとしてのワイヤーフレームの定義でありクライアント企業との間で定義したものではありません。
そのためWepotとしてのワイヤーフレームの定義をなんの説明もないままに進めていくとコミュニケーションにおいて齟齬も起きやすくなりますし、クライアントの要望に沿ったものとしてワイヤーフレームを作成していくことは難しくなるでしょう。
そのためあくまでも重要なのは、制作側とクライアント側とでワイヤーフレームに持たせる役割や機能を話し合い決めておくことです。

などがワイヤーフレームの主だった機能です。
これが全てではありませんがこれらが基本的な機能としてあればwebページのデザインを進める上での情報は一通り揃うと考えてもいいでしょう。
もちろんプロジェクト内容やクライアントの要望に応じて機能として持たせる内容は変わっていきます。

ワイヤーフレームに持たせる機能を策定したところでその策定した機能をもとにプロジェクトにおけるワイヤーフレームの役割がどういったものなのか認識を合わせて定義するとよりスムーズにコミュニケーションが取れるようになります。

などプロジェクトやクライアントの要望に合わせてお互いがそれぞれ齟齬や情報の抜け漏れがないように進めるための資料として活用できるように役割を持たせることが重要であると考えています。

制作側とクライアント側で要件定義やIA（情報設計）を進める中でこれらを決めていくとスムーズです。

ワイヤーフレームを作成するまで

ワイヤーフレームが重要なのは把握できたかと思いますが、ここからは具体的なワイヤーフレームの作成方法について解説していきます。

ワイヤーフレームを作成するタイミング

ワイヤーフレームはIA（情報設計）から導き出したデータや情報を具体的に可視化させるためのものということをお伝えしました。
つまりワイヤーフレームを作成するタイミングはIA（情報設計）の次のフェーズとなります。
大まかなweb制作のワークフローは以下の通りです。
※これらのワークフローはクライアントの要望や内容に応じて同時に進行する場合もあります。

左ワークフローについては以下の記事でも執筆しています各フェーズの詳細内容についてはこちらの記事をご確認ください。

Webサイト制作のワークフローとディレクターの関わり

Webサイト制作を成功させる要件定義書【作り方・ポイント】

IA（情報設計）とは何か　重要性と効果

まとめ

ワイヤーフレームは作り方や役割の持たせ方によってはお互いの認識合わせのためコミュニケーションツールの一つとして作り上げることができますしデザイン仕様書の側面も持ち合わせています。
また、工夫次第では実装の設計書類の一端を担い、マーケティング面でも方針や目標などに合わせてワイヤーフレームに落とし込んでいくことも可能になります。

【脱初心者】Webマーケティングとは？広告の種類・改善施策の事例まで丁寧に解説

ワイヤーフレームは制作側と企業側でどのような機能を持たせ、どのような役割として設定するかで変幻自在の最強ツールとして作成すできる可能性を秘めています。

Webサイトの制作が必要だけど掲載する内容やコンテンツにお困り場合はぜひWepotにお問い合わせください。