トップ / このホームページができるまで / 世界一のホームページ創出プロジェクト

第六章 詳細設計とオーサリング

概要

　第五章で行ったコンテンツの洗い出しとコンテンツフローの作成に基づいて、ここではそれぞれのコンテンツなどの詳細設計を行う。詳細設計ではそれぞれのコンテンツの具体的なレイアウトやリンクの貼り方などを述べる。

第一項　各コンテンツの詳細設計

　第六章で行った基本設計とその評価にもとづき、それぞれのコンテンツの詳細設計を行う。

１）トップページ

　ニューポートホームページの基本レイアウトは、画面上部に第六章で示したサイトマップの第一階層へのリンクと全文検索のためのフォームを用意し、画面下部に具体的なコンテンツを表示するというものである。（下図参考）

そして、トップページのコンテンツは第一階層へのリンクと第一階層の概略を説明したものとした。完成したトップページのイメージは次のとおり。

図６−１ 基本レイアウト

図６−２ トップページイメージ

２）経営診断

　経営診断システムのレイアウトなどについては、ゼミの先輩である天野雄一氏に協力していただき、氏に一任したので、ここではナビゲーションの詳細設計について説明を行います。

２−ａ）真に改革を志す人のためのナビゲーション

　ナビゲーションは経営診断で客観的に組織の状態を把握されたお客様が、次に利用すべきコンテンツを案内している。ナビゲーションから目的のコンテンツまでのステップは次のとおり。

(１)  ナビゲーションの目次
第六章第二項（２）で概説したナビゲーションのカテゴリ一覧が目次のごとく表示される。

(２)  キーワード検索のためのキーワード一覧
（１）で選択したカテゴリに所属するキーワードの一覧が表示される。

(３)  検索結果の一覧
（２）で選択したキーワードをもちいて全文検索システムがニューポートホームページを検索し、その結果の一覧が表示される。

(４)  目的のコンテンツ
（３）で選択した目的のコンテンツ、具体的な文書が表示される。

図６−３ ナビゲーションの遷移図

３）改革事例集

　改革事例集はテーマ別改革事例、マスコミ掲載記事集、改革事例一覧の３つカテゴリに分類され、それぞれのカテゴリ内に具体的なコンテンツを含んでいる。改革事例集は次のような表の形をとる改革事例集のトップページを用いた。表には見やすい工夫として行ごとに色を変えた。下線の引かれている部分はそのコンテンツへのリンクがある箇所である。

表６−１ 改革事例集トップページ

　改革事例集のそれぞれのコンテンツにはこの改革事例集のトップページよりリンクが貼られている。以降、「テーマ別改革事例集」「マスコミ掲載記事集」「改革事例一覧」についての詳細設計を述べる。

　テーマ別改革事例集およびマスコミ掲載記事集のコンテンツの設計はコンテンツの基本レイアウトに添う。コンテンツの基本レイアウトとは右図のようなものであり、ニューポートホームページのすべてのコンテンツの基本的なレイアウトとなる。すべてのコンテンツのレイアウトを統一することで、違和感なく読み進められるようにすることが目的である。

　また、次の項目のあるコンテンツには最後に「次へ」のリンクを設けるなどの配慮も施した。

図６−５

４）改革理論

　改革理論にはテキスト３つ、論文５つ、ビデオ６つ、音声２つのコンテンツを用意した。改革理論インデックスページではコンテンツの概要と発行年月日やコンテンツの媒体、それらの詳細をあらわしたページへのリンクの一覧を目次として設置した。改革理論インデックスページの目次の表は次のとおりである。

　コンテンツの概要の説明文は、コンテンツを読み進めなくてもある程度の内容が分かったほうがよりお客様が自らの状況にあわせてコンテンツを選択しやすいと考えて付与した。

表６−２

４−ａ）テキスト、論文

