少し前に、この写真を僕のFlickrのページに載せたところ、Flickrのオフィシャルサイトの9月23日付けの「今日の写真」として選ばれて、今までに2000人以上の人がこの写真を見てくれた。
実はこの写真は、あるクライアントのプレゼン用に作ったもので、彼らがウェブサイトのデザイン過程を簡単に、しかも楽しく理解出来るように図解したものだ。今回、同じ写真を使って、「ウェブサイトが出来るまで」の過程を書いてみたいと思う。みんなが楽しんでくれて、ウェブ・デザイナーになりたい人の参考になれば嬉しい。: )
とは言え、やっぱり色々な要素があるから、こんな風にスムーズな流れになるとは限らないし、いくつかの段階は繰り返し行なう必要がある場合もある。ま、そんな訳で、ここで書く事は「基本」だと思って読んでくれるかな？
当然の事ながら、プロジェクトはまずお喋りから始めたいものだ。最初のミーティングで仕事のおおまかな流れをはっきりさせたい。例えば、やるべき事のリストアップ、役割分担、責任者の決定、誰とコンタクトをとるのか、文章や画像を誰が用意するのかなどがそうだ。
サイトの構造について考える。重要事項は何か？何を切り捨てるか？すべてのページに表示すべき事は何か？プロジェクトの大きさにもよるけど、場合によってはクライアントのために分かりやすいサイトマップを作るべきかもしれない。コンテンツを再構築するんだったら、どちらにしろサイトマップを用意するのは重要事項だ。
ワイヤーフレームとは、ウェブサイトの骨組みの事で、すべてのナビゲーションだとか、機能、コンテンツなど、出来上がったウェブサイトに現れるすべてを示したもの。でも、ここではグラフィック・デザインの要素は全く入ってこない。つまり、問題がないかとか、何か抜けがないかをチェックするためのものだから。そして、このワイヤ—フレームはコンテンツの設計図として使われる。デザインと制作はまだまだ後だ。
ワイヤーフレームをどんな風に作るかは人による。大きなサイトでなければ、イラストレーターやフォトショップで簡単な線画でスケッチをしてもいいと思う。だけど大きなプロジェクトや、複雑なサイトになってくると、実際にこのワイヤーフレームをHTMLにした方がいいかも。クライアントがサイトをクリックしてみたり、すべてが正しい場所に収まっているかを見る事ができるからだ。
サイトマップとワイヤーフレームが出来たら、クライアントと一緒になってコンテンツについて計画を立てなくちゃならない。特に文章を。コンテンツの企画と文章を用意する事が、プロジェクトの間のクライアント一番大変な仕事。そして、これって場合によっては、すごく時間をとられる作業だと思う。
上に書いたような事が進行しているのと同時に、デザイナーは基本となるデザインについて作業する事ができる。例えば、トップページのデザインとか、メインとなるいくつかの要素とか。
ベースとなるデザインが出来たら、クライアントはそれをチェックして、方向性が合っているかを確かめる。そして、デザインの調整が行なわれる。
…多分、何度もやり直したり、微調整したりが繰り返される…
…みんなが納得するまで…
この「作業 - フィードバック - 修正」の流れは、いろんなステージで繰り返し行なわれる。コンテンツを用意する事以外でも、この確認作業は、クライアントの大きな責任の一つだ。
基礎のデザインに同意がもらえたら、レイアウトや各ページのデザインに移る事が出来る。
そして、ここでもチェック作業が行なわれて、承認がもらえるまで修正が続けられる。
ここまで作業が終わったら、HTMLを書き始めることができる…
…そしてCSS。
ここでまたフィードバック。クライアントと一緒に作業して、最終的にサイトが出来上がるまで、もっとサイトを良くするために「作業 - フィードバック - 修正」の調整が行なわれる。
プロダクションの最終ステージは、デバッグーつまり、プログラムのミスをみつけて取り除く作業だ。サイトは、いろんなプラットフォームでうまく動作するかテストして、技術上の問題をなくさないといけないし、コンテンツにミスがないか徹底的にチェックしないとならない。普通は、HTMLとCSSを構築中にどのブラウザでも上手く機能するか、確認しながら作業するべきだけど、でもどちらにしろ最終的に大掛かりな確認作業が必要になってくるんだ。これには十分な時間をかけるべきだ。
写真には”The End”と書いてあるけど、もちろん小切手をつかみ取って、ドアへダッシュしたりはしない。公開された後も、少なくとも10日間ぐらいは、サイトを見て問題がないかチェックしないといけないし、必要なら修正しなくちゃいけない。
という訳で、楽しく読んでもらえたかな？大きい写真が見たい人は、僕らのFlickr をチェックしてみてね。
作：ジョン
23 コメント
- Share and Enjoy:
ウェブマガジン「PingMag」及び、姉妹サイト「PingMag MAKE」は、2008年12月31日をもって休刊いたしました。これまで応援して下さった世界中の皆様、またご協力頂いた皆様に、心よりお礼を申し上げます。ありがとうございました。
PingMagの姉妹版、日本のモノづくり情報を世界に発信中！
PingMagから大切なお知らせ
2008年12月31日
板谷龍一郎：色鮮やかでユーモア溢れる世界
2008年12月29日
マギボン：YouTube発のネットアイドル
2008年12月26日
ベネデッタ・ボッロメティ：たくさんの元気をくれる不思議な絵
2008年12月24日
中銀カプセルタワービル：未来の建築
2008年12月22日
花村えい子：キュートでポップな60年代の少女マンガ
2008年12月19日
日本のハイテクトイレ事情
2008年12月17日
アミューズメント：アートやファッションと融合するゲーム文化
2008年12月15日
HIROCOLEDGE：現代に溶け込む新たな伝統
2008年12月12日
瀬戸正人：ビンラン売りの甘い誘惑
2008年12月10日
クライアントがキリコであるところに何かしらの意味を感じる。
Posted by: koike @ 12月9日2005年
プログラマーがロボットであることに著しく偏見を感じる。
Posted by: ston @ 12月10日2005年
いやいや、偏見じゃないぞ。ユーモアだけ。そもそもこれ、エンジニアが書いたんだ。
Posted by: k @ 12月10日2005年
あわわ。おどかすつもりはなかったんですよ。あまりにすてきな記事だったので、ついついイジワルしちゃっただけです。お気に障りましたらホントごめんなさい。
Posted by: ston @ 12月10日2005年
[...] web2.0
Posted by: Milano Design blog » PingMag - @ 12月11日2005年
とても興味深く読ませて頂きました。
サイト制作のギスギスした部分が出てなくて素敵でした。
Posted by: i-daisuke @ 12月12日2005年
[...] PingMag - ウェブサイトが出来るまで Tuesday, 13 December 2005 20:56 | in Website PingMag - 東京発 「デザイン＆ものづくり」 マガジン » Archive » ウェブサイトが出来るまで (英語版) 実はこの写真は、あるクライアントのプレゼン用に作ったんだけど、彼らがウェブサイトのデザイン過程を簡単に、しかも楽しく理解出来るように図解したものなんだ。今回、同じ写真を使って、「ウェブサイトが出来るまで」の過程を書いてみたいと思う。みんなに楽しんでもらえたらいいな。あと、ウェブ・デザイナーになりたい人の参考になれば嬉しい。:) [...]
Posted by: MAET Blog » PingMag - ウェブサイトが出来るまで @ 12月13日2005年
[...] ウェブ制作の広義な意味での一般的なプロセスがかわいく説明されてるー。 http://www.pingmag.jp/J/2005/12/09/the-website-development-process/ [...]
Posted by: tunakichi::blog » Blog Archive » pingmagが出来るまで @ 12月13日2005年
Wow, I was happy to visit your site.
I am working as a web planner in Korea.
The pictures you show us, are very Similar to my life at work.
I will visit your home from time to time.
Christmas is coming soon, Merry Chirstmas!!
Posted by: PAPERonNet @ 12月22日2005年
3人の人たちを、どうにか折り合いを付けるのがお仕事なので、非常に癒されました。
ありがとうございまっす！
Posted by: エクリ @ 9月15日2006年
Hello, Your site is great. Regards, Valintino Guxxi
Posted by: 匿名 @ 5月18日2007年
僕も頑張ってみようっと。
Posted by: PonK @ 2月5日2008年
[...] - ウェブサイトが出来るまで PingMag - 東京発 「デザイン＆ものづくり」 マガジン » Archive » ウェブサイ
Posted by: BLOG.MAET.JP » Blog Archive » PingMag - ウェブサイトが出来るまで @ 2月11日2008年
こういうのは作る人もだけど、新人営業とか、これからWEBを売りたいって営業とクライアントに見せた方が、これだけ手順が掛かるってのがわかるから、現場がもっとスムーズになるかも。
Posted by: Repopa @ 4月21日2008年
とても参考になりました
Posted by: ponpon @ 5月2日2008年
like your website, looks cool,some interesting stuff on it keep up the good work.
Posted by: Information For Creating Profitable Niche Market Websites. @ 6月9日2011年
interesting site, looks cool,some good stuff on it, keep up the good work.
Posted by: Create Profitable Niche Market. @ 6月12日2011年
Turbine Idroelettriche
Posted by: energie rinnovabili @ 6月17日2011年
Enjoy this site very much. Chess training is ongoing; individual play, individual coaching, clubs, tournys, computers, so many opportunities for improved play. What do you think?
Posted by: pc chess games @ 9月2日2011年
I am planning on being a creative writing teacher for my Senior project. The problem is, I can’t think of a grade that kids start creative writing. I would rather deal with younger kids than older ones because in the end I want to give them a book of the classes collected works. I was thinking 3rd Grade, but I can’t remember when I started creative writing. Any and all help would be much appreciated. Thank you. :).
Posted by: HGH @ 11月8日2011年
Cyber Monday 2011 Deals List my blog. you can shopping online Cyber Monday Sale have product HDTV,3DTV,Tablets,Laptops,Netbooks,Notebooks,Game Consoles & Electronics, you can see list Best Cyber Monday Deals and buy cheapest product and super saving shipping from AMAZON.COM
Posted by: Cyber Monday 2011 Deals List @ 11月28日2011年
Do you have a very good site
Posted by: reza atayee fard @ 12月4日2011年
Free membership for Deaf and Hard of Hearing individuals. Dating, forums, links, feeds, chat, videos, and social media. Join Us!
Posted by: Deaf community @ 1月23日2012年