#author("2025-07-15T16:36:02+09:00;2025-07-03T11:27:54+09:00","default:member","member") #author("2025-07-17T14:00:32+09:00;2025-07-03T11:27:54+09:00","default:member","member") * 九芸PALETTE //SubTitle ・・・・・・・・・・・・・・・・ 九州産業大学芸術学部に関わる人々が、情報を共有し連携できるWebサイト #image(img1-0509.jpg) -''興梠 媛愛'' -'''Keywords：Information, WebDesign, CMS, Communication''' //-https://www.example.com -https://k6ss01.stars.ne.jp/kyugeipalette/ --閲覧用 ---ユーザーID：kyugei ---パスワード：#checkpalette ~ #image(forms.png,right,20%); ***アンケートご協力のお願い ▶︎[[&color(#0000ee){アンケートはこちら};>https://forms.office.com/r/hFSGcMJKjZ]] 右のQRコードからもアクセスできます -所要時間：2~5分 -[[プロトタイプはこちら>https://www.figma.com/proto/TvawNbzNqVxb3xWt1QVAPQ/]] ~ ~ **概要 ***これは何？ //&color(red){これは何か・・を簡潔に}; 九州産業大学芸術学部に関わる人々が、情報を共有し連携できるWebサイト 芸術学部に関係する情報をまとめて収集でき、発信したい情報をフォームを通して掲載可能な情報発信・受信のためのWebサイト ~ ***背景と目的 //&color(red){プロジェクトの背景と目的}; -背景 --芸術学部に関する情報が集まった専用Webサイトがないため、情報の発信が分散してしまっている --他学科、他専攻が何をしているかが分からないという人が多い -目的 --芸術学部の情報が集約された、九州産業大学芸術学部に関する人々が情報が共有できる場所を作る --情報の共有をもとに、学科・専攻・学年の垣根を越えて連携することができる活動拠点をWeb上に作る ~ ***コンセプト //&color(red){基本的な考え方、枠組み、視点など}; -情報が拾いやすく、整理されていて利用しやすいシンプルなデザイン -長期的な運用のための情報収集やサイト構造設計 -フォームを通じて学生が情報を掲載できるようにし、現在分散している情報も含め情報が集まり人が交流する場所を、色が集まり混ざり合うパレットになぞらえている -[[九芸WORKS>https://www.kyugeiworks.kyusan-u.ac.jp]]と同一大学芸術学部のWebサイトであることが一目で伝わるような一貫性と親和性を持たせる ~ ***成果物の仕様 //&color(red){&small(成果物の形式・サイズ・時間尺等);}; -Webサイト --[[閲覧用>https://k6ss01.stars.ne.jp/kyugeipalette/]] ユーザーID：kyugei パスワード：#checkpalette -[[figmaプロトタイプ>https://www.figma.com/proto/TvawNbzNqVxb3xWt1QVAPQ/]] -[[前期作品概要(1.2 MB)>https://drive.google.com/file/d/10_WI0iRBNOvcpEQZr0yCI1c-jS5jD8PG/view?usp=sharing]] ~ ***メンバー //&color(red){共同プロジェクトの場合のみ｜メンバーと役割分担を明記}; -[[興梠媛愛]] プロジェクトメンバー -前年度までのデザインと今年度のデザイン補助 --[[山本彩花]] --[[宮路咲希]] -検索結果のコーディング -今後の引き継ぎ --[[髙市遥]] --[[福井涼]] -プロジェクトページのデザイン --[[森山海莉]] ~ ***制作ツール //&color(red){使用するツール｜ハードウエア・ソフトウエア}; -ハードウエア --MacBook -ソフトウエア --Figma --Adobe Illustrator --WordPress ~ ***プロジェクトの期間 //&color(red){プロジェクトの期間｜20XX.XX.XX - 20XX.XX.XX }; 2025.04.11 - 20XX.XX.XX ~ ***まとめ //&color(red){プロジェクトが完結したら「まとめ」を記載して下さい。}; 前期発表 -プロタイプに基づいてWebサイトの制作を行うことができている -今後の流れ --カテゴリーやタグ、年別で見る機能の設定をする --アンケートの結果から、プロジェクト情報や他学科・他専攻の情報、施設情報も需要があることから、コンテンツを増やしていく --情報の更新を手数を減らして行うための設計をする(マニュアル作成等） --ユーザーの利便性やアクセシビリティにも目をむける //中間発表 //-今後の流れ //--5・6・7月 実際に公開できる段階にする //--8月以降 追加コンテンツを考える ~ ~ **調査 ***現状調査 //&color(red){プロジェクトのテーマに関わる社会の現状と問題の洗い出し}; -情報発信源が分散している --[[大学HP 芸術学部ニュース>https://www.kyusan-u.ac.jp/faculty/geijutsu/]] --[[九芸>https://www.kyusan-u.ac.jp/kyugei/]] --[[九芸WORKS>https://www.kyugeiworks.kyusan-u.ac.jp]] --[[アートスペース>https://vision.ip.kyusan-u.ac.jp/artspace/]] --[[九州産業大学美術館>https://www.kyusan-u.ac.jp/ksumuseum/]] --[[九産大Instagram>https://www.instagram.com/kyushusangyo_university/]] --[[九芸Instagram>https://www.instagram.com/kyugei_official/]] --[[九芸卒展Insragram>https://www.instagram.com/kyugeisotsuten/]] --[[K*RISE>https://k-rise.cs.kyusan-u.ac.jp/]] -アンケート（2025.06.27現在, 回答65名） --九州産業大学芸術学部生を対象に2025.06.20~07.11まで実施 --このアンケートでは、芸術学部生の現状の活動や情報収集方法等を把握することに加え、Webサイトで取り扱うコンテンツの要望を聞くことを目的としている。 &image(ans.jpg,,50%); ~ ***先行事例 //&color(red){プロジェクトのテーマに該当する先行事例の紹介、傾向分析など}; 在学生むけのWebサイト -[[九州大学芸術工学部・大学院芸術工学府・大学院芸術工学研究院>https://www.design.kyushu-u.ac.jp]] -[[芸工アプリ>https://geiko.app/]] -[[九州大学芸術工学部 在学生向け>https://std.design.kyushu-u.ac.jp/]] -[[京都芸術大学 在学生の方へ>https://www.kyoto-art.ac.jp/student/]] -[[武蔵野芸術大学 在学生の方へ>https://www.musabi.ac.jp/current/]] ~ -リンクをまとめているWebサイト(リンクページの参考） -NEWSやイベント、リンクのまとまったWebサイト -大学全体の紹介になっているサイトもあるため入試情報も入っているものもあるが今回は入試系の情報は省く -[[まとめスプレッドシート>https://docs.google.com/spreadsheets/d/1ztESHkF8DykJT3GzFIYfOuJ1InnW6JbWS1zMoz0uTpQ/edit?usp=sharing]] ~ デザイン -構成→[[21_21 DESIGN SIGHT>https://www.2121designsight.jp]] --シンプルなデザイン --イベント詳細の取り扱いの参考 -UIデザイン→[[株式会社 博報堂プロダクツ>https://www.h-products.co.jp]] --ニューモーフィズムを使用したデザイン -色・フォント→[[九芸WORKS>https://www.kyugeiworks.kyusan-u.ac.jp]] --同一大学の芸術学部のWebサイトであることが一目で伝わるような一貫性と親和性を持たせる ~ ***技法・技術情報 //&color(red){プロジェクトの遂行に必要な技法・技術に関する調査}; -[[ローカル環境>https://www.onamae.com/column/wordpress/27/]] -[[WordPress子テーマ>https://www.conoha.jp/lets-wp/wp-childtheme/]] -[[Advanced Custom Fieldsの使い方・出力関数【WordPress カスタムフィールド】>https://webst8.com/blog/wordpress-advanced-custom-fields/]] ~ ~ **プロジェクト管理 ***スケジュール //&color(red){計画的な遂行のために、進行管理表を作成してリンクして下さい。}; -[[予定表>https://docs.google.com/spreadsheets/d/1CKzudgI4ZHNvB5S5OwoD1fmhGD7nT_rxwV1NURsGZYI/edit?usp=sharing]] ~ ***ToDo //&color(red){やるべきこと（タスク）を箇条書きにします。}; //&color(red){完了後は「%%取り消し線%%」あるいは「// コメントアウト」」}; -[[todoリスト>https://docs.google.com/spreadsheets/d/1b-gz1snoJFuYkVpl5Fyyf-Op6V_5b_Ntw2htOHrV6w0/edit?usp=sharing]] -Adobe FontsからリンクしているDIN2014のフォントを持続させる //***NotToDo //&color(red){やらないこと：何をするかではなく「何をしないか」を考える}; //&color(red){例：10人以上の会議には出ない。苦手なことは誰かに頼む・・}; ~ ~ #hr CENTER:''進捗記録'' //&color(red){最新の情報を一番上に記載して下さい（古い記事が下へ沈む）。}; #hr ~ ~ //**2025.07.18 //***XXXX //~ //~ **2025.07.11 ***2Q（最終）審査 -タイトルの説明を入れる（作品概要・発表） ***作業 -アンケート依頼のA4ポスターの掲載終了 -イベントアーカイブの凹凸表現を追加（前回の1をpadding調整して採用） -[[マニュアル項目整理>https://docs.google.com/document/d/1Q17E0uQVk-Pj16ImAHeh86wntlo4L_OVSVCX9lKie5U/edit?usp=sharing]] -レスポンシブ対応の各投稿サムネイルの大きさを指定 --max-width,margin -3年生が担当している検索結果の部分の修正（ローカル） ***問題・疑問点 ~ ~ **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)>https://drive.google.com/file/d/10_WI0iRBNOvcpEQZr0yCI1c-jS5jD8PG/view?usp=sharing]] ***メモ -作品概要の白背景の画像は枠で囲む ***作業 -カテゴリーページで記事押してもリンク先に飛ばなくなっている問題を解決 --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用紙の調整、印刷 &image(survey-request-02b.jpg,,50%); -作品概要の制作 -カテゴリーページの設定 --全てのカテゴリーページとお知らせアーカイブとイベントアーカイブの個別テンプレート -footerの調整 ***問題・疑問点 -topページはお知らせ→イベントの順だが、メニューはイベントアーカイブ→お知らせアーカイブの順になっているのは変更した方がいいか -カテゴリーページの設定は変更後のもので良いか ~ ~ **2025.06.06 ***メモ -footerの調整（間隔と色） -ロゴデータはアウトライン化したものをsvg化がいい -[[footerの位置>https://shopeyes.jp/media-blog/00001078/]] -サムネのサイズ制限(検索(共有時のサムネイル 規定)) -タグと年別の部分はテーマファイルエディターで --タグは多くなるため、学科と年別でいいのでは --ホバー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 ***メモ -ロゴを実際に配置してみて、固定表示をするかしないかを決定する ~ ***作業 -外部リンクのアイコンの大きさ設定 -ハンバーガーメニュー内の文字の大きさ調整 -以前書いていたが必要なくなったコードの削除 -先行事例リンク等[[まとめスプレッドシート>https://docs.google.com/spreadsheets/d/1ztESHkF8DykJT3GzFIYfOuJ1InnW6JbWS1zMoz0uTpQ/edit?usp=sharing]]作成 -NEWSの部分の学科タグをカテゴリーに変更 -topページのショートコードを学内・学外で設定できるように変更 -アンケート作成 ~ ***聞くこと -カテゴリー・タグページに空白が入る部分の調整方法 -募集画像のサイズはどのくらいがいいのか -リンクのページはメニューで設定したほうがいいか -[[アンケート>https://forms.office.com/r/hFSGcMJKjZ]]の項目は適正か ~ ~ **2025.04.25 ***変更 -展示会→イベント（ワークショップ形式や販売の開催も掲載できるようにするため） ***メモ -WordPressの検索結果の部分を変えると変わる（子テーマ必要） ***作業 -menu-main, menu-footerの外部サイトリンク横のアイコン追加（位置調整が必要） -topページの見出し部分のmargin-topを14pxに -topページのEXHIBITION展示会をEVENTイベントに変更 -ロゴ仮制作 -チーム会議をし現状共有 ***05.02で聞きたいこと -九芸WORKSのロゴのAiデータがあるか -背景目的等概要の部分の問題はないか -ロゴの部分は固定の方がいいか（九芸WORKSは固定していない） -タグ、年別の部分はどのように表示するか（システム的に） - ~ ~ **2025.04.18 ***決定 &image(0411-1.jpg,,50%); -右の案でベース作成 -学科のタグの色は九芸WORKSの使用色に変更 ~ ***作業 -[[予定表>https://docs.google.com/spreadsheets/d/1CKzudgI4ZHNvB5S5OwoD1fmhGD7nT_rxwV1NURsGZYI/edit?usp=sharing]] -[[todoリスト>https://docs.google.com/spreadsheets/d/1b-gz1snoJFuYkVpl5Fyyf-Op6V_5b_Ntw2htOHrV6w0/edit?usp=sharing]] -デザイン --figmaでtopページ以外のデザイン（色・フォント・シャドウの調整） -コーディング --figmaでデザインしている色とシャドウの反映 -チーム --現在の状況をチームの人に共有する資料を作成 ~ ***次回聞きたいこと -検索結果の画面について -外部リンクのものにのみ後ろにマークをつける方法 ~ ~ **2025.04.11 ***テーマ決定 -芸術学部生に寄り添ったWebサイト[[『九芸パレット』>Project/九芸パレット]]考案・制作（プロジェクトで進行中のもの） --情報収集の動線設計 --芸術学部生が必要とする情報は何なのか --今後更新がしやすいフォーマット作り --展示会・イベント・公募（・プロジェクト)を中心としたWebサイト ~ ***テーマ案 -芸術学部生に寄り添ったWebサイト『九芸パレット』制作（プロジェクトで進行中のもの） -流れる時間を体感するWebサイト -目線誘導を活用した体験型Webサイト ~ ***現状調査 //&color(red){プロジェクトのテーマに関わる社会の現状と問題の洗い出し}; -情報の分散 --[[大学HP 芸術学部ニュース>https://www.kyusan-u.ac.jp/faculty/geijutsu/]] --[[九芸>https://www.kyusan-u.ac.jp/kyugei/]] --[[九芸WORKS>https://www.kyugeiworks.kyusan-u.ac.jp]] --[[アートスペース>https://vision.ip.kyusan-u.ac.jp/artspace/]] --[[九州産業大学美術館>https://www.kyusan-u.ac.jp/ksumuseum/]] --[[九産大Instagram>https://www.instagram.com/kyushusangyo_university/]] --[[九芸Instagram>https://www.instagram.com/kyugei_official/]] --[[九芸卒展Insragram>https://www.instagram.com/kyugeisotsuten/]] ~ ***先行事例 //&color(red){プロジェクトのテーマに該当する先行事例の紹介、傾向分析など}; 在学生向けのページ -[[九州大学芸術工学部・大学院芸術工学府・大学院芸術工学研究院>https://www.design.kyushu-u.ac.jp]] -[[九州大学芸術工学部 未来構想デザインコース 在学生向け>https://www.df.design.kyushu-u.ac.jp/category/students/]] -[[京都芸術大学 在学生の方へ>https://www.kyoto-art.ac.jp/student/]] -[[武蔵野芸術大学 在学生の方へ>https://www.musabi.ac.jp/current/]] ~ ***作業 -学科サイト概要の部分を記載 -現状調査・先行事例を記載 -デザインのフォント・色・シャドウの調整(九芸WORKSに寄せる) &image(0411-1.jpg,,50%);&image(0411-2.jpg,,50%); ~ ~ ~