生命科学部公式サイト 2025 リニューアル
https://lifescience.kyusan-u.ac.jp
- 角田 雄一
- Keywords:WebDesign, CMS, PukiWIki, VI
- プレゼン資料
概要
プロジェクト概要
生命科学部の情報発信を行うサイトのリニューアル
背景・目的
現在のサイトについて、生命科学部の先生方の要望や、会議を通して明らかになった改善点として以下のものがあった。
- 来年からの学科増設に伴い、新しい学科のページが必要。
- サイトのターゲットが、在校生なのか、一般の方なのか、受験生なのか、不明瞭。
- 更新する教員が少なく、空白・書きかけの項目や、更新されていない項目が多い。
- 本来は同一項目内に掲載するべきページが複数に分散していたり、ホーム画面に情報が集中してしまったり、情報が整理されていない。
それらを踏まえ、主に「受験生向けの情報発信に特化させる」ことと、「発信する情報を絞り、整理し、ユーザーが見やすく、メンテナンスしやすいサイト構成にする」ことを主な方針とし、サイトをリニューアルすることにした。
成果物
メンバー
プロジェクトサイト
担当
- 井上貢一
- 米満宗明 教授(生命科学部)
- 金子たかね 准教授(生命科学部)
仕様
CMSには PukiWiki を使用
制作ツール
Figma
XAMPP
PukiWiki
Visual Studio Code
プロジェクトの期間
2024.09.16 - 2025.XX.XX
まとめ
今回の制作は、受験生向けのサイトにすることと、サイト情報を整理し、使いやすく、メンテナンスしやすいサイトにすることが主な目的であった。
プロジェクト開始当初は、「とりあえず指摘されたところを変更しよう」という態度であった為、サイトの問題点と変更点を整理することができず、制作計画も立てにくかったが、プロジェクトの主な目的・方向性を明確に定めることで、目的に沿った改善案もこちらから提案することもでき、会議がさらに有意義なものとなり、制作計画も立てやすくなった。このことから、制作依頼を受けた際の目的・方向性の明確化の重要性を実感した。
そして、今回はCMS にPukiWiki を用いたが、PukiWiki を利用することで「ナビゲーションの追加・削除」や「コンテンツの移動」等の作業がかなりスムーズに行えることが分かった。情報発信を目的とし、かつページや記事の更新が頻繁に行われるサイトでPukiWiki を採用することの有効性を改めて確認した。
調査
現状調査
先行事例
- 九州産業大学ソーシャルデザイン学科のwebサイト
- 九州産業大学理工学部のwebサイト
技法・技術情報
- WEB Designing 2022/04 VOL.213 マイナビ出版 2022
特集 コンテンツマーケティングが大きく変わる!CMS新時代2022 - PukiWiki
- https://design.kyusan-u.ac.jp/OpenSquareJP/?LocalServer
- https://design.kyusan-u.ac.jp/OpenSquareJP/?CMS
- https://design.kyusan-u.ac.jp/OpenSquareJP/?PukiWiki
- https://design.kyusan-u.ac.jp/OpenSquareJP/?PukiWiki/Customize
- https://design.kyusan-u.ac.jp/OpenSquareJP/?FilePermission
- PukiWiki サイトの開発イメージ(Made with Draw.io)
プロジェクト管理
スケジュール
9/30,10/18に打ち合わせ
ToDo
- ワイヤーフレーム作成
- 作品概要作成
- コーディング
- スマホ画面のヘッダーの変更
- パソコン画面のトップ・ボトム移動ボタン
- スマホ画面のトップ・ボトム移動ボタン
- コンテンツの移動
2024.01.09
進捗
- 仮サーバー上で動作確認をしたところ、スマホ画面の「トップ・ボトム移動ボタン」の色が薄く、視覚的に認識しづらいことが判明したため、ボタンの色をより濃くした。
2024.12.23
進捗
- 仮サーバでの動作確認
仮サーバーでの動作確認を行った。コーディングで実装した部分については特に問題はなかった。
2024.12.16
進捗
- スマホ画面のトップ・ボトム移動ボタンの実装
当初は、ソーシャルデザイン学科の学科サイトのように、画面下部に黒色のボタン枠を設け、その中にボタンを配置する予定であったが、操作性を考慮して画面右下に配置することにした。
2024.12.09
進捗
- パソコン画面のトップ・ボトム移動ボタンの実装
2024.12.02
進捗
- スマホ画面のヘッダーレイアウトの変更
Before After
最終発表役割分担
- 研究の背景・目的(角田)
- 生命科学部の現状・技術情報(角田)
- サイトマップ(興梠)
- ワイヤーフレーム(興梠)
- コンテンツ(興梠)
- コーディング(角田)
- まとめ(角田)
2024.11.25
打ち合わせ
- 魚のアイコンで応用生物学コースの追加
- 現行サイトのページの更新をかける
- 色等は変えない方針で
- サイトマップに関しての変更はFigmaにて更新済み
概要集チェック項目
- ファイルのデータは5MB程
- 「~だ、~である調」で書く
2024.11.18
進捗
- 打ち合わせ内容の確認
- サンプルを用いたPukiwikiのプログラミング
2024.11.11
進捗
- サンプルを用いたPukiwikiのプログラミング
2024.10.28
進捗
- サンプルを用いたPukiwikiのプログラミング
2024.10.21
サイトマップ
- Figma ←こちらからご覧いただけます
- コースが4つになる
- コース別お知らせページ
- 食品科学コースのみ掲載、しかもだいぶ前の更新
- コース別お知らせは必要か、必要ならどのページにするか、会議で検討。
- 受験生向け情報ページ
- 今までトップページや、サイドメニューの「受験生の方へ」リンクに分散していた、受験生向け動画、お知らせなどの情報をヘッダーのナビゲーション一つにまとめる。
- 資格と進路、カリキュラムについては現在ページがないため、今回のリニューアルで情報を追加
- それぞれ受験生用ページに追加するのか、個別コースごとに追加するのか次回の話し合いで相談
- 受験生のためのお問い合わせフォームも欲しいとのことだったため、ここにページを作る。
- 九産大ホームページへのリンクは受験生用ページにあったほうがいいと思うが、現在のようにヘッダーに置くのか、受験生向け情報ページに置くのか、会議で要検討。
- 学科案内資料
- 2022年から更新されていない
- 残すのかどうか、会議で要検討
- ご案内サブメニュー
- ご案内メニューの中の、受験生向け情報とお問い合わせフォームはヘッダーにまとめるため、ここには不要。
- 事務室への連絡先や、スタッフの情報はどちらかというと在学生向け情報なので、在学生の方へというメニューにし、事務室やその他在学生向けリンクをまとめて置く場所にした。
- Aboutページ
- もともとご案内ページにあったAboutページの置く場所がなくなるのだが、そもそも書きかけなので、Aboutページを残すのかどうか、残すならどこに置くか会議で要検討。
- もともとご案内ページにあったAboutページの置く場所がなくなるのだが、そもそも書きかけなので、Aboutページを残すのかどうか、残すならどこに置くか会議で要検討。
PukiWiki準備進捗
- ローカルサーバーのインストール、PukiWikiのローカル環境での動作確認、初期設定ファイルで初期設定方法を確認
- サンプルを使って、ページのフレーム構造とスタイルの基本的な書き換え方を確認
2024.10.14
topページと受験生用ページの扱いの違いをどうするか
例えば...
- topページには学生や教授等の活動のみを記載する
- 受験生用ページをナビゲーションに追加し、現在topページに記載してある入試関連の情報がを移動する
ロゴ横のタイトルは生命科学部で固定
- 現在は設定でページごとのsubmenuページに飛ぶが、top画面に飛んだ方が使用しやすいと考える
資格と進路、カリキュラムについて
- 現在ページがないため、今回のリニューアルで情報を追加
- それぞれ受験生用ページに追加するのか、個別コースごとに追加するのか次回の話し合いで相談
在学生向けページについて
- 現在何も情報が入っていないため、事務室情報など在学生が必要な情報ページを一まとめにして詰め込む形で、1ページのみにするのはどうか
Aboutページ
- 要検討
- 一度分類から分けている
コースごとのお知らせページ
- 個別に必要か?
- 2021から追加更新がないまたは記事自体ない
- topページを学生や教授等の活動のみを記載するため、ここに記載していけば良いのではないだろうか
ポスターセッション担当
- 概要説明 興梠
- 会議の内容と現状調査 興梠
- サイトマップの説明、次回の話し合いで聞くこと 角田
- pukiwikiの進捗 角田
現在のサイトマップ
2024.10.07
生命科学部現状
- 学科の色:#DA5D9E
- ホーム画面の生命科学部の文字を押すと、編集ガイドのリンクページに飛ぶため、普通にホーム画面に飛んだほうが良いかも。
- 事務室のダミーページは削除したほうが良いかも。
現在のサイトマップ
2024.09.30
生命科学部現状
- 学科が四つになる
- 研究室ページは、教授名じゃなくて研究室一覧を表示する
- トップページの写真を変えたい
- インスタ等、各種SNSリンク要らない
- 動画専用のページや最近のトピックのページを作り、ヘッダー等のナビゲーションを置くなどしたい
- 化粧品、加工食品といった特徴を前面に押し出す
- お問い合わせフォームや事務室のメールアドレスから連絡取れるようにできたらいいな
- カリキュラムと取得可能な資格を閲覧できるページを作る
所感
- トップページにあるパンフレット内の動物学、水産学、植物学などの解説は、すごく魅力的なので、それぞれ一ページ使うくらい詳しくやったほうが良い
- トップページのナビゲーションのカルーセルの画像は、すでにとてもいい画像だと思った。画像の和気あいあいとした雰囲気を残しつつ、上記専門分野に関連した画像を載せるといい
- 学科トップページはリンクだけだと寂しいので、最近の様子のトピックをリンク下に載せるのもあり
2024.09.23
テーマ案決定
本の貸し借りWebアプリの一部機能を実装したプロトタイプをつくる
- 実装する機能
- アカウント認証(メールアドレス・パスワード)
- プロフィール編集
- 自分の本の管理(本の登録・編集・感想の記入)
- 成果物
- ソースコード
- UI確認サイト(フロントエンドのみの操作感確認サイト)
- テスト映像
- データ構造の図
2024.09.16
テーマ案絞り出し
- 前期「情報デザイン研究I」で制作したWebサイトのUIの改善
- 体重、食事内容、摂取カロリーなどを記録しておける健康管理ツールをスプレッドシートで制作
- 本の貸し借りWebアプリの制作を最終目標として、その一部機能を実装したプロトタイプの制作
先行事例の調査
- 健康管理ツールについて
- アプリ: あすけん
カロリーだけでなく、PFCバランスもグラフで表示される。
体重の増減グラフを備えている。 - 食事管理スプレッドシート: shoya_chiritsumo_powerbuilder
今回の案と類似した体重管理のスプレッドシート。
少しレイアウトが見づらいのと、食事内容・カロリー・栄養素を入力する手間が掛かる。
- アプリ: あすけん
- 本の貸し借りアプリ