課題02　既存学校サイト改善

• トップページ＋下層1ページ（モバイル対応のコーディング）
• ヘッダーロゴ
• グローバルナビ
• メインビジュアル
• キャッチコピー

• 下層ページ、外部ページ、外部サイトへのリンクが混ざっていて分かり辛い。
• 機能していないページが存在する。
• ブログ見出しにタグがない事から、保護者が見た時に子供が関連している記事なのかが予測し辛い。
• メインビジュアルや校章が無い事からデータベースのような雰囲気を感じる。又色合いも学生らしさに欠けている。

• 下層リンクと外部リンクの視覚的差別化
• ブログ記事のタグ追加及びデザイン改善
• あらゆるデバイスで訪問される可能性がある為、どの画面幅でもレイアウトが崩れないコーディングを目指す
• どの小学校や中学校でも流用できるような汎用性のあるデザイン
• データベース感を無くす為にキャッチコピーと校章の追加

ユーザビリティを意識した改善

リンクの差別化とクリック数対策

リンク部に関しては下層ページリンクのみをグローバルナビとし、外部リンクは全てバナーに変更してページ下部へ纏める事で視覚的に差別化を行いました。
例外として「家庭学習サイト」に関しては頻繁に利用する可能性がある事から、ファーストビューに表示させアクセスしたらすぐにボタンが押せるレイアウトにしました。
スマートフォン版はメニュー数が少ない事と1タップ増える理由からハンバーガーメニューは組み込みませんでした。

ブログデザインの改善

ブログはタグを色別で入れる事で更に関連生徒が細かく予測できる事から、記事詳細を読むかの判断が改善前よりもしやすくなったかと思います。
カラフルにしつつ曲線を取り入れる事で子供らしさを表現しました。又、アイコンを取り入れる事でユーザービリティ向上も狙いました。

母校の校訓と校歌の一部から「困難を乗り越えていけ」という意味合いのワードが双方に含まれる事から、このワードをベースに考案しました。
中学校の行事で元旦に皆で地元の山へ登り初日の出を見に行く行事があり、この体験がまさにこのワードと合致していると感じ、「山」と「光」をワードに入れ込んだキャッチコピーを作りました。

ロゴも同様に「山」と「光」の簡易イラストからフラットデザインになるように形状を調整しました。初期段階で含まれた文字はフラットデザインにする上で不要と感じ無くしています。
代わりに「和津」のアルファベット頭文字の「Ｗ」の形状をロゴの形状として取り入れ形作りをしまいた。形状の最終調整をする上で黄金比率をベースに細部の調整を行っています。