吉松まなみ/情報デザイン演習IIA_02

心のリフレッシュガイド

ストレスの仕組みと解消法を分かりやすく紹介するwebサイト

 

            メインビジュアル、あるいは
            プロジェクトの最新の状態を視覚的に掲載

  

• 吉松まなみ
• Keywords：ストレス解消法, webデザイン
• 相互評価シート ← ここからコメントをお願いします。

概要

背景と目的

• 現代では、多くの人が日常生活の中でストレスを感じている。そのため、
  様々なストレス解消法を紹介し、自分に合った方法を見つけてもらうことを目的とする。
  
  
  
  

成果物の仕様

• webサイト

制作ツール

• Visual Studio Code
  
  
  
  

2026.06.22

今回制作したプロトタイプ

• サイトマップ
  
  
  
• ワイヤーフレーム
  

プロトタイプの説明

• ホーム（トップページ）から各項目へ移動できる
  
  
  

2026.06.15

現状分析

• https://miyakoro.com/check/
• https://hokkaido-mc.hosp.go.jp/column/cancer_031.html
• https://kokoro.mhlw.go.jp/nowhow/
• https://kokoro.mhlw.go.jp/selfcare/
  
  

課題定義

• 1. ストレスについてどのように分かりやすくまとめるか
• 2. 様々なストレス解消法を分かりやすく説明する方法
• 3.自分のストレス解消法や体験をどのように紹介するか
• 4.写真やイラストなど情報の収集
  
  

制作上のアイデア（課題ごとに複数のアイデア）

• 1. ストレスについてどのように分かりやすくまとめるか
  • 「ストレスとは？」→「ストレスがたまると？」→「解消法」
    の順番で構成する
  • イラストや図を使って分かりやすく説明する
  • 難しい言葉を避けて中学生向けの文章にする
  • ストレスの原因を学校生活などに関連付けて説明する
    
    
• 2. 様々なストレス解消法を分かりやすく説明する方法
  • 運動、音楽、睡眠、趣味など種類ごとに分ける
  • 写真やイラストを使って紹介する
  • おすすめポイントを簡潔にまとめる
  • 自分に合う解消法を選びやすくする

• 3. 自分のストレス解消法や体験をどのように紹介するか
  • 実際に行っているストレス解消法を紹介する
  • おすすめする理由や効果をまとめる
  • 体験談として分かりやすく伝える

• 4.写真やイラストなど情報の収集
  • ストレス解消法に関する写真を撮影する
  • フリー素材やイラストを集める
  • インターネットや本で情報を調べる
    
    
    
    

2026.06.08

テーマ候補

• ストレス解消方法紹介
• 気分別の過ごし方紹介

成果物の仕様

• 形式：webサイト
  
  

この演習を通して身につけたいスキル

• HTML、CSS