Webサイトを新たに制作する時に、まず作るのがワイヤーフレームです。このトップページの場合あふれるが、以後のWeb制作の全ての基本になるため非常に大事なものになります。

では、どのようにウェブサイトのワイヤーフレームを作っていくか、工程を紹介します。

1.そのウェブサイトで何を達成したいのかどういう人に見てほしいのかをはっきりさせる

これは、打ち合わせの段階でクライアントと話し合うことですが、Webサイトの目的(コンバージョン。サイトでの申し込み完了や、商品購入など)想定しているお客さんのイメージを確認します。
想定しているお客さんのイメージは具体的であればあるほど、どういう謳い文句やデザインのテイストがウケやすいのか考えやすくなります。

2.サイトマップを作成する

1の工程で挙げた2点から、Webサイトのコンテンツ案(サイトマップ)を作成します。
ここでサイトの目的を達成するために、必要だと思われるコンテンツをリストアップしていきます。

3.参考サイトを探す

通常、自分たちと似たような業種、サービスを提供している企業のウェブサイトをいくつか見て、サイトのイメージを固めていきます。

ここでは参考サイトのテイスト(雰囲気)や、サイトマップからコンテンツのリスト、メインとなるサービスから、サイトの目的であるコンバージョンまでの流れを確認しておくことを忘れないようにしましょう。

あくまで、Webサイトを作るのは目的を達成することであることに気をつけます。

4.ワイヤーフレームを作成する

ここまでの行程で重要度の高かったコンテンツWebサイトの目的であるコンバージョンにたどり着く動線を考えながらワイヤーフレームを作っていきます。

コンバージョンまでの動線を考える場合、トップページのワイヤーフレームだけでは足りない場合もあります。
その場合はメインとなるサービスや商品のコンテンツページのワイヤーも作っておきます。

今だとサービスや商品によっては、PCよりもスマホの方を重視する必要があるサイトも多いので、どちらか想定しているお客さんの利用が多いほうを先に作った方が良いかもしれません。

5.キャッチコピーを考える

4の工程で作ったワイヤーフレームはメインビジュアルの部分など「キャッチコピー」など仮のテキストは入っている状態かと思います。今度はその仮のテキストにキャッチコピーを入れていきます。

この段階ではまだビジュアルを出来上がっていないのですが、キャッチコピーだけでもどのような内容でお客さんを目的に導いていくのか、イメージしやすくなるためキャッチコピーを入れておくと良いです。

6.出来上がったワイヤーフレームをチェックする

出来上がったワイヤーフレームがお客さんのちゃんと目的まで誘導できるようなになっているか確認します。

ディスプレイなど画面できる子でも良いのですが、僕は紙に印刷してからチェックするようにしています。
ワイヤーフレームを見て思いついたことを紙に直接書き入れることができるからです。

そして足りない部分があったらワイヤーフレームを修正します。

7.できれば誰かにチェックしてもらう

可能であればクライアントに提案する前に、誰かにチェックしてもらいます。そして一通り自分で説明して理解できていないところや、説明が難しい箇所を確認しておきます。

8.ワイヤーフレーム完成

以上の行程でワイヤーフレームが完成します。

・・・以上がワイヤーフレーム作成の工程になります。

WEBサイトの制作というと、デザインを作る段階が重要かとイメージする方もいらしてますが、このワイヤーフレーム作成が以降のデザインにおける方向性を決定する工程になるため、こちらの方が重要です。
ここでしっかりと方向性を決めておかなければ、後のデザインの制作の根っこが揺らいでしまいます。
そうなると完成したサイトも目的を達成することが難しいサイトになってしまいますので、しっかりを内容を検討し、形にしていきましょう。

おすすめの記事