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

九芸PALETTE

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

興梠媛愛
Keywords：Information, WebDesign, CMS, Communication
九芸PALETTE Webサイト
- 閲覧用
  - ユーザーID：kyugei
  - パスワード：#checkpalette

↑

概要

↑

これは何？

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

↑

背景と目的

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

↑

コンセプト

情報が拾いやすく、整理されていて利用しやすいシンプルなデザイン
長期的な運用のための情報収集やサイト構造設計
フォームを通じて学生が情報を掲載できるようにし、現在分散している情報も含め情報が集まり人が交流する場所を、色が集まり混ざり合うパレットになぞらえている
九芸WORKSと同一大学芸術学部のWebサイトであることが一目で伝わるような一貫性と親和性を持たせる

↑

成果物の仕様

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

↑

メンバー

興梠媛愛

プロジェクトメンバー

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

検索結果のコーディング
- 髙市遥
- 福井涼

プロジェクトページのデザイン
大学施設情報ページの教室情報追加
- 森山海莉

↑

制作ツール

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

↑

プロジェクトの期間

2025.04.11 -

↑

まとめ

前期発表

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

↑

調査

↑

現状調査

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

↑

先行事例

在学生むけのWebサイト

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

デザイン

構成→21_21 DESIGN SIGHT
- シンプルなデザイン
- イベント詳細の取り扱いの参考
UIデザイン→株式会社博報堂プロダクツ
- ニューモーフィズムを使用したデザイン
色・フォント→九芸WORKS
- 同一大学の芸術学部のWebサイトであることが一目で伝わるような一貫性と親和性を持たせる

↑

ToDo

todoリスト
Adobe FontsからリンクしているDIN2014のフォントを持続させる
topのスライダー部分の画像募集
プロジェクトページのデザインとコーディング
編集マニュアル制作
本環境への移行
説明パネル　12/12までに制作

進捗記録

↑

2025.10.17

↑

すること

マニュアル
周知してもらえるようにA4一枚のポスター

↑

作業

作品概要
Webサイト
- 各種募集フォームのイベント募集部分の内容とリンク先を変更
- 投稿ページの画像で中央揃えとなしの時のcss設定を同じにした

↑

問題・疑問点

↑

2025.10.10

↑

すること

作品概要
- 外部向けというよりは内部向けの情報共有サイトであることをもう少しわかりやすく書く
プロジェクトページに学科サイトのプロジェクトの転記をしてみる
情報収集用のリンクを再配置

↑

作業

学科サイト
- メインビジュアルを変更
作品概要
- 画像を変更
- 誤字・形式の不備を修正
- 研究の目的・背景の修正
- 読みにくい部分を改善
- 表記揺れの修正
- 文字数調整
- 使用者側が使用しやすいような工夫の追加
Webサイト
- 大学施設情報ページのスマートフォン仕様の時にページ上部に戻るリンクの大きさと場所をpc版と違いがないように変更
- 大学のpcのモニターで見た時にイベントページのポスター画像が少し大きすぎるように感じたため、1920px以上は4列になるように変更
- 「このサイトについて」ページの内容を追加
- 投稿ページのリスト形式で、入れ子リストになっている部分にmarginとpaddingが再度かかっていた部分を調整
- 入れ子リストの部分のlist-style-typeを指定
- 他の場所との更新方法を同じにするため、プロジェクトページで芸術学部のカテゴリーを設定すると子要素全て（学科）が表示される方法を廃止
- Adobeのフォントを読み込み（DIN）を自分のアカウントから永嶋先生のアカウントに変更

↑

問題・疑問点

~~Adobe FontsからリンクしているDIN2014のフォントを持続させる方法~~
作品概要の参考リンク先の閲覧日は最新の確認日に変更した方がいいのか

↑

2025.10.03

↑

すること

文字サイズ合わせ
卒展のメインビジュアルのぼかしを適応させる

↑

作業

