ワイヤーフレームの書き方自分なりの方法を紹介
こんにちは。
今回はワイヤーフレームを普段どうやって書いているか、自分の書き方を紹介しようと思います。
ワイヤーフレームを書くというのはWEBディレクターの重要な仕事のひとつになります。
今日もあるランディングページのワイヤーフレームを書いたところです。
私が書く時は、とにかく誰が見てもどうゆうサイトを作ろうとしているのか分かるようにできるだけ仕上がりがイメージできるように書きます。
きちんと情報が整理され、細部まで詰めてあると、デザインもし易いですし、クライアントもイメージが付くので後からひっくり返されることが少くなります。
なので、多少時間がかかってもしっかり詰めるようにしています。
そんなわけでこの記事では、
・私がワイヤーフレームを書く時の手順
・ワイヤーフレームを書くにあたっての注意点
・時間が無い時のワイヤーフレームの書き方
などを紹介したいと思います。
これはあくまで私のやり方なので、一つの参考にしていただければと思います。
STEP1：参考サイトとサイトマップも並行して準備する
ワイヤーフレームを書く時はいくつか並行して行うことがあります。
- 参考サイトを探す
- サイトマップを作成する
これらを並行して進めます。
並行してというのはどうゆうことかと言うと、まず参考サイトを探すにしても、なかなか一度にコレというのは見つかりません。特に今までやったことのないジャンルであれば尚さらです。
ですので、まず一度探してみる。
この段階ではけっこう感覚的にピックアップしていきます。「あ、なんか今回の雰囲気に合いそう。」「色が参考になりそう。」「コンテンツの参考になりそう」など、ざっくりピックアップしていきます。
ただし、前提としてサイトを制作する上での全体コンセプト（目的）が分かっていることが必要です。
目的は、
・集客（SEO）
・更新性
・顧客満足
などクライアントの状況によって様々です。
話を元に戻します。
サイトマップは、サイトの目的に合わせて必要なコンテンツを洗い出します。ここで先程の参考サイトが役に立ちます。
この時、参考サイトを探すことと、サイトマップを作成することは、実は同じことで、そのサイトに対して、ビジュアル的なイメージを膨らませるのが前者、コンテンツ的なイメージを膨らませるのが後者になり、
と、２つを繰り返しながらイメージをより具体的にしていきます。
STEP2：ワイヤーフレームを手書きで書く
参考サイトとサイトマップがある程度準備できたら、ワイヤーフレームに取り掛かります。
私の場合はまずはイメージを視覚化するために、手書きでざっくり書いていきます。
提出するものではないので、かなり適当に？書きます。正直読めないほどチャチャッと書いてしまいます。（笑）
でもこれをやることで自分の頭の中が整理でき、足りないところが見えてくるので、重要なステップだと思っています。
その足りない箇所、例えば、「この部分もっとテキストを盛り込んだほうが訴求できるしデザインバランスもよくなるかな？」とか、「横並びがいいか？、縦並びがいいか？」など。
この時、もう一度参考サイトを見て、なければ探して、イメージを明確にしていきます。
STEP3：ワイヤーフレームを清書する
ざっくり手書きができたら、次はそれを元に渡しの場合はイラストレーターで清書していきます。
コンテンツ幅なども実寸で作り、画像サイズやフォントサイズも実寸をイメージしてバランスも整えながら作成していきます。
見出しの下にテキストは置くのか、画像の下にテキストは置くのか、スライドするのかしないのか、背景は画像なのか何も無しか、クリックできるのか、「詳しく見る」などのボタン、お問い合わせの誘導、SNSリンク、などサイト上に必要なものを細かくワイヤーフレームの中に盛り込んでいきます。
ここでも参考サイトが非常に役立ちますし、ピックアップしたサイトの中に参考になるものがない場合は新たに探したりもします。
サイトを設計する時、お問い合わせコンテンツの誘導は考えることが多いですね。
・電話番号の配置
・お問い合わせフォームのリンクボタン
・予約フォームのリンクボタン
この配置のさじ加減が難しいことがよくありますね。
イラストレーターで作成できればほぼ完成ですが、一度pdfで保存してプリントやブラウザで取り込んで客観的にチェックすることをおすすめします。
けっこう後から冷静になってみると、「なんでここにこのボタンがあるの？」だったり、「ここに説明増やそう」や「あのページへの誘導が無い」など、見落としがあるものです。
これも、チェック→修正 を繰り返して、完成度の高いものへブラッシュアップしていきます。
まとめ
いかがだったでしょうか？
全ての案件が必ずこの3ステップというわけではありませんが、平均的にこういった手順で作成することが多いです。
ワイヤーフレームの出来がいいと個人的にはテンション上がりますし、何と言っても仕事の進みが違ってきます。
デザイナーに指示を出しやすいし、クライアントにもイメージしてもらいやすいので、
いつもデザインが思ったように上がってこない、クライアントから後から変更を言われることが多い、と感じている方は是非参考にしてみてください。
