Web制作の大切な土台、ワイヤーフレームって何だったっけ？というお話

はじめまして。今日から日々のお勉強ネタを書いていきたいと思います！
今日はWebの骨組み、ワイヤーフレームのお話です。

ワイヤーフレームって何だっけ？

ウェブサイトの内容を実際のページの配置におこしたもので、レイアウトの方向性を定めるため色や装飾を含めずに作るデザインの骨組みのこと。
手書きや、Webツールを使用したものなど作り方はさまざまですが
大切なのはページに挿入する要素や機能、情報などを決めることだそうです。
作っている途中で「この配置は違うなあ」とか「もっといいアイデアが出た！」となったら変更される可能性もあります。

グラフィック面のデザインはフレームのあとで

ワイヤーフレームにはグラフィック的要素は入れないようにします
その理由は

• 基本的なページの構造が決まらないまま、色やデザインの方向性などに話がそれてしまう可能性がある
• いきなりビジュアル面からデザインすると、機能面への配慮が足りなくなる可能性がある
• 内容を見てもらえるのでからも広く意見を受け取れるようになる

「何を伝えるか」「わかりやすく伝える配置かどうか」「使いやすいページかどうか」を
スムーズに決めるため、見た目のデザイン(装飾)よりもワイヤーフレーム（設計）を先に
作る必要があるのですね。

どうしてワイヤーフレームが必要なの？

ワイヤーフレームが必要な理由とは

• 仕事にかかわる人みんなに「どういうウェブサイトを設計するか」ということを認識してもらえる
• サイトのモックアップとして、クライアントさんとのやり取りを円滑に進める材料となる
• 装飾面にかかわるデザイナー、内容を構築する開発者双方がワイヤーフレームを元に仕事を始める

チームで仕事をする場合や、クライアントさんと相談する際、全員に同じ完成図を思い描いてもらうためにも必要なものとなります。

何を意識して作ればいいの？

• コンテンツに優先度をつけ、ファーストビュー(ページが表示された時に見える範囲)に最も見てもらいたい内容が入るようにする
• 広告や目を引きたいバナーを配置する場合、どう配置したらクリックしてもらえるか、
• ユーザー目線になって導線を考える
• Webでの視線の動き(F字型が多い)を意識した配置を心がける

○よい例

• ユーザビリティ(使いやすさ)を意識した配置になっている
• バナーの文言や、文章などが完成ページをしやすいようにある程度わかりやすく記されている

×あまりよくない例

• かなり大まかな枠だけ配置する(テキストや画像の情報が足りないとレイアウトを考えにくい)
• 広告を目に付きにくい下部に集中して表示する(見てもらえる可能性が低くなる)

ワイヤーフレームのサンプルサイト

I ♥ wireframes

スマートフォンサイトからWebまでワイヤーフレームサンプルが豊富！

web.without.words


既存のサイトをワイヤーフレーム化してくれています。

WireframeShowcase


ワイヤーフレームと完成ページを比較できます。

まとめ

ワイヤーフレームは、Webのレイアウトを一度骨組みという形におこすことで

• 完成のイメージを共有する
• グラフィック無しのシンプルな配置で確認することで、レイアウトや機能をしっかり考える事ができる
• 土台をしっかり固めることで後々のデザイン作成がぶれずに作業を進めることができる

ワイヤーフレームを作る上では、慣れや経験もとっても大切です！
普段からWebサイトを見る際、使いやすさや配置について意識してみましょう！(私もがんばります…！)