/HVVRQ Webサイト開発プロセス目標このレッスンでは次のことを学びます。サイトの対象者の決定 Webサイトのビジョンステートメントの作成サイトの戦略の作成と、戦略を実行する戦術の明確化マインドマップ法を使用したWebサイトの構築サイトに示される企業／組織や、目的とするサイト対象者に適したデザイン上の目標の設定サイトのメタファーの作成サイトのデザインおよびアーキテクチャの仕様の作成フローチャートとWebワイヤフレームを用いたページレイアウトの決定デザインの仕様を満たすWebページおよびサイトテンプレートの作成従来のブラウザとPDAベースブラウザとのWebページのデザインに関する注意点 © 2010 by NEPRO JAPAN Co., Ltd. Copyright © All rights reserved｜｜ CIW Web Design Specialist 解説編 1 Webサイト開発プロセス｜｜ /HVVRQ スキルチェック問題 Webサイトのスコープと目的は、次のうちのどれによって決まりますか。 D 戦術 E 戦略 / H V V R Q F メタファー G ビジョンステートメント他のアイディアやオブジェクトとの類似性を提示し、Webサイトのテーマを分かりやすくユーザに訴えかけるためのデザイン手法を何といいますか。 D 戦術 E 戦略 F メタファー G ビジョンステートメント Webサイトのビジョンステートメントの定義は、Web開発プロセスのどの段階で行うものでしょうか。 © 2013 by CP JAPAN Co.,Ltd. Copyright © All rights reserved｜｜ CIW Web Design Specialist 解説編 1 051 ボトムアップのWeb開発手法前のレッスンで確認したように、Webデザイナーは、サイトのデザインと目的について考えをまとめる前に、顧客のニーズとサイトの対象者を知ることが重要です。これらの要因によって、サイトの成功に必要なすべての構成要素（ルックアンドフィールから機能に至るまで）が決まります。これらが決まると、Webサイトにおける一連の望ましいユーザ動作も確立できます。そして、これにより、検討すべき予想シナリオが生まれます。シナリオがあれば、Webサイトの開発プロセスがきわめて容易になります。シナリオは、まずプロジェクトの範囲について鮮明なイメージを提供し、ついでサイトの開発プロジェクトが軌道に乗り、予算内で収まり、予定どおりに進むようにするための役割を果たします。サイトのルックアンドフィールの定義とデザインを行って、ユーザの対話をその特定のデザインに従わせるという、トップダウンでデザインプロセスに取りかかるのは魅力的なことです。しかし、シナリオ開発プロセスの中心は、ユーザの動作に応えた望ましいシステム動作を特定することにあります。したがって、このWebサイトデザインプロセスは逆になります。ユーザの視点からさまざまなユーザシナリオを開発することにより、Webサイトのルックアンドフィール、機能が見えてきます。これがボトムアップアプローチです。ビジネスプロセスについて Webデザイナーの役割はますます複雑になっています。以前、Webデザイナーは、顧客の組織のためにWebサイトを作成する技術があれば十分でした。しかし、現在ではWeb サイトがあるだけでは不十分です。インターネットはもはや電子パンフレットの収納場所ではありません。むしろ、インターネットベースの高収益ビジネスを生み出す機能を提供する、高度化する技術の集合であるといえます。このような成功する電子商取引のコンセプトはさまざまです。一般に、2つのカテゴリに分類できます。すなわち、本質的にインターネットに依存する製品（双方向ゲームやインターネット検索ツールなど）を提供するサイトと、既存の製品やサービスをインターネットを介して世界市場に提供するサイトです。成功を収めている有名なWebサイトに共通しているのは、Webサイトユーザの満たされていないニーズを満たすというゴールに焦点を当てているという点です。書籍販売は、そのすばらしい一例です。大都市圏にある書店は、魅力的で大規模、そして広範囲にわたっています。しかし、それぞれの書店が500万冊の本を店頭に並べること 052 CIW Web Design Specialist 解説編 1｜｜© 2013 by CP JAPAN Co.,Ltd. Copyright © All rights reserved Webサイト開発プロセス｜｜ /HVVRQ はできません。また、このような書店は、大都市圏の近くの人々しか利用できません。 Amazon.comはこのニーズに応えました。現在、Webにアクセスできる人なら誰でも、「www.amazon.com」から何百万冊もの本にアクセスすることができます。このようなビジネスはどのようにして始まるのでしょうか。それはビジョンから始まるのです。この場合のビジョンは、在庫を抱えることなくインターネットで本を売ることでした。 Amazon.comの創業者でCEOであるJeff Bezos（ジェフ・ベゾス）氏は、出版社が常に困難なジレンマに直面していることに気付きました。出版社は、本の発行に巨額の投資をしなければなりません。そして、その本を卸売価格で小売店に販売します。小売業者が良ターネットで販売したそれぞれの本の代金は、出版社から発送される前に支払うという話 / H V V R Q を持ちかけました。その見返りとして、Amazon.comは、出版社から読者に本が「直送」さ心的であれば、30日後、出版社に代金が支払われます。Amazon.comは出版社に、インれるシステムを求めました。この成功により、Amazon.comのモデルは多少変わってきています。同社は現在、多数の本とそれ以外の製品の莫大な在庫を有しており、結果として大量の商品の受注から配送までにかかる時間がより短縮されるようになっています。Amazon.comの商取引の70％以上はリピート客によるものです。 Amazon.com のサクセスストーリーは、依然として電子商取引モデルの強力かつ有用な手本となっています。 Webサイトのビジョンの定義前のレッスンで言及したように、Webサイトのビジョンステートメントの定義は、Web開発プロジェクトのコンセプトの作成の段階で行う重要な作業です。ビジョンステートメントとは、Webサイトの範囲と意図を定義する基本的な枠組みのことです。ビジョンステートメントは、開発プロセスに関わる誰もが目指すビジョンの実現に専念できるよう、十分に簡明でなければなりません。また、価値および測定可能な目標を含める必要があります。次の例は、Amazon.comのような企業の優れたビジョンステートメントです。世界有数のインターネット書籍小売業者になり、来年末までに本を1日 100万ドル販売します。このステートメントの特徴は、価値（「世界有数のインターネット書籍小売業者」）と測定可能な目標（「来年末までに1日100万ドル」）にあります。多くの企業が自社のWebサイト上でビジョンステートメント（ミッションステートメントと呼ばれることもあります）を公開しています。このようなビジョンステートメントには、顧客 © 2013 by CP JAPAN Co.,Ltd. Copyright © All rights reserved｜｜ CIW Web Design Specialist 解説編 1 053 にアピールすべきその他の内容が含まれていることもありますが、一般には、行っている事業のスコープと目的が定義されています。次の演習では、Webサイトのビジョンステートメントを作成します。たとえば、オンラインビジネスを始めたいと思っていると仮定しましょう。自分でWebサイトを開発するかもしれませんし、あるいは、専門家チームに依頼して開発してもらうかもしれません。どちらの場合も、ビジョンステートメントの作成は、Webベースのビジネスを始めるのにぴったりの作業です。ビジョンステートメントが答えなければならない質問と提供しなければならない情報を満たしていれば、そのビジョンステートメントが支えとなって、事業を立ち上げたときにその活動に専念できるようになります。また、専門家チームもその事業に最も適した効果的なサイトを作成することに専念できます。ここで演習4-1に取り組み、Webサイトのビジョンステートメントの作成について考えてみましょう。ビジョンから戦略へこれまでに、成功するWebサイトを作成するという取り組みの手引きとなるビジョンステートメントを作成しました。次のステップでは、そのビジョンを実現する方法を決定します。それには戦略が必要になります。 Webサイト戦略の定義戦略は常に、ユーザがWebサイトを閲覧・利用し、将来また戻ってきてもらうことに焦点を当てる必要があります。実際のところ、電子商取引の目標は（さらに言えばどのビジネスの目標も）顧客を魅了して、離さないことにあります。この目標を達成するために、インターネット独特の機能を効果的に使用することができます。前にも述べたように、インターネットは、ユーザ個々のニーズに応えることができる点で、テレビや出版といったメディアよりも、近所の食料品店に似ているといえます。インターネットも食料品店も、ユーザの好きなときに訪れて、どのような順序で回り、見るだけにするか、何かを購入するかなどを決めます。したがって、Web戦略は、最も見栄えの良い、あるいは最も有用なWebサイトを構築することではありません。企業のWebサイトの基本戦略は、顧客を引き付け、つなぎ止めておくことです。Web戦略実行の詳細は、それぞれの業務課題を複雑にします。 054 CIW Web Design Specialist 解説編 1｜｜© 2013 by CP JAPAN Co.,Ltd. Copyright © All rights reserved Webサイト開発プロセス｜｜ /HVVRQ Webサイト戦術の定義戦術とは、戦略の実行に使用する方法のことです。たとえば、ユーザの個人情報を集める場合には戦術が必要です。広く使用されている戦術は、個人情報と引き換えに何かを提供するというものです。ある企業は、希望する情報の見返りとしてスクリーンセーバーやソフトウェア、割引サービスや、無料で製品を提供するかもしれません。ほかにも、「新規購入者」に利益をもたらすといった一般的な戦術もあります。「今すぐに注文すれば、さらなる割引やボーナスが得られます」といった戦略です。ユーザは、次にWebサイトを訪問したときに購入や取引を非常に迅速に完了できます。ま / H V V R Q た、以前の買い物から明らかになったユーザの好みに基づいて、販売を行うこともできまこのような方法で、顧客情報がすぐに手に入れることができます。そのデータによって、す。次の演習では、Webサイトのビジョンと戦略を支援する戦術を考案します。たとえば、オンラインビジネスを立ち上げようとしていると仮定しましょう。サイトのビジョンは強力ですが、そのビジョンを共有し実現できるように、顧客をあなたのサイトに引き付ける方法が必要です。ビジョンの実現に役立つ確実な戦略を練り、その戦略を実行するための戦術を編み出すことができれば、ユーザにアピールし、顧客基盤を築き、事業の成功に役立つWeb サイトを作成することができます。ここで演習4-2に取り組み、Webサイト戦略を支援する戦術の考案について考えてみましょう。 Webサイトの仕様サイトの対象者を決定し、Webビジネスの戦略とその戦略を達成するための戦術を考えたら、次は仕様の作成です。仕様では、顧客のニーズを満たし、サイトの目標を達成するために必要な機能、コンテンツ、構造（またはアーキテクチャ）を定義します。仕様は次の4つの種類に分類できます。 • 機能の仕様 • アーキテクチャの仕様 • コンテンツの仕様 • デザインの仕様 © 2013 by CP JAPAN Co.,Ltd. Copyright © All rights reserved｜｜ CIW Web Design Specialist 解説編 1 055 機能の仕様機能の仕様には、サイトで実行できなければならない機能または動作が示されます。たとえば、商取引サイトの機能仕様には通常、検索機能、ショッピングカート、クレジットカード処理などが含まれます。コンテンツの仕様コンテンツの仕様には、サイトに含める一般的なコンテンツ（企業説明のテキスト、製品の説明と画像、発送情報、よくある質問など）が示されます。アーキテクチャの仕様アーキテクチャの仕様には、サイトの構成方法と、ユーザがサイト内を移動する方法が示されます。たとえば、オンライン靴店では、靴を紳士用と婦人用のグループに分け、さらに礼装用、普段用、運動用というサブグループに分けます。また、価格帯、ブランド、色などでグループ分けされるかもしれません。サイトアーキテクチャの仕様は、ナビゲーションや検索のためにこのような情報を編成し、関連付ける方法を決定するのに役立ちます。デザインの仕様デザインの仕様は、サイトの全体的なルックアンドフィール（使用されるフォント、色、画像など）の設計に使用されます。たとえば、多くの企業には、指定された用途でロゴを表示する際のサイズに関する基準があります。また、特定の目的やサイトの特定の領域で使用すべき色やフォントも決まっています。このようなデザイン要件は、プロジェクトにおける要件収集の段階で明らかにされ、記録されます。 Webデザイナーは、デザインの仕様が作成されると、その要件を満たす方法を決定します。通常、それにはサイトデザインテンプレート（後述）が最も有効です。サイトの仕様の作成 Webサイトの仕様は複雑である必要はありません。多く場合、ホワイトボードに書いたり、一連の電子メールメッセージを通して作成できます。重要なのは、形式は何であれ最終的な文書が、何を作ろうとしているのかという質問に答えている必要があるという点です。 056 CIW Web Design Specialist 解説編 1｜｜© 2013 by CP JAPAN Co.,Ltd. Copyright © All rights reserved Webサイト開発プロセス｜｜ /HVVRQ 顧客やそれ以外の関係者は、プロジェクトがデザインの段階に進む前に、すべての仕様を確認および承認する必要があります。次の演習では、Webサイトで提供する機能を決定します。たとえば、既にWebベースビジネスのビジョンを作成し、そのビジョンの実現に役立つ戦略と戦術を明確にしていると仮定しましょう。次に行うことは、サイトの機能、アーキテクチャ、コンテンツ、デザインの仕様を作成することです。まず、目標を達成するためにWebサイトで提供する必要がある機能について考えるところから始めます。これには、アニメーション、双方向性、カタログ、ダウンロード可能ファイル、音声／ビデオのストリーミング、サイト／データベース検索、ユー / H V V R Q ザ入力フォーム、電子商取引機能といったサイト機能が含まれます。これらの実装が不十分だったり不完全だったりすると、最善の計画でも成功はありません。ここで演習4-3に取り組み、Webサイトの仕様の作成について考えてみましょう。サイトデザインテンプレート Webプロジェクトのデザイン段階では、そのサイト用に作成したデザイン仕様を実装します。通常、この段階は、Webデザイナーがデザインの「モックアップ」つまりサンプル（提案されたサイトの外観の簡単な見本画像など）を作成するところから始まります。多くの場合、仕様の記述どおりに要件が満たされていると顧客が納得し、すべてのステークホルダーがサイトのルックアンドフィールを承諾するまで、このモックアップを手直しすることになります。通常は、サイトの機能がプログラミングまたは取得され、サイトのコンテンツが最終決定されたのと同時に、デザインのモックアップを作成します。デザインのモックアップが承認されたら、そのモックアップデザインに基づいたWebページの作成を開始できます。デザインの専門家は、Webページを作成するときにテンプレートを使用することを好みます。Webページテンプレートを使用すれば、サイトの各ページに対してばらつきなく迅速にデザインを適用することができ、ページによって異なることのない統一されたルックアンドフィールをサイトが備えるようになります。 Webページテンプレートとは、作成する各ページの土台となるX/HTMLページ構造（場合によっては、関連付けられたスタイルシート）です。ページテンプレートは、常にデザイン仕様を満たしている必要があります。したがって、必ずすべての関係者がテンプレートデザイン（すなわちモックアップ）を確認および承認していることが重要になります。 Expression WebやDreamweaverといった多くの主要Web開発アプリケーションでは、独自のWebページデザインテンプレートを作成することができます。また、次に示すサイトには、既製のページテンプレートのサンプルがあります。一部は無料で使用できます。 • JimWorld's Free Website Templates（http://freesitetemplates.com/） © 2013 by CP JAPAN Co.,Ltd. Copyright © All rights reserved｜｜ CIW Web Design Specialist 解説編 1 057 レッスンのまとめ ■応用プロジェクト優れたWebサイトまたはWebビジネスを開発するには、サイトまたはビジネスの具体的なビジョンから始める必要があります。そして、そのビジョンは戦略になり、具体的な戦術によって実現されます。多くの場合、Webサイト訪問者は、サイトの戦術を調べることによってサイト作成者のビジョンを見極めることができます。Webサイトをいくつか訪問し、そのサイトまたはビジネスにおいてWebサイト所有者が意図したビジョンを推測してみてください。サイトでビジョンステートメントまたはミッションステートメントが公開されている場合は、ビジョンの推測後にそのステートメントを探して、サイトに示されている考えと自分の考えを比較してください。 ■スキルの確認このレッスンでは、Web開発プロセスと、Webサイトの概念を形成する手順について学びました。コンセプトを形成するために、Webベースビジネスのビジョンの作成と、ビジョンを実現するための戦略と戦術の作成に焦点を当てました。また、サイトのルックアンドフィールおよび全体的な理解においてメタファーが果たす役割についても学びました。最後に、サイトの目標を達成するサイト構造を設計するのにマインドマップ法がどのように役立つかについて学びました。 068 CIW Web Design Specialist 解説編 1｜｜© 2013 by CP JAPAN Co.,Ltd. Copyright © All rights reserved Webサイト開発プロセス｜｜ /HVVRQ レッスン4 復習問題 Webデザインにおけるボトムアップアプローチとは何ですか。戦術とは何ですか。成功したオンラインビジネスが従っている基本的なビジネスの前提は何ですか。 / H V V R Q 顧客メーリングリストの作成を目標とするWeb戦略の実行に使用できる戦術を 1つ以上挙げてください。旅行会社、動物園、菓子販売業者（あるいはそれ以外の好きな企業）のWebサイトをデザインするときに使用できる効果的なメタファーの例を簡単に挙げてください。 © 2013 by CP JAPAN Co.,Ltd. Copyright © All rights reserved｜｜ CIW Web Design Specialist 解説編 1 069