ワイヤーフレーム（wireframe）とは、Webページに必要な要素とそのレイアウトを決める設計図のことです。

ワイヤーフレームを使うことで、実際にデザインを進める前に、完成イメージを「見える化」し、掲載したいコンテンツに漏れがないかや整合性が取れているかを確認することができます。
また、見やすさや使いやすさなども、確認することができます。

完成イメージが見えないまま製作を始めてしまうと、デザイン完成後に「必要な項目が足りない」「イメージと違う」「読みにくい」「この機能がここにあると使いにくい」などの事態が生じ、大きな修正が必要になり、時間も費用もかかってしまいます。

この記事では、「最近web制作を始めた」「初めてサイト制作を外注するけど、何をどうしたらよいのやら」という方々に向けて、2回に分けてワイヤーフレームの役割や簡単な作成手順を説明していきます。

ワイヤーは「線」、フレームは「枠」という意味で、「ワイヤーフレーム」とは、各ページにどのようなコンテンツを設置するか、サイトの完成イメージをシンプルな線と枠で表現する設計図です。
引越をする時に、新居の間取りを見て「ベッドはここに置こう」「近くにベッドサイドテーブルがあると使いやすいな」などと、家具の配置や新しく購入するものを検討します。
同じように、Webサイトのデザインに入る前に、「トップページには目立たせたいこのコンテンツを置こう」「問い合わせへの導線をこのように配置しよう」などとコンテンツの配置を決めるのが、ワイヤーフレームです。

(1)レイアウトを決めるため
よくありがちな失敗が、まずデザインありきでweb制作を始めてしまうことです。
もちろん、デザインは重要な要素なのですが、「このデザインを埋めるためにコンテンツを考える」という作り方をしてしまうと、webサイトの目的（集客や会社案内、求人など）に必要な情報が掲載されていないということが起きかねません。
デザインのイメージも大切にしつつ、まずは、掲載したいコンテンツをリストアップし、ワイヤーフレームでレイアウトを組んでいく工程が重要です。

(2)制作に向けてのアイデアを出し、よりよいものに向けて議論をするため
掲載したいコンテンツやレイアウトがいくつか出てきたら、ワイヤーフレームでたたき台を作ってみることをお勧めします。
そうすると、もっとこうした方がよいという意見が出やすくなります。
その意見をまた採用してワイヤーフレームを作り、どんどんブラッシュアップしていくことで、目的に応じた、そして読みやすい構成のwebサイトに近づけることができます。

(3)webサイトのコンテンツやレイアウト、機能を制作メンバーで共有するため
Webサイトの製作には、意外に多くのスタッフが関わります。
ディレクター又はコーディネーター、デザイナー、プログラマ、コーダー、ライターなどのメンバー間で、コンテンツやレイアウト、機能に関するすれ違いが起きると、せっかくのアイデアが台無しになってしまいますし、修正によるコストもかかってしまいます。
効率よく制作を進めるために、コンテンツやレイアウト、機能についての決定事項をワイヤーフレームにして残しておくことは重要です。

ワイヤーフレームとは何か。なぜ必要かについてご紹介しました。
次回、実際にワイヤーフレームを作る手順についてご紹介します。

（ライター　K.M）