#author("2023-07-20T14:26:25+09:00","default:art-gs","art-gs")
#settableborder(none)
*I'm HSP
HSPの情報デザイン
#image(top.jpg)
~
~
~
**&color(#0094A1){概要};
***これは何？
//{これは何か・・を簡潔に};
~
インフォグラフィックスを活用したモーショングラフィックスによるHSP(エイチエスピー)の情報デザイン
動的なコンテンツを駆使し、SNS・WEBサイトでHSPの情報発信を行う
~
~
***背景と目的
//{プロジェクトの背景と目的};
~
背景：HSPである気づき
~
HSP（Highly Sensitive Person）とは、先天的に感受性が強く敏感な気質をもった⼈のことを指す。HSPは⼈⼀倍繊細ゆえに、他人の気持ちや光・⾳・⾹りなどの外的な刺激に敏感で、些細なことで疲れやすい、物事を深く考えるといった特徴があり、近年の日本では「繊細さん」という愛称で知られるようになっている。自分自身は、HSPの存在と自身がHSPに該当することを理解したことにより、⽣きづらさを緩和させるきっかけとなった。
~
~
目的：HSPのPR
~
しかし、このようなHSPの概念が広まりつつある一方で、SNSなどでは、繊細な気質に対する誤解や偏見によるHSPを自認するHSPと非HSPの二値的な対立も生じるようになっている。そこで、本研究では、HSPの正しい基礎知識を整理し、HSPと非HSPのそれぞれに向けた情報を体系的に提供することで、HSPとの適切な向き合い方を促進する効果的な情報発信を行うことを目的とする。
~
~
***コンセプト
//{基本的な考え方、枠組み、視点など};
~
HSPに関する効果的な情報を発信していくため、本研究ではWEBやSNSを積極的に活用する。現在、SNS上で公開されるHSPに関連する情報は、主に文字に偏っており、多くの情報を直感的に理解することが難しい状況である。そのため、本研究では動的なインフォグラフィックス表現を採用し、情報を視覚的に可視化することに重点を置く。文字だけでは伝わりにくい情報をビジュアルによって分かりやすく表現し、印象に残りやすく体系的なコンテンツによる情報発信を目指す。また、HSPに対して好意的な印象を与えるために、柔らかで親しみやすいキャラクターのイラストレーションを活用する。これらにより、HSPに対する理解と共感を促し、ポジティブな関心を喚起することが期待できる。
~
~
***成果物の仕様
//{成果物の形式・サイズ・時間尺等};
~
|30|3|30|3|30|c
|#youtube(e7hSBE7ZzXE)| |#youtube(ropaFplJvPM)| |#youtube(CAm1hKv0RoY)|
~
~
***制作ツール
~
-Illustrator
-AfterEffects
~
~
~
**&color(#0094A1){プロジェクト管理};
***スケジュール
~
🗓️ __[[スプレッドシート>https://docs.google.com/spreadsheets/d/1mP9J1BcI0VwiPahBAB-Ex8MGge2Vbope1R7rBhLkQ1A/edit?usp=sharing]]__
~
~
***ToDo
//{やるべきこと（タスク）を箇条書きにします。};
//{完了後は「%%取り消し線%%」あるいは「// コメントアウト」」};
~
-情報のリストアップ
-対象者に向けた情報をカテゴリー分けする
-ビジュアルの再検討
-タイトルロゴの再検討
-キャラクター設定を考える
-%%図書館に行って資料集め%%
-Webのワイヤーフレームを作る
-SNSのワイヤーフレームを作る
-SNSごとの情報のリスト分け
~
//***NotToDo
//&color(red){やらないこと：何をするかではなく「何をしないか」を考える};
//&color(red){例：10人以上の会議には出ない。苦手なことは誰かに頼む・・};
~
~
#hr
CENTER:''進捗記録''
//{最新の情報を一番上に記載して下さい（古い記事が下へ沈む）。};
#hr
~
~
**&color(#0094A1){2023.06.07};
~
***インフォグラフィックについての調査
~
''インフォグラフィックとは''
~
情報、データ、知識を視覚的に表現したものである。
インフォグラフィックは情報を素早く簡単に表現したい場面で用いられ、標識、地図、報道、技術文書、教育などの場面で使われている。
また、計算機科学や数学、統計学においても、概念的情報を分かりやすく表現するツールとしてよく用いられる。
科学的情報の可視化にも広く適用される。
RIGHT:&color(gray){&size(9){Wikipedia参照};};
~
''インフォグラフィックが効果的な理由''
~
-脳へ送られる情報の90%が視覚に関するものである
-視覚情報は文字より6万倍も速く処理される
-40%の人が、文字よりも視覚情報に対して良い反応を起こす
-93%のコミュニケーションは非言語である
-口頭のみのプレゼンテーションよりも視覚情報を利用したプレゼンテーションのほうが、説得される割合が17ポイントも高い&size(10){（口頭のみが50%、視覚情報を加えた場合が67%）};
-人は視覚で得た情報の80%を覚えている&size(10){（「読む」は20%、「聞く」は10%）};
-インフォグラフィックはテキストの記事よりも30倍程度多く読むことが可能
RIGHT:&color(gray){&size(9){参照：[[Market Domination Media>https://smashdigital.com/build-links-with-infographics/]]};};
~
~
~
**&color(#0094A1){2023.6.5};
~
***ビジュアルの再検討
~
''キャラクターのブラッシュアップ2''
~
#image(motion_test01.gif)
#image(motion_test02.gif)
#image(motion_test03.gif)
~
illustratorで作成したキャラクターを動かしてみる。
実際に動かしてみて、角は２つあったほうがキャラクターが愛らしく映る。
~
~
~
**&color(#0094A1){2023.6.2};
~
***ビジュアルの再検討
~
''キャラクターのブラッシュアップ''
~
|30|3|30|3|30|c
|#image(sk_01.jpg)| |#image(sk_02.jpg)| |#image(sk_03.jpg)|
~
スケッチをもとに、illustratorでキャラクターを作成した。
3案×3バリエーションの9つを試作した。
~
~
~
**&color(#0094A1){2023.5.31};
~
***ビジュアルの再検討
~
''キャラクターのアイデアスケッチ''
~
|37|3|60|c
|#image(idea.jpg)| |#image(idea02.jpg)|
~
前回のキャラクターのブラッシュアップ案を考えた。
~
~
~
**&color(#0094A1){2023.5.18};
~
***先行事例
~
|50|3|50|c
|#youtube(3r0kX-bmGmY)| |#youtube(hCYT_yowJPE)|
|&size(8){CalorieMate commercial from Japan};| |&size(8){給与即日払いサービス「Payme」サービス紹介動画};|
~
|50|3|50|c
|#youtube(VYQCyYwoQas)| |#youtube(nZIGast6bUw)|
|&size(8){3分で分かるワールドコーポレーション};| |&size(8){にほんのこども～中学生のいま～};|
~
|50|3|50|c
|#youtube(4pLdC7rMRAE)| |#youtube(vzum2nbhzJ8)|
|&size(8){WALLETポイントで賢くお得な生活/au};| |&size(8){数字で見る日本のスポーツ};|
~
~
~
**&color(#0094A1){2023.5.11};
~
***ToDoの追加
~
-情報のリストアップ
&size(14){どの情報をどの媒体で扱うかリストを作成する};
-対象者に向けた情報をカテゴリー分けする
&size(14){「基礎知識」「HSPさん向け」「非HSPさん向け」の３種類のカテゴリー分けを行う&br;HSPにも４種類あるので「HSPさん向け」のカテゴリー分けを行う必要があるかも};
-ビジュアルの再検討
&size(14){ビジュアルのブラッシュアップをする};
-キャラクター設定を考える
&size(14){HSP・HSE・HSS型HSP・HSS型HSEのキャラクターに個性をつける&br;非HSPのキャラクターを新たに追加する};
~
~
~
~
