第2回Webデザイン講習会
2008.07.27 Sunday | 勉強会
5月31日（土） 第2回Webデザイン講習会 〜ちょっと話せるWeb制作の現場〜
―Webプロデュース編―
Webサイトを作る工程を学び、企画の仕方を学ぶ。
―今日の目標
ウェブサイトづくりの方法・手順を学ぶ。
学校の授業でやったとすると生徒はいきなりデザインを作ると思うが、デザインには意味がある。その意味を設計図に落とし込まないと作れない。
コンセプトを決め、ブランディングをし、一つ一つの意味を全て設計図に落とし込まないと作業に入らない。
この一連の流れを今日は見ていく。
―Webプロデュース編―
Webサイトを作る工程を学び、企画の仕方を学ぶ。
―今日の目標
ウェブサイトづくりの方法・手順を学ぶ。
学校の授業でやったとすると生徒はいきなりデザインを作ると思うが、デザインには意味がある。その意味を設計図に落とし込まないと作れない。
コンセプトを決め、ブランディングをし、一つ一つの意味を全て設計図に落とし込まないと作業に入らない。
この一連の流れを今日は見ていく。
―一般的なWeb制作の流れ
○受注生産型
仕事ではウェブは受注生産という形で、オーダーメイドで作っている。将来的には、ウェブ制作もオーダーメイドではなくなると思う。ややオーダーメイド感がなくなったのは、2004年以降、ムーバブルタイプというソフトが出てから。
○制作までの流れ
プロデューサーがクライアントのところに行って、企画書を作り、ディレクターが仕様書にする。プロデューサ＝ディレクターのこともある。
どの制作会社もプロデューサの企画書をディレクターが仕様書に落とし込むことが一番難しい。
○制作体制
大きなプロジェクトになると11人くらい関わっている。そのうち、デザインをする人は4人。あとの人は、文書管理業務だったり、折衝業務だったりする。プロデューサが企画書をつくる。ディレクター等が仕様書を作る。デザイナー，コーディングをする人（大抵新人），FLASHオーサリングはデザイナーより難しい仕事をしたりしている。コンテンツプランナー，ライターなどが下についていたりする。システムマネージャーは大規模サイトになると、プログラマーが6人くらい張り付くこともある。
○ウェブプロデュースとは？
ウェブサイト作りに必要なあらゆるものを手配すること。手配するために企画書を作成する。
-企画書に盛り込むこと
・サイトの目的…クライアントのサイトの目的がはっきりしていないことも多いので、それを考えてあげることも仕事
・ブランディング…ロゴ，色，ストーリーを考える。
・コンセプト
・機能設計…ショッピングカートをつける等
などを企画書に盛り込む。
―企画書作成法
どういうふうに企画書を作っているのか参考にしていただきたい。
○サイトの目的
まず、ジャンルをはっきりさせる必要がある。ポータルサイトなのか、コミュニティサイトなのか。
ターゲットもたいせつ。高校生がよく見るサイトはお菓子、化粧品、携帯会社、ゲーム、ファミレス、音楽配信など。そういうサイトは低年齢層が見るということを前提に作られているので、サイトの作り方が変わってくる。若い人向けだと、インパクト重視となる。たとえば、カラフルな色、大きい写真、大きいキャッチ、たくさんの写真。携帯電話との連携もたいせつになってくる。上の世代もターゲットに入ってくると、デザインも変わってくる。サイトのデザインを比べると携帯電話のキャリアの三社であれば、auが一番若い人に訴求しようとしているように見える。
○サイトのコンセプト
ターゲットが決まったらポジショニング。ポジショニング→オリジナリティ→達成目標→ソリューション→ロードマップ この６つが大事。どれか一つが抜けてもうまくいかない。
ポジショニング：競合サイトの中で、どのような位置になるか。
オリジナリティ：他のサイトとの違い。
達成目標：売上を上げるのか、アクセスを上げるのか、ブランド力を上げるのか。
ソリューション：何を解決するか。何に困っていて何を解決したいのか。例えば、全国で一つしか店舗がない服屋があって、全国に買いたい人がいれば、ECサイトが必要になる。何かの不便を解消するようなサイトでないと、サイトがいきてこない。
ロードマップ：1年後どうするのか、2年後どうするのか。あるいは、2ヵ月後どうするのか。
○サイトのブランディング
ブランディングとは何かというと、サイトの名前、そのサイトで紹介される商品の名前、サービスの名前などのこと。あとは、ロゴマーク、テーマカラー。こういうものを決めないとサイトのデザインも決めにくい。
デジタルハリウッドでは、最初はチームを作ってやってもらう。まず、グループ名を決めてもらったり会社名を決めてもらう。名前を決めると、意外とすんなりといく。
○競合分析
最近は様々なサイトが出尽くしているので、何らかのサイトを参考にせざるを得ない。違いをどう出すか。
○デザイン
感覚ではデザインはしない。ほかの工程よりデザインは複雑。10項目（レイアウト、ナビゲーション、画面分割など）をきちんとやっていかないといけない。
昔は奇抜なデザインが多かったが、最近は20代以上向けのサイトのデザインはほとんど同じ。他と違っていて、ボタンの位置がわからないと嫌がられるので敬遠されている。3秒ルールといって、3秒で、戻るボタンを押されてしまう。
時代とともに常識がくつがえっていくのがWebの世界。１、２年で流行は変わっていく。デザインが落ち着いてきたのは、ブログが出てきた、というのがある。一番見せたいコンテンツに早道で辿り着かせようというのが最近の作り方。5年前の平均ページビューは10ページだった。ところが、ここ2年くらいは3ページになった。それもトップページに入らないで、中のコンテンツページに検索で入ってきて、それで出て行ってしまう。
素人とプロのサイトの最大の違いはフォントと言われている。画像ではないフォントを多用しているのは素人のサイト。フォントがしっかりと固定されていて、それが画像になっているとプロっぽい。
あとは、写真。昔はそのまま写真を貼っていたが、最近はすごくうるさく言われるようになった。写真の明るさを統一するという動きがでてきている。写真の照度は写真ごとに全然違うものだが、それをできるだけ統一する。ちぐはぐ感をなくしていくことが大事。明るさを変えただけで、デザインが変わって見える。
○サイトマップ
分類、類型化。グローバルナビゲーションもローカルナビゲーションも7つ前後がポイント。人間の頭は、7個の数字までなら扱えるといわれている。なので、7つくらいに分類するのがポイントらしい。なおかつ、階層を意識する。最近は見たいページにダイレクトに入って、そのまますぐ出て行ってしまうので、トップからすぐ1クリックか2クリックまで。だから、今は、階層は3階層まで、といわれている。
○サイトの機能
サイトはFLASHで動画を流すのも多い。必須になってきたのがCMS。この辺りは最初に考えても進まないので、コンセプトやデザインを考えた後。
生徒に教える際に参考になる本はあるか？
・『Webデザイナー必携 最新!!Webコレクション』…Webのトップページと中のページがいくつか紹介されている。
・『Webデザイン コンセプトメイキングから運用まで』…コンセプトメイキングの方法など。詳しく書いてある。
・『Webディレクション標準ガイド』…これが一冊あると、いくらぐらいで作るか、とかまで全部わかる。
・『御社のホームページがダメな理由』…学校のホームページがいまいち、ということにお悩みの方には多少参考になるかも。どういうものがだめなのか参考になる。
・『ウェブの仕事力が上がる標準ガイドブック Webリテラシー』…どの職種の人にでも使える内容
○受注生産型
仕事ではウェブは受注生産という形で、オーダーメイドで作っている。将来的には、ウェブ制作もオーダーメイドではなくなると思う。ややオーダーメイド感がなくなったのは、2004年以降、ムーバブルタイプというソフトが出てから。
○制作までの流れ
プロデューサーがクライアントのところに行って、企画書を作り、ディレクターが仕様書にする。プロデューサ＝ディレクターのこともある。
どの制作会社もプロデューサの企画書をディレクターが仕様書に落とし込むことが一番難しい。
○制作体制
大きなプロジェクトになると11人くらい関わっている。そのうち、デザインをする人は4人。あとの人は、文書管理業務だったり、折衝業務だったりする。プロデューサが企画書をつくる。ディレクター等が仕様書を作る。デザイナー，コーディングをする人（大抵新人），FLASHオーサリングはデザイナーより難しい仕事をしたりしている。コンテンツプランナー，ライターなどが下についていたりする。システムマネージャーは大規模サイトになると、プログラマーが6人くらい張り付くこともある。
○ウェブプロデュースとは？
ウェブサイト作りに必要なあらゆるものを手配すること。手配するために企画書を作成する。
-企画書に盛り込むこと
・サイトの目的…クライアントのサイトの目的がはっきりしていないことも多いので、それを考えてあげることも仕事
・ブランディング…ロゴ，色，ストーリーを考える。
・コンセプト
・機能設計…ショッピングカートをつける等
などを企画書に盛り込む。
―企画書作成法
どういうふうに企画書を作っているのか参考にしていただきたい。
○サイトの目的
まず、ジャンルをはっきりさせる必要がある。ポータルサイトなのか、コミュニティサイトなのか。
ターゲットもたいせつ。高校生がよく見るサイトはお菓子、化粧品、携帯会社、ゲーム、ファミレス、音楽配信など。そういうサイトは低年齢層が見るということを前提に作られているので、サイトの作り方が変わってくる。若い人向けだと、インパクト重視となる。たとえば、カラフルな色、大きい写真、大きいキャッチ、たくさんの写真。携帯電話との連携もたいせつになってくる。上の世代もターゲットに入ってくると、デザインも変わってくる。サイトのデザインを比べると携帯電話のキャリアの三社であれば、auが一番若い人に訴求しようとしているように見える。
○サイトのコンセプト
ターゲットが決まったらポジショニング。ポジショニング→オリジナリティ→達成目標→ソリューション→ロードマップ この６つが大事。どれか一つが抜けてもうまくいかない。
ポジショニング：競合サイトの中で、どのような位置になるか。
オリジナリティ：他のサイトとの違い。
達成目標：売上を上げるのか、アクセスを上げるのか、ブランド力を上げるのか。
ソリューション：何を解決するか。何に困っていて何を解決したいのか。例えば、全国で一つしか店舗がない服屋があって、全国に買いたい人がいれば、ECサイトが必要になる。何かの不便を解消するようなサイトでないと、サイトがいきてこない。
ロードマップ：1年後どうするのか、2年後どうするのか。あるいは、2ヵ月後どうするのか。
○サイトのブランディング
ブランディングとは何かというと、サイトの名前、そのサイトで紹介される商品の名前、サービスの名前などのこと。あとは、ロゴマーク、テーマカラー。こういうものを決めないとサイトのデザインも決めにくい。
デジタルハリウッドでは、最初はチームを作ってやってもらう。まず、グループ名を決めてもらったり会社名を決めてもらう。名前を決めると、意外とすんなりといく。
○競合分析
最近は様々なサイトが出尽くしているので、何らかのサイトを参考にせざるを得ない。違いをどう出すか。
○デザイン
感覚ではデザインはしない。ほかの工程よりデザインは複雑。10項目（レイアウト、ナビゲーション、画面分割など）をきちんとやっていかないといけない。
昔は奇抜なデザインが多かったが、最近は20代以上向けのサイトのデザインはほとんど同じ。他と違っていて、ボタンの位置がわからないと嫌がられるので敬遠されている。3秒ルールといって、3秒で、戻るボタンを押されてしまう。
時代とともに常識がくつがえっていくのがWebの世界。１、２年で流行は変わっていく。デザインが落ち着いてきたのは、ブログが出てきた、というのがある。一番見せたいコンテンツに早道で辿り着かせようというのが最近の作り方。5年前の平均ページビューは10ページだった。ところが、ここ2年くらいは3ページになった。それもトップページに入らないで、中のコンテンツページに検索で入ってきて、それで出て行ってしまう。
素人とプロのサイトの最大の違いはフォントと言われている。画像ではないフォントを多用しているのは素人のサイト。フォントがしっかりと固定されていて、それが画像になっているとプロっぽい。
あとは、写真。昔はそのまま写真を貼っていたが、最近はすごくうるさく言われるようになった。写真の明るさを統一するという動きがでてきている。写真の照度は写真ごとに全然違うものだが、それをできるだけ統一する。ちぐはぐ感をなくしていくことが大事。明るさを変えただけで、デザインが変わって見える。
○サイトマップ
分類、類型化。グローバルナビゲーションもローカルナビゲーションも7つ前後がポイント。人間の頭は、7個の数字までなら扱えるといわれている。なので、7つくらいに分類するのがポイントらしい。なおかつ、階層を意識する。最近は見たいページにダイレクトに入って、そのまますぐ出て行ってしまうので、トップからすぐ1クリックか2クリックまで。だから、今は、階層は3階層まで、といわれている。
○サイトの機能
サイトはFLASHで動画を流すのも多い。必須になってきたのがCMS。この辺りは最初に考えても進まないので、コンセプトやデザインを考えた後。
生徒に教える際に参考になる本はあるか？
・『Webデザイナー必携 最新!!Webコレクション』…Webのトップページと中のページがいくつか紹介されている。
・『Webデザイン コンセプトメイキングから運用まで』…コンセプトメイキングの方法など。詳しく書いてある。
・『Webディレクション標準ガイド』…これが一冊あると、いくらぐらいで作るか、とかまで全部わかる。
・『御社のホームページがダメな理由』…学校のホームページがいまいち、ということにお悩みの方には多少参考になるかも。どういうものがだめなのか参考になる。
・『ウェブの仕事力が上がる標準ガイドブック Webリテラシー』…どの職種の人にでも使える内容
author : IMAI Daisuke | - | -