- 追加された行はこの色です。
- 削除された行はこの色です。
#author("2023-10-18T17:14:19+09:00;2023-09-20T14:20:30+09:00","default:member","member")
#author("2023-12-22T11:28:14+09:00;2023-12-13T17:24:27+09:00","default:member","member")
*芸術学部専用サイト - 九芸パレット -
芸術学部生に寄り添ったサイトの考案・制作
メインビジュアル、あるいは
プロジェクトの最新の状態を視覚的に掲載
-''渡辺 侑貴''
-'''Keywords： information, communication, Website'''
-https://www.example.com
-[[プロジェクトノート>芸術学部専用サイトの開発]]
#image(mainvisual.jpg)
-''渡辺侑貴''
-'''Keywords：information, website, communication'''
//-https://www.example.com
//-[[プロジェクトノート>Project/九芸パレット]]
//-__[[相互評価シート>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=6aNRKUVZloAL8Rms-1&scaling=scale-down&starting-point-node-id=2367%3A10&mode=design]]
~
//***CONTENTS
//#contents2_1
~
//~
**概要
***これは何？
//&color(red){これは何か・・を簡潔に};
芸術学生に寄り添ったサイト
//&color(red){これは何か・・を簡潔に};
~
***背景と目的
//&color(red){プロジェクトの背景と目的};
-背景
--K’sLifeが使いにくい、依存している
--K’sLifeが使いにくい
--大学が情報伝達ツールとしてK’sLifeに依存している
--他学科が何をしているかわからない
--芸学の情報が拾いづらい
--情報の発信源がまとまっていない
-目的
芸術学部の情報がまとまっており、学生同士で情報が共有できる場所をつくる
//&color(red){プロジェクトの背景と目的};
芸術学部の情報が纏まっており、学生同士で情報が共有できる場所をつくる
~
***コンセプト
-情報を拾いやすく、使いやすいサイト
-面倒臭くならないサイト
//&color(red){基本的な考え方、枠組み、視点など};
-情報が拾いやすい
-整理されていて利用しやすい
-スッキリと見せるためにシンプルに
-丸みを帯びた形や明るい色を活用して、だれもが親しみやすくなるようポップな雰囲気に
~
***成果物の仕様
//&color(red){&small(成果物の形式・サイズ・時間尺等);};
-[[サイトマップ>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=6aNRKUVZloAL8Rms-1&scaling=scale-down&starting-point-node-id=2367%3A10&mode=design]]
~
***メンバー
//&color(red){共同プロジェクトの場合のみ｜メンバーと役割分担を明記};
-[[江川珠貴>江川珠貴/情報デザイン研究II]]
-[[田代爽乃>田代爽乃/情報デザイン研究II]]
-[[西山実伶>西山実伶/情報デザイン研究II]]
-[[濱有希子>濱有希子/情報デザイン研究II]]
-渡辺侑貴
-[[江川珠貴>江川珠貴/情報デザイン研究II]] サイトマップ、メインビジュアル、プロトタイプ
-[[田代爽乃>田代爽乃/情報デザイン研究II]] PC版ワイヤーフレーム、プロトタイプ
-[[西山実伶>西山実伶/情報デザイン研究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 - 2023.12.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/]]
//&color(red){プロジェクトのテーマに該当する先行事例の紹介、傾向分析など};
~
***参考サイト
色味 → [[株式会社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/]]
~
~
**プロジェクト管理
***スケジュール
-[[スケジュール表（全体）>https://docs.google.com/spreadsheets/d/1cPRE-CDCIj2dW32liH2MVeflXqMN_flyC_M7iub3REM/edit?usp=sharing]]
//-[[スケジュール表（個人）>https://docs.google.com/spreadsheets/d/1H-Wp_94hSOIlbs6NpPqoQ38B9yHEBvulePIIxg2OFnY/edit#gid=0]]
//&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.12.20
***デザインの先行事例
-[[Pinterest>https://pin.it/2F83PlQ]]
~
***メモ
-学科・全体のお知らせ（色合い）
~
***プロジェクトミーティング
-[[プロジェクトメモサイト>Project/九芸パレット]]
~
~
**2023.10.11
***第5回ミーティング内容
サイトマップアイデア出し
サイトロゴアイデア出し
-次回までにすること
--サイト先行事例
--サイトマップ案
--サイトロゴラフ
**2023.12.13
***デザインの先行事例
-[[Pinterest>https://pin.it/2F83PlQ]]
~
***メモ
-シンプルポップ
-UI、メニューの表示
~
***プロジェクトミーティング
-[[プロジェクトメモサイト>Project/九芸パレット]]
~
~
***第6回ミーティング内容
-先行事例
色味→[[株式会社ABI新卒採用サイト>https://abi-inc.co.jp/newgraduate/]]
構成→[[公立大学法人 長岡造形大学>https://www.nagaoka-id.ac.jp]]
UI→[[マカロニえんぴつ Official Website>http://macaroniempitsu.com]]
**2023.12.06
***最終発表について
-K'sライフのリンク（サイトからどう繋げるか）
-空き教室情報は今ある情報をうまく活用する（引き継いだ人を考慮）
-サイを改修しやすいように仕様書を作成
-学科情報はトップページに必要か
-更新について詳しく記載する
-学科・全体の情報の色の使い方を決めておく
~
-ロゴデザイン試作
[[Googleドライブ>https://drive.google.com/drive/folders/11_K5Q9c65zpHah9gAjRblfeJoT2j0K8j?usp=sharing]]
***メモ
-発表する際は自分が担当したところを言った方が良い
~
***プロジェクトミーティング
-[[プロジェクトメモサイト>Project/九芸パレット]]
~
~
**2023.10.04
***第三回ミーティング内容
アンケート内容決定・作成
-共通
--展示会や芸学のプロジェクト情報の入手先（選択）
--普段使用している媒体の使いづらいと思う点（選択、自由記入）
--芸術学部のサイト（九芸）を知っているか（選択）
--他学科の情報（プロジェクト等）を知りたいか（選択）
--芸学に関するどのような情報を入手したいか（選択）
--その他要望（自由記入）
--所属情報（選択）
-学生
--研究に興味があるか
---参加したいと思うか
---学籍番号、名前
-教員
--名前
--授業用の連絡先を載せていいか
**2023.11.29
***作業
-スマホ版プロトタイプのイベントページ作成
-プロトタイプ全体の文体、幅統一（微調整）
調整前
#image(prototype.png)
調整後
#image(prototype2.png)
~
***メモ
-サイトのメインカラー決定（学科の色から各自選べる仕組みにする）
--赤（#DA7861）
--青（#5EB4EF）
--緑（#61D87D）
--橙（#F2BE5C）
--紫（#AA70E7）
-メインビジュアル作成
-プロトタイプの最終調整
~
***プロジェクトミーティング
-[[プロジェクトメモサイト>Project/九芸パレット]]
~
~
***第4回ミーティング
-スケジュール決め
-ToDo確認
-メニュー構成案出し（続き）
-サイトマップ制作
-ワイヤーフレーム制作
-タイトル決め
**2023.11.22
***作業
-ワイヤーフレームのボタン変更
***メモ
-丸みをおびたボタンで統一
~
***プロジェクトミーティング
-[[プロジェクトメモサイト>Project/九芸パレット]]
~
~
***10月のToDo
-ワイヤーフレーム
-サイトマップ
-デザイン決め（UI、色、レイアウト）
-タイトル
-ロゴ
-開発エンジン決め（10/15 〆切）
-アンケート内容決め（10月末）
**2023.11.15
***作業
-スマホ版ワイヤーフレーム制作改良
[[ワイヤーフレーム1>https://drive.google.com/file/d/1kZ5sSJGyUVKa2BBQJfKNsUZO_Mv3RLKl/view?usp=sharing]]
[[ワイヤーフレーム2>https://drive.google.com/file/d/1Eg2CZs5m41euX8Ub26YCaBhZprLOY_5W/view?usp=sharing]]
|#image(Pwa1.png)|#image(Pwa2.png)|
~
***プロジェクトミーティング
-[[プロジェクトメモサイト>Project/九芸パレット]]
~
~
***開発エンジン別（メリット、デメリット）
WordPress &color(red){決定};
-メリット
--管理しやすい
--更新しやすい
--参考テーマがある
--土台を作れば・・・
-デメリット
--編集にログインが必要
--サーバーを借りる必要があ（シン・アカウント）
--1から作成の経験はなし
**2023.11.08
***作業
-スマホ版ワイヤーフレーム制作
[[ワイヤーフレーム1>https://drive.google.com/file/d/1yWSohVOhyyTQOHJ-ooZuOJuLk__VTs7P/view?usp=sharing]]
[[ワイヤーフレーム2>https://drive.google.com/file/d/1kUzD1IwPoOCx7oQDCBOzzb-yJGbqh_Nz/view?usp=sharing]]
~
***プロジェクトミーティング
-[[プロジェクトメモサイト>Project/九芸パレット]]
~
~
Googleサイト
-メリット
--操作しやすい
--簡単に編集できる
-デメリット
--安っぽい
--レイアウトを変更できない
**2023.11.01
-中間発表
プッシュ通知ではなく、プル型の通知にした方がいい
毎日見にきてもらうようにするためには？
→毎日更新するなど方法を考える
ポータルサイトとしての役割を果たすようにする
ワイヤーフレームのスマホ版
情報の集め方の工夫
学部の情報収集の仕組みを整えた方がいい
→広報委員などを各学科で作る
~
***メモ
[[push型とpull型とは>https://design.kyusan-u.ac.jp/OpenSquareJP/?cmd=read&page=InformationDesign%2FMindset&word=push%20pull]]
~
***プロジェクトミーティング
-[[プロジェクトメモサイト>Project/九芸パレット]]
~
~
PukiWiki
-メリット
--整理しやすい
--慣れたら編集が簡単
--大人数の編集に向いている
-デメリット
--わからないことが多い
--お知らせが目立たない
**2023.10.25
***作業
-サイトメインカラー話し合い
-サイトフォント案出し
-サイトマップ更新
-ワイヤーフレーム更新
~
***プロジェクトミーティング
-[[プロジェクトメモサイト>Project/九芸パレット]]
~
~
HTML/CSS
-メリット
--1から制作経験あり
--自由度が高い
-デメリット
--編集がむずかしい、知識が必要
**2023.10.18
***作業
-ロゴデザイン作成
-サイトマップ確認
-ワイヤーフレーム話し合い
-ロゴ案決定
--[[シンボルマーク>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]]
~
***プロジェクトミーティング
-[[プロジェクトメモサイト>Project/九芸パレット]]
~
~
***タイトル決め
-条件
--日本語
--芸術学部だとわかるように
--「九産の〜」
-アイデアメモ
--芸術に関する名前を入れたい
--掲示板的な言葉（？）
--産芸
--九芸ネットワーク
--九ふぉ（九産×インフォメーション）
--KSU Art Note（KAN）&color(red){仮決定};
**2023.10.11
***作業
サイトロゴアイデア出し
#image(rogo1.png,50%)
九産大の９、パレット感、芸学の5色を入れたデザイン
-ロゴデザイン試作
[[Googleドライブ>https://drive.google.com/drive/folders/11_K5Q9c65zpHah9gAjRblfeJoT2j0K8j?usp=sharing]]
~
***プロジェクトミーティング
-[[プロジェクトメモサイト>Project/九芸パレット]]
~
~
***担当決め
-タイトルロゴ（KSU Art Note / KAN） → 全員
-レイアウト（スマホ、PC） → １人
--UI（ボタン、メニューバー etc.） → ２人
--ビジュアル → ２人
--ページ構成 → ２人
**2023.10.04
***作業
-スケジュール決め
-ToDo確認
-メニュー構成案出し
-サイトマップ制作
-ワイヤーフレーム制作
-タイトル決め
#image(i1.png,70%)
~
***サイトの雰囲気、方向性案
-シンプルポップ &color(red){★};
-%%かわいい%%
-パステル
-レトロ
-%%手書き風%%
-%%ネオン%%
-%%ビビット%%
-%%モノクロ%%
-ナチュラル
-%%おしゃれ%%
-シック
-幾何学
-モダン
-キャンバス
-ノート風
***メモ
--タイトルロゴ（KSU Art Note / KAN）
--レイアウト（スマホ、PC） → １人
--UI（ボタン、メニューバー etc.）
--ビジュアル
--ページ構成
-サイトの雰囲気、方向性案
--シンプルポップ &color(red){★};
-開発エンジン決め（10/15 〆切）
-アンケート内容決め（10月末）
~
***プロジェクトミーティング
-[[プロジェクトメモサイト>Project/九芸パレット]]
~
~
**2023.09.27
***第一回ミーティング内容
***作業
-ターゲット層決め
-編集権限の範囲
-アンケート内容決定（生徒向け）
-メニュー決め（必須事項のみ）
-概要の明確化
-内部用か外部ありか
~
***メモ
-ターゲット層決め
KSU芸術学部 先生・生徒
-ニーズ
--芸術学部の情報の集積
--学部内の情報共有場所
-編集権限の範囲
--先生
--学生運営メンバー
-閲覧権限の範囲
オープン（仮）
＊WordPressなら差別化できる（アカウント必須）
-メニュー編成
--ホーム
---イベント情報
---プロジェクト情報
---言語設定
--セッション
--キャリア情報
--教員紹介
--運営コンタクト
-次回までにやること
--編集権限
--アンケート内容考える
--メニュー項目追加あれば
~
***メモ
https://design.kyusan-u.ac.jp/socialdesign/?芸術学部専用サイトの開発
~
***第二回ミーティング内容
-概要を決める
-アンケートの内容決定
-メニュー項目
-編集権限
~
***概要
-これは何
芸術学生に寄り添ったサイト
-背景
--K’sLifeが使いにくい、依存している
--他学科が何をしているかわからない
--芸学の情報が拾いづらい
--情報の発信源がまとまっていない
-目的
芸術学部の情報がまとまっており、学生同士で情報が共有できる場所をつくる
-コンセプト
--情報を拾いやすく、使いやすいサイト
--面倒臭くならないサイト
~
***アンケート内容
-アンケート内容
-生徒
--K'slife利用頻度
(用途、利用しない理由)
--Teamsの利用頻度
(用途、利用しない理由)
--どこで芸術学部関連のイベントなどの情報を得ているか
--他学科の情報を知りたいか
--芸学サイトにあってほしい項目、理由
--その他要望
--興味ある人
-教師
--Teamsの利用頻度
(用途、利用しない理由)
--HTML/CSS、Word Press、PukiWiki
--芸学サイトにあってほしい項目、理由
--その他要望
--連絡先を掲載していいかの確認
~
***プロジェクトミーティング
-[[プロジェクトメモサイト>Project/九芸パレット]]
~
~
**2023.09.20
***メモ
-PukiWiki、HTML・CSS、Word Pressなど、どのような環境で制作していくか
-サイトの基本の構成を考える
-芸術学部生全体へのアンケートの制作
-アンケートから、足した方がいい項目を考える
-サイトマップの制作
-ワイヤーフレームの制作
-役割を分担し、それぞれで活動する
~
***テーマ案
-芸術学部内部用のWebサイト制作(グループ)
-[[プロジェクトノート>芸術学部専用サイトの開発]]
-[[プロジェクトノート>Project/九芸パレット]]
~
***先行事例の調査
-[[ソーシャルデザイン学科>https://design.kyusan-u.ac.jp/socialdesign/?SocialDesign]]
-[[九州産業大学 芸術学部>https://www.kyusan-u.ac.jp/kyugei/]]
~
~
~
