#author("2024-05-15T13:37:21+09:00;2024-05-14T14:00:04+09:00","default:member","member") #author("2024-05-15T13:40:55+09:00;2024-05-14T14:00:04+09:00","default:member","member") *Virtual Living Room 忙しい毎日に安らぎの時間を作るWebサイト #image(mainvisual.jpg) -''興梠 媛愛'' -'''Keywords：Web, relax, CSS, JavaScript''' -https://k6-h7.github.io/Virtual_Living_Room/ //-__[[相互評価シート>https://www.example.com]]__ ← ここからコメントをお願いします。 ~ ~ **概要 ***これは何？ //&color(red){これは何か・・を簡潔に}; -忙しい毎日に安らぎの時間を作るWebサイト -リビングルームは家族が集まるくつろぎの場かつ、お客様を迎える公共の場所である -実際に集まることはできないが、様々な人がWebサイトに集まりくつろぐ時間を作ることが可能なWebサイト ~ ***背景と目的 //&color(red){プロジェクトの背景と目的}; -背景 --睡眠時間が短く、のんびりとするような時間が少ない人が多い --新しいアイディアが思い浮かぶ時間として、ぼーっとした時やリラックスしている時が挙げられていることが多い -目的 --ゆったりと安らぐ時間を毎日少しでも作ってもらうことを目的としたWebサイトの制作 --JavaScript等を使用した、適切な動きのあるWebサイトの研究をする ~ ***コンセプト //&color(red){基本的な考え方、枠組み、視点など}; -毎日訪れる仕掛けとして背景の種類を増やしたり、訪れた日を可視化したりする -ボタンで個人の必要な機能を取り出せるようにし、人ごとに好みのレイアウトに変えることができるようにする -スマホ表示は横向き使用を標準とし、通常使用する縦向きから向きを変えることで気持ちの切り替えを促す ~ ***成果物の仕様 //&color(red){&small(成果物の形式・サイズ・時間尺等);}; -Webサイト (中間報告) -[[サイトマップ>https://drive.google.com/file/d/1Kdu-kMpJ0lWB4kYVQaLg0T5P8g85tffG/view?usp=sharing]] -[[プロトタイプ>https://xd.adobe.com/view/08f16f32-656d-4e2f-925b-0ff92ba5fe05-5da2/?fullscreen&hints=off]] -[[プロトタイプ デザインレビュー>https://xd.adobe.com/view/b4103b3d-edb0-4d79-ae7a-76489967717e-e143/]] -[[Webサイト>https://k6-h7.github.io/Virtual_Living_Room/]] ~ //***メンバー //&color(red){共同プロジェクトの場合のみ｜メンバーと役割分担を明記}; //~ ***制作ツール //&color(red){使用するツール｜ハードウエア・ソフトウエア}; -MacBook Pro -Adobe XD -Adobe Firefly -Visual Studio Code -GitHub ~ ***プロジェクトの期間 //&color(red){プロジェクトの期間｜20XX.XX.XX - 20XX.XX.XX }; 2024.04.09 - 2024.07.09 ~ ***まとめ //&color(red){プロジェクトが完結したら「まとめ」を記載して下さい。}; （中間報告） -基本的なサイト上の動きはプロトタイプ制作によって決めることができている -それぞれの画像ごとに異なる環境音を設定する予定であり、ロードの画面で音あり、なしを選択する方法とサイト内でオンオフの機能をつける方法を検討中 -訪問回数はCookieで管理できるようにする予定である ~ ~ **調査 ***現状調査 //&color(red){プロジェクトのテーマに関わる社会の現状と問題の洗い出し}; -[[感情と癒し>https://core.ac.uk/reader/70320900]] --ストレス下の感情で、本来の自分に戻る過程で癒しの意味がある --癒し←安らぎ・安心・明日へのエネルギーの充実 -癒し効果のある画像 --[[自然風景写真の癒やし要素の検討>https://www.jstage.jst.go.jp/article/jje/54/Supplement/54_2G5-2/_pdf]] --[[高品質な映像条件が人にもたらす癒やし効果の検討>https://www.jstage.jst.go.jp/article/jjpcats/16/2/16_40/_pdf/-char/ja]] --[[花の観賞は心身のストレスを緩和する>https://www.naro.go.jp/publicity_report/press/laboratory/nivfs/135407.html]] ~ ***先行事例 //&color(red){プロジェクトのテーマに該当する先行事例の紹介、傾向分析など}; -[[4 MILES PROJECT>http://4milesproject.com/#]] --音でアプローチ --最初の画面での注意書き -[[Kamome〜おやすみのテーマ〜>https://www.kamome-d.jp/kamomefan/theme_oyasumi]] --音とイラストで表現 --情報量を少なくしている -[[021 NEW COLLECTION 「EMOTIONAL」| MAISON CACAO>https://maisoncacao.com/valentine21/]] --色鮮やかで商品ごとに色と音楽が異なっている --穏やかな気持ちになれるような音楽 ~ ***技法・技術情報 //&color(red){プロジェクトの遂行に必要な技法・技術に関する調査}; -[[簡単CSSアニメーション＆デザイン20選>https://baigie.me/officialblog/2021/02/25/css-tips-1/]] -[[サンプル付コピペOK！すごいCSSアニメーションライブラリ30選>https://photoshopvip.net/133747]] -[[ランダム背景>https://coco-factory.jp/ugokuweb/move02/5-1/]] -[[CSSとJavascriptで作る美しいテキストアニメーション10選>https://photopizza.design/css_textanimation/]] -[[時計機能の作り方>https://goworkship.com/magazine/clock-timer-code-snippets/#8]] -[[タイマー機能>https://lexikodicsho.com/posts/2020/06/timer/]] ~ ~ **プロジェクト管理 ***スケジュール //&color(red){計画的な遂行のために、進行管理表を作成してリンクして下さい。}; -[[Googleスプレッドシート >https://docs.google.com/spreadsheets/d/1JFC3svgaUbuRVLLnmUrwEid8_XP0XRRGYHe6bupHGJo/edit?usp=sharing]] ~ ***ToDo //&color(red){やるべきこと（タスク）を箇条書きにします。}; //&color(red){完了後は「%%取り消し線%%」あるいは「// コメントアウト」」}; -%%スケジュール作成%% -%%画像を7枚決める%% -Adobe XD サイトデザイン -音決め -コーディング -GItHub アップロード ~ ~ #hr CENTER:''進捗記録'' //&color(red){最新の情報を一番上に記載して下さい（古い記事が下へ沈む）。}; #hr ~ ~ **2024.05.14 ***中間報告準備 -[[サイトマップ>https://drive.google.com/file/d/1Kdu-kMpJ0lWB4kYVQaLg0T5P8g85tffG/view?usp=sharing]] -[[プロトタイプ>https://xd.adobe.com/view/08f16f32-656d-4e2f-925b-0ff92ba5fe05-5da2/?fullscreen&hints=off]] - ~ ***コーディング -画像クリックで背景がぞうが切り替わるように変更（javascript) ~ ~ **2024.05.07 ***調査 -[[タイマー機能>https://lexikodicsho.com/posts/2020/06/timer/]] ***Adobe XD作業 -[[プロトタイプ>https://xd.adobe.com/view/08f16f32-656d-4e2f-925b-0ff92ba5fe05-5da2/?fullscreen&hints=off]] ***コーディング -ロゴ部分の追加 -タイマーのアイコン追加 -画像をbackground-imageに変更 --ウィンドウサイズを変えても縦横比を保持したまま要素全体を覆うように変更(background-size: cover;) -右のメニューバーにスクロール機能を追加（overflow: auto;) ~ ~ **2024.04.30 ***調査 -[[感情と癒し>https://core.ac.uk/reader/70320900]] --ストレス下の感情で、本来の自分に戻る過程で癒しの意味がある --癒し（安らぎ・安心・明日へのエネルギーの充実） -[[色効果>https://www.c-c-j.com/course/psychology/colortherapy/column/column07]] -[[時計機能の作り方>https://goworkship.com/magazine/clock-timer-code-snippets/#8]] -音(環境音) --[[springin>https://www.springin.org/sound-stock/subcategory/sound_of_waves/]] --%%[[NHKアーカイブス>https://www.nhk.or.jp/archives/creative/search/?material=環境音&type=all&page=1_24]]%% --[[効果音ラボ>https://soundeffect-lab.info/sound/environment/]] ***(相談) -[[スマホ版横向きサイト設定>https://nanos.jp/sikaku0/blog/2/17/]] --バーの部分のみスクロールできるような設定を視野に入れる --横向きにすることで普段の使い方と変わる→気持ちの切り替え -[[Cookie アクセス回数カウント>https://dezanari.com/js-cookie-count/]] ***[[サイトマップ>https://drive.google.com/file/d/1Kdu-kMpJ0lWB4kYVQaLg0T5P8g85tffG/view?usp=sharing]] ***Adobe XD作業 ***HTML・CSS コーディング ~ ~ **2024.04.23 ***サイトデザイン -背景はAdobe Fireflyを使用 --癒し・安らぎ等を検索し、その検索結果にある画像の傾向から7つ画像を生成 ---緑（葉っぱ・木・木漏れ日） ---空 ---集中する部屋の一角 ---海 ---花 ---動物 ---水滴 ---[[自然風景写真の癒やし要素の検討>https://www.jstage.jst.go.jp/article/jje/54/Supplement/54_2G5-2/_pdf]] ---[[高品質な映像条件が人にもたらす癒やし効果の検討>https://www.jstage.jst.go.jp/article/jjpcats/16/2/16_40/_pdf/-char/ja]] ---[[花の観賞は心身のストレスを緩和する>https://www.naro.go.jp/publicity_report/press/laboratory/nivfs/135407.html]] ~ ***調査 -[[簡単CSSアニメーション＆デザイン20選>https://baigie.me/officialblog/2021/02/25/css-tips-1/]] -[[サンプル付コピペOK！すごいCSSアニメーションライブラリ30選>https://photoshopvip.net/133747]] -[[ランダム背景>https://coco-factory.jp/ugokuweb/move02/5-1/]] ***カレンダー機能について（話の内容) -ログイン機能 or Cookie で訪問管理ができるが複雑なものは難しい -Cookieで回数ごとの変更は可能ではないか -新たな疑問 --Cookieが適応された状態でボタンを押すことによりログイン記録できないか --自分で日付をクリックしてもらい、閲覧記録をつけてもらうようにする(受動できではなく、訪れた人に自ら記録してもらう）（自らする→面倒と思い本来の効果を発揮しづらいようにも思える） ~ ***タイトル -Virtual Living Room --リビングルーム:家族が集まるくつろぎの場かつ、お客様を迎える公共の場所 --実際に集まることはできないが、様々な人がWebサイトに集まりくつろぐことができるようなサイト ~ ~ **2024.04.16 ***調査 -[[動きのあるサイト5選>https://spc-jpn.co.jp/blog/14572/]] --[[ランニングホームラン株式会社>https://running-hr.co.jp]] ---大胆な文字の動き --[[BRANU株式会社>https://branu.jp]] ---図形を変形させて、視線誘導している --[[CCC>https://www.ccc.co.jp/?sid=p_000_000]] ---ちょうど画面サイズで内容が区切られており、スクロールしていくことで伝えたい内容が変わっていく ---分類分けしてクリックした後にこの構成を使用したい --[[Romain Penchenat>https://romainpenchenat.com]] ---ローディングが終わった後の文字と次の画面の変わり方の参考 --[[WEEKEND>https://diffuser.weekend.jp]] ---カーソルを動かして画像が歪むのは楽しさを刺激する -喜と楽の違い --[[1>https://domani.shogakukan.co.jp/652449#:~:text=「喜怒哀楽」の「,感情を表しています%E3%80%82]] ---喜：成果・達成感 ---楽：趣味・快感 --[[2>https://chikaochiai.hatenablog.com/entry/2017/08/13/234534]] ---辞書的な意味合い -怒の表し方 -哀の表し方 --寂しさ・悲しみを連想するようなイメージ --詩的な感じ --マイナスの方にも取れるが静かで落ち着けるような雰囲気にしたい --[[窓ガラス越しに雨を降らせる>http://pannyatto.firebird.jp/archives/1705]] -話を終えて --マイナスの感情をプラスにする感情をピックアップする --不快感のキーワードを並べてその感情をプラスにするページを作成する →企画部分メモ1 変更 --安らぎ・ゆっくりする時間を増やすことのできるようなサイトの方が研究意欲が高いような気がする →企画部分メモ2 作成 ~ -スケジュール作成 ~ ***企画部分メモ1 -概要 --%%感情を刺激する%%不快な感情を軽減するWebサイト -背景・目的 --感情を全面に出して表現できる人は少なく、制御したり偽ったりして生きている人の方が多いと感じる --閲覧することで感情を共有したり、今ある感情を落ち着かせたりすることのできるWebサイトにする --ストレスなどのマイナスの感情が多い世の中で、プラスの感情を動かすようなWebサイトにする -コンセプト --%%喜怒哀楽%%不快感をベースとして、見ることで%%感情を刺激される%%不快な感情を軽減させるWebサイト --色や動きで感情変化を表す ~ ***企画部分メモ2 -概要 --安らぎの時間を作るWebサイト -背景・目的 --睡眠時間が短く、のんびりとするような時間が少ない人が多い --新しいアイディアが思い浮かぶ時間として、ぼーっとした時やリラックスしている時が挙げられていることが多い --集中したい時、ゆったりとした時間を過ごしたい時に訪れるWebサイトにする -コンセプト --落ち着いた雰囲気を表現する -参考 --[[4 MILES PROJECT>http://4milesproject.com/#]] ---音でアプローチ --[[Kamome〜おやすみのテーマ〜>https://www.kamome-d.jp/kamomefan/theme_oyasumi]] ---音とイラストで表現 ---情報量を少なくしている --[[021 NEW COLLECTION 「EMOTIONAL」| MAISON CACAO>https://maisoncacao.com/valentine21/]] ---色鮮やかで商品ごとに色と音楽が異なっている ---穏やかな気持ちになれるような音楽 ~ -githubのカレンダー 作り方 --https://zenn.dev/tama8021/articles/ed69daa335cf82 --https://qiita.com/pam5596/items/e14593b8871eff50a0e7 --https://qiita.com/takeyuichi/items/6fdb659f0d0c7dba2afc --https://adrianroselli.com/2018/02/github-contributions-chart.html ~ ~ **2024.04.09 ***調査 -[[2024年のWebデザイントレンド>https://www.gohp.jp/blog/design/3952/]] --2024年のWebデザインでは操作する側への配慮が重要視される --目的・技法別のWebサイト紹介 -[[国内のWebデザイン参考サイト集>https://sankoudesign.com]] -Webアニメーションコーディング --[[CSSとJavascriptで作る美しいテキストアニメーション10選>https://photopizza.design/css_textanimation/]] ~ ***キーワード -Web 動きのあるサイトデザイン 見せるサイトと魅せるサイト --Webサイトには、情報を正確に早く伝えるためのデザインと、見る人の感情を動かすようなデザインが存在している --感情を刺激するデザイン ---喜びや楽しみ、安らぎなどプラスの感情 ---不安や恐怖などのマイナスの感情 --参考サイト ---[[名古屋造形短大卒展>http://www.nzu.ac.jp/gex/2018/]] ・背景の人の動きや時間の流れがのどかさ、楽しさを刺激する ・アニメーションがあるためローディングが長い ---[[TBS>https://innovation.tbs.co.jp/?world=akasaka]] ・スクロールによって場所が変わり、楽しさを刺激する ・アニメーションがあるためローディングが長い ---[[Panasonic>https://saiyou.jpn.panasonic.com/world/]] ・マップ上の数字にカーソルを合わせると追加情報が出る ・アニメーションがあるためローディングが長い ---[[卒業制作 Peep>猪本結衣/卒業研究II]] ・部屋の様子が時間の流れによって変化する ・カーソルの色が変わる部分をクリックすると状況が変化する ・ゆっくりする時間を体感できる ---[[卒業制作 Normotion Graphics>小森丈/卒業研究II]] ・ドラッグ&ドロップで映像を動かすパズルのようになっている ・実際に動かすという行動によって楽しさを刺激できる ---[[情報デザイン研究I 黒い金魚>紀野はるか/情報デザイン研究I]] ・スライドすることによって進む物語 ・場面ごとに背景のアニメーションが変化する -待ち時間を安らぎにするローディングのデザイン --待ち時間を少なくするためのデザインまたは、待ち時間が苦にならないようなアニメーション --参考サイト ---[[架空のケーキショップ>https://graziexxparlor.onedesign-eno.com]] ・独自のクリックマークと同じパターンになっている ---[[TAPE YOU ALL! 使用情報>https://www.nittocs.co.jp/recruit/]] ・青いテープが横に転がっていくアニメーション ---[[ZOOM>https://www.zoom-japan.com]] ・横スクロールのデザインはあまりみたことがない ・ローディングの画面がスタイリッシュ ---[[折り紙レター>https://sdgsstory.global.brother/j/special/origami/]] ・折り紙を折っているアニメーションが入っている ---[[SMBC DESIGN>https://www.smbc-careers.com/design/]] ・図形が動いている ・HP内で使用している図形と一致していて一体感がある -AIを使用したデザイン --Adobe IllustratorやPhotoshop に搭載されているAIの機能を使用 --何か仮想の目的をもとに雰囲気の異なるものをどれくらい生成できるのか -言葉での理解が難しい単語の表現 ~ ~ ~