サイタWeb・デザインスクールホームページ作成講座東京 Webデザインの教室 小西クラス スクールブログ ワイヤーフレー...

ワイヤーフレームってなんだろう?

こんにちは。
お約束通り(?)前回の続きを書いていきますね。
随分と間が空いてしまいましたので、思い出しつつ。。

そうそう、「ワイヤーフレーム」についてですね。

初めて聞く人もいるかもしれませんが、
Webデザインの分野ではよく耳にするワードだと思います。
(むしろ必須?)

前回のブログでも少し触れましたが、
ワイヤーフレームとは、Webの設計図のようなものです。
設計図なので、Web制作においてとても重要です。
(設計図がないと家を建てられませんよね!)

ラフなアイデアスケッチのような簡単なビジュアルを
実際により具体的にWebとして作っていくためのステップとして、
ワイヤーフレームを書きます。

ワイヤーフレームとして書かれるのは、
タイトルロゴやヘッダー画像、メニュー、本文の配置される場所。
それぞれの大きさのバランス。各項目の数。などですね。

それらをざっくりと線(ワイヤー)だけで書いていきます。
線や四角など簡単な図形だけでWebの骨格を表現するんです。

より詳細なものになると具体的なピクセル数や各項目の比率、
コンテンツ名、使われる色などもワイヤーフレームの段階で落とし込まれることもあります。

このワイヤフレームを骨組みとして、各パーツを用意していきます。
ロゴマークや、画像を準備したり、メニューのボタンを制作したり。
ワイヤーフレームに書かれた要素ひとつずつを制作していきます。


ちょっと文章だけでは伝わりにくいですかね。
ワイヤーフレームを説明する良い例えが浮かばないのですが、

例えば、

図面を見ながらプラモデルを組み立てるみたいな、、、、いや、
輪郭線だけのぬりえに色を塗っていくような、、、いや、
台本をみながら役者がセリフ合わせをする、、、いやこれは違う(笑)

そうですね。
漫画業界の言葉で言うとネームに近いのかもしれません。
ネームをたたき台にして、編集者と漫画家が意見交換しながら作品を作っていきますよね。

なんとなく想像していただけたでしょうか。

もちろん、下書きやスケッチ、ワイヤーフレームなどをなにも見ずに
HTMLとCSS、または他のプログラムなどを用いて
Webページを構築できるデザイナーもいると思います。
これはかなりいろいろなスキルに長けた優秀な人材でないと難しいでしょう。

でもですよ。
このやり方だとその人しか制作も修正も更新もできないんですよね。


Webデザインには大抵複数の人が関わります。

クライアント、プロデューサー、ディレクター、デザイナー、プログラマー、、
それぞれの役割があり、それぞれのコンセプト・思惑・意図があるでしょう。

そこで!ワイヤーフレームが登場するのです。

ワイヤーフレームを元にそれぞれの立場から意見を出しあい、
ワイヤーフレームを修正し、改良しながら最終的なデザインへ向かっていきます。

少し話がそれてしまいました。


いずれにせよ、ラフスケッチをもう少しよそ行きにしてあげたのが
ワイヤーフレームくらいに捉えていただいても構わないと思います。


Webデザインの教室 小西クラスでは
ワイヤーフレームを書く練習をおすすめしています。
普段なにげなく見ているWebページをスケッチするんです。

紙とえんぴつで。

ロゴマークがどこにありますか?
メニュー項目がどこに何個並んでいますか?
お問い合わせが何箇所ありますか?
メイン画像はどれくらいの大きさですか?
サイドバーにはなにが表示されていますか?

このようなWebの構造についての観察眼・意識はなかなか身につきません。
でも、一度でもワイヤーフレームを書いてみると「はっ!」となることがあるんですよ。
ぜひ一度試してみてください。

ワイヤーフレームはこのように、Webデザインにおけるレイアウトや
コンテンツの内容を把握するためのものでもあります。
なので、これが書けたらもうほぼほぼWebは作れたようなものですね!
(もちろん内容的な意味で!笑)



前回のブログと合わせてここまではPCを使わなくてもできることです。
紙とえんぴつだけでできますよね。

しかし、ここまでの作業がしっかりできているかどうかで、
最終的にできあがるWebのクオリティは大きく違ってくるでしょう。
それくらい大切だし、欠かせないWebデザインの工程かな、と思います。



参考URL「ワイヤーフレーム 画像 検索結果」
http://ht.ly/ppnRV




さぁ、では次回からはじゃあ、どうやってそのワイヤーフレームをWebにするのさ?
という部分について書けたらいいかな、と思います。

次回「HTMLってなんだろう?」にご期待ください!


 

(2013年10月2日(水) 13:21)

前の記事

次の記事

目的・種類別にホームページ作成・作り方講座を探す

新着記事

こんにちは!前々回の予告通り、HTMLをテーマにブログを書いてみますね! さぁまずは天下のWikipediaを覗いてみましょう。 "HyperText Markup Language(ハイパーテキスト マークアップ ランゲージ)、略記・略称:HTML(エイチティーエムエル)とは、ウ...

こんにちは!Cytaコーチの小西シュンヤです。 前回のブログの最後に "次回「HTMLってなんだろう?」にご期待ください!" と書いていたのですが、その話はさらに次回に延長させてください。笑 ごめんなさい。 というのも、今日は僕のレッスン開講時間の変更について...

こんにちは。 お約束通り(?)前回の続きを書いていきますね。 随分と間が空いてしまいましたので、思い出しつつ。。 そうそう、「ワイヤーフレーム」についてですね。 初めて聞く人もいるかもしれませんが、 Webデザインの分野ではよく耳にするワードだと思います。 (むしろ必須?)...

こんにちは! 前回はホームページって何だろう?というテーマで書きました。 尻切れトンボで終わってしまいましたが、、、笑 このテーマの続きはまた必ず書きますので! 今日は、ホームページ作成からちょっと視野を広げて、 "Webデザイン"について書いてみようかなと思います。 ...

こんにちは。小西シュンヤです。 今日はそもそもホームページってなんなの? という素朴な疑問について考えてみたいなと思います。 しかしながらこれって結構大きい問いなので、 全貌を語るにはブログを何回も更新しなくてはならなくなりそう、、、(笑) ひとまず今回はこの「ホームページ」とい...

ブログ記事 ページ先頭へ