ウェブサイトが出来るまで

2005年12月9日 カテゴリー: Top Page 10, グラフィック, テクノロジー, 特集

少し前に、この写真を僕のFlickrのページに載せたところ、Flickrのオフィシャルサイトの9月23日付けの「今日の写真」として選ばれて、今までに2000人以上の人がこの写真を見てくれた。

実はこの写真は、あるクライアントのプレゼン用に作ったもので、彼らがウェブサイトのデザイン過程を簡単に、しかも楽しく理解出来るように図解したものだ。今回、同じ写真を使って、「ウェブサイトが出来るまで」の過程を書いてみたいと思う。みんなが楽しんでくれて、ウェブ・デザイナーになりたい人の参考になれば嬉しい。: )

とは言え、やっぱり色々な要素があるから、こんな風にスムーズな流れになるとは限らないし、いくつかの段階は繰り返し行なう必要がある場合もある。ま、そんな訳で、ここで書く事は「基本」だと思って読んでくれるかな？

当然の事ながら、プロジェクトはまずお喋りから始めたいものだ。最初のミーティングで仕事のおおまかな流れをはっきりさせたい。例えば、やるべき事のリストアップ、役割分担、責任者の決定、誰とコンタクトをとるのか、文章や画像を誰が用意するのかなどがそうだ。

サイトの構造について考える。重要事項は何か？何を切り捨てるか？すべてのページに表示すべき事は何か？プロジェクトの大きさにもよるけど、場合によってはクライアントのために分かりやすいサイトマップを作るべきかもしれない。コンテンツを再構築するんだったら、どちらにしろサイトマップを用意するのは重要事項だ。

ワイヤーフレームとは、ウェブサイトの骨組みの事で、すべてのナビゲーションだとか、機能、コンテンツなど、出来上がったウェブサイトに現れるすべてを示したもの。でも、ここではグラフィック・デザインの要素は全く入ってこない。つまり、問題がないかとか、何か抜けがないかをチェックするためのものだから。そして、このワイヤ—フレームはコンテンツの設計図として使われる。デザインと制作はまだまだ後だ。

ワイヤーフレームをどんな風に作るかは人による。大きなサイトでなければ、イラストレーターやフォトショップで簡単な線画でスケッチをしてもいいと思う。だけど大きなプロジェクトや、複雑なサイトになってくると、実際にこのワイヤーフレームをHTMLにした方がいいかも。クライアントがサイトをクリックしてみたり、すべてが正しい場所に収まっているかを見る事ができるからだ。

サイトマップとワイヤーフレームが出来たら、クライアントと一緒になってコンテンツについて計画を立てなくちゃならない。特に文章を。コンテンツの企画と文章を用意する事が、プロジェクトの間のクライアント一番大変な仕事。そして、これって場合によっては、すごく時間をとられる作業だと思う。

上に書いたような事が進行しているのと同時に、デザイナーは基本となるデザインについて作業する事ができる。例えば、トップページのデザインとか、メインとなるいくつかの要素とか。

ベースとなるデザインが出来たら、クライアントはそれをチェックして、方向性が合っているかを確かめる。そして、デザインの調整が行なわれる。

…多分、何度もやり直したり、微調整したりが繰り返される…

…みんなが納得するまで…

この「作業 - フィードバック - 修正」の流れは、いろんなステージで繰り返し行なわれる。コンテンツを用意する事以外でも、この確認作業は、クライアントの大きな責任の一つだ。

基礎のデザインに同意がもらえたら、レイアウトや各ページのデザインに移る事が出来る。

そして、ここでもチェック作業が行なわれて、承認がもらえるまで修正が続けられる。

ここまで作業が終わったら、HTMLを書き始めることができる…

…そしてCSS。

ここでまたフィードバック。クライアントと一緒に作業して、最終的にサイトが出来上がるまで、もっとサイトを良くするために「作業 - フィードバック - 修正」の調整が行なわれる。

プロダクションの最終ステージは、デバッグーつまり、プログラムのミスをみつけて取り除く作業だ。サイトは、いろんなプラットフォームでうまく動作するかテストして、技術上の問題をなくさないといけないし、コンテンツにミスがないか徹底的にチェックしないとならない。普通は、HTMLとCSSを構築中にどのブラウザでも上手く機能するか、確認しながら作業するべきだけど、でもどちらにしろ最終的に大掛かりな確認作業が必要になってくるんだ。これには十分な時間をかけるべきだ。

写真には”The End”と書いてあるけど、もちろん小切手をつかみ取って、ドアへダッシュしたりはしない。公開された後も、少なくとも10日間ぐらいは、サイトを見て問題がないかチェックしないといけないし、必要なら修正しなくちゃいけない。

という訳で、楽しく読んでもらえたかな？大きい写真が見たい人は、僕らのFlickr をチェックしてみてね。

作：ジョン 訳：キョウコ

30 コメント

1. クライアントがキリコであるところに何かしらの意味を感じる。

   Posted by: koike @ 12月9日2005年

2. プログラマーがロボットであることに著しく偏見を感じる。

   Posted by: ston @ 12月10日2005年

3. いやいや、偏見じゃないぞ。ユーモアだけ。そもそもこれ、エンジニアが書いたんだ。

   Posted by: k @ 12月10日2005年

4. あわわ。おどかすつもりはなかったんですよ。あまりにすてきな記事だったので、ついついイジワルしちゃっただけです。お気に障りましたらホントごめんなさい。

   Posted by: ston @ 12月10日2005年

