#author("2024-06-25T16:43:27+09:00;2024-06-18T16:52:02+09:00","default:member","member") *Virtual Living Room 忙しい毎日に安らぎの時間を作るWebサイト #image(mainvisual1.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(成果物の形式・サイズ・時間尺等);}; -[[プロトタイプ>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で管理できるようにする予定である 評価 -要素がはみ出るところ以外基本的にスクロールなしで使用できるサイト構成にし、無駄を省くことでWebサイトを使用しやすくした -タイマーや時計と画像のWebサイトとして、短時間もしくは単純にタイマー機能としての使用は見込めるが、BGMの使用が今回はできなかったため安らぐという要素が低下してしまった -AIで生成した写真は、論文の結果から癒しの効果が高い要素を抽出したためより多くの人が癒しを感じる要素に当てはまるような写真を生成できたと考える -JavaScriptを使用することによって機能を追加することができ、その機能に対してCSSでどこまで装飾やレスポンシブ対応させるかがサイトの使用感を左右すると考えられる 今後について (ブラッシュアップ/可能性) -リラックスするというサイトの雰囲気に合った左右のバーを中心としたビジュアルの再考や追加の動きの設定が必要だと考える -今回はBGMの使用を断念したがSpotifyの埋め込みによって、音を追加できるのではないかと考えている -背景画像の追加や接続時間による変化、時間・天気等の情報の紐付けなど短期間の使用ではなく長期間連続しての使用を促す工夫をすることができると考える -Webサイト以外にもスクリーンセイバーやアプリのような成果物の形式であると、タブ等の影響を考えずにより同じような環境で使用ができると考えられる ~ ~ **調査 ***現状調査 //&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){プロジェクトのテーマに該当する先行事例の紹介、傾向分析など}; -[[021 NEW COLLECTION 「EMOTIONAL」| MAISON CACAO>https://maisoncacao.com/valentine21/]] --色鮮やかで商品ごとに色と音楽が異なっている --穏やかな気持ちになれるような音楽 -[[4 MILES PROJECT>http://4milesproject.com/#]] --音でアプローチ --最初の画面での注意書き -[[Kamome〜おやすみのテーマ〜>https://www.kamome-d.jp/kamomefan/theme_oyasumi]] --音とイラストで表現 --情報量を少なくしている ~ ***技法・技術情報 //&color(red){プロジェクトの遂行に必要な技法・技術に関する調査}; -[[ランダム背景>https://coco-factory.jp/ugokuweb/move02/5-1/]] -[[時計機能の作り方>https://jp-seemore.com/web/3885/]] -[[時間取得タイマー>https://www.heiyoshilog-business.com/javascript-timer/]] -[[Cookie アクセス回数カウント>https://dezanari.com/js-cookie-count/]] -縦向きの時に横向きを促す表示 --[[リンク>https://allabout.co.jp/gm/gc/458504/2/]] --[[上下左右中央配置>https://coliss.com/articles/build-websites/operation/css/absolute-centering-with-css.html]] ~ ~ **プロジェクト管理 ***スケジュール //&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.06.25 ***プレゼンテーション コメント -字下げの必要性はないのではないか -サイドのバーを収納する構成にする -時間帯や季節によって表示される写真自体を変えると良いのではないか -Aboutの部分をホバーで色が変わるように変更 -ランダムを押した時に画像が変更された方がわかりやすい -二回目以降の訪問で初期の画像が変わるとまた訪れたいとなるのではないか ~ ~ **2024.06.18 ***進捗 -まとめ部分更新 -調査のリンク整理 -left-naviのはみ出る問題を解決 --タイマー部分をfloatとボタン部分のdisplay:flex;、flex-flow: column;で配置変え --ロゴの部分の大きさを小さくして、機能の部分を広くはみ出ないようにとる --その他フォント等の大きさを細かく設定 ~ ~ **2024.06.11 ***中間報告 ***進捗 -縦向きの時に横向きを促す表示 --[[リンク>https://allabout.co.jp/gm/gc/458504/2/]] --[[上下左右中央配置>https://coliss.com/articles/build-websites/operation/css/absolute-centering-with-css.html]] -音情報の追加を無しにするためクレジットの部分を削除 --Aboutに画像がAdobe Fireflyで生成されたことと、使用方法を追記 --縦長になり、スクロールなしの範囲内に収まらなかったためoverflow: auto;でスクロール可能にした -font-familyをロゴに合わせてゴシック体に統一 ~ ~ **2024.06.04 ***中間報告 ***進捗 -前回のタイマー機能のページだと時間の入力ができなかったため別のサイトを参照した -[[時計機能の作り方>https://jp-seemore.com/web/3885/]] --[[時間取得タイマー>https://www.heiyoshilog-business.com/javascript-timer/]] -タイマー・時計・訪問回数の機能を追加 --画面サイズとの調整を行う -About/Credit の部分を追加 -音についてはフリーの環境音を使用予定だったが、このWebサイトの作り的に再配布扱いになると予想されるため断念 --サイトが作り終わった後、付加価値をプラスする意味でSpotifyの埋め込みならできるかもしれない ~ ~ **2024.05.28 ***中間報告 -画像生成の手順を進捗記録に詳しく記載した方が良い -使い方が説明されたものを作成した方が良いのでは --サイトの右側の部分に増やす(Usageボタンを設置する?) -デジタルデトックスとしての使い方 -写真メインのサイトでリラックスするにしては左右の配置が機械的 --リゾートホテルのWebサイトをUIの参考にすると良いのでは -Webサイトではなくスクリーンセイバーのような形の最終成果物でも良いのでは --前期で終了予定なのでWebサイト形式で進める(後期で続けてする場合は検討) -長くサイトにいなければ見ることのできない画像があるとずっと使いたくなる工夫になるのではないか(時間で昼夜が変わるなど) ~ ***調査 -タイマー機能のリンク先が見れなくなっていたので別のサイトを参照(サイトが戻っていたら前のものを参照する) --[[タイマー機能(別サイト)>https://tcd-theme.com/2021/08/javascript-countdowntimer.html]] -リゾートホテルWebサイト --[[背景なしで文字だけ表示>https://www.hozantei.com]] --[[ハンバーガーボタンクリックでメニューが左側から出てくる>https://www.amba-hotels.com/en/ximending/#]] --[[音付きのサイト・背景は基本なしで文字は白に統一>https://ghraicho.com]] --[[白文字・水色の写真には少し見づらいと感じるが目立たせないという風にも捉えることができる>https://amanojyaku.jp]] ---海外のリゾートホテルのサイトはフルスクリーンのトップ画像があり、その下に説明文等が続くようになっている ---白文字が多い ---文字を見やすくする方法として明確な境目を作るのではなく、透明度を少しづつ変えていっているものが多い ~ ~ **2024.05.21 ***中間報告 -次回報告 ***コーディング -ランダムで背景画像が変わる部分のコーディング 完了 --連動する音に関しては、一通り全体のコーディングが終わってから ~ ~ **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]] -検索結果の上位の画像と上記の三つの論文を参考に[[Adobe Firefly>https://www.adobe.com/jp/products/firefly.html]]を使用して雰囲気が近くなるようにテキストから画像生成(AI) ~ ***調査 -[[簡単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の機能を使用 --何か仮想の目的をもとに雰囲気の異なるものをどれくらい生成できるのか -言葉での理解が難しい単語の表現 ~ ~ ~