大学施設情報のページの不具合調整
お知らせタイトルをh4→pに変更
リンクのグレーを#666666→#808080に変更
メインビジュアルの卒展2024の画像入れ替え
トップページのNEWS,EVENTのDINのフォントウェイトを700→400
safariで見るとtext-decoration: underline 0.5px #bbbbbb;が効いていなかったため、分割して記述
```
text-decoration-line: underline;
text-decoration-color: #bbbbbb;
text-decoration-thickness: 0.5px;
```
作品概要の画像制作
eventページの年別フィルターが機能していない問題を解決
大学施設情報ページの教室情報を更新(2年生)
大学施設情報の本文表示の部分で、フィルターをかけたときも教室情報が2行のみになっていたため、デフォルトを3行に変更した
イベント情報を二人の人に声かけをし回答いただき、情報を追加
リンクページのその他情報の追加（公募や就職情報等)
リンクページのリストの整頓
大学施設情報ページに一気に上に戻ることのできるボタンを設置

↑

問題・疑問点

専用のアカウントをもらえるか（フォーム等からの更新を事務室にお願いする時等に必要）

↑

2025.09.26

↑

すること

ロゴと募集画像の間を広くする
ロゴをもう少し小さく間隔を広く設置（九芸WORKSを参考）
フッターの文字の大きさ調整
- 英語の文字部分は間隔の調整
リンクの色はグレーに設定

↑

作業

卒業制作展のメインビジュアルを1200×1200pxに切り抜きtopページのスライドに3枚追加
ロゴをsvgでwebサイトに設定
- ロゴをカスタマイズから変更できるようにしていたが、svgデータの追加ができなかった
- サーバーの子テーマの中にimagesフォルダーを追加し、その中にsvgデータを入れ、phpで読み込むようにした
ロゴの間隔を九芸WORKSの方と揃えた
フッターのロゴを文字だけで設定していたが、svgのロゴに変更
- 背景が黒で文字も黒だったため、文字を#faf9f6に変更しフォルダーに追加
文字の間隔を調整
- line-heightだけ設定していたが、letter-spacingも設定し少し文字間隔を広くした
リンクをグレーに変更
- 濃いめだとリンクだと分かりにくく薄めだと見にくくなったった↓
  - 文字色をcolor: #666666;
  - 投稿ページのみ
```
	text-decoration: underline 0.5px #bbbbbb;
	text-underline-offset: 4px;
```
footerの間隔調整
施設情報ページのコーディング
プロジェクトページのリンクを1ブロックごとに全体反応するように変更
作品概要編集v1

↑

問題・疑問点

Adobe FontsからリンクしているDIN2014のフォントを持続させる方法
大学施設情報のページの学科カテゴリーリンクが施設以外のものも表示されるようになっている

↑

2025.09.19

↑

3Q開始

↑

展示について

スマートフォンがメイン使用になると考えられるためミニディスプレイがあるといいと思った

↑

作業

投稿ページの見出し・リストの全体的な調整
- フッターの中に編集者用の固定ページを追加し、投稿に関する投稿をまとめていく
フッター　九芸パレット→九芸PALETTEに変更
イベントアーカイブページの調整
- スマートフォン用のページは3列だと小さすぎるため、2列に変更
- PCページは3列のまま
- 奇数と偶数になったため、表示件数を9→12に変更
- カテゴリー終了したイベントの削除
- カテゴリー　開催中のイベント→今後のイベント
  - これに伴いトップページのEVENTの下の文字も変更