　テキストおよび論文についてはそれぞれのタイトルの中にさらに目次を設けて具体的なコンテンツへいたるようにした。これは、テキスト・論文ともに内容量が多く、またそれぞれが章立てされているので、その章毎にコンテンツを作成したからである。

４−ｂ）ビデオ、音声

　ビデオおよび音声についてはデータのデジタル化が進んでいないので現在工事中である。将来的には、Real形式かWMV形式でストリーミング配信を行い、ナローバンド用とブロードバンド用など帯域幅におうじたコンテンツを用意する。

５）ソリューションサービス

　ソリューションサービスはインデックスページとコンテンツページの二階層からなる。インデックスページにはソリューションサービスのコンテンツ１２項目を３カテゴリに分類した表を用いた。そして、コンテンツページへのリンクとそのコンテンツの内容を解説した。

表６−３

コンテンツページはこれまでのコンテンツの基本レイアウトにのっとった形であり、またソリューションサービスのコンテンツページには図表が多く用いられており直感的に分かりやすくできている。

図６−７

６）フォーラム

　フォーラムはＹａｈｏｏ！ｅ−ｇｒｏｕｐｓというメーリングリストを中心としたコミュニケーションサービスとＷｅｂ　Ｐａｔｉｏという会議室型掲示板より構成されている。Ｙａｈｏｏ！ｅ−ｇｒｏｕｐｓは会員フォーラムとして素性が明らかな方のみが書き込みや閲覧が可能とする。Ｗｅｂ　Ｐａｔｉｏは公開フォーラムとしてどなたでも書き込みや閲覧が可能とする。

６−ａ）会員フォーラム

　Ｙａｈｏｏ！ｅ−ｇｒｏｕｐｓではレイアウトの設定などはできない。ただし、グループの設定として投稿できる人や返信先などの設定ができるのでその部分についての設計を行う。

表６−４

Ｙａｈｏｏ！ｅ−ｇｒｏｕｐｓの設定は、会員フォーラムとして利用するということから基本的にメンバーのみの利用が可能という設定とした。また、フォーラムへの参加の仕方を述べた解説ページも設置し、登録の仕方が複雑であるという方のためにも配慮した。（下図参考）

図６−８

６−ｂ）公開フォーラム

公開フォーラムで利用したＷｅｂ　Ｐａｔｉｏはプログラムを改造することでレイアウトの変更が可能であるが、その必要性もなくレイアウト上の問題はなかったのでレイアウトはそのまま利用した。ただし、新しい会議室を設置する権限については管理者のみに与えるという改造を施した。

図６−９

図６−１０

７）ご相談

　ご相談ではご相談の部分にある体裁どおりに入力することで宇佐美氏に体裁にのっとったメールが送られるという仕組みで、内部のシステムとしてはＰｏｓｔＭａｉｌというフリープログラムを用いている。詳細設計ではどのような項目を設定するのかということについて考えた。

　入力していただく項目としては次のものを採用した。

　お名前、社名、部署、役職、年齢、性別、ＴＥＬ、ＦＡＸ、携帯、Ｍａｉｌ、携帯Ｍａｉｌ、ご住所、本文。このうち、お名前、Ｍａｉｌ、本文については入力を必須とした。これは返事を返すことを考えてのことであるとともに、インターネット上ということもあり無責任な誹謗や中傷などの発言に対するためである。また、同様に無責任な発言に対する対策として解説文の部分に「無責任な言動は、一切お断りしております。」と注意書きをした。

　ご相談におけるフォームメールのイメージ図はしたのとおりである。

図６−１１

８）サイトマップ

　サイトマップはこれまで紹介してきたすべてのコンテンツへのリンクを一覧できるコンテンツである。また、ニューポートホームページのサイトマップでは、あえてそのコンテンツに対する解説文などは掲載しない事にした。これは、解説文を掲載することによってコンテンツの内容が分かるという利点よりも一覧性を重視したためである。

　サイトマップのレイアウトは右図のとおりになる。表示を二列にしたのも一覧性を重視したためである。また、サイトマップでは第一階層とコンテンツにリンクを貼り、具体的なコンテンツだけではなく第一階層レベルへもリンクで移動することができるように配慮した。

