WEBディレクションの極意
文＝島元大輔
大阪のWeb制作会社でWebディレクターとして活躍後、（株）キノトロープに入社。数多くの企業Webサイト構築プロジェクトにかかわる。その後、 （株）ライブドアに入社、現在は（株）セシールに在籍。著書として「だから、Webディレクターはやめられない」（ソシム刊）。 url.blog-project.cecile.co.jp/
第3回
Webサイトの設計
企業のWebサイトを構築するとき、制作から運用までさまざまな人物がかかわることになる。その多くの人物をまとめあげ、作業をスムーズに進行させるため にWebディレクターの存在は欠かせない。そこで、ここではWebディレクションに焦点を当てて、Webサイト構築・運用の進め方、コツ、心得などをそれ ぞれの場面ごとに解説していこう。
前回は、Webサイト構築の戦略的な部分である「現状分析」と「企画」について紹介してきたが、今回はWebサイト構築を行ううえで非常に重要な工程である「設計」について見ていこう【1】。
.gif)
【1】Webサイト制作のおもな流れ。「設計」はサイト制作にあたっての準備を行う部分だ
この工程は、サイト制作にあたっての準備をしておく部分である。具体的にどのような資料を作成し、どのようにクライアントと意思疎通を図るかを詳しく解説していく。
■設計段階で作成すべき資料 基本3点セットについて
全体構成図
全体構成図とは、その名の通りWebサイト全体の構成を表した資料である【2】。
.gif)
【2】サイトの構造を記した全体構成図
ここでは、作成するすべてのページを1枚たりとも漏らさずに記載しておくことが重要だ。また、各ページにどのような内容が入るかを簡単に記載しておくようにするのがいいだろう。
全体構成図を作成する際は、そのリンク関係を記すのではなく、サイトの構造を記すようにしなければならない。もし、リンク関係を記そうとするならば縦横無尽に線が走ることになり、煩雑になりかねない。あくまでも、各ページに収まるべきカテゴリの下に記載していく。
コンテンツリスト
全体構成図ですべてのページを表したら、それらのページをリスト化する。コンテンツリストの目的は、作成するWebサイトの全量をつねに把握しておくことと、各ページのタイトル、URL、担当者、スケジュールなどの管理である【3】。エクセルで作成される場合が多いが、その場合はページ数を積算できる計算式を付けておくと便利である。
【3】コンテンツリストは、エクセルで作成される場合が多い
ワイヤーフレーム
全体構成図がサイト全体の構造を表すのに対して、ワイヤーフレームは各ページの詳細内容を記載する資料である【4】。一般的に要素だけを記載し、デザインは行われない。これは、デザインされたものをクライアントに確認してもらうとデザイン部分のフィードバックに終始してしまい、肝心のページ内容を確認してもらいにくいという弊害を少しでも減らすためである。
【4】各ページの詳細内容を記載したワイヤーフレーム
基本3点セットの活用方法
これら基本3点セットの資料は、Webサイト制作において必ず作成をしなければならない。クライアントとの打ち合わせを重ねていく中で、変更や調整などが 入った場合は必ずこれら3点の資料を同時に更新し、管理していく。
逆に言うと、これら3点の資料さえきちんと作成しておけば、大きく方向性を外すことはないだろう。ぜひ有効に活用してほしい。
■設計段階で作成すべき資料、補助3点セットについて
デザイン仕様書
前述の設計段階で作成すべき資料の基本3点セットのうち、ワイヤーフレームのところで説明したように、ページの内容とデザインについての確認は別々に進めたほうがスムーズにいく場合が多い。 では、ページの内容はワイヤーフレームで確認を進めるとして、デザインはどのように進めるべきなのだろうか。それを解決するのがデザイン仕様書である。ここでまとめておくべきことは【5】の通りだ。
【5】デザイン仕様書は左記の項目を基本としてまとめておくとよいだろう。そのほかに必要なものがあれば適宜追加をするようにし、公開後も使えるものとしなければならない
HTML仕様書
Webサイトの構築では、規模が大きくなるほど制作にかかわる人数も多くなり、複数のHTMLコーダーがコーディングを担当する。HTMLの記述は個人、会社によって考え方がさまざまであるため、たとえば、コーディングを行う人によって、大文字で書かれているものと小文字で書かれているものが入り乱れるといったことが起こり得る。
こうした問題を避けるためには、HTML仕様書を作成してルールを定めることが重要である【6】。書式の統一を図るとともに、クオリティを維持することができる。
【6】HTML仕様書については、複数名で利用する場合にどのようにしてアップデートするかルールを決める必要がある。設計段階である程度の骨子をまとめ、制作段階に入って、内容を叩くというイメージである
表記仕様書
忘れがちなのが表記の統一だ。たとえば、「お問い合わせ」と「お問合せ」、「下さい」と「ください」、どちらに統一して表記するのかを決める必要がある【7】。これらはさほど重要でないように思われがちだが、これを怠ったばかりに公開間際になって「すべて見直し」という事例も少なくないので注意しよう。
.gif)
【7】表記仕様書は必ず設計段階で作成しておくべきである。直前になってすべてのHTMLを修正しなければならない、ということがないようにあらかじめ準備しておくことが大切である
また、一度表記仕様書を作成しておくとほかのクライアント案件でも応用できるため、制作者側としては作成しておいて損はない資料だと思われる。
補助3点セットの活用方法
サイト制作において非常に重要な資料として、デザイン、HTML、表記、それぞれの仕様書作成について説明してきたが、実はこれらは制作が完了した公開後にも役立つものである。
それぞれの資料をひとつにまとめ、表紙と目次を付けるだけで、制作ガイドラインとなる。そう考えると、補助3点セットという名前ではあるが、制作上、非常に大きな意味合いをもつ資料であることがわかっていただけるだろう。
■ワイヤーフレームを制する者が、Webサイト構築を制する!
Webサイトの設計は、サイト全体の構成や、各ページの内容(原稿や画像)をより具体的に決めていかなければならないため、非常に難しい工程であるといえる。しかし、各項目を決定するのが想像以上に難しく、決めれないからといってクライアントにいちいち相談していては作業もなかなか進まない。
あくまでもクライアントは制作者側に対して目的を示すだけで、実際にどのような構成でどのような原稿を準備しなければならないかは、制作者側が主導権を握って決めていかなければならない。では、実際にどのように進めるといいのだろうか。効率のよい進め方を説明することにする。
Webサイトの構築をスムーズに進めたいなら、ワイヤーフレーム資料をフルに活用することをおすすめしたい。クライアント担当者、Webディレクター、Webデザイナー、HTMLコーダー、その他制作にかかわる人など、全員の共通言語としてワイヤーフレームを使用するのである。
まず、Webディレクターが全体構成図に沿ってワイヤーフレームの基本を作成する。当然、原稿や画像など素材が集まっていない部分に関しては空欄の部分が多いだろう。また、デザイン的な要素は入ってないが方向性を示したい場合もあるだろう。そういった指示や要望をすべてワイヤーフレームに記載してしまえばいいのである。何も、クライアントに出す資料だからといって、Webデザイナー、HTMLコーダーへの指示を隠す必要はない。むしろ、オープンにすることでそれぞれが考えていることが理解しやすくなり、資料の作成も最小限にとどめられるため、Webディレクターの負担も少なくなる。進行以外の重要な部分にも手が回せるようになるのである。
設計段階で作成する資料はできるだけ煩雑にせず、一元管理を心がけることが大切である。
本記事は『Web STRATEGY』2006年5-6 vol.3からの転載です
文＝島元大輔大阪のWeb制作会社でWebディレクターとして活躍後、（株）キノトロープに入社。数多くの企業Webサイト構築プロジェクトにかかわる。その後、 （株）ライブドアに入社、現在は（株）セシールに在籍。著書として「だから、Webディレクターはやめられない」（ソシム刊）。 url.blog-project.cecile.co.jp/
第3回
Webサイトの設計
企業のWebサイトを構築するとき、制作から運用までさまざまな人物がかかわることになる。その多くの人物をまとめあげ、作業をスムーズに進行させるため にWebディレクターの存在は欠かせない。そこで、ここではWebディレクションに焦点を当てて、Webサイト構築・運用の進め方、コツ、心得などをそれ ぞれの場面ごとに解説していこう。
前回は、Webサイト構築の戦略的な部分である「現状分析」と「企画」について紹介してきたが、今回はWebサイト構築を行ううえで非常に重要な工程である「設計」について見ていこう【1】。
【1】Webサイト制作のおもな流れ。「設計」はサイト制作にあたっての準備を行う部分だ
この工程は、サイト制作にあたっての準備をしておく部分である。具体的にどのような資料を作成し、どのようにクライアントと意思疎通を図るかを詳しく解説していく。
■設計段階で作成すべき資料 基本3点セットについて
全体構成図
全体構成図とは、その名の通りWebサイト全体の構成を表した資料である【2】。
【2】サイトの構造を記した全体構成図
ここでは、作成するすべてのページを1枚たりとも漏らさずに記載しておくことが重要だ。また、各ページにどのような内容が入るかを簡単に記載しておくようにするのがいいだろう。
全体構成図を作成する際は、そのリンク関係を記すのではなく、サイトの構造を記すようにしなければならない。もし、リンク関係を記そうとするならば縦横無尽に線が走ることになり、煩雑になりかねない。あくまでも、各ページに収まるべきカテゴリの下に記載していく。
コンテンツリスト
全体構成図ですべてのページを表したら、それらのページをリスト化する。コンテンツリストの目的は、作成するWebサイトの全量をつねに把握しておくことと、各ページのタイトル、URL、担当者、スケジュールなどの管理である【3】。エクセルで作成される場合が多いが、その場合はページ数を積算できる計算式を付けておくと便利である。
【3】コンテンツリストは、エクセルで作成される場合が多い
ワイヤーフレーム
全体構成図がサイト全体の構造を表すのに対して、ワイヤーフレームは各ページの詳細内容を記載する資料である【4】。一般的に要素だけを記載し、デザインは行われない。これは、デザインされたものをクライアントに確認してもらうとデザイン部分のフィードバックに終始してしまい、肝心のページ内容を確認してもらいにくいという弊害を少しでも減らすためである。
【4】各ページの詳細内容を記載したワイヤーフレーム
基本3点セットの活用方法
これら基本3点セットの資料は、Webサイト制作において必ず作成をしなければならない。クライアントとの打ち合わせを重ねていく中で、変更や調整などが 入った場合は必ずこれら3点の資料を同時に更新し、管理していく。
逆に言うと、これら3点の資料さえきちんと作成しておけば、大きく方向性を外すことはないだろう。ぜひ有効に活用してほしい。
■設計段階で作成すべき資料、補助3点セットについて
デザイン仕様書
前述の設計段階で作成すべき資料の基本3点セットのうち、ワイヤーフレームのところで説明したように、ページの内容とデザインについての確認は別々に進めたほうがスムーズにいく場合が多い。 では、ページの内容はワイヤーフレームで確認を進めるとして、デザインはどのように進めるべきなのだろうか。それを解決するのがデザイン仕様書である。ここでまとめておくべきことは【5】の通りだ。
【5】デザイン仕様書は左記の項目を基本としてまとめておくとよいだろう。そのほかに必要なものがあれば適宜追加をするようにし、公開後も使えるものとしなければならない
HTML仕様書
Webサイトの構築では、規模が大きくなるほど制作にかかわる人数も多くなり、複数のHTMLコーダーがコーディングを担当する。HTMLの記述は個人、会社によって考え方がさまざまであるため、たとえば、コーディングを行う人によって、大文字で書かれているものと小文字で書かれているものが入り乱れるといったことが起こり得る。
こうした問題を避けるためには、HTML仕様書を作成してルールを定めることが重要である【6】。書式の統一を図るとともに、クオリティを維持することができる。
【6】HTML仕様書については、複数名で利用する場合にどのようにしてアップデートするかルールを決める必要がある。設計段階である程度の骨子をまとめ、制作段階に入って、内容を叩くというイメージである
表記仕様書
忘れがちなのが表記の統一だ。たとえば、「お問い合わせ」と「お問合せ」、「下さい」と「ください」、どちらに統一して表記するのかを決める必要がある【7】。これらはさほど重要でないように思われがちだが、これを怠ったばかりに公開間際になって「すべて見直し」という事例も少なくないので注意しよう。
【7】表記仕様書は必ず設計段階で作成しておくべきである。直前になってすべてのHTMLを修正しなければならない、ということがないようにあらかじめ準備しておくことが大切である
また、一度表記仕様書を作成しておくとほかのクライアント案件でも応用できるため、制作者側としては作成しておいて損はない資料だと思われる。
補助3点セットの活用方法
サイト制作において非常に重要な資料として、デザイン、HTML、表記、それぞれの仕様書作成について説明してきたが、実はこれらは制作が完了した公開後にも役立つものである。
それぞれの資料をひとつにまとめ、表紙と目次を付けるだけで、制作ガイドラインとなる。そう考えると、補助3点セットという名前ではあるが、制作上、非常に大きな意味合いをもつ資料であることがわかっていただけるだろう。
■ワイヤーフレームを制する者が、Webサイト構築を制する!
Webサイトの設計は、サイト全体の構成や、各ページの内容(原稿や画像)をより具体的に決めていかなければならないため、非常に難しい工程であるといえる。しかし、各項目を決定するのが想像以上に難しく、決めれないからといってクライアントにいちいち相談していては作業もなかなか進まない。
あくまでもクライアントは制作者側に対して目的を示すだけで、実際にどのような構成でどのような原稿を準備しなければならないかは、制作者側が主導権を握って決めていかなければならない。では、実際にどのように進めるといいのだろうか。効率のよい進め方を説明することにする。
Webサイトの構築をスムーズに進めたいなら、ワイヤーフレーム資料をフルに活用することをおすすめしたい。クライアント担当者、Webディレクター、Webデザイナー、HTMLコーダー、その他制作にかかわる人など、全員の共通言語としてワイヤーフレームを使用するのである。
まず、Webディレクターが全体構成図に沿ってワイヤーフレームの基本を作成する。当然、原稿や画像など素材が集まっていない部分に関しては空欄の部分が多いだろう。また、デザイン的な要素は入ってないが方向性を示したい場合もあるだろう。そういった指示や要望をすべてワイヤーフレームに記載してしまえばいいのである。何も、クライアントに出す資料だからといって、Webデザイナー、HTMLコーダーへの指示を隠す必要はない。むしろ、オープンにすることでそれぞれが考えていることが理解しやすくなり、資料の作成も最小限にとどめられるため、Webディレクターの負担も少なくなる。進行以外の重要な部分にも手が回せるようになるのである。
設計段階で作成する資料はできるだけ煩雑にせず、一元管理を心がけることが大切である。
本記事は『Web STRATEGY』2006年5-6 vol.3からの転載です
