コミュニケーション学科サイトリニューアルプロジェクト
Thu Dec 23 12:56:05 JST 2004
2004年度渡辺ゼミ3年次演習
目次
現状
12月15日の学会で本プロジェクトの説明をしました.冬休みの間に文書作成とウェブサイトのFramework(ZopeとPloneの整備,Plone上でデザイン)作成をする予定です.
1 はじめに
2004年度の渡辺ゼミ3年次演習では,Webのユニバーサルデザインを勉強している.この演習の一部として,コミュニケーション学科のWebサイトを改善するプロジェクトに取り組んでいる.このWebページは,この「コミュニケーション学科サイトリニューアルプロジェクト」の計画と進捗状況を示す.
なお,本プロジェクトは,以下のテキストを参考にしている.
「標準ウェブユーザビリティ辞典」,ソシオメディア(株)編著,
インプレス発行 (2003).
2 改訂作業前の調査
2.1 現学科サイトのユーザビリティチェック
学科サイトのリニューアル作業に入る前に,「標準ウェブユーザビリティ辞典」に掲載されている下記5分野のユーザビリティ原則を使用して,現在の学科サイトを評価した.評価結果の詳細は「学科サイトチェック結果」参照.
- アイデンティティ:サイトとその運営者の表現
- インフォーメーションアーキテクチャ:静的な構造と分かりやすさ
- インタラクション:動的な構造と分かりやすさ
- アクセシビリティ:さまざまな環境への配慮
- コンテンツ:表現の最適化
その結果,現学科サイトには,以下の問題点があることがわかった.
ユーザビリティ原則チェック結果から明らかになった,現学科サイトの問題点
- トップページの写真がもっともよくない.肝心のコンテンツが写真に押しのけられてしまうし,写真の意味が不明.
- リンク切れが多い.
- メインテナンスされていないコンテンツがある.
- 情報が古すぎて実際と異なっている.
- トップページ右側のメニューがタスクを意識したメニューであることがわかりにくいので,左側のメニューとの差が見えず,利用者を混乱させている.
- グローバルナビゲーションに,学科サイトトップページへのリンクと,東京女子大学へのリンクがない.
- ナビゲーションが,全ページで同じ位置に配置されていない.
- ナビゲーションスキップがない.
- サイトマップがない.
- 検索機能がない.
- 運営者やサイトポリシーやヘルプを明記したページがない.
- 同じコンテンツが複数のページからリンクされているために,混乱を生じている.コンテンツの階層構造が整理されていない.
- コンテンツの一部にわかりにくい言葉(MML,ノスタルジア)がある.
- ページの横幅が固定されている.
- 閲覧中ページの上位層に移動できるする機能が不足.
- テキストリンクの下線が消されてしまっている場合がある.
- 自ページへのリンクが存在している.
- page not foundなどで表示されるエラーページがわかりにくい.
- 文書の構造が適切にマークアップされていない.
2.2 他大学学科サイトの調査
参考になる点がないか,他大学の学科サイトをいくつか調べてみた.
他大学の学科サイトなどで参考になる点
- 慶應義塾大学
- 「行事カレンダー」がある。C学科でのみ行われる行事のカレンダーがあると便利。
- 「学科サイトへのご意見」がある。慶応大学では、「慶応義塾へのご意見」を用意。これは「お問い合わせ」とは別。個別回答をしないことが前提。ウェブ・アクセシビリティへの取り組みをアピールすれば、参考になる意見が取り入れられるかもしれない。
- 広島大学
- 広島大学は2003年3月31日よりwebサイトを一新。「広島大学webアクセシビリティ指針」に従いデザインされている。
- リンクに簡単な説明文がついていて、わかりやすい。
- 「トップページに戻る」が左上の目立つところに大きく表示されている。
- 「学内検索」
- 日本女子大学
- 入試についての細かい説明がある。
- 在学生と卒業生のページは別メニューになっている。
- 現代社会学科のトップページはテキストのみ。分かりやすい。
- 日本大学 中国語中国文化学科
- ナビゲーションが分かりやすい。
- 全体的なデザインや配色が統一されている。
- 「お知らせ」は最近のものだけを掲載。古くなったものは他へ移動。
- 「サイトマップ」は単なるサイト構成図ではなく、コンテンツの簡単な説明が付けられている。
- 京都造形芸術大学 情報デザイン学科
- 「about this site」において、サイトの説明がされている。
- パンくずリストがあり、自分のいる場所がわかりやすい。
- 山口大学 人文学部
- 最終更新日が明示されている。
- 新しいウィンドウが開くリンクは、「(別ウィンドウが開きます)」と書かれている。
- 英語文書も提供されている。(Summaryのみなら中国語と韓国語もあり)
- 神戸大学 文学部
- 連載企画「これが授業だ!!」において、授業の内容を詳しく紹介。
- 連載企画「研究室から」において、教員の研究トピックを紹介。
- 東京家政大学 家政学部環境情報学科
- メディアプレイヤーを用いて、教員の授業風景やキャンパス光景が見られる。動画が見られるので分かりやすく、Flushではないのでユーザーに負担がかからない。
- 受験生向けにQ&A(入試、学科)のページがある。
- 教職や図書館司書のカリキュラムを細かく分けて紹介している。
- 法政大学 キャリアデザイン学部キャリアデザイン学科
- ページの下まで読み進めていくと、ページのトップに戻れるボタンがあるので便利である。
- 卒業後の進路について、様々な選択肢があるということを詳しく紹介している。
3 工程表
「標準ウェブユーザビリティ辞典」のプロセス編を参考にして,学科サイト改訂に必要な作業を検討し,工程表を作成した.3年次演習という枠があるので,2005年1月末にα版をリリースすることで一区切りとしたい.また,この期間内に解決できなかった課題は,卒業研究として4年次に取り組む価値があるテーマである可能性がある.
「学科サイト改訂作業工程(Renewal_process.pdf)」(学内限定公開)
作業工程は,定義フェイズ,構造フェイズ,実装フェイズ,評価フェイズの4フェイズにわかれる.各フェイズにおいても,定義,構造,実装,評価,あるいは,Plan,Do,Check,Action (PDCA)のスパイラル式の反復デザイン手法を意識した.
4 定義フェーズの作業
4.1 学科サイト(改定)の目的の定義
まず,コミュニケーション学科が管理運営する学科サイトの目的を定義した.
学科の在学生と教職員への情報提供の方が,受験生や就職先への情報提供よりも重要であると仮定して学科サイトの目的の優先度をつけた.優先度の順番に関しては,学科教員へのインタビューで確認し,必要ならば優先順位を修正する.
- 1a)学科の在校生が必要とする情報や機能を提供する.
- 1b)学科の教職員が必要とする情報や機能を提供する.
- 2)受験側に学科を広報して受験生を集める.
- 3)就職先に学科を広報して就職率を上げる.
4.2 ターゲットユーザの定義と要求調査
次に,学科サイトのターゲットユーザを定義し,ターゲットユーザのサイトに対する要求を調査した.学科サイトの性格上,このサイトを利用して欲しいのは以下のユーザである.ここでも,受験側のユーザの方が学科の在校生や教職員より優先度が高いユーザかもしれないという疑問が残っている.
- 1a)学科の在校生
- 1b)学科の教職員
- 2)受験側(受験生本人,受験生の両親,高校の進学指導の先生,受験産業)
- 3)就職先(同窓生,卒業生が就職するような企業・組織)
それぞれのPersonaを作成するかどうかは今後の検討事項である.
ここはもっとも大事な工程なので,優先度が高い方から1a),1b),2)の3種類のユーザに対する要求調査を実施した.調査方法としては,こちらが想定した項目以外の情報も得ることができるので,インタビュー調査を選択した.
4.2.1 学科在校生と教職員のユーザ要求の調査
- 1a)学科在校生:
- 渡辺ゼミの学生が知っているコミュニケーション学科の学生(1-4年生)計??名に実施した.
- 1b)学科教職員:
- 学科教職員全員が属するメーリングリストで協力者を募り,現学科サイト構築に関与した先生を含む教員3名,学科研究室(学科ホームページの保守を担当している部署)のスタッフ3名にインタビューした.
学科の在校生と教職員へのヒアリングは,本物の学科サイトを見ることができる環境で以下の質問をした.
- プロファイル(性別,年齢,Webの利用頻度)
- 学科サイトの利用経験:
- 利用経験がある場合:学科サイトから得ている情報の種類,役に立ったコンテンツ,探そうと思ったのに見つけることができなかったコンテンツ
- 利用経験がない場合:利用しない理由,学科サイトに載せて欲しいコンテンツ
- (実物を見せながら)使いやすいと思った箇所と使いにくいと思った箇所の指摘.学科サイトへの要望.学科ロゴ,サイトカラー,サイトのデザインの案.欲しい情報.
その結果,以下のことがわかった.
学科在校生のユーザ要求のまとめ
(以下のQ1、Q6〜10は全員に質問した.)
- Q1:調査以前に学科サイトを利用したことがあるか?
- 学科生には、この学科サイトの存在を知らなかったという人も何人かみられ、また知ってはいてもそこまで頻繁に利用している人は少ないということが分かった。
- Q2:これまでに利用したことのある学生は、普段どのような情報を学科サイトから得ているのか?
- 「授業紹介」、「教員紹介」、「卒論関係」、「推奨ノートパソコン」という意見が多かった。学年が上がるにつれて、ゼミの選択や卒論が気になり始めるようで、教員紹介や卒論題目を見る人が多いようだ。
- Q3:これまでに利用したことのある学生で、探したのに見つけられなかったコンテンツはあったか?
- ほぼ全員の学生がないと答えた。「officeアワー」が見つからなかったという意見があった。
- Q4:これまでに利用したことのある学生で、役に立ったコンテンツはあったか?
- 回答は様々であったが、「教員紹介」と答えた学生が一番多かった。教員の専門を調べる際や、教員の顔を覚えるのに利用したなど使い方は様々であった。また、「リンク集」や「卒論の書き方」といったお役立ち情報をあげた学生も複数見られた。
- Q5:これまでに利用したことのなかった学生は、なぜ利用しなかったのか?
- ほぼ全員、存在を知らなかったという理由であり、公式サイトからたどり着くには、深すぎて見つけられないという意見もあがった。
- Q6:使いやすいと思ったところは?
- 特にないという意見が多かったが、文字サイズがちょうどよく、統一感があって見やすいという点や、サイト全体がシンプルで、よくまとまっているという構成の面が多くあげられた。コンテンツとしては、卒論情報が得られる点という意見があった。
- Q7:使いにくいと思ったところは?
- 以下のような構成やナビゲーションの問題がほとんどであった。
- 「What's New」が長すぎるということや、スクロールするところが多い。
- 写真の説明がない。
- いつの就職情報か分からないなど、更新があまりされていない。
- パンくずリストがない。
- おなじリンクが同じページ内に複数存在していて見難い。
- Q8:サイトへの要望はあるか?
以下のようなデザインや構成などの要望があげられた。
- ビジュアル的な面を変えてほしいということで、動画や写真を増やすということや、全体的にかわいさを加えてほしい。
- 対象ユーザーごとに内容を分けてほしい。
- Not Found表示を避けてほしい。
- 写真にはコメントをつけてほしい。
- 音楽が鳴り出すページは作らないでほしい。
又,以下のような,学生や教員の"生の声"や、学科サイトでしか得られない情報を学生は期待していることがわかった.
- 先輩方のアドバイスや裏話。
- 先生からのアドバイスや簡単なコラム。
- 授業を欠席したときにプリント等がダウンロードできるなどの情報提供。
- 卒論調査の協力を求める情報(協力したいと思った学生がいるかもしれない)。
- 「授業の手引き」には書かれていない、ここでしか得られない授業紹介。
- 進路(就職)情報を詳しくし、最新情報にしてほしい。
- 「オフィスアワー」をのせてほしい。
- Q9:学科のカラー・ロゴについての希望はあるか?
- カラーについては、パステルカラー、ピンク、オレンジ、黄色、青といった明るい色、暖色系を希望する人が目立った。特に"かわいさ"が伝わる色がよさそうである。また、コミュニケーション学科が学際的であることか、レインボーカラーという案も出た。 ロゴについては、今のままでよいという意見もあった。希望としては、コミュニケーション学科ということで「人」や「5本の柱」を表したものはどうかといった具体的な案が出た。シンプルではあるが存在感のある、コミュニケーション学科をもっとアピールしたものがよいということであった。
- Q10:どんなデザインがいいか?
- おしゃれ、かわいらしさ、国際的かつ華やかさ(個性的)があるデザインがいいというような意見が多かったが、見やすさ・分かりやすさを重視したシンプルなデザインがいいという意見もある。ただ画像に関してはもう少し増やした方がいいであろう。また、フレームを利用してほしいという意見も複数得られた(しかし今回は用いない方向で決定)。 デザインにおいて参考にしてほしいと言われたサイト:「アットコスメ」,「ワークスアプリケーションズ」,「静岡県立伊豆中央高等学校吹奏楽部」
教職員のユーザ要求のまとめ
先生2名と既存サイトの保守・管理をしている学科研究室の方3名の計5人の意見を聞くことができた。なお先生へのヒアリングは、あらかじめ質問項目は決めずに対話形式で行った。
<K先生(サイト作成時の学科主任)>
- 既存サイトを作成した当時のことについて
- 既存サイトは、受験生をメインターゲットとして作成されたため、"広報効果"を第一に考えたサイトにした。そのため、普段学科サイト利用することは少ない。
- サイトをリニューアルする際のアドバイスはあるか?
- 新サイトも、受験生をメインターゲットとした内容にすべきであり、そのためには高校生にもユーザー調査を実施したほうがよい。
- 各先生のwebサイトと学科サイトとをリンクするという案についてどう思うか?
- 今後のシステム運営のことも考えて、webサイトを作る側のバリアフリーをはかることがまず重要である。また、各自のwebサイトを誰かに作ってもらうとなると、人手不足や金銭面での問題が生じる。
<I先生(サイト作成時の広報担当)>
- 既存サイトを作成した当時のことについて
- 基本的なコンテンツ作りの担当で、先生方への原稿の働きかけなどもしていた。既存サイトは、受験生向けの広報媒体として作り変えることが目的だった。 学科研究室助手が結構作り変えてくれていた。
- 普段どのコンテンツを利用しているか?また利用する際に感じることは?
- たまに「オンラインドキュメント」や「卒論リスト」を見る程度。利用する際、特に不便は感じていないが、「What's New」が長すぎるため、どこに欲しい情報があるか分からないときがあった。
- 先生方それぞれで、コンテンツの更新ができるようにしたらどう思うか?
- 自宅のパソコンから更新できるようになったらうれしいし、更新作業をするであろう。しかし、その更新作業が教員にとって簡単なものでないといけない。他にも仕事があり忙しく、面倒な作業であると、更新が続かなくなってしまうからだ。文章を打つくらいならかまわないだろうが、自由参加の講習会などを設けたほうがいい。
- サイトのデザイン・ロゴについて
- デザインばかり凝っても駄目だが、受験生やその保護者にも見せるということを考えると、そこそこの見栄えも必要となってくるであろう。
- ロゴに関しては、専門家でないと作成するのは難しいと思うので、学生から公募するというのはどうか。実施することで、より多くの学生に興味をもってもらえるだろう。
- あればよいと思うコンテンツはあるか?
- 管理が大変ではあるが、受験生と在学生(教員も含む)の交流や情報交換ができる掲示板があったらおもしろい。
- 学科生だけの掲示板もあれば、先輩後輩の関係がもて、授業以外で集まれる場所になるのでよいのではないか。
2人の先生の共通した意見として,以下がわかった.
- 新サイトも"受験生が見る"ということを意識したものでなければならない。
- 教員が個人個人で更新ができるようになること、先生たちのwebページを作成することは大変便利であるが、作業する者にとって分かりやすく、簡単な作業であるという必要がある。講習会などを開いて作業に関する情報を提供する機会を設けるべきであり、「作業する側のバリアフリー」ということを考えなくてはならない。
<学科研究室3人の回答のまとめ>
- Q1:既存サイトを作成した当時のことについて
- 「学生と教員向け情報」は、"自分でメンテナンスができる"という前提のもと、学内用に情報をオープンにするという目的から作られた。
- 外部の人へのアピールが足りないという意見が出たため、受験生向けの要素が加えられた。
- やたら派手なページにならないよう、外注せずに自分たちで作成した。
- Q2:役に立ったコンテンツは?
- 「オンラインドキュメント」と「卒論題目一覧」があがった。オンラインドキュメントは、非常勤の先生、他学科の先生も利用しているようだ。また、卒論題目一覧があることで、卒論タイトルが検索にひっかかり、学外からの問い合わせがあったそうだ。
- Q3:見つけられなかったコンテンツ、欲しいコンテンツはあるか?
- 8号館の部屋割りが書かれたものがないのであると便利という意見がでた。
- Q4:使いにくいところはあるか?
- TOPページで、左と右にメニューが分かれていること。
- メニューを見ても、クリックしなければその下の階層に何の情報があるかが分からないこと。
- Q5:学科サイトに対する要望は?
- コミュニケーション学科が東京女子大学の一部であるいうことを伝えるために、ページの下に大学の公式サイトへとぶリンクがあればよい。
- 先生の紹介を動画にしたほうがよい。
- シラバスがほしい。
- Q6:ロゴ・カラーに対する案はあるか?
- 既存サイトのロゴはTV(マスコミ)とパソコン(コンピュータ)をイメージしたものであり、カラーは東女のカラーを意識して作られたそうだ。 新サイトでの案としては、カラーをピンクにしてはどうか、「5本の柱」をイメージしたロゴにしてはどうかという意見が出た。
- Q7:どんなデザインがいいか?
- 既存サイトは、少々殺風景であるので変えたほうがよい。
- 画面に統一感がほしい。
- Q8:保守に関して何かあるか?
- 中身が古いと、更新していないということで学生がアクセスしてくれなくなるので気をつけているが、現在は「What's New」など重要な部分しか更新していない。
- 重要度があいまいになるという理由から、学科掲示板に書かれていることを全てwebに載せるべきか迷っている。
- いろいろな場所に同じところへのリンクがあり、それを全て変えないといけないというのは大変である。
- 今後の希望:誰でも更新でき、引継ぎがしやすいものがよい
- Q9: その他何か意見があるか?
- 要覧に書かれていることをそのまま書くのではなく、学科サイトならではの情報があってこそである。
- 教員の公募をする際、「学科について知りたかったらこの学科サイトを見て!」と結構使われたそうだ。
4.2.2 受験側のユーザ要求の調査
2)受験側のユーザ要求の調査を以下のように実施した.
- 対象:
- 受験生が通う塾で,受験生68名と塾の関係者10名(職員4名,学生アルバイト6名)にインタビューした.
- 方法:
- 受験生:白紙の用紙を配り,口頭で質問して記入してもらった.アンケートに用いることができた時間は10分間.
- 職員:一人一人直接インタビューをした.4名中1名だけ,インターネットが使用できる環境下でインタビューを実施した.
- 学生アルバイト:一人一人に直接インタビューした.全員インターネットが使用できない環境下で実施した.
その結果,以下のことがわかった.
受験側のユーザ要求のまとめ
- 受験生
- インターネットの使用頻度は、「全く使用しない」と回答した人が全体の4割を占めている。但し、この中には「受験生だから今は使用を控えている」と回答するものも含んでいる。
- 受験情報をウェブで検索したことがあるかという質問に対しては、全体の8割が「検索したことがある」と回答。受験生にとって大学のホームページは、進路先を検討する中で一つの情報源になっていることがわかる。
- 欲しいコンテンツは、入試の過去問という回答が圧倒的に多かった。第2、第3志望あたりの過去問を、お金を出して買う気にはなれないがインターネットで1〜2年分欲しいと考えている受験生が多いため、このような結果になったのだろうか。「大学」そのものについての情報と言うより、入試関係情報(倍率、入試日程など)のニーズが高かった。アンケートを実施した時期が11月中旬ということも、この結果に反映されているかも知れない。
- また、自分のパソコンをまだ持っていないという高校生も多く、「インターネット初心者」であるユーザにも分かるように、トップページで「受験生の方へ」「在校生の方へ」などのようにユーザを分けてしまう大学のHPが人気を集めた。 例:明治大学、東洋大学、法政大学
- 職員
- 「受験生に進学先を勧める(提示する)」立場としての職員にとっては大学の概要などといった漠然としたことではなく、具体的な情報を欲していることがわかった。具体例としては、詳しい就職情報。(就職先・就職率等)
- また大学の試験問題が載っている「赤本」が市販されているにもかかわらず、インターネット上で試験問題や「傾向と対策」が閲覧できると、毎回赤本を探して見る手間が省けるため便利だとの声もあった。
- 学生チューター
- 職員同様、進学先のアドバイザーとしてのチューターは、大学紹介の本に載っていないような、「大学のカラー」や「細かい授業内容」がHPから得られれば、アドバイスしやすいとの声があった。
- 大学生
- 「掲示板の情報」が、HP上でも毎日見ることができたら便利だという意見があった。
- 「大学院についての情報」は、大学院に進学を考えている学生にとって有効
- どのゼミにしようか迷っている生徒に有効にとっては「教授の研究分野・所属している学会」がHPに載っていると,判断する一つの情報源になるようだ。
- まとめ
- 普段見ているサイトとして、「ニュース」「アルバイトの情報検索」「旅行のツアー検索」のサイトなど頻繁に更新されているサイト名が上がった。トップページで定期的に更新されていることがわかるようにすると、リピーターも増えるだろう。
- トップページでラベリングをきちんと(わかりやすく)すべき。
- 必要な情報を素早く得られるのがインターネットの良さではあるが、それゆえサイト全体をシンプルなものでまとめてしまうと、「視覚的に楽しめず」、「大学のカラー(雰囲気)」が伝わりにくい。
- 「大学のカラー(雰囲気)」を伝えるために「学生の生の声」は必要。本には載っていないような「中の者」の声を載せると、よりリアルな雰囲気が伝わると思う。
- 今回は11月中旬にアンケートを実施したが、4月に高3生・塾関係者を対象にアンケートをとったらニーズの高いコンテンツは、今と異なっているかもしれない。志望校を決定する前のコンテンツと、志望校が決定して受験生が勉強に必死になる時期のコンテンツに変化をつけ、定期的に更新できたらベストなのかもしれない。
4.2.3 楽しいユーザ体験の重要性
ユーザ要求の調査をしている最中,「キャンパスアサヒ・コム」の「第二回大学紹介ページ学生選手権」で,本学の有志学生が応募した大学紹介の作品が一位になった.
一位になったこの作品と2位や3位の作品を比較してみると,この作品が使って楽しいウェブサイトになっていることに気づいた.学科サイトも,「使いやすく,保守しやすく,アクセシビリティに配慮している」以外に,「使って楽しい」ことが重要であるように思える.在校生へのインタビューでも,かわいいサイトや楽しいサイトへの要求があることがわかっている.
この楽しさは,おそらくコンテンツの中身を用意するときに考慮すべき点であるが,この観点をどう取り入れればよいかは今回は解決できず,今後の課題になるかもしれない.
4.3 コンテンツタイプの検討
掲載するコンテンツを,現学科サイトのコンテンツの取捨選択,及び新しく必要と思われるコンテンツの追加,という形で検討した.この作業は,次フェーズのコンテンツリストの作成と同時に実施した.
コンテンツの一覧(PDFファイル)
4.4 ウェブサイトの技術的な要件の検討
定義フェーズでの調査により,
- 学科サイトの保守が容易であること
- 先生が自宅などから簡単に自分のページを保守できること
- 有用なナビゲーション機能であるサイトマップ,パンくずリスト,検索機能などを提供すること
- ナビゲーション部などの基本デザインを全ページで同じにすること
などの必要性が確認できた.
管理者がエディタやオーサリングソフトでHTMLページを作成し,それをWebサーバにアップロードする方法では,これらを実現することは難しい.そこで,オープンソースのアプリケーションサーバであるZopeと,Zopeの上で動作するContent Management System (CMS) Ploneの利用を考えた.
参考までに,Ploneを使っているサイトの例を示す:
4.5 ブランド
学科サイトにふさわしい色と,学科のイメージを表わすロゴ(GIF画像)をどうするか検討した.
学生にインタビューした結果では,「かわいい」色,又はパステル系の淡い色が好まれているようである.
学科ロゴに関しては,現在のロゴがパソコンのイメージしか表していなように見える,デザインが細かすぎてわかりにくい,今のロゴのままでよい,などの感想があった.3年次演習ゼミでは,学科の5本柱(社会,心理,メデイア,国際,情報)をあらわすロゴや「情報社会を主体的に生きる」などの学科のキーワードをあらわすロゴや,あるいは単純に学科名の「コミュニケーション」や「Communication」をロゴ風にデザインしてはどうかという意見が出た.そこで,色やロゴに関しては,いくつかの原案を作成して,投票で決める方向で検討することとした.
「学科ロゴ案その1-5」(GIFファイルが開きます),「学科ロゴ案その6」(準備中).
4.6 サイトリニューアルのゴールの明確化
学科サイトのリユーアルのゴールを以下にまとめる.
- ターゲットユーザが使いやすい(Usability)サイトにする
- 保守・更新しやすいサイトにする
- アクセシビリティにも配慮する
以下,このゴールを意識しながら,サイト構造を決め,実装し,最後にユーザ評価を実施する.
5 構造フェーズの作業
5.1 コンテンツリスト作成とサイトの基本構成
- 既存サイトの分類を整理して,「学科紹介」,「教員紹介」,「授業紹介」,「資格取得」,「卒業論文」,「卒業後の進路」,「資料集」の7分野に分けた.
- コンテンツリストを整理し,複数箇所から同じコンテンツがリンクされることを減らした.
詳細:コンテンツの一覧(サイトの基本構造)(PDFファイル)
5.2 タスクリスト作成とコンテンツリストとのすり合わせ
学科サイトのターゲットユーザのタスクに沿うように,上記以外に「教員の方へ」,「学生の方へ」,「受験生の方へ」という見出しを別に設けた.
5.3 ナビゲーションスキーム
ナビゲーションスキームとして,下記の仕組みを用意する.これにより,内容志向,タスク志向,検索志向のどの利用形態でも,サイト内のコンテンツに用意にアクセス可能になる.
- ページ最上部には常に,「大学トップページ」,「学科トップページ」,「サイト内検索」,タスク向けリンク(「教員の方へ」,「学生の方へ」,「受験生の方へ」)が表示される.
- グローバルナビゲーションとして,ページ上部に,「学科紹介」,「教員紹介」,「授業紹介」,「資格取得」,「卒業論文」,「卒業後の進路」,「資料集」へのリンクが表示される.
- その下には,「(トップページからサイト内の現在置までの道筋を表示する)パンくずリスト」,「サイトマップ」,「問い合わせ」が表示される.
- ページ左部に,「ローカルナビゲーション」,と最新ニュースの見出しが表示される.
- ページ最下部には,「最終更新日」,「訪問者数」,「このサイトについて」,「アクセス」が常に表示される.
- これらのナビゲーションスキームは,どのページでも,常に同じ場所に表示される.
- (音声表示時に,ページ上部・左部のナビゲーション要素をスキップして直接本文にジャンプする)ナビゲーションスキップも用意する.
- 英語,韓国語,中国語で用意する予定の学科概要のページへのリンクは,トップページにしか表示しない.
5.4 ペーパープロトタイプ作成
11月下旬から12月にかけて,紙及びパワーポイントで全ページのペーパープロトタイプを作成し,デザインなどを検討した.パワーポイントで作成した全ページの「ペーパープロトタイプ」(PDFファイル).
(注:このデザインイメージに「ログイン」とあるのは,Ploneの機能である.このサイト専用のアカウントを持った利用者(学科教員やサイト管理者など)は,ログインすることで,Webページ上でコンテンツを編集することができる.また,パスワードを知らせた学生だけ或いは誰でもがコンテンツにコメントをつけることができるように設定することも可能である.)
5.4.1 プロトタイプによるテスト
ペーパープロトタイプを元に,コンテンツの過不足,コンテンツ分類の適切さ,ラベルの適切さ,タスクに合っているか,などを検証した.
5.4.2 デザインとアクセシビリティの両立
この段階でいくつもの問題が明らかになった.
- デザイン的にはコンテンツを横に並べたい.しかし,そのためにはレイアウトテーブルを使用することになる.(CSSでも出来るはずだが,今の段階ではCSSによるレイアウトはまだ考慮しない.)
- デザイン的にはリンクをかわいい形のボタンにしたい.しかし,リンクボタンの文字が画像になる.
- デザイン的には2次元にきれいに配置したい.しかしそうすると,各要素に入れることが出来る量が決まってしまう.それをはみ出すとデザインが崩れる.
- HTML的には,見出し要素を使って上下に要素を配置すべきだが,デザイン的に美しくないという考えが強い.
-
アクセシビリティに配慮したページにするためには,これはOKでこれはだめというようなガイドラインをあらかじめ作成しておく必要があったかもしれない.
6 実装フェースの作業
6.1 部品
6.1.1 ロゴ
学科ロゴにQRコードを使用すれば,URLや連絡先をはじめとする膨大な情報をロゴに埋め込むことができる.ICTを活用している学科のイメージにも合うし,受験生が携帯電話でQRコードを読み込むことにより,受験生の利便性が増大することにもなる.
一例(QRコードの画像がつぶれているのはご勘弁):
別例(QRコードの色も変えたい):
別例のQRコードに埋め込んだ情報:『東京女子大学コミュニケーション学科.「心理・社会・メディア・情報・国際の5本柱で情報社会を主体的に生きる力を養う」.http://www.comm.twcu.ac.jp,dept-c@comm.twcu.ac.jp,吉祥寺駅又は西荻窪駅からバス15分あるいは徒歩20分』
もう少し小さいQRコードでもよい:『東京女子大学コミュニケーション学科.http://www.comm.twcu.ac.jp/,dept-c@comm.twcu.ac.jp』
6.1.2 サイトカラー
東女のウェブサイトの色をパステル調にした色を候補にする.ただし,背景の白色とのコントラストが高くないといけないので,薄い色は使いづらい.
6.2 コンテンツ
コンテンツの一覧(サイトの基本構造)にも書いてあるが,コンテンツには,既存サイトの内容を流用できるもの,新規に用意すべきもの,ニュースや連絡事項など運用にしたがって充実していくものがある.
2004年12月15日の学科会でペーパープロトタイプを元に本プロジェクトの現状と新ウェブサイトの内容・デザインを紹介し,了解を得た.
6.3 サイトのフレームワーク作成
前述したように,以下の要件を満たすために,オブジェクト指向のContent Management SystemPloneを利用する.
- 学科サイトの保守が容易であること
- 先生が自宅などから簡単に自分のページを保守できること
- 有用なナビゲーション機能であるサイトマップ,パンくずリスト,検索機能などを提供すること
- ナビゲーション部などの基本デザインを全ページで同じにすること
Ploneを使うことで以下が可能になる.
- ページデザインや部品の親ページから子ページへの継承.
- この継承の結果として,サイトのデザインやナビゲーション機能などの統一性や同一性を簡単に提供できる.
- パンくずリストやサイト内検索などのインテリジェントな機能の提供.
- アクセス権限を持っている利用者が,自宅のPCからWeb上でコンテンツを管理することが可能になる.
- HTMLをほとんど知らない利用者でも,教員紹介のページなどを自分で保守できる.
- コンテンツ,表示スタイル(見栄え),利用者とのインターラクション(インターフェース)の3つが完全に分離しているので,設計・保守しやすい.
- Pythonというオブジェクト指向のプログラミング言語で実装されているので,いろいろな機能(Blog,Wiki,Slashdot,電子メール,カレンダー,etc)を提供しやすい.
- バージョン管理ができるので,間違った修正を行ったときに元に戻せる.
- 利用者のタイプに応じた利用権限を与えることが可能である.
- コンテンツ管理システムなので,コンテンツを一定期間公開するとか,準備中のコンテンツを公開しないとかの保守管理に必要な機能を持っている.
- オープンソースなので,サイト管理者が必要な知識とスキルを持っていれば,無料で利用できるし,トラブル時に内部構造に立ち入って対応することもできる.
-
コミュニケーション学科のWebサーバでは,すでにMNL(Multimedia&Network Lab)のページをPloneバージョン1で公開している.Ploneバージョン2は,XHTMLの文法やW3Cのアクセシビリティガイドラインに適合したページを出力できるので,今回の学科サイトを構築する前に,(冬休みの作業として)PloneのMajor Version(とZopeのMinor Version)をあげる.
その後,サイトデザインにしたがって,Ploneのテンプレートとスタイルを作成し,フレームワークを作成する.フレームワークが完成したら,文章を流し込めば1月にα版が完成する予定.
6.4 文書流し込み
こちらで用意すべき文書の作成担当者を決定した.
7 評価フェーズの作業
7.1 文法チェック
7.2 そのほかのチェック
アクセシビリティ
文書の内容
7.3 ユーザテスト
7.4 修正&評価
7.5
8 その他
8.1 サイト保守方針
8.2 マニュアル
8.3
9 まとめ
9.1
9.2
9.3