ワイヤーフレームとは？
ワイヤーフレームを簡単に表すと「デザインの下書き」のようなものです。 サイト制作ではほとんどの場合はこのワイヤーフレームを用意して、大まかな構造を最初に決めます。
「ワイヤー（線）」と「フレーム（骨組み）」を語源とするワイヤーフレームは、画面上の「どこになにを」配置するのかを示しています。ホームページをデザインする過程で、本番用デザインの「設計図」として利用します。
ワイヤーフレームは、プロジェクトに関わる人たちとのコミュニケーションにも役立ちます。
クライアントさんとの間に挟んで「こんなデザインになる予定ですよ」と話をすれば、出来上がりのイメージを共有しやすく、新たなアイデアを引き出すきっかけにもなります。
逆にワイヤーフレームを用意せず、いきなり制作を進めてしまうと
「こんなイメージじゃなかったのに・・・」
と信頼度が低下してしまう可能性があります。
ワイヤーフレームの作成方法
1. 掲載する情報を整理
2. レイアウトを紙とペンで下書き
3. ツールで清書
1.掲載する情報を整理
例えばこのようなスプレッドシート （サイト管理表）を使い、お客さんとどのような内容を入れていきたいかサイト全体を整理していきます。
その後、「webページに載せるべき情報すべて→グループにする→優先順位をつける」という順番で、webページに載せるべき情報を整理していきましょう。
この作業は紙に書き出すのがオススメです。
webページに載せるべき情報すべて
そのwebページに載せるべき情報をすべて書き出してみてください。
たとえば、「電話番号」「バナー画像」「広告」など、そのページに必要だと思われる情報をすべて書き出しましょう。
あとで整理するので、この段階ではきれいにまとまっている必要はありません。
情報の抜けがないように、思いつくものは全て挙げておきましょう。
どんな情報が必要かイメージできなかったら、競合サイトに掲載されている項目を書き出してみるのもひとつの手です。そこから自サイトに必要なものを選んでいってもいいでしょう。
グループにする
ピックアップで出てきた複数の情報を、性質が似ているものごとにグループ分けしていくことです。
たとえば、「住所」と「電話番号」はどちらも連絡先だから同じグループ、「ロゴ」と「会社名」はどちらも会社を表すものだから同じグループ、という形です。
こうやってグループ分けしておくことで、実際のwebページになったときに、「情報が分散してわかりづらい」という事態を防ぐことができます。
優先順位をつける
グルーピングした情報に優先順位をつけていきます。
webサイトの目的に沿って、適切な優先順位をつけていきましょう。
たとえばコーポレートサイトなら、会社を認知してもらうことが重要です。
ですから、ロゴや社名が含まれる「会社」のグループには高い優先順位をつけて、目立つ位置に配置する必要があります。
しかし企業色を少なくしたいコミュニティサイトなどの場合、会社の情報は目立たない位地にあっても構わないでしょう。この場合、優先順位は低くなります。
情報が整理できたら、次にレイアウト作業に入っていきます。
2. レイアウトを紙とペンで下書き
イメージ、機能性などを総合的に考えて整理した情報を配置していきましょう。
ワイヤーフレームのサンプルもたくさんネット上にあるので、色々なものを観察してみましょう。
3. ツールで清書する
ワイヤーフレームを作るためにどんなツールを使用するか？ということは人によってさまざまです。
手描きでも十分作成できるため、最後まで手描きで仕上げるという人もいます。
しかし、ツールを使って作成することでお客様に信頼感や安心感を与える事ができます。
データ化しておけば簡単に共有できて修正も容易です。
ワイヤーフレームは、Microsoft OfficeのPower PointやExcelで作成可能ですが、持っていない人はGoogleスライドを利用してみてください。
アドビのツールでは、Illustratorで作成してもいいですし、XDを使ってみたい方はチャレンジしてみてください。
ですが、ツールの使い方に凝っていってしまう場合は、パワポなどのツールを利用するほうが良いと思います。
作成して上でのポイント
今回の課題のように、何度も打ち合わせが前提とされていない場合は、
①テキストは仮ではなく全て実際のものを入力する
（文字ボリュームによってデザインが左右されるため）
②デザインもある程度考えておくとよい
ということを意識してみてください。