- 履歴一覧
- ソース を表示
- 角田雄一/情報デザイン研究II は削除されています。
生命科学部公式サイト 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 を採用することの有効性を改めて確認した。
調査
現状調査
先行事例
技法・技術情報
プロジェクト管理
スケジュール
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
進捗
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情報を読み取り、書籍情報を自動で取得するというリッチな機能を備えている。
- 図書管理ツール: リブライズ
主に蔵書管理を目的としたツール。本の貸し借りも管理できる。
蔵書管理の機能も付けてもいいなと思った。
