興梠媛愛/情報デザイン研究I
のバックアップ(No.34)
HOME
ABOUT
最新の更新
2021
MEMBER 2021
青木暁光
石坂大翔
出光美心
岩崎貴生
岩下雄真
内尾颯太
江川珠貴
大中啓旦
亀田日向
川村洸太
木村円香
久保絢菜
倉員優実
桑原歩未
鴻上早紀
崔昊
佐光美憂
柴田一輝
竹谷匠冬
田籠祐貴
田代爽乃
内藤彩乃
西山実伶
濱有希子
濱田侑里
藤本唯人
松岡佑樹
松藤陽
村山陽菜
山田宗周
渡邊来美
渡辺侑貴
中西華子
原田朋奈
水田修太朗
宮副咲葉
猪須大翔
川面翔太
隈翔太
柴田葉月
角祐菜
豊岡壮大朗
吉井麻吏菜
2022
MEMBER 2022
棈松智也
梅木悠民
江頭奏
大井このか
大石颯
太田糸音
太田姫奈
越智楓
鎌田真幸
楠田佑月
興梠媛愛
後藤太成
坂井彩華
指方依緒
徐泰陽
杉野市之助
堤晴司
角田雄一
中井千尋
原朋恵
平嶋明日花
増田里奈
深町彩海
藤島早希
宮路咲希
梁井英翔
山口愛麗
山本彩花
松田葉奈
松本龍太郎
熊谷涼花
近藤ひかる
善結穂
待永萌衣
三浦遥
石松匡広
上田莉帆
宇田川春稀
宇美希美
佐野美和
竹之内咲希
土斐崎種定
野村優亜
福田千紗
山川彩香
山田侑加子
重松優花
甲斐陸斗
2023
MEMBER 2023
秋月靖雅
浅田真優花
阿南慶子
荒谷唯斗
安藤貴仁
池邉成
井上大河
岩本愛結
梅﨑美和
浦朱里
江村梨里香
大場こころ
勝田喜一
亀崎瑞穂
神田舞
白井くるみ
髙市遥
竹松莉羽
寺田圭志
中村心香
原晴紀
菱谷実来
日山晃良
平崎千夏
福井涼
堀玲二
早稲田加奈恵
渡邊優希
十時明日香
石井彩晶
大神槙之介
大熊玄樹
大山花音
岡萌絵子
荻野美咲
鐘ヶ江雅
金田桜子
北村美優香
清野梨果
高庄玲衣
津覇稜也
福屋早希乃
脇山千寛
2024
MEMBER 2024
芦谷心渚
安部詩織
池田隆之介
伊藤早紀
越智花凛
金ヶ江光千瑠
佐藤澪
川村玲太
菊池真桜
後藤未羽
齊場由布
佐々木陽菜
佐藤美月
猿本大翔
竹之内優希
田尻有沙
谷口和歌子
千々岩聡真
手島凜
鳥越友菜
中尾桃瀬
野口朗央
福岡比菜
松崎菜々実
松永紗和
真子大輝
南妃香莉
宮園晴日
森山海莉
劉沢寧
渡辺颯香
足立実優
池田阜弥
井上朋美
宇野日菜
上瀧桃子
茂山和寛
髙嶋莉彩
橘彩以
田中さゆり
田村宥奈
徳永歩乃佳
轟はなの
庭瀬美来
橋本音花
若狭映那
STAFF
専任教員一覧
伊藤敬生
井上貢一
井上友子
岩田敦之
桜井祐
永嶋さゆり
北島己佐吉
OBOG
2023年度卒業生
2022年度卒業生
2021年度卒業生
2020年度卒業生
2019年度卒業生
SESSION
専門科目一覧
ソーシャルデザイン応用演習
情報デザイン演習I
地域ブランド企画演習I
情報デザイン演習IIIA
情報デザイン演習IIIB
地域ブランド企画演習IIIA
地域ブランド企画演習IIIB
情報デザイン研究II
地域ブランド企画研究II
通信ネットワーク演習
データサイエンス
3DCG演習
卒業研究
教務ガイダンス
RecommendedVideo
BasicKnowledge
PROJECT
LINKS
SEARCH
バックアップ一覧
差分
を表示
現在との差分
を表示
ソース
を表示
興梠媛愛/情報デザイン研究I
へ行く。
1 (2024-04-02 (火) 15:26:21)
2 (2024-04-09 (火) 16:17:00)
3 (2024-04-09 (火) 16:17:00)
4 (2024-04-09 (火) 16:17:00)
5 (2024-04-16 (火) 15:22:56)
6 (2024-04-16 (火) 15:22:56)
7 (2024-04-16 (火) 15:22:56)
8 (2024-04-16 (火) 15:22:56)
9 (2024-04-23 (火) 14:44:44)
10 (2024-04-23 (火) 14:44:44)
11 (2024-04-26 (金) 18:30:31)
12 (2024-04-30 (火) 13:52:26)
13 (2024-04-30 (火) 16:40:59)
14 (2024-04-30 (火) 16:40:59)
15 (2024-05-07 (火) 15:53:17)
16 (2024-05-08 (水) 15:20:20)
17 (2024-05-08 (水) 15:25:50)
18 (2024-05-08 (水) 15:25:50)
19 (2024-05-08 (水) 15:25:50)
20 (2024-05-14 (火) 14:00:04)
21 (2024-05-14 (火) 14:00:04)
22 (2024-05-14 (火) 14:00:04)
23 (2024-05-14 (火) 14:00:04)
24 (2024-05-14 (火) 14:00:04)
25 (2024-05-28 (火) 15:07:46)
26 (2024-05-28 (火) 15:07:46)
27 (2024-05-28 (火) 15:07:46)
28 (2024-06-11 (火) 13:43:30)
29 (2024-06-18 (火) 16:49:27)
30 (2024-06-18 (火) 16:52:02)
31 (2024-06-18 (火) 16:52:02)
32 (2024-06-26 (水) 09:31:11)
33 (2024-06-26 (水) 09:31:11)
34 (2024-06-26 (水) 09:31:11)
Virtual Living Room
忙しい毎日に安らぎの時間を作るWebサイト
興梠 媛愛
Keywords:Web, relax, CSS, JavaScript
https://k6-h7.github.io/Virtual_Living_Room/
↑
概要
↑
これは何?
忙しい毎日に安らぎの時間を作るWebサイト
リビングルームは家族が集まるくつろぎの場かつ、お客様を迎える公共の場所である
実際に集まることはできないが、様々な人がWebサイトに集まりくつろぐ時間を作ることが可能なWebサイト
↑
背景と目的
背景
睡眠時間が短く、のんびりとするような時間が少ない人が多い
新しいアイデアが思い浮かぶ時間として、ぼーっとした時やリラックスしている時が挙げられていることが多い
目的
ゆったりと安らぐ時間を毎日少しでも作ってもらうことを目的としたWebサイトの制作
JavaScript等を使用した、適切な動きのあるWebサイトの研究をする
↑
コンセプト
毎日訪れる仕掛けとして背景の種類を増やしたり、訪れた日を可視化したりする
ボタンで個人の必要な機能を取り出せるようにし、人ごとに好みのレイアウトに変えることができるようにする
スマホ表示は横向き使用を標準とし、通常使用する縦向きから向きを変えることで気持ちの切り替えを促す
↑
成果物の仕様
プロトタイプ
プロトタイプ デザインレビュー
Webサイト
↑
制作ツール
MacBook Pro
Adobe XD
Adobe Firefly
Visual Studio Code
GitHub
↑
プロジェクトの期間
2024.04.09 - 2024.07.09
↑
まとめ
評価
要素がはみ出るところ以外基本的にスクロールなしで使用できるサイト構成にし、無駄を省くことでWebサイトを使用しやすくした
タイマーや時計と画像のWebサイトとして、短時間もしくは単純にタイマー機能としての使用は見込めるが、BGMの使用が今回はできなかったため安らぐという要素が低下してしまった
AIで生成した写真は、論文の結果から癒しの効果が高い要素を抽出したためより多くの人が癒しを感じる要素に当てはまるような写真を生成できたと考える
JavaScriptを使用することによって機能を追加することができ、その機能に対してCSSでどこまで装飾やレスポンシブ対応させるかがサイトの使用感を左右すると考えられる
今後について (ブラッシュアップ/可能性)
リラックスするというサイトの雰囲気に合った左右のバーを中心としたビジュアルの再考や追加の動きの設定が必要だと考える
今回はBGMの使用を断念したがSpotifyの埋め込みによって、音を追加できるのではないかと考えている
背景画像の追加や接続時間による変化、時間・天気等の情報の紐付けなど短期間の使用ではなく長期間連続しての使用を促す工夫をすることができると考える
Webサイト以外にもスクリーンセイバーやアプリのような成果物の形式であると、タブ等の影響を考えずにより同じような環境で使用ができると考えられる
↑
調査
↑
現状調査
感情と癒し
ストレス下の感情で、本来の自分に戻る過程で癒しの意味がある
癒し←安らぎ・安心・明日へのエネルギーの充実
癒し効果のある画像
自然風景写真の癒やし要素の検討
高品質な映像条件が人にもたらす癒やし効果の検討
花の観賞は心身のストレスを緩和する
↑
先行事例
021 NEW COLLECTION 「EMOTIONAL」| MAISON CACAO
色鮮やかで商品ごとに色と音楽が異なっている
穏やかな気持ちになれるような音楽
4 MILES PROJECT
音でアプローチ
最初の画面での注意書き
Kamome〜おやすみのテーマ〜
音とイラストで表現
情報量を少なくしている
↑
技法・技術情報
ランダム背景
時計機能の作り方
時間取得タイマー
Cookie アクセス回数カウント
縦向きの時に横向きを促す表示
リンク
上下左右中央配置
↑
プロジェクト管理
↑
スケジュール
Googleスプレッドシート
↑
ToDo
スケジュール作成
画像を7枚決める
Adobe XD サイトデザイン
コーディング
GItHub アップロード
画像生成の手順を進捗記録に詳しく記載
使い方の説明部分を追加
進捗記録
↑
2024.07.09
↑
プレゼンテーション(聞)
↑
2024.07.02
↑
プレゼンテーション(聞)
↑
修正 ブラッシュアップ
サイドバーを収納できるようにしたい
クリックすると横から出てくるメニュー
上記のリンクの動きの逆になるようにコーディングを変更
細かな動きを調整
↑
2024.06.25
↑
プレゼンテーション(発表)
コメント
字下げの必要性はないのではないか
サイドのバーを収納する構成にする
時間帯や季節によって表示される写真自体を変えると良いのではないか
Aboutの部分をホバーで色が変わるように変更
ランダムを押した時に画像が変更された方がわかりやすい
二回目以降の訪問で初期の画像が変わるとまた訪れたいとなるのではないか
↑
修正 ブラッシュアップ
字下げ・空白改行を修正
Aboutをホバーで色が変わるように変更
ランダム部分を押した時に画像が変更されるように変更
訪問回数カウントがcookieの有効期限が設定されておらず、ウィンドウを閉じるとリセットされてしまっていたため有効期限を設定
初期画像の変更はVirtual Living Roomと題しているので、変更はしない予定である
↑
2024.06.18
↑
進捗
まとめ部分更新
調査のリンク整理
left-naviのはみ出る問題を解決
タイマー部分をfloatとボタン部分のdisplay:flex;、flex-flow: column;で配置変え
ロゴの部分の大きさを小さくして、機能の部分を広くはみ出ないようにとる
その他フォント等の大きさを細かく設定
↑
2024.06.11
↑
中間報告
↑
進捗
縦向きの時に横向きを促す表示
リンク
上下左右中央配置
音情報の追加を無しにするためクレジットの部分を削除
Aboutに画像がAdobe Fireflyで生成されたことと、使用方法を追記
縦長になり、スクロールなしの範囲内に収まらなかったためoverflow: auto;でスクロール可能にした
font-familyをロゴに合わせてゴシック体に統一
↑
2024.06.04
↑
中間報告
↑
進捗
前回のタイマー機能のページだと時間の入力ができなかったため別のサイトを参照した
時計機能の作り方
時間取得タイマー
タイマー・時計・訪問回数の機能を追加
画面サイズとの調整を行う
About/Credit の部分を追加
音についてはフリーの環境音を使用予定だったが、このWebサイトの作り的に再配布扱いになると予想されるため断念
サイトが作り終わった後、付加価値をプラスする意味でSpotifyの埋め込みならできるかもしれない
↑
2024.05.28
↑
中間報告
画像生成の手順を進捗記録に詳しく記載した方が良い
使い方が説明されたものを作成した方が良いのでは
サイトの右側の部分に増やす(Usageボタンを設置する?)
デジタルデトックスとしての使い方
写真メインのサイトでリラックスするにしては左右の配置が機械的
リゾートホテルのWebサイトをUIの参考にすると良いのでは
Webサイトではなくスクリーンセイバーのような形の最終成果物でも良いのでは
前期で終了予定なのでWebサイト形式で進める(後期で続けてする場合は検討)
長くサイトにいなければ見ることのできない画像があるとずっと使いたくなる工夫になるのではないか(時間で昼夜が変わるなど)
↑
調査
タイマー機能のリンク先が見れなくなっていたので別のサイトを参照(サイトが戻っていたら前のものを参照する)
タイマー機能(別サイト)
リゾートホテルWebサイト
背景なしで文字だけ表示
ハンバーガーボタンクリックでメニューが左側から出てくる
音付きのサイト・背景は基本なしで文字は白に統一
白文字・水色の写真には少し見づらいと感じるが目立たせないという風にも捉えることができる
海外のリゾートホテルのサイトはフルスクリーンのトップ画像があり、その下に説明文等が続くようになっている
白文字が多い
文字を見やすくする方法として明確な境目を作るのではなく、透明度を少しづつ変えていっているものが多い
↑
2024.05.21
↑
中間報告
次回報告
↑
コーディング
ランダムで背景画像が変わる部分のコーディング 完了
連動する音に関しては、一通り全体のコーディングが終わってから
↑
2024.05.14
↑
中間報告準備
サイトマップ
プロトタイプ
↑
コーディング
画像クリックで背景画像が切り替わるように変更(javascript)
ランダムで背景画像が変わる部分に苦戦中
↑
2024.05.07
↑
調査
タイマー機能
↑
Adobe XD作業
プロトタイプ
↑
コーディング
ロゴ部分の追加
タイマーのアイコン追加
画像をbackground-imageに変更
ウィンドウサイズを変えても縦横比を保持したまま要素全体を覆うように変更(background-size: cover;)
右のメニューバーにスクロール機能を追加(overflow: auto;)
↑
2024.04.30
↑
調査
感情と癒し
ストレス下の感情で、本来の自分に戻る過程で癒しの意味がある
癒し(安らぎ・安心・明日へのエネルギーの充実)
色効果
時計機能の作り方
音(環境音)
springin
NHKアーカイブス
効果音ラボ
↑
(相談)
スマホ版横向きサイト設定
バーの部分のみスクロールできるような設定を視野に入れる
横向きにすることで普段の使い方と変わる→気持ちの切り替え
Cookie アクセス回数カウント
↑
サイトマップ
↑
Adobe XD作業
↑
HTML・CSS コーディング
↑
2024.04.23
↑
サイトデザイン
背景はAdobe Fireflyを使用
癒し・安らぎ等を検索し、その検索結果にある画像の傾向から7つ画像を生成
緑(葉っぱ・木・木漏れ日)
空
集中する部屋の一角
海
花
動物
水滴
自然風景写真の癒やし要素の検討
高品質な映像条件が人にもたらす癒やし効果の検討
花の観賞は心身のストレスを緩和する
検索結果の上位の画像と上記の三つの論文を参考に
Adobe Firefly
を使用して雰囲気が近くなるようにテキストから画像生成(AI)
↑
調査
簡単CSSアニメーション&デザイン20選
サンプル付コピペOK!すごいCSSアニメーションライブラリ30選
ランダム背景
↑
カレンダー機能について(話の内容)
ログイン機能 or Cookie で訪問管理ができるが複雑なものは難しい
Cookieで回数ごとの変更は可能ではないか
新たな疑問
Cookieが適応された状態でボタンを押すことによりログイン記録できないか
自分で日付をクリックしてもらい、閲覧記録をつけてもらうようにする(受動できではなく、訪れた人に自ら記録してもらう)(自らする→面倒と思い本来の効果を発揮しづらいようにも思える)
↑
タイトル
Virtual Living Room
リビングルーム:家族が集まるくつろぎの場かつ、お客様を迎える公共の場所
実際に集まることはできないが、様々な人がWebサイトに集まりくつろぐことができるようなサイト
↑
2024.04.16
↑
調査
動きのあるサイト5選
ランニングホームラン株式会社
大胆な文字の動き
BRANU株式会社
図形を変形させて、視線誘導している
CCC
ちょうど画面サイズで内容が区切られており、スクロールしていくことで伝えたい内容が変わっていく
分類分けしてクリックした後にこの構成を使用したい
Romain Penchenat
ローディングが終わった後の文字と次の画面の変わり方の参考
WEEKEND
カーソルを動かして画像が歪むのは楽しさを刺激する
喜と楽の違い
1
喜:成果・達成感
楽:趣味・快感
2
辞書的な意味合い
怒の表し方
哀の表し方
寂しさ・悲しみを連想するようなイメージ
詩的な感じ
マイナスの方にも取れるが静かで落ち着けるような雰囲気にしたい
窓ガラス越しに雨を降らせる
話を終えて
マイナスの感情をプラスにする感情をピックアップする
不快感のキーワードを並べてその感情をプラスにするページを作成する
→企画部分メモ1 変更
安らぎ・ゆっくりする時間を増やすことのできるようなサイトの方が研究意欲が高いような気がする
→企画部分メモ2 作成
スケジュール作成
↑
企画部分メモ1
概要
感情を刺激する
不快な感情を軽減するWebサイト
背景・目的
感情を全面に出して表現できる人は少なく、制御したり偽ったりして生きている人の方が多いと感じる
閲覧することで感情を共有したり、今ある感情を落ち着かせたりすることのできるWebサイトにする
ストレスなどのマイナスの感情が多い世の中で、プラスの感情を動かすようなWebサイトにする
コンセプト
喜怒哀楽
不快感をベースとして、見ることで
感情を刺激される
不快な感情を軽減させるWebサイト
色や動きで感情変化を表す
↑
企画部分メモ2
概要
安らぎの時間を作るWebサイト
背景・目的
睡眠時間が短く、のんびりとするような時間が少ない人が多い
新しいアイディアが思い浮かぶ時間として、ぼーっとした時やリラックスしている時が挙げられていることが多い
集中したい時、ゆったりとした時間を過ごしたい時に訪れるWebサイトにする
コンセプト
落ち着いた雰囲気を表現する
参考
4 MILES PROJECT
音でアプローチ
Kamome〜おやすみのテーマ〜
音とイラストで表現
情報量を少なくしている
021 NEW COLLECTION 「EMOTIONAL」| MAISON CACAO
色鮮やかで商品ごとに色と音楽が異なっている
穏やかな気持ちになれるような音楽
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デザイントレンド
2024年のWebデザインでは操作する側への配慮が重要視される
目的・技法別のWebサイト紹介
国内のWebデザイン参考サイト集
Webアニメーションコーディング
CSSとJavascriptで作る美しいテキストアニメーション10選
↑
キーワード
Web 動きのあるサイトデザイン 見せるサイトと魅せるサイト
Webサイトには、情報を正確に早く伝えるためのデザインと、見る人の感情を動かすようなデザインが存在している
感情を刺激するデザイン
喜びや楽しみ、安らぎなどプラスの感情
不安や恐怖などのマイナスの感情
参考サイト
名古屋造形短大卒展
・背景の人の動きや時間の流れがのどかさ、楽しさを刺激する
・アニメーションがあるためローディングが長い
TBS
・スクロールによって場所が変わり、楽しさを刺激する
・アニメーションがあるためローディングが長い
Panasonic
・マップ上の数字にカーソルを合わせると追加情報が出る
・アニメーションがあるためローディングが長い
卒業制作 Peep
・部屋の様子が時間の流れによって変化する
・カーソルの色が変わる部分をクリックすると状況が変化する
・ゆっくりする時間を体感できる
卒業制作 Normotion Graphics
・ドラッグ&ドロップで映像を動かすパズルのようになっている
・実際に動かすという行動によって楽しさを刺激できる
情報デザイン研究I 黒い金魚
・スライドすることによって進む物語
・場面ごとに背景のアニメーションが変化する
待ち時間を安らぎにするローディングのデザイン
待ち時間を少なくするためのデザインまたは、待ち時間が苦にならないようなアニメーション
参考サイト
架空のケーキショップ
・独自のクリックマークと同じパターンになっている
TAPE YOU ALL! 使用情報
・青いテープが横に転がっていくアニメーション
ZOOM
・横スクロールのデザインはあまりみたことがない
・ローディングの画面がスタイリッシュ
折り紙レター
・折り紙を折っているアニメーションが入っている
SMBC DESIGN
・図形が動いている
・HP内で使用している図形と一致していて一体感がある
AIを使用したデザイン
Adobe IllustratorやPhotoshop に搭載されているAIの機能を使用
何か仮想の目的をもとに雰囲気の異なるものをどれくらい生成できるのか
言葉での理解が難しい単語の表現