ワイヤーフレームとは？
ワイヤーフレームとは、簡単に言うとWebページの設計図のことを言います。
Webページのレイアウトを定めるのに欠かせないもので、デザイン要素がなく、レイアウトを確認するためのイメージ図のようなものです。
現場では必ずといっていいほど必要となり、ワイヤーがないとサイト制作が進まない！ということもありえます。
ワイヤーフレームの役割
ワイヤーフレームは、デザインを作成する前に必要となる完成形のイメージです。
現場では複数人でデザイン作業をする場合もあるため、そんなときにワイヤーがあるとブレることなく全員でイメージを共有することができます。
私が実際に働いていた現場では、お客さん・ディレクター・アートディレクター・デザイナー・コーダーと本当にたくさんの人たちが関わって1つのサイトが出来上がっていました。
ワイヤーを作ることで全体の完成イメージが明確になり、完成後に「こうじゃなかった」という事態を防ぐことができます。
またワイヤーとデザインを一緒に考えてしまう人が稀にいますが、ワイヤーフレームにデザイン要素は必要ありません。
ワイヤーの段階で下手にデザイン要素を入れ込んでしまうと、他の人もデザインに関して修正指示をした方がいいのか？など誤解を生むことがあります。
写真や画像が入る場所には「画像」や「image」と誰がみてもわかるようにしておくと良いでしょう。
ワイヤーフレーム作成の流れ
では実際にどんな流れでワイヤーフレームが完成するのか見ていきましょう。
掲載する情報を書き出す
まずはサイトに何を掲載したいのかを最初に全て書き出し、整理します。
例えば自分の好きなアニメやドラマのサイトを作るとして、どんな情報が必要でしょうか。
・ストーリー
・予告動画
・登場人物
・相関図
・グッズ
・音楽
・キャスト
・スタッフ
・SNS
こんな風に、ざっと載せたい情報を書き出してみましょう。
情報を整理してレイアウトを下書きする
どんな情報を載せるのかが決まった後は、紙とペンでページのレイアウトを書いていきます。
ワイヤーフレームはページのレイアウトの数だけ必要です。
PCとスマートフォンでレイアウトを変える場合はそちらも用意する必要があるため、ワイヤーフレームはサイトの規模が大きければ大きいほどページ数が増え作業が大変になります。
書いているうちにあれも載せたい！これも載せたい！となるかもしれませんし、逆に優先順位によって削る必要が出てくるかもしれません。
悩んだときは同じようなカテゴリのサイトを参考にすると何かヒントが得られると思います。
配置するときはユーザーの気持ちになって、閲覧者の目線を意識するとうまく情報を配置できます。
ツールを使って清書する
下書きが完成したらツールを使ってワイヤーフレームを清書していきます。
ツールはPhotoshopやIllustratorなど有料のものや、自身が使っている無料の編集ソフトでも問題ありません。
簡単にワイヤーが作れる便利なツールもあるようです。
Cacoo
https://cacoo.com/ja/
ブラウザ上で使えるワイヤーフレーム作成ツール。
複数のメンバーで共有でき、チャット機能も付いています。
POP
https://marvelapp.com/pop/?popref=1
手書きのワイヤーフレームをスマートフォンで撮影して、ページとページを紐付けることができるアプリ。
まとめ
初めは正解がわからずあたふたしてしまいますが、慣れてくるとデザインや動きを考えながらこうだったらいいなーと情報を配置できるようになります。
私はワイヤーフレームが完成してデザイン作業に入った後でも、こうした方が良いと思った場合は積極的に提案するようにしています。
「いいな」と思ったサイトを模写してみると、最適な情報の配置やレイアウト方法など参考になると思います。
