ワイヤーフレームとは何か?webサイト制作に重要なページ設計図を理解しよう!

更新日:2018年11月20日 発注カテゴリ: ホームページ制作・デザイン
ワイヤーフレームとは何か?webサイト制作に重要なページ設計図を理解しよう!

webサイトを依頼する際に様々な分かりにくい用語が出てきて辟易とする方も多いと思います。その分かりにくい用語の一つにワイヤーフレームというものがあります。ワイヤーフレームとは大まかにいうとサイトの設計図のことですが実際には多くの意味を含んでいます。今回、ワイヤーフレームについて分かりやすくまとめてみました。Webサイトの依頼をお考えの方はぜひご一読して参考にしてください。

関連する記事

ワイーヤフレームとは?

ワイヤーフレームとは、ウェブサイトを作成する時、その設計図となるものです。ウェブサイトというものは、そのページ内に配置されるパーツがある程度決まっています。

どのパーツをどれくらいのサイズで、どこに配置するのか、そういったレイアウトを定めたものがワイヤーフレームで、ちょうど、住宅を建てる時の設計図に例えられることが多いです。見た目も住宅の設計図に近いものがあります。

設計図がない状態では、まともな家が建たないように、ワイヤーフレームがない状態で作られるウェブサイトは、無駄が多く、そのウェブサイトに求められる役割を果たしてくれない可能性さえあります。

ワイヤーフレームは、本格的なウェブサイト作成に入る前の下書きのような位置づけではありますが、その下書きの出来によって、最終的なウェブサイトの出来も大きく変わってきてしまうため、明確な意図と目的をもってワイヤーフレームを作成する必要があると言えるでしょう。

ワイーヤフレームの役割・目的

ワイヤーフレームは、ウェイブサイトの設計図のようなもので、実際のサイト作成を担当する人に、どういったウェブサイトを作成してほしいのか、明確に伝える役割を持ちます。ワイヤーフレームは、個人や自社でウェブサイトを作成する場合と、外部のデザイナーさんや企業に外注する場合、両方で必要になります。

外注する場合、こちらの意図を明確に伝えなければ、出来上がるウェブサイトも焦点のぼやけた微妙なものになりがちなため、ワイヤーフレームの必要性は高いですし、個人や自社でウェブサイトを作る場合でも、ワイヤーフレームのようなしっかりした設計図を作成してから、ウェブサイトの作成に移らないと、満足いくものにならない可能性が高いです。

ワイヤーフレームはウェブサイトの設計図ですので、トップページだけでなく、作成予定のすべてのページの分だけ、本来は必要になります。しかし、ページによってレイアウトが異なるページというのは見づらいですので、標準的なウェブサイトであれば、どのページもレイアウトはだいたい共通しています。

通常のウェブサイトであれば、トップページとカテゴリーページ、個別の記事ページの3パターンのワイヤーフレームを準備しておけば十分でしょう。

ワイーヤフレームの作り方

ワイヤーフレームを作るには、まずウェブサイトにどういった情報を載せたいのかをすべて書き出す必要があります。その上で、それらの情報をどこに載せるのか考えていきます。掲載する情報は、すべて同列に扱うのでなく、優先順位をつけておくほうが良いでしょう。

掲載する情報を決めたら、ヘッダーやフッター、グローバルナビゲーション、サイドバー、メインカラムなどにどういったレイアウトで配置するかを決めていきます。レイアウトを決めたら、それを手書きで清書するか、マイクロソフトのパワーポイントやエクセルなどを使って、他者に伝えられる形にしていけば完成です。エクセルなどはすぐに閲覧できますし、修正も簡単なので、デジタルデータとして残す場合は優れていると言えるでしょう。

ただ、ウェブサイトの作成に慣れていない個人や企業の場合、きちんとしたワイヤーフレームをゼロから作るというのは、ハードルがかなり高いはずです。しかし、しっかりしたワイヤーフレーム無しに、まともなウェブサイトを作ることはかなり難しいのも事実です。なので、その場合、既存のサイトのワイヤーフレームを参考にすることがとても有効です。

ネット上にはレイアウトがしっかりしていて見やすいウェブサイトがたくさん存在します。そのようなサイトの中から、このようなサイトにしたいと思えるサイトをピックアップし、そのウェブサイトがどのようなレイアウトになっているのかを紙に書き出してみます。そして、そのレイアウト図で、自社が掲載したい情報をどこに載せるのか決めれば、しっかりとしたワイヤフレームが完成することになります。

サイトの作成に慣れていない人が、ウェブサイトのレイアウトや各パーツの幅など、ゼロから考えることはかなり難しいですが、すでに出来上がっているレイアウトを参考に、情報だけ差し替えるような形でワイヤーフレームを作れば、非常に短時間で質の高い物が出来上がります。どの位置にどのような情報を載せるのかという点は、明確な意図や根拠があるべきですが、すでに型枠が決まっている状態であれば、その配置自体はそれほど難しい作業ではないはずです。

まとめ

ワイヤーフレームはウェブサイトを作成するときの核と言ってもよいものです。特に、外部にウェブサイトの作成を依頼するときは必須と言ってよいでしょう。

ウェブサイトのレイアウトにおいて重要なのは、奇抜さではなく、見やすさや、訪問者が求めている情報にすぐにアクセスできる伝わりやすさです。ワイヤーフレームを作成する場合、訪問者の利便性を常に意識していれば、一定水準以上のものができあがるはずです。

比較ビズへ掲載しませんか?

カテゴリ一覧

人気記事

ホームページ制作・デザインの最新記事

一括見積もりで発注業務がラクラク!

  • 無料一括見積もりで募集開始
  • 複数の業者・専門家から提案が入る
  • ピッタリの一社を見つけよう

不透明な見積もりを可視化できる「比較ビズ」

比較ビズは「お仕事を依頼したい人と受けたい人を繋ぐ」ビジネスマッチングサービスです。
日本最大級の掲載企業・発注会員数を誇り、今年で運営13年目となります。
比較ビズでは失敗できない発注業務を全力で支援します。

日々の営業活動で
こんなお悩みはありませんか?

営業活動でよくある悩み

そのお悩み比較ビズが解決します!

詳しくはこちら
お電話での見積もりはこちら