Work02:公立小学校のウェブサイト

課題概要

WEBデザインでは、ユーザーによってことなるブラウザ環境やユーザビリティなどを理解し配慮した上で、クライアントの要望を正しく汲み取ったデザインが求められます。特に公共的な側面の強い小学校のサイトでは、保護者や児童のほか、広く地域住民に対して受け入れてもらえるような見やすいデザインと掲載情報の精査が求められます。またサイト管理にあたる教職員の方にとって、管理のしやすい、手間のかからない、負担の少ないコーディングであることも大切です。

制作概要
サイト仕様 幅960px(※ブラウザウインドウサイズ1000~2000pxを想定。)縦とページ数は任意。
構成要素 ヘッダーロゴ、グローバルナビ、メインビジュアル、キャッチコピー 、その他必要だと思われるコンテンツやカテゴリー等。
アプローチ 既存のサイト(母校)の現状分析と問題点を書き出し、それに対し解決策を提案すること。リニューアルの場合は現行と新サイトマップを比較できるような提案内容にすること。
輪鶴小学校ウェブサイト 作業環境|AiCS5,PsCS5(Win10)
デザインカンプ作成期間10日
コーディング作成期間20日

ターゲット

デモサイトのモデルとして挙げた私の母校は名古屋市の郊外に位置する公立小学校で、児童数が多いのが特徴です。また、保護者や地域住民の協力のもと農業体験や課外授業を積極的に行っています。

現状分析

全体的に情報が適切に分類されておらず、サイト利用者が必要とする情報へ辿り着きにくいデザインとなっていましたが、子供たちの様子を伝えるブログの更新頻度は高く、サイト利用者の期待に応えようとする教職員の方々の熱心さを感じました。

改善の提案

  • 情報を適切に分類しなおし、明確なルールのもと直観的に操作できるサイト構成にする。
  • 3.11津波被害の教訓から、緊急避難場所としての機能を明確にするとともに、公共施設としての側面から地域住民とのつながりをもたせる。
  • メインビジュアルを子供たちの笑顔の写真に切り替え、校風を視覚的に伝える。
  • 日々更新する学校日記は独立したhtmlで組み、管理のしやすいサイトにする。
  • ページの基本的な構成は現状の「F 型」を引き継ぎ、左側に固定navを設置する。
  • カラー構成も現状の緑青を引き継ぎ、さわやかで誠実な印象の青色と子供たちの楽しげな声を連想させる黄色を採用する。
  • サイト利用者にとってよりストレスの低いスクロール動作だけでも、全体の情報にアクセスできるようにする。
  • トップページの長さを最後まで楽しんで閲覧していた だけるように、画像はパララックスを採用。
  • クリックで動作する部分(リンクやダウンロードなど)は青色に統一し、さらにマウスホバー時に変化をもたせ、直感的に操作できるようにする。

Work02