山路由依/卒業研究

ヒューマインド

ストレス解消方法の体験と共有

• '山路由依'''
• Keywords：Web, illust, html, css
• https://chiyonomaru.github.io/sutoress_site/
  
  

概要

これは何？

ストレス解消法を自分で試し、その体験と結果を載せたサイト

背景と目的

背景

もともと人はそれぞれ身体的なストレスや精神的ストレス（重度だと鬱など）を抱えている人は多くいる。

• 「職場や学校での仕事・勉強の量や内容」（38.1％）と答えた人が最も多いことが分かった。 次いで「家計・金銭面」（35.2％）、「職場や学校での人間関係」（33.5％）、「やりたいことができないこと」（23.2％）、「自分の健康状態」（20.7％）と続いた。(マイボイスコムの調査)
• こういったストレスを減らそうとネットや書籍で調べてみたりすることはあっても、難しい言葉ばかりで書いて理解が難しかったり、文字だけの無機質なものだったりと、結果的にあまり効果のないものが多いと個人的に感じる。

• こういったストレスも元々は人間の感情から派生，または影響して生まれるもので，根本的な理由を知る必要があると思った。

• 人間には五つの基本感情（楽しみ・嫌気・悲しみ・恐れ・怒り）があり、ここから更に46つの細かい感情に分けられる。　（ダライ・ラマ14世とポール・エクマン氏の研究）

• 精神が不健康になってしまうと精神的にも身体的にも影響が出る。私自身も辛いことや悲しい出来事が起こったとき，中々気持ちが切り替えられず熱を出したい胃が痛くなったりと体調を崩すことが多くあった。

• こういった自分自身の背景も含めて，そもそもなぜ，人間は感情が生まれるのか，なぜ精神状態が体調に影響するのかという疑問が浮かんだ。その理由を知りストレスを解消する方法を学ぶことでもっと人生をうまくいきられるのでは，知っておくことで不健康になるペースを減らすことができるのではないかと思い，今回の研究テーマにしようと決めた。
  
  

目的

• ストレス軽減の書籍や初心者でもわかる心理学の本などを見て実際に軽減されるかなどを自分で試してみて，感想をサイトに掲載する。そしてサイトを見た人にも実践してもらえるようにする。

コンセプト

見た目がポップなサイトで楽しくストレス解消法について知り，体験する
ポップなデザインのサイトで手軽に楽しく見てもらえるようにすること

成果物の仕様

ウェブサイト

サイト構成

• 主にホームページ、感情別の体験結果を掲載（４ページ）の２点で構成
  • 解説ページ内容内訳
  • なんの体験を載せているページなのか
  • 項目別に体験した内容と結果がどうなったのかを掲載
    
    

成果物

制作

• アイコンイラスト
  
  
  
  

• 手書きのイラストを載せることで堅苦しくない、柔らかい雰囲気を出すようにした。また、表情を笑顔や泣き顔など分かりやすくすることでどのページに繋がるのかが分かるようにした。
  
  

制作2

• スマホ版（ホームページ、コンテンツ紹介）
  
  
  
  
  
  
  
• スマホ画面ではまず最初に何のサイトかすぐわかるように、タイトルが見えるように設定をしている。そして次にサイトに関する説明を行い、その下に各コンテンツに繋がるアイコンイラストを配置し、最後に参考文献とSNSを載せ、全体的にシンプルな構成にしている。
  
  
  PC版、タブレット画面
  

• PC版でも基本的な構造は変わらず、最初はメニューをスマホ版と同じくハンバーガーメニューにしていたが、見えにくく押しずらいと感じたため、ヘッダーメニューに変更した。
  
  
• コンテンツは最初一つ一つ記事を載せていたが、サイトが重くなり見づらくなったので、タブにタイトルを付けて気になるタブをクリックすると結果がわかるようにした。その結果、順番に一つ一つ見る手間がなくなり、気になるコンテンツから好きなタイミングで試すことができるようになった。
  
  
  
  

