#author("2026-07-17T09:25:59+09:00","default:member","member") #author("2026-07-17T09:27:02+09:00","default:member","member") *エモカラ! 感情を色によってまとめたwebサイト #image(mainvisual.png) -''Taiga Sarumoto'' -'''Keywords：emotion, color, communication, web''' -[[エモカラ!>https://ts409.github.io/emocolor-/]] -[[作品概要>https://ksumail-my.sharepoint.com/:b:/g/personal/k24as014_st_kyusan-u_ac_jp/IQD6Anm1YpsGRbD705aMMqxZAdCYuLM03StzxgUem3NYJ8I?e=EbNMBE]] //-__[[相互評価シート>https://www.example.com]]__ ← ここからコメントをお願いします。 ~ //***CONTENTS //#contents2_1 //~ **概要 ***これは何？ 人間の感情を色によって可視化したサイト //&color(red){これは何か・・を簡潔に}; ~ ***背景と目的 -背景 周囲とのトラブルや摩擦を避け、安定した人間関係を築くことをマナーとした現代社会において感情表現という行為がタブーになりつつある。 タイパ重視・周囲の目を気にする社会的背景が要因の一つとしてある。 -目的 感情を客観的に判断し、自己分析につながる機会を作りたい。 //&color(red){プロジェクトの背景と目的}; ~ ***コンセプト 感情を色で視覚化し、見直す //&color(red){基本的な考え方、枠組み、視点など}; ~ ***成果物の仕様 [[Webサイト>https://ts409.github.io/emocolor/index.html]] [[Webサイト>https://ts409.github.io/emocolor-/]] [[Onedrive>https://ksumail-my.sharepoint.com/:f:/g/personal/k24as014_st_kyusan-u_ac_jp/IgBAndbZmldOTZIwHwUH5kZpASCq3ZJE_ilsgQrfHWCWW9Q?e=AxA9U4]] //&color(red){&small(成果物の形式・サイズ・時間尺等);}; ~ ***制作ツール VScode Illustrator //&color(red){使用するツール｜ハードウエア・ソフトウエア}; ~ ***プロジェクトの期間 2026.04.09 - 2026.07.16 ~ ***まとめ //&color(red){プロジェクトが完結したら「まとめ」を記載して下さい。}; 色で可視化することで出来事によって現れる感情の変化を客観的に振り返るきっかけとなった。文字や数値だけでなく視覚の情報として色を採用したことで一目でわかる点が特徴である。日々の変化を記録し振り返るための手段として、またデータ数によってはコミュニケーションなどでさらなる活用ができると考える。 ~ ~ **調査 ***現状調査 //&color(red){プロジェクトのテーマに関わる社会の現状と問題の洗い出し}; -[[｢感情ミュート社会｣とは？>https://seikatsusoken.jp/contribution/25537/]] -[[博報堂生活総合研究所｢感情に関する意識調査｣の結果を発表>https://www.hakuhodo.co.jp/news/newsrelease/121534/]] -[[Z世代のアテンション・デトックスに関する調査>http://prtimes.jp/main/html/rd/p/000000403.000033586.html]] -[[SNS疲れのZ世代がAIに逃げ込む理由｜「アテンション・デトックス」時代の新しい心の居場所>https://www.matrixflow.net/case-study/184/]] 感情ミュート社会=普段の生活において様々な感情を表に出さないという現代社会の風潮。(博報堂生活総合研究所による意識調査では約6割が該当) アテンション・デトックス=SNSなどの媒体から距離をおき、自身の感情や感覚を守るための行動。 →特に若者に見られる現象であり、現代社会の新しい常識として定着しつつある。 ~ ***先行事例 //&color(red){プロジェクトのテーマに該当する先行事例の紹介、傾向分析など}; -[[色が持つ心理効果と活用方法>https://kimoto-sbd.co.jp/tsutatsukulab/2018/01/21771/]] -[[色を使った感情表現の方法>https://sunfujiangelart.com/how-to-express-emotions-using-colors/]] -[[色彩心理学における色の意味・効果>https://www.c-c-j.com/course/psychology/colortherapy/column/blog/colortherapy_col07]] -[[【感情の心理学】プルチック感情の輪（基本感情を色で）>https://kirakirarie.info/cocoro/totono/color/colorwheel/]] -[[カラーコミュニケーション>https://www.fukuiku.net/report/group/kyoto/1707.html]] ~ ***技法・技術情報 //&color(red){プロジェクトの遂行に必要な技法・技術に関する調査}; ~ ~ **プロジェクト管理 ***スケジュール [[スケジュール>https://ksumail-my.sharepoint.com/:x:/g/personal/k24as014_st_kyusan-u_ac_jp/IQCoMJplCGpjRbmT2SGZ7jAMAaJmpq2tZ5hMw6YSqvQ0qm0?e=4EsFDu]] //&color(red){計画的な遂行のために、進行管理表を作成してリンクして下さい。}; ~ ***ToDo //&color(red){やるべきこと（タスク）を箇条書きにします。}; //&color(red){完了後は「%%取り消し線%%」あるいは「// コメントアウト」」}; //***NotToDo //&color(red){やらないこと：何をするかではなく「何をしないか」を考える}; //&color(red){例：10人以上の会議には出ない。苦手なことは誰かに頼む・・}; ~ ~ #hr CENTER:''進捗記録'' //&color(red){最新の情報を一番上に記載して下さい（古い記事が下へ沈む）。}; #hr ~ ~ **2026.07.16 ***新たにブラッシュアップ・後期に向けての重要なことをリストアップ -研究を行うことによってそれから得られる結果/効果を挙げる。 -AIを使う際には明記、正しいプロンプトを行うようにする。 -必ずしもオリジナリティを出す必要はないが、既出のものとどのように差別化を行うか考える。 -サイトの一部ブラッシュアップ(視認性の向上) [[更新したサイト>https://ts409.github.io/emocolor-/]] ~ **2026.07.09 ***発表でいただいたコメントやアドバイスをもとにブラッシュアップ -webサイトの目的との整合性をとる -サイトの視認性の向上 -なぜその色なのかなどの情報をまとめる -メーターのアイデア性を取り入れる ~ **2026.07.02 -作品概要の完成 -サイトで使用するコードの変更 -[[サイトの公開>https://ts409.github.io/emocolor/index.html]] ~ **2026.06.25 -作品概要のレイアウトや文章などの編集 -サイトに使用するイラストの編集 ~ **2026.06.18 -作品概要の完成（一旦） -サイトのレイアウトやコードの編集 -サイトに使用するイラストの編集 -サイトマップ、ワイヤーフレームの再構築 #image(sitemap3.png) #image(wireframe3.png) ~ **2026.06.11 -作品概要の編集 -サイトコードの編集 ***現状調査 -[[カラーコミュニケーション>https://www.fukuiku.net/report/group/kyoto/1707.html]] ~ **2026.06.04 -作品概要の編集 -サイト内容の見直し・編集 ~ **2026.05.21 ***中間報告 -サイトの編集 -具体例をもう少し分かりやすく -どういった目的なのかを明確に -感情ミュート社会の中での空気作り -色以外にも伝えられる手段など 以上の点を改善・調査する必要がある ~ **2026.05.14 -スケジュールの見直し -サイトマップ・ワイヤーフレームの再構築 #image(sitemap1.jpg) #image(wireframe1.jpg) ~ **2026.05.07 -スケジュールの作成 -背景と目的、コンセプトの見直し -現場調査のまとめ -発表する情報の整理 ~ **2026.04.30 ***サイトマップ(Figmaで作成) #image(sitemap.jpg) ***ワイヤーフレーム(Figmaで作成) #image(wireframe.jpg) ***現状調査及び先行事例 -[[｢感情ミュート社会｣とは？>https://seikatsusoken.jp/contribution/25537/]] -[[博報堂生活総合研究所｢感情に関する意識調査｣の結果を発表>https://www.hakuhodo.co.jp/news/newsrelease/121534/]] -[[Z世代のアテンション・デトックスに関する調査>http://prtimes.jp/main/html/rd/p/000000403.000033586.html]] -[[SNS疲れのZ世代がAIに逃げ込む理由｜「アテンション・デトックス」時代の新しい心の居場所>https://www.matrixflow.net/case-study/184/]] -[[【感情の心理学】プルチック感情の輪（基本感情を色で）>https://kirakirarie.info/cocoro/totono/color/colorwheel/]] ~ **2026.04.23 ***テーマ案のための調査&詳細 -自身の感情を表現する方法は顔や仕草、行動など様々あるが感情表現が苦手な人にとってはどれも難しいものばかりである。 (内面の関心が薄く、想像力が乏しい・コミュニケーションで誤解されるなど) そういった人が「色」を使って感情を表現した時の効果をWebサイトで紹介 -サイトマップの作成 -試作サイト ***調査 -[[色が持つ心理効果と活用方法>https://kimoto-sbd.co.jp/tsutatsukulab/2018/01/21771/]] -[[色を使った感情表現の方法>https://sunfujiangelart.com/how-to-express-emotions-using-colors/]] -[[色彩心理学における色の意味・効果>https://www.c-c-j.com/course/psychology/colortherapy/column/blog/colortherapy_col07]] ~ **2026.04.16 ***テーマ案の試作 -色によって行う感情表現 Visual Image▼ #image(emotionsite.jpg) &small(この画像は生成AIで作成したものです); --Webサイトの制作 ~ -雨の日の通学や通勤を楽しいものに Visual Image▼ #image(rainsite2.jpg) &small(この画像は生成AIで作成したものです); --Webサイトの制作 ~ -大学生活での困りごと --Webサイトの制作 ~ **2026.04.09 ***研究テーマ -色によって行う感情表現 -実は「隠れた名店」 -雨の日の通学や通勤を楽しいものに --大学生活での困りごと --同じテーマでも表現が変化するデザイン比較 --脱ネット依存症 --キーボード選びのポイント --信頼できる情報の可視化 --動画視聴の変化 --ラストエリクサー症候群の苦悩 --情報という名の檻の中と外にいる人間 ~ ***テーマの内容 -コミュニケーションの苦手な人の為の色を使った感情表現を紹介&クイズ等 -口コミや評判があまりされてないが実はすごい店を紹介する。 -どんよりとした気分でもいつも通り日常を送れるような工夫。 --大学生が送る日常の中で困りごとを紹介する。 --人によって表現方法がどのように変化するのか紹介する。 --ネットから遠ざける生活を行い、メリット&デメリットを紹介する。 --作業やゲーム等でおすすめのものや人によるキーボードの良し悪しを紹介する。 --メールやサイト等の情報が正しいものであるか判断できる為の判断材料と工夫。 --Youtubeなどで動画を観る際の今世代の人が行うことのタイパとの関連性と紹介。(倍速やながら作業など) --希少なアイテムを使うのを躊躇い保管するが結局使わなかったというRPGゲームによくある現象を現実で似たようなシーンを紹介する。 --様々な情報が交錯する現代社会で真偽がはっきりしないものや主観や偏見が入ったものが変化させる人間の存在と客観視の重要性の説明。 ~ ~ ~