LogoMark.png

渡辺侑貴/情報デザイン研究II の変更点

#author("2023-12-22T11:28:14+09:00;2023-12-13T17:24:27+09:00","default:member","member")
*芸術学部専用サイト - 九芸パレット -
芸術学部生に寄り添ったサイトの考案・制作



#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){プロジェクトの背景と目的};
-背景
--K’sLifeが使いにくい
--大学が情報伝達ツールとしてK’sLifeに依存している
--他学科が何をしているかわからない
--芸学の情報が拾いづらい
--情報の発信源がまとまっていない

-目的
芸術学部の情報が纏まっており、学生同士で情報が共有できる場所をつくる
~

***コンセプト
//&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]]　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/]]
~

***参考サイト
色味 → [[株式会社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.12.20
***デザインの先行事例
-[[Pinterest>https://pin.it/2F83PlQ]]
~
***メモ
-学科・全体のお知らせ（色合い）
~
***プロジェクトミーティング
-[[プロジェクトメモサイト>Project/九芸パレット]]
~
~

**2023.12.13
***デザインの先行事例
-[[Pinterest>https://pin.it/2F83PlQ]]
~
***メモ
-シンプルポップ
-UI、メニューの表示
~
***プロジェクトミーティング
-[[プロジェクトメモサイト>Project/九芸パレット]]
~
~

**2023.12.06
***最終発表について
-K'sライフのリンク（サイトからどう繋げるか）
-空き教室情報は今ある情報をうまく活用する（引き継いだ人を考慮）
-サイを改修しやすいように仕様書を作成
-学科情報はトップページに必要か
-更新について詳しく記載する
-学科・全体の情報の色の使い方を決めておく
~
***メモ
-発表する際は自分が担当したところを言った方が良い
~
***プロジェクトミーティング
-[[プロジェクトメモサイト>Project/九芸パレット]]
~
~

**2023.11.29
***作業
-スマホ版プロトタイプのイベントページ作成
-プロトタイプ全体の文体、幅統一（微調整）
調整前
#image(prototype.png)
調整後
#image(prototype2.png)
~
***メモ
-サイトのメインカラー決定（学科の色から各自選べる仕組みにする）
--赤（#DA7861）
--青（#5EB4EF）
--緑（#61D87D）
--橙（#F2BE5C）
--紫（#AA70E7）
-メインビジュアル作成
-プロトタイプの最終調整
~
***プロジェクトミーティング
-[[プロジェクトメモサイト>Project/九芸パレット]]
~
~


**2023.11.22
***作業
-ワイヤーフレームのボタン変更
***メモ
-丸みをおびたボタンで統一
~
***プロジェクトミーティング
-[[プロジェクトメモサイト>Project/九芸パレット]]
~
~

**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/九芸パレット]]
~
~

**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/九芸パレット]]
~
~

**2023.11.01
-中間発表
プッシュ通知ではなく、プル型の通知にした方がいい
毎日見にきてもらうようにするためには？
→毎日更新するなど方法を考える
ポータルサイトとしての役割を果たすようにする
ワイヤーフレームのスマホ版
情報の集め方の工夫
学部の情報収集の仕組みを整えた方がいい
→広報委員などを各学科で作る
~
***メモ
[[push型とpull型とは>https://design.kyusan-u.ac.jp/OpenSquareJP/?cmd=read&page=InformationDesign%2FMindset&word=push%20pull]]
~
***プロジェクトミーティング
-[[プロジェクトメモサイト>Project/九芸パレット]]
~
~

**2023.10.25
***作業
-サイトメインカラー話し合い
-サイトフォント案出し
-サイトマップ更新
-ワイヤーフレーム更新
~
***プロジェクトミーティング
-[[プロジェクトメモサイト>Project/九芸パレット]]
~
~

**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/九芸パレット]]
~
~

**2023.10.11
***作業
サイトロゴアイデア出し
#image(rogo1.png,50%)
九産大の９、パレット感、芸学の5色を入れたデザイン
-ロゴデザイン試作
[[Googleドライブ>https://drive.google.com/drive/folders/11_K5Q9c65zpHah9gAjRblfeJoT2j0K8j?usp=sharing]]
~
***プロジェクトミーティング
-[[プロジェクトメモサイト>Project/九芸パレット]]
~
~

**2023.10.04
***作業
-スケジュール決め
-ToDo確認
-メニュー構成案出し
-サイトマップ制作
-ワイヤーフレーム制作
-タイトル決め
#image(i1.png,70%)
~

***メモ
--タイトルロゴ（KSU Art Note / KAN）
--レイアウト（スマホ、PC）　→ １人
--UI（ボタン、メニューバー etc.）
--ビジュアル
--ページ構成
-サイトの雰囲気、方向性案
--シンプルポップ　　&color(red){★};
-開発エンジン決め（10/15 〆切）
-アンケート内容決め（10月末）
~
***プロジェクトミーティング
-[[プロジェクトメモサイト>Project/九芸パレット]]
~
~

**2023.09.27
***作業
-ターゲット層決め
-編集権限の範囲
-アンケート内容決定（生徒向け）
-メニュー決め（必須事項のみ）
-概要の明確化
-アンケート内容
-生徒
--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/]]
~
~

~