九芸PALETTE
九州産業大学芸術学部に関わる人々が、情報を共有し連携できるWebサイト
- 興梠 媛愛
- Keywords:Information, WebDesign, CMS, Communication
- 九芸PALETTE Webサイト
- 閲覧用
- ユーザーID:kyugei
- パスワード:#checkpalette
- 閲覧用
- 卒業研究プレゼン用ページ
概要
これは何?
- 九州産業大学芸術学部に関わる人々が、情報を共有し連携できるWebサイト
- 芸術学部に関係する情報をまとめて収集でき、発信したい情報をフォームを通して掲載可能な情報発信・受信のためのWebサイト
背景と目的
- 背景
- 芸術学部に関する情報が集まった専用Webサイトがないため、情報の発信が分散してしまっている
- 他学科、他専攻が何をしているかが分からないという人が多い
- 目的
- 芸術学部の情報が集約された、九州産業大学芸術学部に関する人々が情報が共有できる場所を作る
- 情報の共有をもとに、学科・専攻・学年の垣根を越えて連携することができる活動拠点をWeb上に作る
- 日常的かつ継続的に活用されるWeb サイトにする
コンセプト
- 情報が拾いやすく、整理されていて利用しやすいシンプルなデザイン
- 長期的な運用のための情報収集やサイト構造設計
- フォームを通じて学生が情報を掲載できるようにし、現在分散している情報も含め情報が集まり人が交流する場所を、色が集まり混ざり合うパレットになぞらえている
- 九芸WORKSと同一大学芸術学部のWebサイトであることが一目で伝わるような一貫性と親和性を持たせる
成果物の仕様
- Webサイト
- 閲覧用
ユーザーID:kyugei
パスワード:#checkpalette
- 閲覧用
- figmaプロトタイプ
- figma作業
- 前期作品概要(1.2 MB)
- 作品概要(1.5 MB)
メンバー
プロジェクトメンバー
- プロジェクトページのデザイン
- 大学施設情報ページの教室情報追加
制作ツール
- ハードウエア
- MacBook
- ソフトウエア
- Figma
- Adobe Illustrator
- Adobe Photoshop
- WordPress
プロジェクトの期間
2025.04.11 - 2026.02.28
まとめ
本Webサイトの構築により、既存のWebサイトや告知等の活動の情報を集約して、学科別・年度別表示などの機能によって、利用者が目的の情報をより探しやすい環境を整備した。また、一度入力した内容を複数箇所に表示できる仕組みを導入し、更新作業の効率化を図っている。これにより、コード編集を行わずに投稿内容の一部を他のページへ自動表示でき、WordPress の専門的な操作に不慣れな利用者であっても、ブロックエディタを用いた更新が可能となった。
今後はサーバー移行およびマニュアル整備により、引き継ぎを行い、長期的かつ持続可能な運用体制を確立することを目指す。また、ユーザーからのフィードバックを反映し、情報の充実とデザイン改善を継続することで、利便性と価値の向上を図る。
調査
現状調査
- 情報発信源が分散している
- アンケート(回答102名)
先行事例
在学生むけのWebサイト
- 九州大学芸術工学部・大学院芸術工学府・大学院芸術工学研究院
- 芸工アプリ
- 九州大学芸術工学部 在学生向け
- 京都芸術大学 在学生の方へ
- 武蔵野芸術大学 在学生の方へ
- リンクをまとめているWebサイト(リンクページの参考)
- NEWSやイベント、リンクのまとまったWebサイト
- 大学全体の紹介になっているサイトもあるため入試情報も入っているものもあるが今回は入試系の情報は省く
- まとめスプレッドシート
デザイン
- 構成→21_21 DESIGN SIGHT
- シンプルなデザイン
- イベント詳細の取り扱いの参考
- UIデザイン→株式会社 博報堂プロダクツ
- ニューモーフィズムを使用したデザイン
- 色・フォント→九芸WORKS
- 同一大学の芸術学部のWebサイトであることが一目で伝わるような一貫性と親和性を持たせる
- 同一大学の芸術学部のWebサイトであることが一目で伝わるような一貫性と親和性を持たせる
技法・技術情報
プロジェクト管理
スケジュール
ToDo
- todoリスト
Adobe FontsからリンクしているDIN2014のフォントを持続させる- topのスライダー部分の画像募集
プロジェクトページのデザインとコーディング- 編集マニュアル制作
- 本環境への移行
- 事務室と先生方との話し合い
説明パネル 12/12までに制作
進捗記録
2025.12.26
作業
- teamsに事務室、教職員、運営の行うことをまとめた資料を追加
- 美術館の展示イベントの情報を転記
2025.12.19
作業
- 図録登録
- 展示データ修正
2025.12.12
作品パネル印刷
作業
- 展示データ制作
- 図録文・写真
2025.12.05
最終発表
作業
- パネルの裏面の調整
- パネルのQRコードを変更
- パネル画像入れ替え
- 編集マニュアルにメニューの編集を追加
- :rootで設定できる部分を設定(CSS)
2025.11.28
最終発表
作業
- A4ポスター(募集と告知)の制作を3年生に依頼
- パネルの裏面の制作
2025.11.21
最終審査
- へこませている部分はボタン形式で凹んでいなくてもいいのではないか
- 編集マニュアルページに見出し
- 編集マニュアルページにダッシュボードの行き方など順番に並べる
- 今後の運営について考える
- 今後アクセス解析等を入れる
- コード部分で何をしているかが分かるようにしておく
- 発表で慣れていない人でも更新ができるような設計になっていることに触れられていなかった
- まとめに、今後情報更新がとどこおりなく継続して行われることで、他学科・他専攻の情報を友人等の人によって異なる要素ではなく、集まった情報から知ることができるため、学科・専攻を超えて円滑なコミュニケーションがとれるだろうなど入れると良い
すること
- 説明パネルの画像入れ
作業
- 説明パネルの画像入れ(表)
- マニュアルページの見出し
問題・疑問点
2025.11.14
すること
作業
- プレゼンページのまとめを箇条書きに変更
- プロジェクトページの更新
- プレゼン練習
問題・疑問点
- BASIC認証やログインページのurl変更について
2025.10.31
すること
- お知らせの部分でお知らせの子カテゴリーと学科タグ全てが設定されている時にレイアウトが崩れている部分の修正
- まとめの部分で、どのような工夫があるかを追記しておく(学科ごとの色分けやプログラムで自動処理できるようにしたことなど)
- プログラムの自動処理によってより更新が容易な形にできている
- 発表用ページを作る
- 先行事例などの情報の位置を発表の順番で変えてもいい
作業
- お知らせの更新(九産大のHPから転記)
- お知らせのレイアウト崩れを修正
- マニュアル更新(リンク)
- ハンバーガーメニューの文字はアーカイブを消していたが、カテゴリーページの部分でアーカイブの文字が消えていなかったので変更
- 学科サイトのメインビジュアルの差し替え
- 発表用の追加資料作成
- 卒展説明パネルの文章仮入れ
問題・疑問点
2025.10.24
すること
- マニュアル
- 周知してもらえるようにA4一枚のポスター
- 卒展説明パネル
- 学科サイトのまとめ入力
作業
- 作品概要提出
- お知らせアーカイブ→お知らせ、イベントアーカイブ→イベントに変更
- マニュアル更新(イベント・プロジェクト・大学施設情報)
- 学科サイトまとめ入力
- 卒展説明パネル(背景目的)
問題・疑問点
2025.10.17
すること
- マニュアル
- 周知してもらえるようにA4一枚のポスター
作業
- 作品概要
- Webサイト
- 各種募集フォームのイベント募集部分の内容とリンク先を変更
- 投稿ページの画像で中央揃えとなしの時のcss設定を同じにした
- 投稿ページでギャラリーにしたときにpaddingが他のimageと同じように働いていたため、別途指定し小さくならないよう変更
- 編集者用のページにマニュアル追加中
- リストの調整
- .highlight-markerを追加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
作品概要
メモ
- 作品概要の白背景の画像は枠で囲む
作業
- カテゴリーページで記事押してもリンク先に飛ばなくなっている問題を解決
- category.phpにjavascriptのコードを追加
- 学科カテゴリーを九芸WORKSと同じ順番に変更
- コンテンツ整理
- newsの部分の学外以外の記事分類のところもカテゴリーに変更
- 編集する際にわかりやすいようにnewsの子カテゴリーにしている
- topイベントのカスタムフィールドを呼び出している部分の行間を調整
- プラグインを追加(Advanced Custom Fields)
- 合わせて投稿ページの部分のカスタムフィールドに書き込みやすいように調整
- 入力がない場合は表示しないように変更
問題・疑問点
- topのイベント部分にはお知らせと同じような感じで学科のカテゴリー表示があった方がいいか
- topのイベントの情報はどこまでの情報を表に出すか
- pc表示の時の画像が大きすぎる(サムネのサイズによって調整がうまくいかない)
2025.06.20
メモ
- ページネーション用のphpを作る
作業
- アンケート依頼ポスターの掲示(10箇所)
- お知らせアーカイブとイベントアーカイブをアーカイブテンプレートからカテゴリーテンプレートのリンク先に変更
- 芸術学部ニュースから2件記事を追加
- 投稿ページの画像と動画に対しての空白設定
- newsのタグに受賞を追加し、php,cssを変更
- topのイベントの部分で呼び出しているカスタムフィールドの文を改行も反映するように変更
- 概要集のアンケートの部分を更新
問題・疑問点
- カテゴリーページで記事押してもリンク先に飛ばなくなっている
投稿ページのカスタムフィールドの表示場所はサムネイルの下にある方がいい
2025.06.13
メモ
- 作品概要(前期分)作成が必要
- 学科サイトに載せるアンケートご協力のお願いとA4書類の準備
作業
問題・疑問点
- 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サイト
現状調査
先行事例
在学生向けのページ
作業





