全国5万人が受講している「サイタ」

ホームページ作成・作り方講座

ホームページ作成・作り方講座を選ぶ

初回60分無料体験OK

まずは60分の体験レッスンからスタート。
無料で実際のレッスンを体感できます。

月々4,900円〜の低料金

先生ひとりじめの個人レッスンを、この価格でご提供。レッスンは全てプライベート形式の60分間です。

通わない月は0円

曜日と時間を選べるので、
無理なくマイペースに通えます。

詳しくはこちら

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)

前の記事

次の記事

この記事を書いたコーチ

10~70代の学生まで、美大で授業を担当。初歩の初歩から、安心のレッスン

Webデザインの教室 小西クラス
小西シュンヤ (ホームページ作成)

東京・恵比寿・渋谷・新宿・吉祥寺・国分寺・中野・阿佐ケ谷・明大前・下北沢・中目黒・自...

ブログ記事 ページ先頭へ