興梠媛愛/卒業研究の履歴(No.56)

九芸PALETTE

九州産業大学芸術学部に関わる人々が、情報を共有し連携できるWebサイト

興梠媛愛
Keywords：Information, WebDesign, CMS, Communication
https://k6ss01.stars.ne.jp/kyugeipalette/
- 閲覧用
  - ユーザーID：kyugei
  - パスワード：#checkpalette

アンケートご協力のお願い

▶︎アンケートはこちら
右のQRコードからもアクセスできます

所要時間：2~5分 
プロトタイプはこちら

概要

これは何？

九州産業大学芸術学部に関わる人々が、情報を共有し連携できるWebサイト
芸術学部に関係する情報をまとめて収集でき、発信したい情報をフォームを通して掲載可能な情報発信・受信のためのWebサイト

背景と目的

背景
- 芸術学部に関する情報が集まった専用Webサイトがないため、情報の発信が分散してしまっている
- 他学科、他専攻が何をしているかが分からないという人が多い
目的
- 芸術学部の情報が集約された、九州産業大学芸術学部に関する人々が情報が共有できる場所を作る
- 情報の共有をもとに、学科・専攻・学年の垣根を越えて連携することができる活動拠点をWeb上に作る

コンセプト

情報が拾いやすく、整理されていて利用しやすいシンプルなデザイン
長期的な運用のための情報収集やサイト構造設計

成果物の仕様

Webサイト
- 閲覧用
  ユーザーID：kyugei
  パスワード：#checkpalette
figmaプロトタイプ
前期作品概要(1.2 MB)

メンバー

興梠媛愛

プロジェクトメンバー

前年度までのデザインと今年度のデザイン補助
- 山本彩花
- 宮路咲希

検索結果のコーディング
今後の引き継ぎ
- 髙市遥
- 福井涼

制作ツール

ハードウエア
- MacBook
ソフトウエア
- Figma
- Adobe Illustrator
- WordPress

プロジェクトの期間

2025.04.11 - 20XX.XX.XX

まとめ

前期発表

