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