サイトリニューアル

 

　中山研究室は2001年4月以来、社会人、高校生、在校生をターゲットに情報教育やエッセイを掲載してきました。このたび使いやすいウェブサイトを目指して、2011年1月に全面リニューアルしました。なお、リニューアルはウェブデザインを学ぶ学生が企画、設計、制作を全て行いました。

 

WARP中山研究室のサイト(2011年6月29日時点)がWARPにより保存されました

　　　　　　　（ WARP：国立国会図書館　インターネット資料収集保存事業 ）

 

旧旧サイト → 新新サイト

The new website was designed by Atsuhiro Nakayama.

 

－以下はWEB設計者のブログからの要約です－

 

リニューアルに取り組んだ感想

　今回のサイトリニューアルでは、リニューアルの目的、ターゲットを明白にしてからサイトの分析を行い、リニューアルコンセプトや調査・制作手法を決めました。随所でプレゼンテーションをしてクライアントに進捗を説明しながら進めました。

 

　調査と制作では各所にHCD（人間中心設計）の手法を取り入れてサイトの情報を構造化してユーザビリティを向上させることができました。制作では細かいことも全部自力で調べて、タグの手打ちで作成したため、コーディングの実力がかなり向上したと思っています。企画→調査→分析→制作→実装と、一連の作業を全て自分一人で行うことで、WEB制作に必要なことを沢山学べました。今回の取り組みを通して学んだことを今後の活動につなげていきたいと思います。

 

従来サイトの問題点

  • ・　10年前の古いデザイン（フレーム使用、HTMLのみで記述、デザインセンス）
  • ・　多様なブラウザへの対応不備（スマートフォンで見るとデザインがくずれる）
  • ・　長年の間に内容が膨らみ構造が迷路化（必要な情報の場所が分かりにくい）
  • ・　ユーザビリティの問題（デザインの統一性、求める情報までの階層が深い）

 

リニューアルのコンセプト

  • ・　企画と設計の基本方針：クライアントの要望も聞き、かつ提案型の企画と設計
  • ・　メインテナンス性の配慮：リニューアル後の情報更新が容易な設計
  • ・　親しみやすいデザイン　：ユーザビリティ向上、スマートフォンで崩れない
  • ・　10年前のサイトを一新　：サイトデザインを最新、フレーム未使用、CSS活用
  • ・　情報構造の見直し　：利用者が必要な情報を見つけやすく、分類と階層の改善

 

企画・調査・分析のプロセス概要

  • ・　サイトの分析と、リニューアルコンセプトのプレゼン
  • ・　クライアントへの非構造化インタビュー
  • ・　サイトの目的の明確化
  • ・　ターゲットユーザーの分析
  • ・　他の大学教員サイトの分析
  • ・　リニューアルのコンセプト
  • ・　ＨＤＣによる調査と情報の構造化
  • ・　エスノグラフィックインタビュー

 

デザイン設計のプロセス概要

  • 　トライアンギュレーションによるインタビューと調査
  • 　　(1)　クライアントへの非構造化インタビュー
  • 　　(2)　各ユーザー層へのアンケートによる構造化インタビュー
  • 　　(3)　コンテンツの重要性と優先順位の調査をして再分類
  • 　　(4)　他研究室サイトの調査分析、コンテンツの整理、追加コンテンツの必要性
  •  
  • 　HCDによる構造化デザイン
  • 　　(1)　KJ法により、カードを使って情報を構造化
  • 　　(2)　ペーパープロトタイプにより、紙でWEBサイトのデザイン案を試作
  • 　　(3)　ストーリーボードにより、サイトの全体構成と画面の移り変わりを図示
  • 　　(4)　ターゲットユーザを考慮して情報構造を見直し、情報の配置を再構成
  • 　　(5)　ユーザビリティ向上、３階層まで、パンくずリスト、サイトマップ
  •  
  • 　プレゼンテーションと打ち合わせ
  • 　　(1)　調査分析の報告
  • 　　(2)　三角測量調査、グローバルナビゲーションの順位付け
  • 　　(3)　HCDによる構造化の分析結果とその方法について説明
  • 　　(4)　「KJ法」、「ペーパープロトタイプ」、「ストーリーボード」を使用
  • 　　(5)　分類と構造化の基準の説明、クライアントと相談しながらカードソート
  • 　　(6)　追加コンテンツ、不要コンテンツ除外、項目とコンテンツの整理の提案

 

コーディング設計のプロセス概要

  • 　コーディングの準備
  • 　　(1)　全体のIDタグの構成の決定、どこに何のタグを適応するかの分類
  • 　　(2)　総ページ数４０ページのデザイン変更
  • 　　(3)　各ページ名とリンク先のサイトマップを制作
  • 　　(4)　カラースキーム作成。青基調に明度変更。アクセントカラーにブラウン
  • 　　(5)　ボタンやロゴなどの素材作成。ピクセル指定により正確に細部の作成
  •  
  • 　コーディングの実行と評価試験（デバッグ）
  • 　　(1)　クライアントがコンテンツを追加変更できるように、基本は手打ち
  • 　　(2)　更新がしやすいサイトにする必要があるため、DIVタグにコメントを追加
  • 　　(3)　トップページ、メニューの並び、メールアドレスは迷惑メール対策で画像
  • 　　(4)　下層ページで、ローカルナビゲーションは後のコンテンツ追加に対応
  • 　　(5)　担当講義の変更を容易にするための配慮。画像を使わず文字で構成
  • 　　(6)　階層が浅いサイトでも、表示レベルを示すためにパンくずリストを作成
  • 　　(7)　画像のサイズの統一とnameタグの使用
  • 　　(8)　複数のブラウザでの表示の違いを調べてソースを修正
  • 　　(9)　スマートフォンで見たときに綺麗に表示できるかをチェック

 

2011.1