　サイトマップのイメージは下図のとおりである。

図６−１３

第二項　デジタル化・オーサリング

　デジタル化ではニューポートが大量に有する文書をスキャナで読み込みデジタル画像とし、画像をOCRでの読み込みテキストデータに変換、誤字脱字の修正、HTML化と体裁の整形について具体的な方法を述べる。

１）スキャナで読み込む

ニューポートの有する文書のほとんどは出版物やパンフレットなどの紙媒体である。これらの上媒体の情報をホームページ上で公開するためにはデジタルのデータに変換する必要がある。そのための第一ステップとして上媒体の情報をスキャナで読み込み画像データとした。スキャナは最近のものであればどのようなものでも問題ないが、われわれはCanonの「CanoScan　N1240U（右図参考）」をもちいた。仕様としては光学解像度が1200×2400dbiで用紙サイズはＡ４までインターフェースはUSB1.1と一世代前のものである。製品紹介はhttp://cweb.canon.jp/Product/CanoScan/n1240u/index-j.htmlとなる。

２）OCRでテキストデータ化

第二ステップとしては画像データをOCRソフトでテキストデータにする。OCRソフトは前述のスキャナに標準で付属していた「ｅ．Ｔｙｐｉｓｔエントリー」を用いた。スキャナで取り込んだ画像をOCRソフトで読み込めばテキストデータとして認識する。

３）誤字脱字の修正

第三ステップは誤字脱字の修正である。スキャナで取り込むときの解像度やOCRソフトの性能に左右されるが、基本的に個人用のコンピュータやスキャナを用いている以上はある程度の誤字脱字は発生すると考えてよい。そのため、最終的な誤字脱字の修正は人間が行う必要がある。その作業はOCRソフトが認識したテキストデータと元の原稿を見比べるという作業となる。

４）ＨＴＭＬ化と体裁の整形およびオーサリング

第四ステップではテキストデータのHTML化と体裁の整形およびオーサリングを行いWebサイトの構築を行った。このステップが終了をもって公開できるサイトが完成するわけである。第四ステップでは全体の構成を考えて適切な階層構造を考え、各コンテンツのHTML化、第一階層の作成と各コンテンツへのリンクを貼る、トップページの作成と第一階層へのリンクを貼るというステップを踏む。

４−ａ）全体の構成を考える

最初の全体の構成を考えて適切な階層構造を考えるステップだが、これはニューポートホームページのように膨大なコンテンツを有するサイトでは必須の作業である。個々のコンテンツのHTML化を行う前に、そのコンテンツがどこに属し、どのようなフォルダ（ディレクトリ）に格納されるべきかというルールを作成しなければサイトの構築はできない。ニューポートホームページでは次のような構成をとった。

表６−５

４−ｂ）コンテンツのHTML化

サイトのディレクトリ構成とファイルの配置を考える事ができれば、次はコンテンツのHTML化である。このステップではテキストデータを第一項「各コンテンツの詳細設計」で示したレイアウトにしたがってHTML化する。この際にはテンプレート用のファイルを作成しておき、そのファイルにテキストデータを埋め込む形で作業を行えば作業が早く、また体裁を整えることもできる。これまでのステップで作成したすべてのテキストデータについて作成するので作業量は膨大になる。

４−ｃ）第一階層とトップページの作成

次の第一階層から各コンテンツへのリンクを貼る作業では、第一階層のインデックスとトップページおよびサイトマップを作成する。各階層のインデックスやサイトマップおよびトップページも詳細設計でレイアウトなどについては考案済みである。よって、基本的な作業としてはHTML化のみとなる。

この段階における作業では主に表作りとリンクの作成が大きなウェイトを占めた。また、上部メニュー以外にフレームを使用しなかったことから、フレームを意識した作りにする必要がなかった。

