本日は私が生業としている

ウェブ製作のワークフローを紹介します。

 

ウェブ製作は

①ディレクション

↓

②デザイン

↓

③コーディング

↓

④デバック

↓

⑤公開

という流れで進んでいきます。

１人で全てが出来る人はまれで

基本的にはチームを組んで製作していきます。

 

今日は①のディレクションの部分

「ワイヤーフレーム」の作成について紹介します。

 

step1　何はともあれクライアントとのコミュニケーション

製作がいざスタートして、始めの重要ポイントは

クライアントのイメージしているものをいかに

共有できるかという部分に尽きるかと思います。

 

この工程があいまいだとお互いに出来上がった時点で

「？？」という状況に陥ります。

 

製作物としては「サイト設計図」と「ワイヤーフレーム」を作成。

クライアントに了解を得たらデザインとコーディングに入ります。

 

step2　サイト設計図の作成

新規製作の場合も、リニューアルの場合も

必要コンテンツを関係図にいまとめた「サイト設計図」

を製作します。

 

サイト設計図は全体を俯瞰するためのものですが

もちろんこれだけでは不十分なので、デザインに入るための

「ワイヤーフレーム」を作ります。

（webディレクションの世界では「ワイヤー」と略される場合もありますね）

 

step3　ワイヤーフレームの作成

ワイヤーフレームはデザインされていない

段階での実際のサイトレイアウトや挙動を現すものとして作成します。

 

私は、画像などの配置の操作が楽という理由から

パワーポイントでワイヤーフレームを作る事が多いです。

 

構成要素や引き出し線での説明など

クライアントにイメージが伝わりやすいように

作成していきます。

 

ワイヤーフレームが完成したら
それをデザイナーに渡してデザインに入ります。

デザインは一度フォトショップなどで製作する場合や

いきなりコーディングして動くモップアップとして作成する場合など

作り方はさまざまです。

 

最近はjQueryなど動きが多彩になってきているので

後者のほうが増えている感覚はあります。

 

いずれにしても、デザインＵＰはクライアントに

最も夢と希望を持ってもらえる段階なので

その前段階としてのワイヤーフレーム作成は

丹念に、力をこめています。

 

まとめ

いかがでしたでしょうか。

web製作のワークフローの上流工程

ワイヤーフレームはwebディレクターとしての

コミュニケーションスキルが求められる重要工程です。

 

今後も最新の技術にキャッチアップしながら

ディレクションスキルの底上げをします。

 
[adsense]