プロタイプに基づいてWebサイトの制作を行うことができている
今後の流れ
- カテゴリーやタグ、年別で見る機能の設定をする
- アンケートの結果から、プロジェクト情報や他学科・他専攻の情報、施設情報も需要があることから、コンテンツを増やしていく
- 情報の更新を手数を減らして行うための設計をする(マニュアル作成等）
- ユーザーの利便性やアクセシビリティにも目をむける

調査

現状調査

情報発信源が分散している
アンケート（2025.06.27現在, 回答65名）
- 九州産業大学芸術学部生を対象に2025.06.20~07.11まで実施
- このアンケートでは、芸術学部生の現状の活動や情報収集方法等を把握することに加え、Webサイトで取り扱うコンテンツの要望を聞くことを目的としている。

先行事例

在学生むけのWebサイト

九州大学芸術工学部・大学院芸術工学府・大学院芸術工学研究院
芸工アプリ
九州大学芸術工学部在学生向け
京都芸術大学在学生の方へ
武蔵野芸術大学在学生の方へ
リンクをまとめているWebサイト(リンクページの参考）
NEWSやイベント、リンクのまとまったWebサイト
大学全体の紹介になっているサイトもあるため入試情報も入っているものもあるが今回は入試系の情報は省く
まとめスプレッドシート

デザイン

技法・技術情報

プロジェクト管理

スケジュール

予定表

ToDo

todoリスト
Adobe FontsからリンクしているDIN2014のフォントを持続させる

進捗記録

2025.07.04

2Q（最終）審査

ハンバーガーメニュー内の項目を増やしてもいい
- 外部リンクはまとめておく
情報の優先順位と場所
- 募集フォームの画像募集と展示会情報募集の順番
目的達成のための説明を増やすと良い(コンセプト強化)

作業

2025.06.27

作品概要

作品概要Googleドライブ(1.2 MB)

メモ

作品概要の白背景の画像は枠で囲む

作業

カテゴリーページで記事押してもリンク先に飛ばなくなっている問題を解決
- category.phpにjavascriptのコードを追加
学科カテゴリーを九芸WORKSと同じ順番に変更
コンテンツ整理
newsの部分の学外以外の記事分類のところもカテゴリーに変更
- 編集する際にわかりやすいようにnewsの子カテゴリーにしている
topイベントのカスタムフィールドを呼び出している部分の行間を調整
プラグインを追加（Advanced Custom Fields）
- 合わせて投稿ページの部分のカスタムフィールドに書き込みやすいように調整
- 入力がない場合は表示しないように変更

問題・疑問点

topのイベント部分にはお知らせと同じような感じで学科のカテゴリー表示があった方がいいか
topのイベントの情報はどこまでの情報を表に出すか
pc表示の時の画像が大きすぎる（サムネのサイズによって調整がうまくいかない）

2025.06.20

メモ

ページネーション用のphpを作る

作業

アンケート依頼ポスターの掲示（10箇所）
お知らせアーカイブとイベントアーカイブをアーカイブテンプレートからカテゴリーテンプレートのリンク先に変更
芸術学部ニュースから２件記事を追加
投稿ページの画像と動画に対しての空白設定
newsのタグに受賞を追加し、php,cssを変更
topのイベントの部分で呼び出しているカスタムフィールドの文を改行も反映するように変更
概要集のアンケートの部分を更新

問題・疑問点

カテゴリーページで記事押してもリンク先に飛ばなくなっている
~~投稿ページのカスタムフィールドの表示場所はサムネイルの下にある方がいい~~

2025.06.13

メモ

作品概要（前期分）作成が必要
学科サイトに載せるアンケートご協力のお願いとA4書類の準備

作業

アンケート依頼のA4用紙の調整、印刷
作品概要の制作
カテゴリーページの設定
- 全てのカテゴリーページとお知らせアーカイブとイベントアーカイブの個別テンプレート
footerの調整

問題・疑問点

topページはお知らせ→イベントの順だが、メニューはイベントアーカイブ→お知らせアーカイブの順になっているのは変更した方がいいか
カテゴリーページの設定は変更後のもので良いか

2025.06.06

メモ

footerの調整（間隔と色）
ロゴデータはアウトライン化したものをsvg化がいい
footerの位置
サムネのサイズ制限(検索(共有時のサムネイル規定))
タグと年別の部分はテーマファイルエディターで
- タグは多くなるため、学科と年別でいいのでは
- ホバーorクリックで表示　または　全て表に出す

必ずすること

アンケート協力のA4書類制作

作業

リンクページの調整
検索結果が見つからなかった時の画面
投稿ページにカテゴリー・タグと日付が見えるようにお知らせの部分のコードを共通で使用できるように変更
アンケートご協力のお願いのa4書類作成

問題点

footerがposition: stickyでうまく固定できない
カテゴリーページのページネーションが2ページ目に行くときに正常に動作しない
プロトタイプのリンクを載せるのであれば、デザイン面もアンケートで一問だけ入れた方がいいかどうか

2025.05.23

中間発表

メモ

K*RISEとは

作業

ページネーションの設定(お知らせページも）
タグページ・カテゴリーページの空白部分の解決
カテゴリーページの抜粋部分を削除し、タイトルとサムネ（あるときだけ）を表示するように変更

聞くこと

K*RISEとの差はどのような部分があるのか
~~topのニュースのカテゴリーアイコンを押しても全ての記事が出てこない~~
カテゴリーページの表示内容はサムネがあった方がいいのか
- お知らせの部分のタイトルと投稿日のみ表示の方がいい？
フォームへの協力

2025.05.16

中間プレゼン

情報を掲載するためのフロー設計
リンク設定範囲が大きい方が押しやすくなる
パレットの意味
- 九州産業大学の芸術学部に関わる人が、白いパレット（Webサイト）の中で学内・地域社会の情報等を共有して色を混ぜていくようなイメージ

作業

リンク反応範囲設定
function.phpで$retHtmlと$outputが混合していたので$outputに統一
ページネーションの設定

2025.05.09

メモ

リッカート形式部分の言葉の統一性
自由記述項目の追加
大きい項目部分に説明文追加

作業

アンケート項目見直し
ロゴ仮置き
3年生にローカル環境の説明

2025.05.02

メモ

ロゴを実際に配置してみて、固定表示をするかしないかを決定する

作業

外部リンクのアイコンの大きさ設定
ハンバーガーメニュー内の文字の大きさ調整
以前書いていたが必要なくなったコードの削除
先行事例リンク等まとめスプレッドシート作成
NEWSの部分の学科タグをカテゴリーに変更
topページのショートコードを学内・学外で設定できるように変更
アンケート作成

聞くこと

カテゴリー・タグページに空白が入る部分の調整方法
募集画像のサイズはどのくらいがいいのか
リンクのページはメニューで設定したほうがいいか
アンケートの項目は適正か

2025.04.25

変更

展示会→イベント（ワークショップ形式や販売の開催も掲載できるようにするため）

メモ

WordPressの検索結果の部分を変えると変わる（子テーマ必要）

作業

menu-main, menu-footerの外部サイトリンク横のアイコン追加（位置調整が必要）
topページの見出し部分のmargin-topを14pxに
topページのEXHIBITION展示会をEVENTイベントに変更
ロゴ仮制作
チーム会議をし現状共有

05.02で聞きたいこと

九芸WORKSのロゴのAiデータがあるか
背景目的等概要の部分の問題はないか
ロゴの部分は固定の方がいいか（九芸WORKSは固定していない）
タグ、年別の部分はどのように表示するか（システム的に）

2025.04.18

決定

右の案でベース作成
学科のタグの色は九芸WORKSの使用色に変更

作業

予定表
todoリスト
デザイン
- figmaでtopページ以外のデザイン（色・フォント・シャドウの調整）
コーディング
- figmaでデザインしている色とシャドウの反映
チーム
- 現在の状況をチームの人に共有する資料を作成

次回聞きたいこと

検索結果の画面について
外部リンクのものにのみ後ろにマークをつける方法

2025.04.11

テーマ決定

芸術学部生に寄り添ったWebサイト『九芸パレット』考案・制作（プロジェクトで進行中のもの）
- 情報収集の動線設計
- 芸術学部生が必要とする情報は何なのか
- 今後更新がしやすいフォーマット作り
- 展示会・イベント・公募（・プロジェクト)を中心としたWebサイト

テーマ案

芸術学部生に寄り添ったWebサイト『九芸パレット』制作（プロジェクトで進行中のもの）
流れる時間を体感するWebサイト
目線誘導を活用した体験型Webサイト

現状調査

情報の分散

先行事例

在学生向けのページ

作業

学科サイト概要の部分を記載
現状調査・先行事例を記載
デザインのフォント・色・シャドウの調整(九芸WORKSに寄せる)