blog

BLOGブログ

ARCHIVES

かなぴょん

デザインから納品まで熱い気持ちで最後まで進めるためのweb制作フロー その2

blog09072

こんにちは!中西です。

 

 

前回から引き続きweb制作フローについてです!

今回はデザインから納品までの流れについてです。その前までの工程はこちらでおさらいしてください!

 

前回最後に登場したワイヤーフレームなるもの。ここ重要ですので前回の説明に少し補足いたします。

 

 

 

ワイヤーフレームを作成しよう

blog09071

ワイヤーフレームはサイト全体の設計図としての役割を持っています。

デザイナーはこれをもとにデザインを起こしていきますし、プロジェクトを進める中でお客様から質問があった際も、ワイヤーフレームを見れば認識のずれがなく進めていけるという重要なものです。

 

ワイヤーフレーム作成は前回も言ったように、ディレクターが作る場合もあれば、デザイナーが作る場合もあります。

基本的にはツールにしばりはないそうですので、手書きでもOKですし、エクセルが得意ならエクセル、ワード、パワーポイントなどをつかってもOKです。デザイナーならフォトショップやイラストレーターで作る人も。

ただ、作成者が自分だけわかればいいってものではないので、プロジェクトにかかわる他の人が見てわかりやすいものを作成する必要があります。

 

今はワイヤーフレームが簡単に作成できるフリーのツールもあるので、自分にとって操作しやすいものを見つけるのも作業効率を上げるという点で重要ですね。

さらには、ワイヤーフレームを集めたサイトもあるようでして。そもそもどういうものを作ったらいいのよ?という方はこういったものを参考にしてみるのもいいかもしれません。

 

私が見た中でおすすめはこちら。

■Wireframe Showcase

http://www.wireframeshowcase.com/

 

ワイヤーフレームと実際にそれをもとに作成されたページがどちらも見れます。配置ががらりと変わっているものもありますが、結構まんまなんですよね。まさに設計図です。

デザイナーが作ることもあると書きましたが、基本的にはお客様と話し合いを進めているプロジェクトの流れが分かっているディレクターが作成するほうが、お客様と認識のずれがないものを作成できると思います。

ディレクター自身も、そのワイヤーフレームをもとに、デザイナーにお客様からのデザインの要望などを伝えていくという形ですね。

 

 

 

デザインしよう

blog09073

完成したワイヤーフレームをもとに、サイトの目的をわかりやすく、ユーザーに伝わるよう見える形にしていくのがデザイナーの仕事です。

 

コーディングも見た目にかかわる部分ですのでデザインに含まれますが、同軸で進めていくことは基本的にはしないです。

 

デザインが完成した段階で、お客様にも確認していただき、ここで修正があればすべて直した状態でコーディングの作業に入っていきます。

 

 

 

必ずテストします

blog09072

すべてのぺージのコーディングが完了し、ページ内リンクなどの同線や、動きの入っている部分、システムの入っている部分が問題なく動作するかどうかのテストが行われます。

 

確認せずに納品するなんてもってのほかですよ!

 

 

 

納品です!

blog09074

問題のある箇所については修正し微調整し、すべてのテストが完了した段階でついに納品となります。

おめでとうございます!!

 

 

 

まとめ

デザインに入ってからの工程がさらーっと流れたように思われるかもしれませんが、もちろんこの部分の作業も細かくフェーズが分かれております。

ユーザーにとってわかりやすく使いやすいもの、かつ、お客様の求める形で表現するにはどういうデザインがいいだろうかということを、デザインまでに決まった情報を一つ一つ整理しながら、デザイナーとコーダーが試行錯誤しながら、作成しています。基本的にデザインに関すること以外の修正はこの段階で起こらないことが前提で書きました。

 

 

遠回りのように見えることが、結局一番の近道だったり。
一瞬その時は近道したように見えていても、大事なことを飛ばしていては本末転倒です。

 

もちろん制作会社によってもチェックのタイミングや進め方は異なるかと思いますが、web制作って何からするの??という方の参考に少しでもなれば幸いです!

それでは!!

 

 

 

この人が書いた記事

かなぴょんの記事をもっと見る

関連する記事