第二項における作業とホームページ構成を図式化したものは次のとおり。左側の矢印が第二項における作業で（ａ）全体の構成を考える、（ｂ）コンテンツのＨＴＭＬ化、（ｃ）第一階層作成、（ｃ）トップページ作成というステップを右側のホームページの構成イメージに作業の内容を当てはめて、矢印で示した。

　右側はホームページの構成イメージである。トップページを根にし幹に第一階層があり葉にコンテンツがあるツリー図（木構造）をしている。

第三項　第二次評価

　第一次評価は基本設計の段階、つまり計画の段階における評価であったといえる。第二次評価では実際にできたホームページを対象にして「世界一のホームページの定義」に従って評価をする。計画の段階と第一次開発でできたものの間には若干の差異が認められるため、その部分についての修正を施し、また実際にできたホームページを目の前にして評価をする。

　計画段階と第一次開発で完成したホームページとの違いは、第一に経営診断システムは第二次開発へ引き継いだ点。第二に改革理論のビデオおよび音声については第二次開発以降に引き継いだ点。第三に改革理論における著作物の販売は一時的に休止している点。第四にフォーラムについては一時的に休止している点。以上の四点があげられる。

１）真に改革を志す人のためのナビゲーション

・        コンテンツがメインターゲットとしているお客様を誘導する。

・        キーワードを網羅することでコンテンツの質量をアピール。

・        膨大なコンテンツから最適なコンテンツを選択できるようにし使いやすさを向上。

・        膨大なコンテンツがあるにもかかわらず最適なコンテンツを選択できるような仕組みがないというのはユーザ･ニーズに立脚していない。

・        経営診断システムの代わりとしてWeb機能を効果的に利用する。

・        気付きを与えるというコンセプトを実現するために最適なコンテンツへのナビゲーション

・        上記の意味で気付きへの糸口となる

２）改革事例集

・        マスコミに取り上げられたという強みを掲載する。

・        それ自体は直接商売に結びつくコンテンツではない。

・        具体的な事例を示すことで気付きの糸口となる。

・        220プロジェクト119分類という経験の量をアピール。

・        ここの具体的な改革プロジェクトの事例はプロの目にもかなう。

・        イラストが随所にある。

３）改革理論

・        無償で理論を公開することでユーザを囲い込み。

・        強みとして有しているテキストや論文を公開。

・        無償で公開することで商売を前面に押し出さない。

・        改革理論そのものが気付きへの糸口。

・        膨大なコンテンツの量をアピール。

・        改革理論はそれ自身がプロの目にかなう専門情報である。

・        改革のための理論を公開することでその定番作りを目指す。

・        イラストが随所にある。

・        改革理論をすべて公開することで中味が勝負という事をアピール

４）ソリューションサービス

・        改革を最後までやりぬくという点が商売としての差別化のポイントとなる。

・        ３つの切り口、１２テーマのサービスを網羅しコンテンツの質量をアピール。

・        サービスの内容はプロの仕事ゆえに専門家の目にもかなう。

・        イラストが随所にある。

５）ご相談

・        ご相談からコンサルに至ることもあるが、あくまで「ご相談」という形をとることで商売を前面に出さない。

・        ご相談のターゲットは経営上のお悩みをもっておられるお客様である。

・        これもフォーラムと同様でともに改革を成し遂げるという宇佐美氏の改革コンセプトがあるからこそ意味がある。

・        所定の体裁をあらかじめ用意することでお客様の不便を少しでも解消したい。

・        サイト内にフォームメールを設けることで双方向コミュニケーションを実現。

・        電子メールとリンクしたコンテンツを作成。

６）サイトマップ

・        すべてのコンテンツの一覧を作ることで、コンテンツの量をアピール。

・        一覧表を作ることで、目的のコンテンツへすばやくいける。

・        コンテンツフローと戦略ドメインをＷｅｂ上に具現化したものとしてのサイトマップ。

・        サイトの全体図を必要とするユーザニーズに立脚。