知っておくと便利なWeb制作用語#04 ワイヤーフレーム編

「Webサイトの制作を依頼したいけど、Webって専門用語とか多いし、なんか不安だなぁ」という方に向けて、Web制作でよく使われる用語をわかりやすく解説するシリーズです。
用語を知っておくことで、制作時のコミュニケーションがスムーズになり、自分たちの希望を伝えやすくなります。
今回は「ワイヤーフレーム」について解説します。
ぜひ一緒に学んでいきましょう！

こんな方におすすめ

Webサイトの制作を依頼したいが、まずは基礎知識をつけたい方
突然Web担当になってしまった方
過去に制作会社とのやり取りで用語の意味がわからず、不便を感じたことがある方

ワイヤーフレームとは？

「ワイヤーフレーム（WF）」という言葉をご存知でしょうか？Webサイト制作を発注したことのある方なら聞いたことがあるかもしれません。

ワイヤーフレームは「Webサイトの画面設計図」です。「ワイヤー＝線」「フレーム＝骨組み」という言葉のとおり、Webページの完成イメージを線や枠で表したものになります。
家を建てる時のことをイメージしてください。突然木材を切り出したり、壁に色を塗ったりしないのと同じで、Webサイトもまずは設計図の作成から始めます。

ワイヤーフレーム

Webサイト制作の流れのなかでは、④番目の「サイト企画・設計」でワイヤーフレームは主に使われます。

Webサイト制作の流れ

→Webサイト制作の流れをわかりやすく解説！

Webサイト制作において基礎となる設計図ですので、この工程に一番時間と労力がかかると言っても過言ではありません。

では実際にその役割をみていきましょう。

ワイヤーフレームの役割

ワイヤーフレームの役割は、どこにどのような情報を入れるかサイトの構成を決めることです。後々の工程で発注者と制作会社間で認識のズレが起きないように、以下の情報を明確にしていきます。

どこに：優先順位、ページの上下左右など
なにを：コンテンツ（病院概要ページには院長あいさつ、沿革、アクセスなど。）写真、図の有無。
どれくらい：文量。ページの長さ。
どのように：どのページにリンクさせるか、スライド表示にするかなど

最終的には「現在の構成でサイトのゴールが達成できるか」の確認も忘れずに！

ワイヤーフレームのあるあるトラブル

ワイヤーフレームが白黒でデザインもされていないんだけど！

ワイヤーフレームの目的はあくまで「情報設計」になるため、ビジュアルの要素（色やデザイン）は一切入っていないというケースが多いです。ワイヤーフレームが固まってからデザインに入るほうが、その後の進行がスムーズになります。

また、ビジュアルの要素が入っていないほうが、情報設計の部分に集中できるというメリットもあります。

ワイヤーフレームはさらっと確認しただけなので、デザイン・コーディングに入ってからたくさん修正点が見つかってしまった！

出来上がったワイヤーフレームを見て「この情報は必要ない、この情報は入れてほしい、表示順を変えてほしい」という要望が出てくるのは当たり前です。むしろ、発注者のそういった要望を引き出すためにワイヤーフレームがあります。
しかし、ワイヤーフレームに軽くOKを出してしまって、その後工程（デザイン・コーディング）でこれらの修正が発生すると、対応が難しくなってしまう場合があるため注意が必要です。

スケジュールに遅れが生じたり、場合によっては追加料金となってしまうことも……。
後々のトラブルを避けるためにもワイヤーフレームはしっかりと確認をしましょう。最終的な決裁権を持つ方にも、この時点で確認してもらうことをおすすめします。