【Web制作で使う言葉】ワイヤーフレーム。それはサイトの設計図。

こんにちは。
グラフィック＆ウェブ制作会社
株式会社セガナ・クリエイティブで
デザインに向き合っている生き物
向ちゃんです。

最近ずっと構成要素や構成について取り上げてきましたが、ひとまず今回で最終回。ということで、最終回はWebサイトの構成『ワイヤーフレーム（WF）』について。

ワイヤーフレームって一体何なの？
どんな役割を持ってるの？

ということについて、今回も超ざっくりと説明していきます。

ワイヤーフレームとは

ワイヤーフレームとはその名の通り、線（ワイヤー）で囲った箱（フレーム）を組み合わせて作った、Webページの構成図のこと。

Webページの制作では、入れたい情報（構成要素）を整理し、それをページの中に落とし込んでいく作業が必要になのです。

その情報が入った構成図をワイヤーフレームというのです。

ワイヤーフレームは設計図

ワイヤーフレームの制作は、ページのどこに何を置き、どういう流れで見てもらうか、ということを設計する最も重要な工程。

Webページでは、必ず人の視線は上から下に行きます。←スクロールするからね！

だから、その目線の流れに合わせて、見てもらいたい情報をどうやって配置したら途中で離脱せずに見てもらえるのか

を考えて配置する必要があるのです。

その要になるのがワイヤーフレーム。

ここがちゃんと考えられていないと、情報が散漫になり最後まで見てもらえなくなる可能性が高くなるのです。

つまり

ワイヤーフレーム＝Webページの設計図

ということなのです。

たまにですが、ステキデザインなんだけど、「なんか見にくい」とか「頭に入りにくい」サイトとかあったりしませんか？

これ、ページ設計が甘いからなのかもしれませんね。もったいない。

（余談）Web制作って建築とよく似てる。

では皆さん。突然ですが、自分の家を建てるところを想像してみましょう。私は家を建てる工程には詳しくないのですが、ざっくりとこんな感じでしょうか？（細かい部分は端折ります）

1.　家を立てよう！
↓
2.　相談・ヒアリング（家族構成、生活スタイル、希望など）
↓
3.　設計
↓
4.　施工

こんな流れですよね。

そして、当たり前ですが、ヒアリングから施工には飛ばんのです。施工の前に設計が必ず入ります。

ていうか、設計しないで家作るとか正気ですか？というのは誰でも思いますよね。（昨今技術やもろもろ発達してるのでそういうケースもなくはないのかもしれないけど・・・）

そう。実はWebも同じ。

相談後、「すぐにデザインして」というのは

相談後、いきなり設計図も無しに、大工さんに「家を立ててください」とお願いするくらい正気の沙汰ではないのです。

まとめ

ワイヤーフレームって、デザインじゃないし、棒と線と箱と文字だけだし、こんなんで判断できない。

そうかもしれません。でも、デザイン（外観や内装）はデザインで、この後しっかり作るのです。

家を立てるとき、部屋を探すとき、間取りとかしっかり確認したりしませんか？生活導線をイメージしながら見ませんか？

ワイヤーフレームも同じなのです。

イメージするのは難しいかもしれませんが、それでもなるべく

「自分が見る側だったら、どういう流れでサイトを見るかな。ページを見るかな。」

ということを思いながらワイヤーフレームを見てみてください。

ここを適当にしてしまうと、サイトができた時に「思ってたのと違う」ものができてしまう可能性も。

それと、ココからが　か　な　り　重要なのですが・・・

▼
▼
▼

デザイン後に構成を変えると、追加費用が発生するぞ！

そうなんです。この変更って、思った以上に他の部分への影響が出たりするので、チラシとかポスターと同じ感覚で変更依頼すると後で泣きます。もしくは揉めます。

なぜなら家建てた後に間取り変えたいと言ってるようなもんだから。

だから「よくわからない」で済ませずに、全力で見ることをおススメします。家探し、家の新築のとき設計図に穴があくくらい見ますよね。同じようにワイヤーフレームも穴があくくらい見るようにしましょう。そう。自分のために。

ということで本日はここまで。( ´Д｀)ﾉ~ﾊﾞｲﾊﾞｲ

▼もし良ければコチラの記事も読んでね★