1ページに表示する最大投稿数を3→5に変更
イベントの更新九産大美術館これまでの展示会
- 学科カテゴリーの付け方について、関係があるイベントではなく学生が関わったものに限りその学生の学科カテゴリーをつけるように変更
  (学科カテゴリーフィルターが似たような感じになってしまう＋学科に関わりのあるイベントが分類しにくい）
芸学施設情報ページのデザインと内容まとめ用スプレッドシート制作
トップページのイベントの部分で、カテゴリーがついていると枠全体でリンクが反応しなくなっている問題解決
- cssの擬似要素を使って、リンクエリアを重ねる方法で解決

↑

問題・疑問点

イベントの画像サイズが異なる場合の処理方法
トップページのイベントの部分で、カテゴリーがついていると枠全体でリンクが反応しなくなっている

↑

2025.07.18

↑

2Q（最終）審査

↑

メモ

allではなく個別に本物のパレットみたいな感じにする

↑

作業

作品概要更新
現状調査のアンケート結果を更新
プロジェクトページをカテゴリーページとしてハンバーガーメニュー内に追加
- category-project.phpを追加
- デザインは2年生と一緒に考える
編集マニュアル制作
3年生が担当している検索結果の部分の修正（ローカル）
検索結果のコードをローカルから移動
- CSSの調整が必要
プロジェクトページのデザイン案（2案制作）
タブレットとPC表示用のCSS調整
- 元は950pxからイベントの部分を2列表示にしていたが、タブレットの部分がスマートフォンと同じように表示すると大きくなりすぎていて、PC表示も2列だと大きくなっていたことから500pxから2列950pxから3列に変更した。
プロジェクトページのコーディング
eventページのカテゴリーページ名を変更
- 親カテゴリーeventを追加しより簡単なコードに変更
各カテゴリーページに年別のフィルター設定を追加

↑

問題・疑問点

プラグインPublishPress Futureがうまく動作していなかった
- 08.19解決済み(BASIC認証の影響)
topページのイベントの部分にカテゴリーがついていると枠全体でリンクが反応しなくなっている
今月のイベントではなく直近のイベントはどうか

↑

2025.07.11

↑

2Q（最終）審査

タイトルの説明を入れる（作品概要・発表）

↑

作業

アンケート依頼のA4ポスターの掲載終了
イベントアーカイブの凹凸表現を追加（前回の1をpadding調整して採用）
マニュアル項目整理
レスポンシブ対応の各投稿サムネイルの大きさを指定
- max-width,margin
作品概要修正
3年生が担当している検索結果の部分の修正（ローカル）
全学科のカテゴリーがつくときは芸術学部（#ALL）を選択するようにし、芸術学部を選択すれば全ての学科のカテゴリーが自動的に表示されるように変更
- #ALLだけ表示されるとせっかくのパレットに複数の色が集まっている感じがしなかった

↑

問題・疑問点

~~-#ALLの背景色（プロジェクトページのカテゴリー表示）~~
~~--九産大芸学HPは#D1A930が使用されている（ソーシャルの色と区別がつきにくい可能性あり）~~

↑

2025.07.04

↑

2Q（最終）審査

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

↑

作業

ハンバーガーメニュー内の項目入れかえ
topイベント部分のカスタムフィールド表示項目を会期と会場に変更
topイベント部分のカスタムフィールド項目の位置調整
topイベント部分にも学科のカテゴリーが表示されるように変更
- これに伴い、パレットのような見た目にするために使用しているクラス名を変更
topイベント部分のパソコン表示時のmarginを調整
概要集修正

↑

問題・疑問点

イベントアーカイブページだけ画像にニューモーフィズムがないが統一した方がいいか

1.
.event-archive-thumbnail img {
   padding: 15px;
   box-shadow: 3px 3px 7px 0 #E1E0DB, -3px -3px 7px 0 #FFFFFF;
}

2.
.event-archive-thumbnail {
   padding: 20px;
   box-shadow: 3px 3px 7px 0 #E1E0DB, -3px -3px 7px 0 #FFFFFF;
}
.event-archive-thumbnail img {
   padding: 10px;
   box-shadow: inset 3px 3px 7px 0 #E1E0DB, inset -3px -3px 7px 0 #FFFFFF;
}

↑

2025.06.27

↑

作品概要

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

↑

メモ

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

↑

作業

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

↑