5. [...] web2.0

   Posted by: Milano Design blog » PingMag - @ 12月11日2005年

6. とても興味深く読ませて頂きました。
   サイト制作のギスギスした部分が出てなくて素敵でした。

   Posted by: i-daisuke @ 12月12日2005年

7. [...] PingMag - ウェブサイトが出来るまで Tuesday, 13 December 2005 20:56 | in Website PingMag - 東京発 「デザイン＆ものづくり」 マガジン » Archive » ウェブサイトが出来るまで (英語版) 実はこの写真は、あるクライアントのプレゼン用に作ったんだけど、彼らがウェブサイトのデザイン過程を簡単に、しかも楽しく理解出来るように図解したものなんだ。今回、同じ写真を使って、「ウェブサイトが出来るまで」の過程を書いてみたいと思う。みんなに楽しんでもらえたらいいな。あと、ウェブ・デザイナーになりたい人の参考になれば嬉しい。:) [...]

   Posted by: MAET Blog » PingMag - ウェブサイトが出来るまで @ 12月13日2005年

8. [...] ウェブ制作の広義な意味での一般的なプロセスがかわいく説明されてるー。 http://www.pingmag.jp/J/2005/12/09/the-website-development-process/ [...]

   Posted by: tunakichi::blog » Blog Archive » pingmagが出来るまで @ 12月13日2005年

9. 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年

10. 3人の人たちを、どうにか折り合いを付けるのがお仕事なので、非常に癒されました。

    ありがとうございまっす！

    Posted by: エクリ @ 9月15日2006年

11. Hello, Your site is great. Regards, Valintino Guxxi

    Posted by: 匿名 @ 5月18日2007年

12. 僕も頑張ってみようっと。

    Posted by: PonK @ 2月5日2008年

13. [...] - ウェブサイトが出来るまで PingMag - 東京発 「デザイン＆ものづくり」 マガジン » Archive » ウェブサイ

    Posted by: BLOG.MAET.JP » Blog Archive » PingMag - ウェブサイトが出来るまで @ 2月11日2008年

14. こういうのは作る人もだけど、新人営業とか、これからWEBを売りたいって営業とクライアントに見せた方が、これだけ手順が掛かるってのがわかるから、現場がもっとスムーズになるかも。

    Posted by: Repopa @ 4月21日2008年

15. とても参考になりました

    Posted by: ponpon @ 5月2日2008年

16. 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年

17. interesting site, looks cool,some good stuff on it, keep up the good work.

    Posted by: Create Profitable Niche Market. @ 6月12日2011年

18. Turbine Idroelettriche

    Posted by: energie rinnovabili @ 6月17日2011年

19. 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年

20. 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年

21. 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年

22. Do you have a very good site

    Posted by: reza atayee fard @ 12月4日2011年

23. 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年

24. My brother suggested I might like this blog. He was entirely right. This post actually made my day. You can not imagine simply how much time I had spent for this information! Thanks!

    Posted by: Dalton Vanabel @ 3月1日2012年

25. Just wish to say your article is as astounding. The clarity in your post is just spectacular and i can assume you’re an expert on this subject. Fine with your permission allow me to grab your RSS feed to keep up to date with forthcoming post. Thanks a million and please carry on the rewarding work.

    Posted by: Mariam Cumbee @ 3月1日2012年

26. I wanted to make a simple message to be able to thank you for all the awesome tips and hints you are sharing on this website. My incredibly long internet lookup has at the end been recognized with reasonable know-how to go over with my best friends. I ‘d declare that many of us site visitors are definitely blessed to dwell in a perfect community with very many marvellous individuals with valuable advice. I feel really blessed to have seen the site and look forward to so many more pleasurable minutes reading here. Thanks once more for all the details.

    Posted by: Florentino Sourwine @ 3月10日2012年

27. Thanks for usefull site

    Posted by: ηλεκτρονικο τσιγαρο @ 3月19日2012年

28. My brother suggested I might like this website. He was totally right.
    This post actually made my day. You cann’t imagine simply how much time I had spent for this info! Thanks!

    Posted by: health deals @ 4月5日2012年

29. ウェブサイトが出来るまで good post925

    Posted by: air multiplier @ 4月21日2012年

30. Wow, how come it took me almost 4 years to find your website, I have been looking for something like this online for the pass four years,

    Posted by: Catch your spouse cheating @ 4月25日2012年

Name

Website

• 関連記事
• » Ping 折り紙の犬 No.9
• » PingMag（ピンマグ）について
• » ウェブデザイン：8つのいい感じ
• » 構造か創造か：デザインのプロセス
• » 暑い夏のための10コの道具

• Share and Enjoy:
• 
• 
• 
• 
• 
• 
• 

• Die Mausが東京にやって来た！Category: プロダクト 国内
  12月6日2005年
• フィッシュマンズ展とライブCategory: イベント/展示会 音楽
  12月2日2005年
• お絵描き対決！Category: イベント/展示会 インターナショナル グラフィック 国内
  12月1日2005年

おしらせ

ウェブマガジン「PingMag」及び、姉妹サイト「PingMag MAKE」は、2008年12月31日をもって休刊いたしました。これまで応援して下さった世界中の皆様、またご協力頂いた皆様に、心よりお礼を申し上げます。ありがとうございました。

PingMag MAKE

PingMagの姉妹版、日本のモノづくり情報を世界に発信中！

検索