#author("2024-06-18T15:31:45+09:00","default:member","member") *人に寄り添うアイコン 絵と文章で人の気持ちを表現してまとめた活動 #image(新メインビジュアル.png) -''Hirashima Asuka'' -'''Keywords:feeling, condition, text ''' -__[[Googleサイト>https://sites.google.com/view/empathize1yourfeelings]]__ ~ ~ **概要 ***これは何? //&color(red){これは何か・・を簡潔に}; 人の気持ちや状態を簡単な絵と言葉で表して、まとめたWebサイト。 小学生の子からお年寄りをターゲットにする。 ~ ***背景 //&color(red){プロジェクトの背景と目的}; 外見からは分からないが、周りの人に配慮を求めるヘルプマークがある。しかし、ヘルプマークの裏面を見なければ、どんな配慮をして良いか分からない。 ~ ***目的 自分の気持ちや状態を知らせる具体的な方法があれば便利であると考えた。 ~ ***コンセプト //&color(red){基本的な考え方、枠組み、視点など}; 自分の気持ちや状態を周りの人に伝える方法として、アイコンを見るだけで話さなくても理解してもらえる。わかりやすい絵と文にする。 ~ ***成果物の仕様 //&color(red){&small(成果物の形式・サイズ・時間尺等);}; 3年前期 : アイコン作成→キーホルダーにする→Google Siteにする 3年後期 : htmlとcssでWebサイトにする 4年前期 : 制作したアイコンとキーホルダーについて映像制作をする 4年後期 : キーホルダー販売サイトを考えてみる //今は試作品のpdfリンクや画像を貼る //***メンバー //&color(red){共同プロジェクトの場合のみ|メンバーと役割分担を明記}; ~ ***制作ツール //&color(red){使用するツール|ハードウエア・ソフトウエア}; Adobe Illustrator ~ ***プロジェクトの期間 2024.04.09 - 2024.07.09 //&color(red){プロジェクトの期間|2024.04.09 - 2024.xx.xx }; ~ ***まとめ //&color(red){プロジェクトが完結したら「まとめ」を記載して下さい。}; //中間報告に関するまとめを書く ~ **調査 ***現状調査 //&color(red){プロジェクトのテーマに関わる社会の現状と問題の洗い出し}; 気づいた人がわかりやすく手を差し伸べることができる目印があればいいなという考えがある。しかし、具体的な気持ちや状態を伝えることによって嫌がらせを受けてしまう可能性がある。__[[Tik Tok>https://lite.tiktok.com/t/ZSYjYGpnM/]]__ ~ ***先行事例 //&color(red){プロジェクトのテーマに該当する先行事例の紹介、傾向分析など}; -[[体調を表すLINEスタンプ1>https://store.line.me/stickershop/product/23069538/ja]] -[[体調を表すLINEスタンプ2>https://store.line.me/stickershop/product/1404350/ja]] //-ヘルプマークをわかりやすく__[[(TikTok)>https://www.tiktok.com/@calm_day/video/6941619493143694593?is_from_webapp=1&sender_device=pc&web_id=7355744156122383889]]__ //何かあったときの対処法やその人がどんな状態かわかりやすくなる -[[困りごとに寄り添うメッセージロゼット>https://item.rakuten.co.jp/achatte/bdmr0003/?ultra_crid=bdmr0003&variantId=4682&scid=af_pc_etc&sc2id=af_113_0_10001868&ifd=57&icm_agid=&iasid=wem_icbs_&icm_acid=255-776-8501&gclid=Cj0KCQjwlZixBhCoARIsAIC745CF2j3adEDjkotdu2lXJJsKfFfdjMuB1bQKpEYo3yNmscnLNmX2tHkaAojQEALw_wcB&icm_cid=18637836868~]] //-[[私のイメージに近いキーホルダー>https://www.monoproland.com/product.php?id=137]] -似た研究をされている先輩のサイト→[[児玉七菜美/情報デザイン研究II]] -[[イラスト缶バッジ>https://oshiruko.booth.pm/items?page=3]] ~ ***技法・技術情報 //&color(red){プロジェクトの遂行に必要な技法・技術に関する調査}; -[[手描きのイラストをIllustratorで簡単にパス変換する方法>https://www.webfield.biz/2021/11/1310/]] -[[Illustratorで手描きイラストを簡単にデジタル化する方法>https://wb-hp.com/blog/2019/06/19/livepaint.html]] ~ ~ **プロジェクト管理 ***__[[スケジュール>https://docs.google.com/spreadsheets/d/1RckFZ2q4svhVexT5cliltTCBuaAO97u9zMBCsNG_Wuk/edit?usp=sharing]]__ //&color(red){計画的な遂行のために、進行管理表を作成してリンクして下さい。}; ~ ***ToDo //&color(red){やるべきこと(タスク)を箇条書きにします。}; //&color(red){完了後は「%%取り消し線%%」あるいは「// コメントアウト」」}; -どんな気持ちや状態でどの色を使うか考える ~ ~ #hr CENTER:''進捗記録'' //&color(red){最新の情報を一番上に記載して下さい(古い記事が下へ沈む)。}; #hr ~ ~ **2024.06.18 -5mくらい離れてみて、キーホルダーが認識できるかどうか -活動の名前「@人に寄り添うアイコン」を入れると良さそう -背景の色と文字の色、色んな組み合わせを作ってどれが離れたところでも見やすいか比べてもいいかもしれない。 -「I can English」は、文字の大きさをこれ以上大きくできないから、I canで改行してEnglishを書く。Englishの文字の大きさを少し大きくする。 -「手話できます」の文字なくてもアイコンで伝わる。文字はあってもいい。手話の文字の大きさを大きくする。 -ヘルプマークの赤色は鮮やかな色だから、このキーホルダーも鮮やかな色にした方が認識しやすいかもしれない。 -I can Englishと手話できますのアイコンをぱっと見ると、違いが分かりにくいから手話だったら手を大きくして強調する。違いが出た方が認識しやすい。 -大きめのキーホルダーを見つけたので、ダイソーの49mm×34mm から85mm×53mmに変更する。 現在のキーホルダー(49mm×34mm) #image(キーホルダー.jpg,50%) ~ **2024.06.11 自分で描いたイラストから、図形に変更してアイコン作成中 -メインビジュアルの変更 (旧) #image(メインビジュアル.png) (新) #image(新メインビジュアル.png) -制作した6つのアイコンをGoogle Driveにアップロード __[[長方形のアイコン>https://drive.google.com/drive/folders/1JgAkfvQ3hjkPgt6ZgmnNJs6MxcDjLIn5]]__ __[[楕円形のアイコン>https://drive.google.com/drive/folders/1VVqqXvhEczflwMkA3alL65wM_9gyI0bY]]__ ~ **2024.06.04 中間報告 -誰でもアイコンをダウンロードして、印刷できるようなページがサイトにあれば良い -キーホルダーだけではなく缶バッジなどもいいかも -アイコンと場所(どういう場所で使うことを想定するのか)をセットにして制作する -アイコンとイラストの違い(アイコンにするのであれば線を消して面だけにする) -小さいサイズになるならバスの後ろの席から見てもわかりやすいようにする -マイナスなことだけではなくて、自分ができる肯定的なものも制作する→ __[[できますゼッケン>https://issueplusdesign.jp/dekimasu/]]__ -キーホルダーを広めたいのか、サイトを広めたいのか→この活動を広めたいのであればサブタイトルを見直した方が良い -アイコンにするなら非常口のようなわかりやすいイラストが良い -アイコンとイラストの違いは何なのか→__[[Xで見つけた例>https://twitter.com/muraken43111407/status/1669248894197465088?s=61&t=oO-JjGPPCpsfAJXG37iocg]]__ -キーホルダーは表と裏があるが、どう活用するのか -キーホルダーを見ても声をかけていいか分からない →「気軽に声かけてください」のような文が必要かも ~ **2024.05.28 手話できます 英語話せます →作成中 ~ **2024.05.21 目が不自由です __[[イラスト>https://drive.google.com/file/d/160ttDFkrcwQ3WBg0bLrRTg7qu2qnZ_QN/view?usp=sharing]]__ #image(目が不自由です.png,center,60%) __[[作ったアイコンは印刷して、100均のフォトキーホルダーに当てはめる>https://workshop.picoton.com/wp_news/2024/01/19/16-recommended-key-chains-from-daiso/]]__ ~ **2024.05.14 花粉症です __[[イラスト>https://drive.google.com/file/d/1yO3pZbKWc2-u23UEqLPxej0hyiEEZfUM/view?usp=sharing]]__ #image(花粉症です.png,center,60%) -似た研究をされている先輩のサイト [[児玉七菜美/情報デザイン研究II]] ~ //__[[モノプロランド>https://www.monoproland.com]]__ではデザイン確定・受付完了をして、翌火曜日から15営業日で発送される。 //→6/25のプレゼンに間に合うためには5/27までにはアイコン制作を終了させる必要がある(余裕を持って) //-安いオリジナルキーホルダー入稿サイト //[[HOTMOBILY>https://hotmobily.jp/products/acrylic/]] ~ **2024.05.07 お手伝いします __[[イラスト>https://drive.google.com/file/d/10j4L0PZVvO42bm-Ul9DLtRe-UXFVb1g8/view?usp=sharing]]__ #image(お手伝いします.png,center,60%) ~ **2024.04.30 サイトマップ #image(サイトマップ.png) ~ ワイヤーフレーム #image(wireframe.png) ~ **2024.04.23 先行事例⑤ -[[体調を表すLINEスタンプ1>https://store.line.me/stickershop/product/23069538/ja]] -[[体調を表すLINEスタンプ2>https://store.line.me/stickershop/product/1404350/ja]] 技法・技術情報 -[[手描きのイラストをIllustratorで簡単にパス変換する方法>https://www.webfield.biz/2021/11/1310/]] -[[Illustratorで手描きイラストを簡単にデジタル化する方法>https://wb-hp.com/blog/2019/06/19/livepaint.html]] ~ **2024.04.16 感情や状態を箇条書きにする -花粉症です、脚が悪いです、目や耳が不自由です、偏頭痛持ちです、席譲ります、お手伝いします、盲導犬がいます、吃音です、視覚優位です、聴覚優位です →試作済み ~ 他の感情や状態 -英語話せます、片手片足が麻痺しています、手話できます、点字を読みます ~ ~ **2024.04.09 ***調査 先行事例① -子ども用車いすをベビーカーで代用しタグをつける__[[(TikTok)>https://www.tiktok.com/@10to_musi/video/7349428355176959240?is_from_webapp=1&sender_device=pc&web_id=7355744156122383889]]__ __[[(Instagram)>https://www.instagram.com/10to_musi/)]]__ //周りの人に知らせるソーシャルデザインとして良い例だと思った --人の心の状態や体の状態をすぐにわかる方法で伝えたい --SNSのアイコンにしたら面白そう --状態を表情や色で表してWebサイトにまとめる 先行事例② -ヘルプマークをわかりやすく__[[(TikTok)>https://www.tiktok.com/@calm_day/video/6941619493143694593?is_from_webapp=1&sender_device=pc&web_id=7355744156122383889]]__ --何かあったときの対処法やその人がどんな状態かわかりやすくなる 先行事例③ -__[[サポートマーク>https://plus-heart-action.com]]__ --マスクの青いハートマークは、サポートできることを示すもの 先行事例④ -__[[サポートハートマーク>https://www.support-heart.org/index.html]]__ --困っている人を助けたいと思う人が身につけるもの ***テーマのアイデア -Web -ステッカー -人の気持ちや状態 ~ ~ ~