#author("2024-05-08T14:55:49+09:00","default:member","member") #author("2024-05-08T15:01:31+09:00;2024-05-08T14:55:49+09:00","default:member","member") *芸術学部専用サイト - 九芸パレット - 芸術学部生に寄り添ったサイトの考案・制作 #image(mainvisual.jpg) -'''Keywords：information, website, communication''' //-https://www.example.com //-__[[相互評価シート>https://www.example.com]]__ ← ここからコメントをお願いします。 -[[九芸パレットのプロトタイプ>https://www.figma.com/proto/lm0f9gAFvP0eJOeSN5oO3q/%E8%8A%B8%E5%AD%A6%E3%82%B5%E3%82%A4%E3%83%88%E7%A0%94%E7%A9%B6%E3%83%81%E3%83%BC%E3%83%A0's-team-library?page-id=0%3A1&type=design&node-id=2367-10&viewport=353%2C283%2C0.15&t=ne4xwA9ET2lZn3JP-1&scaling=scale-down&starting-point-node-id=2367%3A10&mode=design]] ~ //***CONTENTS //#contents2_1 //~ **概要 ***これは何？ //&color(red){これは何か・・を簡潔に}; 芸術学部生に寄り添ったサイト ~ ***背景と目的 //&color(red){プロジェクトの背景と目的}; -背景 --K’sLifeが使いにくい --大学が情報伝達ツールとしてK’sLifeに依存している --他学科が何をしているかわからない --芸学の情報が拾いづらい --情報の発信源がまとまっていない -目的 芸術学部の情報が纏まっており、学生同士で情報が共有できる場所をつくる ~ ***コンセプト //&color(red){基本的な考え方、枠組み、視点など}; -情報が拾いやすい -整理されていて利用しやすい -スッキリと見せるためにシンプルに -丸みを帯びた形や明るい色を活用して、だれもが親しみやすくなるようポップな雰囲気に ~ ***成果物の仕様 //&color(red){&small(成果物の形式・サイズ・時間尺等);}; //Webサイト -[[サイトマップ>https://drive.google.com/file/d/1zBdpHA-cEp4U7bt1WrUAtHTx_3y3n9hd/view?usp=sharing]] #image(sitemap20231204.jpg) -[[スマホ版ワイヤーフレーム>https://drive.google.com/drive/folders/1ymN-LoYgfhkXk2_52WNiYVhjhG4qAiSa?usp=sharing]] -[[PC版ワイヤーフレーム>https://drive.google.com/drive/folders/1vi-9bBqekDLNk-aLBHemLo-YzZXemkOG?usp=sharing]] -[[プロトタイプ>https://www.figma.com/proto/lm0f9gAFvP0eJOeSN5oO3q/%E8%8A%B8%E5%AD%A6%E3%82%B5%E3%82%A4%E3%83%88%E7%A0%94%E7%A9%B6%E3%83%81%E3%83%BC%E3%83%A0's-team-library?page-id=0%3A1&type=design&node-id=2367-10&viewport=353%2C283%2C0.15&t=ne4xwA9ET2lZn3JP-1&scaling=scale-down&starting-point-node-id=2367%3A10&mode=design]] ~ ***メンバー //&color(red){共同プロジェクトの場合のみ｜メンバーと役割分担を明記}; -[[江川珠貴>江川珠貴/情報デザイン研究II]] サイトマップ、メインビジュアル、プロトタイプ -[[田代爽乃>田代爽乃/情報デザイン研究II]] PC版ワイヤーフレーム、プロトタイプ -[[西山実伶>西山実伶/情報デザイン研究II]] 情報管理、プロトタイプ -[[濱有希子>濱有希子/情報デザイン研究II]] スマホ版ワイヤーフレーム、プロトタイプアニメーション -[[渡辺侑貴>渡辺侑貴/情報デザイン研究II]] スマホ版ワイヤーフレーム、プロトタイプ ~ ***制作ツール //&color(red){使用するツール｜ハードウエア・ソフトウエア}; -ハードウエア --MacbookAir --iPad -ソフトウエア --ibisPaint --PowerPoint --Adobe Illustrator 2023 --Adobe XD --figma ~ ***プロジェクトの期間 //&color(red){プロジェクトの期間｜20XX.XX.XX - 20XX.XX.XX }; 2023.09.20 - ~ ***まとめ //&color(red){プロジェクトが完結したら「まとめ」を記載して下さい。}; //中間発表 //後期までの研究内容は、九州産業大学芸術学部の先生と生徒を対象にした芸術学部専用webサイトのプロトタイプ制作である。現段階では、情報が伝わりやすく現代の学生に馴染みやすいようなシンプルかつポップなデザインにし、芸術学部内の情報共有の場として相応しい内容と構成にしていきたいと考えている。そのために、ワイヤーフレームやUIのデザイン、必要なメニュー項目の選別やサイトマップの構成などを納得するまでブラッシュアップし続けていきたい。 //今回までのグループ活動では、先走って作業を進めてしまったり、意見の対立やイメージの違いによって再度話し合いをしたりするなど、効率が悪く思うように計画的に進められなかった。今後はスケジュールをしっかり管理していきながら、それぞれ分担して作業し、疑問に思ったことはすぐに議題に出して早期に解決していくなど作業の進め方を工夫していこうと思う。後期の最終発表までにはwebサイトの完成イメージをより固めていき、プロトタイプを完成させたい。 //-最終発表 結論として、サイトという形式ではないが、目標である動くプロトタイプを完成させることができた。&br;最近では、スマホで手軽に情報を得る人が多いことから、スマホ規格で制作を進めることが主流になりつつあることを知った。そのため、私たちもワイヤーフレームやプロトタイプはスマホ規格で作成し、スマホでの利用を意識した制作を進めている。今後の制作でも利用する人のことを考え、このサイトのニーズである学生間の交流がやり易い環境開発を目指す。&br;また、本制作はwordpressで行うため子テーマの作成やPHPの理解など、勉強も同時に行っていこうと思う。 ~ ~ **調査 ***現状調査 //&color(red){プロジェクトのテーマに関わる社会の現状と問題の洗い出し}; -K's lifeが使いづらい -Teamsの利用率が低い -芸学の情報が埋もれてしまう ~ ***先行事例 //&color(red){プロジェクトのテーマに該当する先行事例の紹介、傾向分析など}; -[[ソーシャルデザイン学科>https://design.kyusan-u.ac.jp/socialdesign/?SocialDesign]] -[[九州産業大学 芸術学部>https://www.kyusan-u.ac.jp/kyugei/]] ~ ***参考サイト 色味 → [[株式会社ABI新卒採用サイト>https://abi-inc.co.jp/newgraduate/]] 構成 → [[公立大学法人 長岡造形大学>https://www.nagaoka-id.ac.jp]] UI → [[マカロニえんぴつ Official Website>http://macaroniempitsu.com]] ~ ***技法・技術情報 //&color(red){プロジェクトの遂行に必要な技法・技術に関する調査}; -[[Figma使い方>https://www.profuture.co.jp/mk/column/39138]] -[[Figmaアニメーション>https://help.figma.com/hc/ja/articles/360040314193-Figmaのプロトタイピングのガイド]] //-[[WordPressテーマ作り方>https://www.conoha.jp/lets-wp/wptheme-selfmade/]] //-[[WordPressテーマ編集方法>https://www.conoha.jp/lets-wp/wp-edit/]] ~ ~ **プロジェクト管理 ***スケジュール //&color(red){計画的な遂行のために、進行管理表を作成してリンクして下さい。}; [[Googleスプレッドシート>https://docs.google.com/spreadsheets/d/1cPRE-CDCIj2dW32liH2MVeflXqMN_flyC_M7iub3REM/edit?usp=sharing]] ~ ***ToDo //&color(red){やるべきこと（タスク）を箇条書きにします。}; //&color(red){完了後は「%%取り消し線%%」あるいは「// コメントアウト」」}; -%%ターゲット層の決定%% -%%スケジュール決定%% -%%サーバー決定%% -%%開発エンジンの決定%% -%%目的の明確化%% -%%コンセプト決定%% -%%サイトデザイン%% -%%プロトタイプ作成%% //***NotToDo //&color(red){やらないこと：何をするかではなく「何をしないか」を考える}; //&color(red){例：10人以上の会議には出ない。苦手なことは誰かに頼む・・}; ~ ~ #hr CENTER:''進捗記録'' //&color(red){最新の情報を一番上に記載して下さい（古い記事が下へ沈む）。}; #hr ~ ~ **2023.05.08 ***第20回ミーティング内容 -役職話し合い --デザイナー兼ディレクター補佐を改めて話し合う(金曜日に話し合う) -3年生WordPressユーザー追加 ~ -来週やること(役職別) -ディレクター --大まかなスケジュール決定 --外部交渉の有無 -コーダー --WordPressの勉強(PHP) -デザイナー --ワイヤーフレームのブラッシュアップ -来週やること --目標を決める (1年通すものを半年のもの) ~ **2023.04.24 ***第19回ミーティング内容 -Todo(優先順位) --目標設定★ --コンテンツの再考★ --スケジュール作成★ --ワードプレス構築★ --デザイン(ロゴ、UI)の作成★ --デザインのブラッシュアップ・プロトタイプ★ --募集方法・要項 --試運転 --マニュアル ~ -募集メンバー --コーダー(2~3人) →ワードプレスを学びたい人(HTML・CSS・Java・PHPなども含む) --デザイナー(4人) →サイト内デザイン、コンテンツ構成(UI・画面構成など) --ディレクター(2~3人) →スケジュール管理、外部交渉、進歩管理 --企画 →みんなでやる ~ -来週やること --役職決め(来週月までにある程度やりたい役職を決めてLINEで送信) --メンバー募集有無の確認 ~ **2024.04.10 ***第18回ミーティング内容 -前期のミーティング日程 -Todo --ビジュアル(サイトグラフィック) --WordPressのテーマ決め --トップ画面作品募集について --教員の連絡先について -メモ --ロゴやデザイン面 →新入生用バッグのように募集する -来週やること --先生に聞く --ロゴなどデザイン面をどうしていくか決める ~ //**2023.12.06 //***最終発表 // //~ // **2023.11.29 ***第16回ミーティング内容 -子テーマ作成学習 参考>>[[Customize>https://design.kyusan-u.ac.jp/OpenSquareJP/?WordPress/Customize]] -プロトタイプ作成（Figma） -サイトのメインカラー決定（学科の色から各自選べる仕組みにする） --赤（#DA7861） --青（#5EB4EF） --緑（#61D87D） --橙（#F2BE5C） --紫（#AA70E7） ~ ***第17回ミーティング内容 -メインビジュアル作成 [[Googleドライブ>https://drive.google.com/file/d/12Zrs437wzjcZ4vVFoNha__6z83_Fl4wD/view?usp=sharing]] #image(mainvisual.jpg) -プロトタイプの最終調整 #image(prototype.png) -発表練習 --概要、スケジュール担当（江川） --プロトタイプ担当（西山、田代、渡辺） --まとめ担当（濱） ~ **2023.11.22 ***第15回ミーティング内容 子テーマ作成学習 参考>>[[Child Theme>https://design.kyusan-u.ac.jp/OpenSquareJP/?WordPress/ChildTheme]] -wordpressのテーマを選定 --fukasawa --Cocoon -ワイヤーフレームの調整 ~ **2023.11.15 ***第13回ミーティング内容 -メモ --スマホ版サイドメニューは出なくていい情報を置く --優先順位の高いものを上に ~ -おすすめテーマ --Fukasawa ~ ***第14回ミーティング内容 スマホ版ワイヤーフレームの決定 サイトマップ更新 プロトタイプのテーマ決定 -スマホ版ワイヤーフレームの決定 [[Googleドライブ>https://drive.google.com/drive/folders/1APxTVsJ0sPuO-sl-iPMwzqM-Ca0inOO5?usp=sharing]] ~ -サイトマップ更新 --[[Googleドライブ>https://drive.google.com/file/d/12TaW2PXNgsmFFUaWLBK3-R7hCW9aC6l_/view?usp=sharing]] --「今週の作品」について →一週間に一回更新(定期的に掲載する作品を募集する) ~ -プロトタイプのテーマ決定 --[[Lightning>https://lightning.vektor-inc.co.jp/demo-site/]] &color(red){★}; --[[Cocoon>https://wp-cocoon.com/]] &color(red){★}; --[[XeoryExtension>https://xeory.jp/]] --[[Fukasawa>https://ja.wordpress.org/themes/fukasawa/]] &color(red){★}; --[[OnePress>https://ja.wordpress.org/themes/onepress/]] --[[Newscrunch>https://ja.wordpress.org/themes/newscrunch/]] --[[Arkhe>https://ja.wordpress.org/themes/arkhe/]] --[[MRクライム>https://ja.wordpress.org/themes/mrclimb/]] --[[クリーンジャーナル>https://ja.wordpress.org/themes/clean-journal/]] --[[veni>https://themeskingdom.com]] 有料 重い (Themes Kingdom) --koji 無料 軽い --[[Eris Lite>https://themeskingdom.com]] 無料 --デザインモード ~ &color(red){仮決定}; Fukasawa ~ **2023.11.08 ***第12回ミーティング内容 スマホ版ワイヤーフレーム話し合い -スマホ版とPC版でメニュー構成変えないと画面が混雑する →[[ボトムメニュー＋ハンバーガーメニュー>https://www.centrair.jp/]] →[[メインメニューはボックス型で横に、その他メニュー＋リンクは縦に並べる>https://www.yozemi.ac.jp/]] ~ **2023.11.01 ***中間発表 -プッシュ通知ではなく、プル型の通知にした方がいい -毎日見にきてもらうようにするためには？ →毎日更新するなど方法を考える -ポータルサイトとしての役割を果たすようにする -ワイヤーフレームのスマホ版 -情報の集め方の工夫 -学部の情報収集の仕組みを整えた方がいい →広報委員などを各学科で作る ~ ***第11回ミーティング内容 -中間発表で気になったこと [[push型とpull型とは>https://design.kyusan-u.ac.jp/OpenSquareJP/?cmd=read&page=InformationDesign%2FMindset&word=push%20pull]] ~ -次回までにすること スマホ版ワイヤーフレームの作成（個人案） ~ **2023.10.25 ***第9回ミーティング内容 スケジュール決定 サイトメインカラー話し合い サイトフォント案出し サイトマップ更新 ワイヤーフレーム更新 -スケジュール決定 [[スケジュール表（全体）>https://docs.google.com/spreadsheets/d/1cPRE-CDCIj2dW32liH2MVeflXqMN_flyC_M7iub3REM/edit?usp=sharing]] ~ -サイトメインカラー話し合い --青（世界で一番好まれている色） --白黒（九芸の色を定めないようにするため） --五色（サイトに使いたい） ~ -サイトフォント案出し --手書き --明朝体 --ゴシック --その他 ~ -サイトマップ更新 [[Googleドライブ>https://drive.google.com/file/d/193TlQuZFCDtWguwahR-H6-1tyHkd-JKv/view?usp=sharing]] ~ -ワイヤーフレーム更新 [[Googleドライブ>https://drive.google.com/file/d/1WK-0NvI7QE8kjK4WKTj7A2wy9cy6pNiZ/view?usp=sharing]] ~ ***第10回ミーティング内容 サイトマップ更新 ワイヤーフレーム更新 -サイトマップ更新 [[Googleドライブ>https://drive.google.com/file/d/1uaS-xuWEIAddZTu5_aimPM6h0TR-stq-/view?usp=sharing]] ~ -ワイヤーフレーム更新 [[Googleドライブ>https://drive.google.com/drive/folders/1CrBMS_QA3kAQFR_XtuDGGEMM9bg61vep?usp=sharing]] ~ **2023.10.18 ***第7回ミーティング内容 担当決め サイトマップ内容仮決定 -担当決め --サイトマップ [[江川珠貴>江川珠貴/情報デザイン研究II]] --ワイヤーフレーム [[田代爽乃>田代爽乃/情報デザイン研究II]] --ロゴデザイン [[西山実伶>西山実伶/情報デザイン研究II]] [[濱有希子>濱有希子/情報デザイン研究II]] [[渡辺侑貴>渡辺侑貴/情報デザイン研究II]] ~ -サイトマップ内容仮決定 [[Googleドライブ>https://drive.google.com/file/d/1cUh7iopKeZyTl9jMp0O5mgS1wQ1pOmeW/view?usp=sharing]] ~ -次回までにすること それぞれの担当内容を仕上げてくる ~ ***第8回ミーティング内容 ロゴ案決定 サイトマップ確認 ワイヤーフレーム話し合い -ロゴ案決定 --[[シンボルマーク>https://drive.google.com/drive/folders/1QU_Iyl1s5Ha2EJIK1Opg5N5odRgol7jm?usp=sharing]] --[[ロゴタイプ>https://drive.google.com/drive/folders/1D8YIAZCAVmlVUUOYVtYEHh8hK6WbjOj6?usp=sharing]] ~ -サイトマップ確認 [[サイトマップ>https://drive.google.com/file/d/1Gs-Kh_Tce3vDZ1Bd-Wa0xzgTYRiuXv5q/view?usp=sharing]] ~ -ワイヤーフレーム話し合い --フッター（SNSアイコン、メアド、サイトマップ、©️） --サイドメニュー（九芸WORKS、九産HP、九芸、言語設定、年間スケジュール、仮：お知らせ） ~ -次回までにすること --ロゴ作成 --サイトマップ改正 --サイトマップ改正 ~ ~ **2023.10.11 ***第5回ミーティング内容 サイトマップアイデア出し サイトロゴアイデア出し サイト名本決定 -サイト名本決定 九芸パレット パレットは色々なものを「乗せる」もの。このサイトもパレットのように色々な情報を集めて「載せて」情報の集積場としての役割を担ってほしい。 ~ -次回までにすること --サイト先行事例 --サイトマップ案 --サイトロゴラフ ~ ***第6回ミーティング内容 -先行事例 色味→[[株式会社ABI新卒採用サイト>https://abi-inc.co.jp/newgraduate/]] 構成→[[公立大学法人 長岡造形大学>https://www.nagaoka-id.ac.jp]] UI→[[マカロニえんぴつ Official Website>http://macaroniempitsu.com]] ~ -ロゴデザイン試作 [[Googleドライブ>https://drive.google.com/drive/folders/11_K5Q9c65zpHah9gAjRblfeJoT2j0K8j?usp=sharing]] ~ ~ **2023.10.04 ***第3回ミーティング内容 -アンケート内容決定・作成 --共通 ---展示会や芸学のプロジェクト情報の入手先（選択） ---普段使用している媒体の使いづらいと思う点（選択、自由記入） ---芸術学部のサイト（九芸）を知っているか（選択） ---他学科の情報（プロジェクト等）を知りたいか（選択） ---芸学に関するどのような情報を入手したいか（選択） ---その他要望（自由記入） ---所属情報（選択） --学生 ---研究に興味があるか 参加したいと思うか 学籍番号、名前 --教員 ---名前 ---授業用の連絡先を載せていいか ~ -アイデア出し [[Jamboard>https://jamboard.google.com/d/15ohngrylX6npFT5DygOxFxURtYyn0RX929HU3lmSjac/edit?usp=sharing]] ~ ***第4回ミーティング内容 スケジュール決め ToDo確認 メニュー構成案出し（続き） サイトマップ制作 ワイヤーフレーム制作 タイトル決め ~ -10月のToDo --ワイヤーフレーム --サイトマップ --デザイン決め（UI、色、レイアウト） --タイトル --ロゴ --開発エンジン決め（10/15 〆切） --アンケート内容決め（10月末） ~ -開発エンジン別（メリット、デメリット） WordPress --メリット ---管理しやすい ---更新しやすい ---参考テーマがある ---土台を作れば・・・ --デメリット ---編集にログインが必要 ---サーバーを借りる必要がある（シン・アカウント） ---1から作成の経験はなし ~ Googleサイト --メリット ---操作しやすい ---簡単に編集できる --デメリット ---安っぽい ---レイアウトを変更できない ~ PukiWiki --メリット ---整理しやすい ---慣れたら編集が簡単 ---大人数の編集に向いている --デメリット ---わからないことが多い ---お知らせが目立たない ~ HTML/CSS --メリット ---1から制作経験あり ---自由度が高い --デメリット ---編集がむずかしい、知識が必要 ~ &color(red){決定}; WordPress ~ -タイトル決め --条件 ---日本語 ---芸術学部だとわかるように ---「九産の〜」 --アイデアメモ ---芸術に関する名前を入れたい ---掲示板的な言葉（？） ---産芸 ---九芸ネットワーク ---九ふぉ（九産×インフォメーション） ---KSU Art Note（KAN）&color(red){仮決定}; ~ -担当決め --タイトルロゴ（KSU Art Note / KAN） → 全員 --レイアウト（スマホ、PC） → １人 ---UI（ボタン、メニューバー etc.） → ２人 ---ビジュアル → ２人 ---ページ構成 → ２人 ~ -サイトの雰囲気、方向性案 --シンプルポップ &color(red){★}; --%%かわいい%% --パステル --レトロ --%%手書き風%% --%%ネオン%% --%%ビビット%% --%%モノクロ%% --ナチュラル --%%おしゃれ%% --シック --幾何学 --モダン --キャンバス --ノート風 ~ ~ **2023.09.27 ***第1回ミーティング内容 ターゲット層決め 編集権限の範囲 アンケート内容決定（生徒向け） メニュー決め（必須事項のみ） 概要の明確化 内部用か外部ありか ~ -メモ --ターゲット層決め KSU芸術学部 先生・生徒 --ニーズ 芸術学部の情報の集積 学部内の情報共有場所 --編集権限の範囲 先生 学生運営メンバー --閲覧権限の範囲 オープン（仮） ＊WordPressなら差別化できる（アカウント必須） -メニュー編成 --ホーム ---イベント情報 ---プロジェクト情報 ---言語設定 --セッション --キャリア情報 --教員紹介 --運営コンタクト -次回までにやること --編集権限 --アンケート内容考える --メニュー項目追加あれば ~ ***第2回ミーティング内容 概要を決める アンケートの内容決定 メニュー項目 編集権限 ~ -概要 --これは何 芸術学生に寄り添ったサイト --背景 ---K’sLifeが使いにくい、依存している ---他学科が何をしているかわからない ---芸学の情報が拾いづらい ---情報の発信源がまとまっていない --目的 芸術学部の情報がまとまっており、学生同士で情報が共有できる場所をつくる --コンセプト ---情報を拾いやすく、使いやすいサイト ---面倒臭くならないサイト ~ -アンケート内容 --生徒 ---K'slife利用頻度 (用途、利用しない理由) ---Teamsの利用頻度 (用途、利用しない理由) ---どこで芸術学部関連のイベントなどの情報を得ているか ---他学科の情報を知りたいか ---芸学サイトにあってほしい項目、理由 ---その他要望 ---興味ある人 --教師 ---Teamsの利用頻度 (用途、利用しない理由) ---HTML/CSS、Word Press、PukiWiki ---芸学サイトにあってほしい項目、理由 ---その他要望 ---連絡先を掲載していいかの確認 ~ ~ ~