制作3

• コンテンツ
  
  
  
  
  
• コンテンツは各ページ共通のデザインで、一覧形式でスクロールをして、気になるタイトルを開くと、実際に自分が試した体験と結果が確認できるようになっている。また各ページは感情のイメージ別に背景色を変更し、他のページとの区別が付きやすい仕様にしている
• PC版では縦並びから横並びになるように設定している

メンバー

山路由依

制作ツール

ClipStudio Paint, hp, Adobe xd,

プロジェクトの期間

2023.04.14~12.14

まとめ

• 前期、後期を通して全体的に目的とコンセプトが伝わるサイト制作が出来たと思う。
• 初期のストレス解消法をキャラクターと一緒に学ぶというプロジェクトでは目的の達成、及び作品の完成が見えなかったため、プロジェクト内容のコンテンツの数もメインのコンテンツ４つと、アイコンを4つ制作するという形で決定、修正した。実際に公開するサイトをプロトタイプを基に制作し、見え方や動き、イメージに合ったカラー設定が出来ているかを確認した。今後はまだ試していない解消法を試して、どんどんサイトに追加していく予定

• ローディング画面は最初統一していたが、感情のイメージ別に色とイラストを変えるとより区別がついてわかりやすくなった

• タブで体験結果が見えるようにしたことで、「好きなものから手軽に試す」というコンセプトを達成することが出来た。
  
  

今後

• サイトは作り終えたので、全体のコンテンツの更新を充実させる
• 今後はアンケートかSNSなどで意見を共有、投稿できるような場所を置くかを検討する
  
  
  
  

調査

現状調査

もともと人はそれぞれ身体的なストレスや精神的ストレス（重度だと鬱など）を抱えている人は多くいる。

• 「職場や学校での仕事・勉強の量や内容」（38.1％）と答えた人が最も多いことが分かった。 次いで「家計・金銭面」（35.2％）、「職場や学校での人間関係」（33.5％）、「やりたいことができないこと」（23.2％）、「自分の健康状態」（20.7％）と続いた。(マイボイスコムの調査)
  こういったストレスを減らそうとネットや書籍で調べてみたりすることはあっても、難しい言葉ばかりで書いて理解が難しかったり、文字だけの無機質なものだったりと、結果的にあまり効果のないものが多いと個人的に感じる。

こういったストレスも元々は人間の感情から派生，または影響して生まれるもので，根本的な理由を知る必要があると思った。
↑アンケート取れば良かった・・・

先行事例

もっと教えて！色彩先生

• サイトにイラストを載せることで集客力を高める方法

マガツノート

• 歴史上の人物を起用したバトル風のプロジェクトサイト
  
  

技法・技術情報

iikoe

• キャラクターにボイスを付けたいと思い、こういったボイスを依頼できるサービスを発見

プロジェクト管理

スケジュール

前期スケジュール

ToDo

• 体験した解消法の追加（随時追加予定）
  
  

NotToDo

• 描く人数を増やし過ぎてスケジュールに遅れが出ないようにする
• 完璧を求めすぎない事

2023.12.16

• コンテンツの微調整
• 制作パネルの制作
  
  

2023.12.9

• コンテンツの微調整
• タブが開くときに他の項目まで動いてしまう現象を解決したい
  
  

2023.12.2

• コンテンツの微調整
• タブの体験・結果に記載についての表記がイラストがあったほうがわかりやすいと指摘ももらったので、卒展までに追加する
  
  

2023.11.25

「トップへ戻る」ボタンを追加

2023.11.18

• 細かい部分の修正
  • 文字の大きさや画像の大きさの変更
  • ヘッダーロゴの位置調整
    
    
    
    

2023.11.11

• 各ページの背景色を変え、区別がつきやすいようにした
• ホームページのローディング画面の変更を検討
  
  
  
  

