Virtual Living Room
忙しい毎日に安らぎの時間を作るWebサイト
メインビジュアル、あるいは
プロジェクトの最新の状態を視覚的に掲載
- 興梠 媛愛
- Keywords：Web, 安らぎ, CSS, JavaScript
概要
これは何？
- 忙しい毎日に安らぎの時間を作るWebサイト
- リビングルームは家族が集まるくつろぎの場かつ、お客様を迎える公共の場所である
- 実際に集まることはできないが、様々な人がWebサイトに集まりくつろぐ時間を作ることが可能なWebサイト
背景と目的
- 背景
- 睡眠時間が短く、のんびりとするような時間が少ない人が多い
- 新しいアイディアが思い浮かぶ時間として、ぼーっとした時やリラックスしている時が挙げられていることが多い
- 目的
- ゆったりと安らぐ時間を毎日少しでも作ってもらうことを目的としたWebサイトの制作
- JavaScript等を使用し、適切な動きのあるWebサイトの研究をする
コンセプト
- 毎日訪れる仕掛けとして背景の種類を増やしたり、訪れた日を可視化したりする
- ボタンで個人の必要な機能を取り出せるようにし、人ごとに好みのレイアウトに変えることができるようにする
- ぼーっと画面を見る時間が長くなるように、動きを少しだけ加えて滞在時間を増やす
成果物の仕様
- Webサイト
制作ツール
- MacBook Pro
- Adobe XD
- Adobe Firefly
- Visual Studio Code
- GitHub
プロジェクトの期間
2024.04.09 - 2024.07.09
まとめ
調査
現状調査
- 感情と癒し
- ストレス下の感情で、本来の自分に戻る過程で癒しの意味がある
- 癒し←安らぎ・安心・明日へのエネルギーの充実
- 癒し効果のある画像
先行事例
- 4 MILES PROJECT
- 音でアプローチ
- 最初の画面での注意書き
- Kamome〜おやすみのテーマ〜
- 音とイラストで表現
- 情報量を少なくしている
- 021 NEW COLLECTION 「EMOTIONAL」| MAISON CACAO
- 色鮮やかで商品ごとに色と音楽が異なっている
- 穏やかな気持ちになれるような音楽
技法・技術情報
- 簡単CSSアニメーション＆デザイン20選
- サンプル付コピペOK！すごいCSSアニメーションライブラリ30選
- ランダム背景
- 2024年のWebデザイントレンド
- 2024年のWebデザインでは操作する側への配慮が重要視される
- 国内のWebデザイン参考サイト集
- Webアニメーションコーディング
- CSSとJavascriptで作る美しいテキストアニメーション10選
- 時計機能の作り方
プロジェクト管理
スケジュール
ToDo
進捗記録
2024.04.30
調査
(相談)
- スマホ版横向きサイト設定
- バーの部分のみスクロールできるような設定を視野に入れる
- Cookie アクセス回数カウント
Adobe XD作業
2024.04.23
サイトデザイン
- 背景はAdobe Fireflyを使用
- 癒し・安らぎ等を検索し、その検索結果にある画像の傾向から7つ画像を生成
- 緑（葉っぱ・木・木漏れ日）
- 空
- 集中する部屋の一角
- 海
- 花
- 動物
- 水滴
- 自然風景写真の癒やし要素の検討
- 高品質な映像条件が人にもたらす癒やし効果の検討
- 花の観賞は心身のストレスを緩和する
- 癒し・安らぎ等を検索し、その検索結果にある画像の傾向から7つ画像を生成
調査
カレンダー機能について（話の内容)
- ログイン機能 or Cookie で訪問管理ができるが複雑なものは難しい
- Cookieで回数ごとの変更は可能ではないか
- 新たな疑問
- Cookieが適応された状態でボタンを押すことによりログイン記録できないか
- 自分で日付をクリックしてもらい、閲覧記録をつけてもらうようにする(受動できではなく、訪れた人に自ら記録してもらう）（自らする→面倒と思い本来の効果を発揮しづらいようにも思える）
タイトル
- Virtual Living Room
- リビングルーム:家族が集まるくつろぎの場かつ、お客様を迎える公共の場所
- 実際に集まることはできないが、様々な人がWebサイトに集まりくつろぐことができるようなサイト
2024.04.16
調査
- 動きのあるサイト5選
- ランニングホームラン株式会社
- 大胆な文字の動き
- BRANU株式会社
- 図形を変形させて、視線誘導している
- CCC
- ちょうど画面サイズで内容が区切られており、スクロールしていくことで伝えたい内容が変わっていく
- 分類分けしてクリックした後にこの構成を使用したい
- Romain Penchenat
- ローディングが終わった後の文字と次の画面の変わり方の参考
- WEEKEND
- カーソルを動かして画像が歪むのは楽しさを刺激する
- ランニングホームラン株式会社
- 喜と楽の違い
- 怒の表し方
- 哀の表し方
- 寂しさ・悲しみを連想するようなイメージ
- 詩的な感じ
- マイナスの方にも取れるが静かで落ち着けるような雰囲気にしたい
- 窓ガラス越しに雨を降らせる
- 話を終えて
- マイナスの感情をプラスにする感情をピックアップする
- 不快感のキーワードを並べてその感情をプラスにするページを作成する
→企画部分メモ1 変更 - 安らぎ・ゆっくりする時間を増やすことのできるようなサイトの方が研究意欲が高いような気がする
→企画部分メモ2 作成
- スケジュール作成
企画部分メモ1
- 概要
感情を刺激する不快な感情を軽減するWebサイト
- 背景・目的
- 感情を全面に出して表現できる人は少なく、制御したり偽ったりして生きている人の方が多いと感じる
- 閲覧することで感情を共有したり、今ある感情を落ち着かせたりすることのできるWebサイトにする
- ストレスなどのマイナスの感情が多い世の中で、プラスの感情を動かすようなWebサイトにする
- コンセプト
喜怒哀楽不快感をベースとして、見ることで感情を刺激される不快な感情を軽減させるWebサイト- 色や動きで感情変化を表す
企画部分メモ2
- 概要
- 安らぎの時間を作るWebサイト
- 背景・目的
- 睡眠時間が短く、のんびりとするような時間が少ない人が多い
- 新しいアイディアが思い浮かぶ時間として、ぼーっとした時やリラックスしている時が挙げられていることが多い
- 集中したい時、ゆったりとした時間を過ごしたい時に訪れるWebサイトにする
- コンセプト
- 落ち着いた雰囲気を表現する
- 参考
- 4 MILES PROJECT
- 音でアプローチ
- Kamome〜おやすみのテーマ〜
- 音とイラストで表現
- 情報量を少なくしている
- 021 NEW COLLECTION 「EMOTIONAL」| MAISON CACAO
- 色鮮やかで商品ごとに色と音楽が異なっている
- 穏やかな気持ちになれるような音楽
- 4 MILES PROJECT
- githubのカレンダー 作り方
2024.04.09
調査
- 2024年のWebデザイントレンド
- 2024年のWebデザインでは操作する側への配慮が重要視される
- 目的・技法別のWebサイト紹介
- 国内のWebデザイン参考サイト集
- Webアニメーションコーディング
キーワード
- Web 動きのあるサイトデザイン 見せるサイトと魅せるサイト
- Webサイトには、情報を正確に早く伝えるためのデザインと、見る人の感情を動かすようなデザインが存在している
- 感情を刺激するデザイン
- 喜びや楽しみ、安らぎなどプラスの感情
- 不安や恐怖などのマイナスの感情
- 参考サイト
- 名古屋造形短大卒展
・背景の人の動きや時間の流れがのどかさ、楽しさを刺激する
・アニメーションがあるためローディングが長い - TBS
・スクロールによって場所が変わり、楽しさを刺激する
・アニメーションがあるためローディングが長い - Panasonic
・マップ上の数字にカーソルを合わせると追加情報が出る
・アニメーションがあるためローディングが長い - 卒業制作 Peep
・部屋の様子が時間の流れによって変化する
・カーソルの色が変わる部分をクリックすると状況が変化する
・ゆっくりする時間を体感できる - 卒業制作 Normotion Graphics
・ドラッグ&ドロップで映像を動かすパズルのようになっている
・実際に動かすという行動によって楽しさを刺激できる - 情報デザイン研究I 黒い金魚
・スライドすることによって進む物語
・場面ごとに背景のアニメーションが変化する
- 名古屋造形短大卒展
- 待ち時間を安らぎにするローディングのデザイン
- 待ち時間を少なくするためのデザインまたは、待ち時間が苦にならないようなアニメーション
- 参考サイト
- 架空のケーキショップ
・独自のクリックマークと同じパターンになっている - TAPE YOU ALL! 使用情報
・青いテープが横に転がっていくアニメーション - ZOOM
・横スクロールのデザインはあまりみたことがない
・ローディングの画面がスタイリッシュ - 折り紙レター
・折り紙を折っているアニメーションが入っている - SMBC DESIGN
・図形が動いている
・HP内で使用している図形と一致していて一体感がある
- 架空のケーキショップ
- AIを使用したデザイン
- Adobe IllustratorやPhotoshop に搭載されているAIの機能を使用
- 何か仮想の目的をもとに雰囲気の異なるものをどれくらい生成できるのか
- 言葉での理解が難しい単語の表現