Virtual Living Room
忙しい毎日に安らぎの時間を作るWebサイト
メインビジュアル、あるいは
プロジェクトの最新の状態を視覚的に掲載
- 興梠 媛愛
- Keywords：Web, 安らぎ, CSS, JavaScript
概要
これは何？
- 忙しい毎日に安らぎの時間を作るWebサイト
- リビングルームは家族が集まるくつろぎの場かつ、お客様を迎える公共の場所である
- 実際に集まることはできないが、様々な人がWebサイトに集まりくつろぐ時間を作ることが可能なWebサイト
背景と目的
- 背景
- 睡眠時間が短く、のんびりとするような時間が少ない人が多い
- 新しいアイディアが思い浮かぶ時間として、ぼーっとした時やリラックスしている時が挙げられていることが多い
- 目的
- ゆったりと安らぐ時間を毎日少しでも作ってもらうことを目的としたWebサイトの制作
- JavaScript等を使用した、適切な動きのあるWebサイトの研究をする
コンセプト
- 毎日訪れる仕掛けとして背景の種類を増やしたり、訪れた日を可視化したりする
- ボタンで個人の必要な機能を取り出せるようにし、人ごとに好みのレイアウトに変えることができるようにする
- ぼーっと画面を見る時間が長くなるように、動きを少しだけ加えて滞在時間を増やす
成果物の仕様
制作ツール
- MacBook Pro
- Adobe XD
- Adobe Firefly
- Visual Studio Code
- GitHub
プロジェクトの期間
2024.04.09 - 2024.07.09
まとめ
調査
現状調査
- 感情と癒し
- ストレス下の感情で、本来の自分に戻る過程で癒しの意味がある
- 癒し←安らぎ・安心・明日へのエネルギーの充実
- 癒し効果のある画像
先行事例
技法・技術情報
プロジェクト管理
スケジュール
ToDo
スケジュール作成画像を7枚決める- Adobe XD サイトデザイン
- コーディング
- GItHub アップロード
進捗記録
2024.05.07
調査
Adobe XD作業
2024.04.30
調査
(相談)
Adobe XD作業
HTML・CSS コーディング
2024.04.23
サイトデザイン
- 背景はAdobe Fireflyを使用
- 癒し・安らぎ等を検索し、その検索結果にある画像の傾向から7つ画像を生成
調査
カレンダー機能について（話の内容)
- ログイン機能 or Cookie で訪問管理ができるが複雑なものは難しい
- Cookieで回数ごとの変更は可能ではないか
- 新たな疑問
- Cookieが適応された状態でボタンを押すことによりログイン記録できないか
- 自分で日付をクリックしてもらい、閲覧記録をつけてもらうようにする(受動できではなく、訪れた人に自ら記録してもらう）（自らする→面倒と思い本来の効果を発揮しづらいようにも思える）
タイトル
- Virtual Living Room
- リビングルーム:家族が集まるくつろぎの場かつ、お客様を迎える公共の場所
- 実際に集まることはできないが、様々な人がWebサイトに集まりくつろぐことができるようなサイト
2024.04.16
調査
- 動きのあるサイト5選
- 喜と楽の違い
- 怒の表し方
- 哀の表し方
- 寂しさ・悲しみを連想するようなイメージ
- 詩的な感じ
- マイナスの方にも取れるが静かで落ち着けるような雰囲気にしたい
- 窓ガラス越しに雨を降らせる
- 話を終えて
- マイナスの感情をプラスにする感情をピックアップする
- 不快感のキーワードを並べてその感情をプラスにするページを作成する
→企画部分メモ1 変更
- 安らぎ・ゆっくりする時間を増やすことのできるようなサイトの方が研究意欲が高いような気がする
→企画部分メモ2 作成
- スケジュール作成
企画部分メモ1
- 概要
- 背景・目的
- 感情を全面に出して表現できる人は少なく、制御したり偽ったりして生きている人の方が多いと感じる
- 閲覧することで感情を共有したり、今ある感情を落ち着かせたりすることのできるWebサイトにする
- ストレスなどのマイナスの感情が多い世の中で、プラスの感情を動かすようなWebサイトにする
- コンセプト
喜怒哀楽不快感をベースとして、見ることで感情を刺激される不快な感情を軽減させるWebサイト- 色や動きで感情変化を表す
企画部分メモ2
- 概要
- 背景・目的
- 睡眠時間が短く、のんびりとするような時間が少ない人が多い
- 新しいアイディアが思い浮かぶ時間として、ぼーっとした時やリラックスしている時が挙げられていることが多い
- 集中したい時、ゆったりとした時間を過ごしたい時に訪れるWebサイトにする
- コンセプト
- 参考
- githubのカレンダー 作り方
2024.04.09
調査
キーワード
- Web 動きのあるサイトデザイン 見せるサイトと魅せるサイト
- Webサイトには、情報を正確に早く伝えるためのデザインと、見る人の感情を動かすようなデザインが存在している
- 感情を刺激するデザイン
- 喜びや楽しみ、安らぎなどプラスの感情
- 不安や恐怖などのマイナスの感情
- 参考サイト
- 名古屋造形短大卒展
・背景の人の動きや時間の流れがのどかさ、楽しさを刺激する
・アニメーションがあるためローディングが長い
- TBS
・スクロールによって場所が変わり、楽しさを刺激する
・アニメーションがあるためローディングが長い
- Panasonic
・マップ上の数字にカーソルを合わせると追加情報が出る
・アニメーションがあるためローディングが長い
- 卒業制作 Peep
・部屋の様子が時間の流れによって変化する
・カーソルの色が変わる部分をクリックすると状況が変化する
・ゆっくりする時間を体感できる
- 卒業制作 Normotion Graphics
・ドラッグ&ドロップで映像を動かすパズルのようになっている
・実際に動かすという行動によって楽しさを刺激できる
- 情報デザイン研究I 黒い金魚
・スライドすることによって進む物語
・場面ごとに背景のアニメーションが変化する
- 待ち時間を安らぎにするローディングのデザイン
- 待ち時間を少なくするためのデザインまたは、待ち時間が苦にならないようなアニメーション
- 参考サイト
- AIを使用したデザイン
- Adobe IllustratorやPhotoshop に搭載されているAIの機能を使用
- 何か仮想の目的をもとに雰囲気の異なるものをどれくらい生成できるのか
- 言葉での理解が難しい単語の表現