2023.11.4

• ホームのイラストを制作（変更のため）
• 各項目にタイトルを追加して、何を試したのかわかりやすくして、クリック率を高める

2023.10.27

• サイトの各ページにホームボタンを追加
• ホーム画面の一番下に参考文献の情報を記載

2023.10.20

• サイトのコンテンツの形式を変更
• イラストで表現していたがいまいち効果が伝わりにくかったため、場合によってはイラストと文字での説明を加えた形式にする

2023.10.13

• サイトのページ追加と遷移アニメーションの変更
  　
  
  

2023.10.6

• イラスト制作を
  
  

2023.09.29

• コンテンツページの更新とデザインを完成させた
• イラスト制作を進め、ミニキャラのラフも追加
  
  

2023.09.22

• コンテンツページのcssとhtmlの書き換えを行った
• イラスト制作を進めた
  
  

2023.09.15

• ウェブサイトのコンテンツの枠組みを制作
• イラスト制作を進めた
  
  

2023.07.21

• 概要集の修正箇所を指摘していもらったので修正した
• イラスト制作とサイト制作をしつつ、コンテンツ収集をした
  
  

2023.07.14

• 最終発表
• 今のままの研究方針だと誰かの研究の引用をするだけになっているとアドバイスを頂いたので、方針を早急に決定、修正してプロジェクトを進める
  
  

2023.07.7

• プロトタイプのデザインを元にサイトのホームページ部分を制作
• サイトに載せるミニキャラのラフの制作を開始
  
  

2023.06.30

• プロトタイプのデザインを変更し，実際に作っているサイトの更新にも着手
  　ホームページにロゴを載せる
• サイトに載せるミニキャラのラフの制作を開始
• キャラクターイラスト三人目のラフ，二人目の線画を始めた
  
  

2023.06.23

• プロジェクトの新しいロゴを制作
  人間の感情を表したハートのイラストの周りに悲しみや怒り、嬉しさなど細かい感情を浮かべたイラストを使用して、人間には沢山の感情があるということを表現
• キャラクターのデザインを検討
  サイト（仮）のホーム画面に設置
  
  

2023.06.16

• プロトタイプのデザインを変更
  全体的に黒くダークな世界観にしていたがプロジェクト変更に伴うイメージの違いからメインカラーを白に変更
• キャラクターのデザインを検討
  人間の基本感情に合わせ五人のキャラクターを制作する
  
  

2023.06.9

• プロジェクトの再検討
• キャラクターのデザインを検討
  
  

2023.06.2

• プロジェクトの見直しと再考
• イラスト制作の数を再検討
  
  

2023.05.26

• サイトのプロトタイプを掲載
• イラスト制作のペースを見直し
  
  

2023.05.19

• 中間発表に向けて学科サイトの整理
• イラスト制作も進行中
  
  

2023.05.12

• サイトのプロトタイプをXDで制作開始
• イラスト制作も進行中
  
  

2023.05.5

• 掲載するキャラクターのイラスト制作を開始
• 具体的に人が抱えているストレスは何かをインターネットで調査
  
  

2023.04.28

• タイトルロゴの試作
• サイトをどのようなデザインにするのかを調査
  
  

2023.04.21

テーマの決定

• ストレス別の発散方法をWEBサイトで解説（ゲーム風）
• レベル別にどのくらいストレスが溜まっているのか、そのストレスを無くすためには
  どうすればよいのかを解説
  
  
  
  

2023.04.14

テーマ設定の為の調査

• ストレスの段階とそれに対する解消法
• もっと教えて！色彩先生
• ストレスにも種類と度合いの違いがあるので，種類別に解説と解消をするには
  どうすれば良いのかを調査
  
  

アイデア

• 段階的なストレスの解説とそれに対する解消法の伝達
• オリジナルキャラのラインスタンプ
• 擬人化したキャラクターのグループ、サイト制作