こんにちは！おぐらです。

昨日は打ち合わせ後、久しぶりにお酒を堪能しに行きました。

若干飲みすぎたせいか、朝から顔がパンパンで目がしょぼしょぼ。（泣）

ちなみに、おビールが大好きです。

地ビール巡りとかいいですよね～。

夏のビールって各段にうまいっす！！

あーー、夏が終わる～～（悲）

 

 

Webサイトの骨組みとは

 

 

 

 

では、本題に入りたいと思います。

本日はWebサイトの骨組みということなんですが、

いわゆる、ワイヤーフレームのことです。

聞いた事ある方もいると思いますが、私も現在、制作でワイヤーフレームに取り掛かっているところでして

今日はそのワイヤーフレームについて解説したいと思います。

 

 

まず、ワイヤーフレームって何？という方のために、

 

 

一言でいうと「デザインの下書き」ですね。

Web制作時には必ず必要になってきます。

 

「ワイヤー」＝「線」

「フレーム」＝「骨組み」

 

こう考えると、Webサイトの骨組みですね。

デザインする前にまずこれを作らなければ話になりません。

 

 

なぜ必要なのかと言うと

 

ワイヤフレームは制作に関わる人たちとのコミュニケーションツールとして役に立ちます。

クライアントさんとの間に挟んで「こんなデザインになる予定ですよー」と話をすれば、

出来上がりのイメージを共有しやすく、新たなアイデアを引き出すきっかけにもなります。

プロジェクト開始時にクライアントさんが一方的に抱く完成図と、

仕上がるデザインが大きくかけ離れてしまうリスクも減らせます。

他にデザイン担当者がいる制作の場合は、

デザイナーへ指示を与えるためにワイヤーフレームを活用します。

 

主にディレクターが活用していることが多いですね。

 

 

 

 

ワイヤーフレーム作成の流れ

 

せっかくなので、簡単にワイヤーフレーム制作の基本的な流れをご紹介！

 

人によっては手順が違ったりするので、あくまでも参考程度にですが、

 

1.　掲載する情報を整理

2.　レイアウトを決める

3.　紙とペンで下書き

4.　デザインソフトで下書き

 

基本的にはこの順序ですかね。

 

 

 

1.　掲載する情報を整理する…

 

まずは、ワイヤーフレームに配置していく情報をまとめます。

どんな文章や画像を配置するのか。

ホームページ全体のコンセプトや各ページの主題が明確になっていることが前提条件ですが、

配置する情報を「ピックアップ → グルーピング → ランキング」の順番で進めるとスムーズかな。

とりあえず、サイトに配置する情報をひたすら洗い出します。

大量にでてきたところで、それをグループ化し、似た分類の内容をまとめます。

そしてそのグループ化したものを順位付けし、優先順位を決めて、優先順位が低いものは、

再度、本当にサイトに載せるか検討します。

これで、載せる情報が決まり次に「レイアウト」を決定します。

 

 

 

2.　レイアウトの決定

 

レイアウトは「画面をどう分割するか」、分割方法のことです。

先にまとめた情報の量と質にあわせて適切なレイアウトを選びます。

レイアウトは年々新しい見せ方が出てくるので、初心者の方は定番なものに設定しましょう。

定番なのはマルチ型です。

レイアウトも様々なので、詳しくは次回ご紹介したいと思います。（私もまだ勉強不足なところがあるので…）

 

 

 

「3.　紙とペンで下書き」　　と　　「4.　デザインソフトで下書き」

 

これは、そのまんまです。

レイアウトが決まれば、まずは紙に下書きします。

結構、何回も消したり途中で細かい変更がでたりするので、必ず下書きしましょう。

 

後は下書きが確実に決まれば、デザインソフトで清書しデザインに取り掛かるといった流れです。

 

 

私自身もワイヤーフレームはまだまだ勉強不足なところもあり、

これからも学んでいく必要があります。

Webサイトはその年の流行りや新しいスタイルが次々に出てくるので大変ですね。

 

また機会があれば、レイアウトについてご紹介できたらなと思います。

では、また。

 

 

 

ogura takuya