長崎大学教育開発推進機構生涯教育センター
ユーザビリティ・運用効率を追求しWebサイトを設計・リニューアル
長崎大学教育開発機構生涯教育センター様のWebサイトリニューアルをお手伝いさせていただきました。リサーチ、設計、デザイン、コーディングを行っています。
![長崎大学教育開発機構生涯教育センター](https://nb-a.jp/wp-content/uploads/2022/04/02_main-1-1024x462.jpg)
Webサイト制作
複数サイトを統合し、ユーザビリティ・運用効率を高める
生涯教育センターが管轄するサイトが5サイトあり、これらをどのように扱いながら、生涯教育センターのサイトリニューアルを実現すべきかを検討する必要がありましたが、多岐にわたる情報・条件をどのように整理するべきか、どのように設計・構築すれば運用の負担が減るのかを担当の方だけで考えるのは難しいということで、当社にてヒアリングを行いながら、情報を整理し、2サイトを統合しWebサイトを制作しました。
![デスクトップのトップページ](https://nb-a.jp/wp-content/uploads/2022/04/03_desktop-1-1024x683.jpg)
![長崎大学生涯教育センターのデスクトップで見た際の下層ページ](https://nb-a.jp/wp-content/uploads/2022/04/04_desktop-1-838x1024.jpg)
レスポンシブデザインで、各ディバイスからの閲覧に対応。
デスクトップ
![デスクトップ画面](https://nb-a.jp/wp-content/uploads/2022/04/05_desktop-1.jpg)
タブレット
![デスクトップ画面](https://nb-a.jp/wp-content/uploads/2022/04/06_tablet-1.jpg)
スマートフォン
![モバイル画面](https://nb-a.jp/wp-content/uploads/2022/04/07_mobile-1-576x1024.jpg)
![スマートフォンでのウェブサイト表示イメージ](https://nb-a.jp/wp-content/uploads/2022/04/08_mobileimage-1-1024x576.jpg)
操作性を考慮したナビゲーションバーを採用
![トップページナビゲーションバー](https://nb-a.jp/wp-content/uploads/2022/04/09_mobile_01-1-512x1024.jpg)
![下層ページナビゲーションバー](https://nb-a.jp/wp-content/uploads/2022/04/09_mobile_02-1-512x1024.jpg)
![下層ページナビゲーションバー](https://nb-a.jp/wp-content/uploads/2022/04/09_mobile_03-1-512x1024.jpg)
![PC版にはメガメニューを採用](https://nb-a.jp/wp-content/uploads/2022/04/nagasaki-u.jpg)
開かれた施設だからこそ、わかりやすく構成し、ユーザーによる情報アクセスの難易度を下げる
生涯教育センターが行う事業には、地域の学校教育関係者、社会人、小中高生、地域の方々、長崎県内の大学生と5つの対象が存在するため、ユーザーが迷うことなく自身が該当するコンテンツを見つけやすいということが何よりも重要でした。
対象別にコンテンツを整理し、グローバルメニュー内で表示、PCによる閲覧時にはメガメニューを採用するなど情報へアクセスしやすいように設計・デザインしています。
![スマートフォンおよびタブレット時のh表示イメージ](https://nb-a.jp/wp-content/uploads/2022/04/11_tablet-mobile-1-1024x576.jpg)