興梠媛愛/情報デザイン研究I
をテンプレートにして作成
HOME
ABOUT
最新の更新
2021
MEMBER 2021
青木暁光
石坂大翔
出光美心
岩崎貴生
岩下雄真
内尾颯太
江川珠貴
大中啓旦
亀田日向
川村洸太
木村円香
久保絢菜
倉員優実
桑原歩未
鴻上早紀
崔昊
佐光美憂
柴田一輝
竹谷匠冬
田籠祐貴
田代爽乃
内藤彩乃
西山実伶
濱有希子
濱田侑里
藤本唯人
松岡佑樹
松藤陽
村山陽菜
山田宗周
渡邊来美
渡辺侑貴
中西華子
原田朋奈
水田修太朗
宮副咲葉
猪須大翔
川面翔太
隈翔太
柴田葉月
角祐菜
豊岡壮大朗
吉井麻吏菜
2022
MEMBER 2022
棈松智也
梅木悠民
江頭奏
大井このか
大石颯
太田糸音
太田姫奈
越智楓
鎌田真幸
楠田佑月
興梠媛愛
後藤太成
坂井彩華
指方依緒
徐泰陽
杉野市之助
堤晴司
角田雄一
中井千尋
原朋恵
平嶋明日花
増田里奈
深町彩海
藤島早希
宮路咲希
梁井英翔
山口愛麗
山本彩花
松田葉奈
松本龍太郎
熊谷涼花
近藤ひかる
善結穂
待永萌衣
三浦遥
石松匡広
上田莉帆
宇田川春稀
宇美希美
佐野美和
竹之内咲希
土斐崎種定
野村優亜
福田千紗
山川彩香
山田侑加子
重松優花
甲斐陸斗
2023
MEMBER 2023
秋月靖雅
浅田真優花
阿南慶子
荒谷唯斗
安藤貴仁
池邉成
井上大河
岩本愛結
梅﨑美和
浦朱里
江村梨里香
大場こころ
勝田喜一
亀崎瑞穂
神田舞
白井くるみ
髙市遥
竹松莉羽
寺田圭志
中村心香
原晴紀
菱谷実来
日山晃良
平崎千夏
福井涼
堀玲二
山口恵
早稲田加奈恵
渡邊優希
十時明日香
石井彩晶
大神槙之介
大熊玄樹
大山花音
岡萌絵子
荻野美咲
鐘ヶ江雅
金田桜子
北村美優香
清野梨果
高庄玲衣
津覇稜也
中川飛鳥
福屋早希乃
脇山千寛
2024
MEMBER 2024
芦谷心渚
安部詩織
池田隆之介
伊藤早紀
越智花凛
金ヶ江光千瑠
佐藤澪
川村玲太
菊池真桜
後藤未羽
齊場由布
佐々木陽菜
佐藤美月
猿本大翔
竹之内優希
田尻有沙
谷口和歌子
千々岩聡真
手島凜
鳥越友菜
中尾桃瀬
野口朗央
福岡比菜
松崎菜々実
松永紗和
真子大輝
南妃香莉
宮園晴日
森山海莉
劉沢寧
渡辺颯香
足立実優
池田阜弥
井上朋美
宇野日菜
上瀧桃子
茂山和寛
髙嶋莉彩
橘彩以
田中さゆり
田村宥奈
徳永歩乃佳
轟はなの
庭瀬美来
橋本音花
若狭映那
STAFF
専任教員一覧
伊藤敬生
井上貢一
井上友子
岩田敦之
桜井祐
永嶋さゆり
北島己佐吉
OBOG
2023年度卒業生
2022年度卒業生
2021年度卒業生
2020年度卒業生
2019年度卒業生
SESSION
専門科目一覧
ソーシャルデザイン概論
ソーシャルデザイン演習
情報デザイン演習IIA
情報デザイン演習IIB
地域ブランド企画演習IIA
地域ブランド企画演習IIB
視覚デザイン演習
Webデザイン演習
3DCG演習
情報デザイン研究I
地域ブランド企画研究I
卒業研究
教務ガイダンス
RecommendedVideo
BasicKnowledge
PROJECT
LINKS
SEARCH
開始行:
*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サイトに集ま...
~
***背景と目的
//&color(red){プロジェクトの背景と目的};
-背景
--睡眠時間が短く、のんびりとするような時間が少ない人が多い
--新しいアイデアが思い浮かぶ時間として、ぼーっとした時や...
-目的
--ゆったりと安らぐ時間を毎日少しでも作ってもらうことを目...
--JavaScript等を使用した、適切な動きのあるWebサイトの研究...
~
***コンセプト
//&color(red){基本的な考え方、枠組み、視点など};
-毎日訪れる仕掛けとして背景の種類を増やしたり、訪れた日を...
-ボタンで個人の必要な機能を取り出せるようにし、人ごとに好...
-スマホ表示は横向き使用を標準とし、通常使用する縦向きから...
~
***成果物の仕様
//&color(red){&small(成果物の形式・サイズ・時間尺等);};
-Webサイト
(中間報告)
-[[プロトタイプ>https://xd.adobe.com/view/08f16f32-656d-4...
-[[プロトタイプ デザインレビュー>https://xd.adobe.com/vi...
-[[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...
--[[高品質な映像条件が人にもたらす癒やし効果の検討>https:...
--[[花の観賞は心身のストレスを緩和する>https://www.naro.g...
~
***先行事例
//&color(red){プロジェクトのテーマに該当する先行事例の紹...
-[[4 MILES PROJECT>http://4milesproject.com/#]]
--音でアプローチ
--最初の画面での注意書き
-[[Kamome〜おやすみのテーマ〜>https://www.kamome-d.jp/kam...
--音とイラストで表現
--情報量を少なくしている
-[[021 NEW COLLECTION 「EMOTIONAL」| MAISON CACAO>https:/...
--色鮮やかで商品ごとに色と音楽が異なっている
--穏やかな気持ちになれるような音楽
~
***技法・技術情報
//&color(red){プロジェクトの遂行に必要な技法・技術に関す...
-[[簡単CSSアニメーション&デザイン20選>https://baigie.me/...
-[[サンプル付コピペOK!すごいCSSアニメーションライブラリ3...
-[[ランダム背景>https://coco-factory.jp/ugokuweb/move02/5...
-[[CSSとJavascriptで作る美しいテキストアニメーション10選>...
-[[時計機能の作り方>https://goworkship.com/magazine/clock...
-[[タイマー機能>https://lexikodicsho.com/posts/2020/06/ti...
~
~
**プロジェクト管理
***スケジュール
//&color(red){計画的な遂行のために、進行管理表を作成して...
-[[Googleスプレッドシート >https://docs.google.com/spread...
~
***ToDo
//&color(red){やるべきこと(タスク)を箇条書きにします。};
//&color(red){完了後は「%%取り消し線%%」あるいは「// コメ...
-%%スケジュール作成%%
-%%画像を7枚決める%%
-Adobe XD サイトデザイン
-音決め
-コーディング
-GItHub アップロード
~
~
#hr
CENTER:''進捗記録''
//&color(red){最新の情報を一番上に記載して下さい(古い記...
#hr
~
~
**2024.05.21
***中間報告
-次回報告
***コーディング
-ランダムで背景画像が変わる部分のコーディング 完了
--連動する音に関しては、一通り全体のコーディングが終わっ...
~
~
**2024.05.14
***中間報告準備
-[[サイトマップ>https://drive.google.com/file/d/1Kdu-kMpJ...
-[[プロトタイプ>https://xd.adobe.com/view/08f16f32-656d-4...
~
***コーディング
-画像クリックで背景画像が切り替わるように変更(javascript)
-ランダムで背景画像が変わる部分に苦戦中
~
~
**2024.05.07
***調査
-[[タイマー機能>https://lexikodicsho.com/posts/2020/06/ti...
***Adobe XD作業
-[[プロトタイプ>https://xd.adobe.com/view/08f16f32-656d-4...
***コーディング
-ロゴ部分の追加
-タイマーのアイコン追加
-画像をbackground-imageに変更
--ウィンドウサイズを変えても縦横比を保持したまま要素全体...
-右のメニューバーにスクロール機能を追加(overflow: auto;)
~
~
**2024.04.30
***調査
-[[感情と癒し>https://core.ac.uk/reader/70320900]]
--ストレス下の感情で、本来の自分に戻る過程で癒しの意味が...
--癒し(安らぎ・安心・明日へのエネルギーの充実)
-[[色効果>https://www.c-c-j.com/course/psychology/colorth...
-[[時計機能の作り方>https://goworkship.com/magazine/clock...
-音(環境音)
--[[springin>https://www.springin.org/sound-stock/subcate...
--%%[[NHKアーカイブス>https://www.nhk.or.jp/archives/crea...
--[[効果音ラボ>https://soundeffect-lab.info/sound/environ...
***(相談)
-[[スマホ版横向きサイト設定>https://nanos.jp/sikaku0/blog...
--バーの部分のみスクロールできるような設定を視野に入れる
--横向きにすることで普段の使い方と変わる→気持ちの切り替え
-[[Cookie アクセス回数カウント>https://dezanari.com/js-co...
***[[サイトマップ>https://drive.google.com/file/d/1Kdu-kM...
***Adobe XD作業
***HTML・CSS コーディング
~
~
**2024.04.23
***サイトデザイン
-背景はAdobe Fireflyを使用
--癒し・安らぎ等を検索し、その検索結果にある画像の傾向か...
---緑(葉っぱ・木・木漏れ日)
---空
---集中する部屋の一角
---海
---花
---動物
---水滴
---[[自然風景写真の癒やし要素の検討>https://www.jstage.js...
---[[高品質な映像条件が人にもたらす癒やし効果の検討>https...
---[[花の観賞は心身のストレスを緩和する>https://www.naro....
~
***調査
-[[簡単CSSアニメーション&デザイン20選>https://baigie.me/...
-[[サンプル付コピペOK!すごいCSSアニメーションライブラリ3...
-[[ランダム背景>https://coco-factory.jp/ugokuweb/move02/5...
***カレンダー機能について(話の内容)
-ログイン機能 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=「喜...
---喜:成果・達成感
---楽:趣味・快感
--[[2>https://chikaochiai.hatenablog.com/entry/2017/08/13...
---辞書的な意味合い
-怒の表し方
-哀の表し方
--寂しさ・悲しみを連想するようなイメージ
--詩的な感じ
--マイナスの方にも取れるが静かで落ち着けるような雰囲気に...
--[[窓ガラス越しに雨を降らせる>http://pannyatto.firebird....
-話を終えて
--マイナスの感情をプラスにする感情をピックアップする
--不快感のキーワードを並べてその感情をプラスにするページ...
→企画部分メモ1 変更
--安らぎ・ゆっくりする時間を増やすことのできるようなサイ...
→企画部分メモ2 作成
~
-スケジュール作成
~
***企画部分メモ1
-概要
--%%感情を刺激する%%不快な感情を軽減するWebサイト
-背景・目的
--感情を全面に出して表現できる人は少なく、制御したり偽っ...
--閲覧することで感情を共有したり、今ある感情を落ち着かせ...
--ストレスなどのマイナスの感情が多い世の中で、プラスの感...
-コンセプト
--%%喜怒哀楽%%不快感をベースとして、見ることで%%感情を刺...
--色や動きで感情変化を表す
~
***企画部分メモ2
-概要
--安らぎの時間を作るWebサイト
-背景・目的
--睡眠時間が短く、のんびりとするような時間が少ない人が多い
--新しいアイディアが思い浮かぶ時間として、ぼーっとした時...
--集中したい時、ゆったりとした時間を過ごしたい時に訪れるW...
-コンセプト
--落ち着いた雰囲気を表現する
-参考
--[[4 MILES PROJECT>http://4milesproject.com/#]]
---音でアプローチ
--[[Kamome〜おやすみのテーマ〜>https://www.kamome-d.jp/ka...
---音とイラストで表現
---情報量を少なくしている
--[[021 NEW COLLECTION 「EMOTIONAL」| MAISON CACAO>https:...
---色鮮やかで商品ごとに色と音楽が異なっている
---穏やかな気持ちになれるような音楽
~
-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-...
~
~
**2024.04.09
***調査
-[[2024年のWebデザイントレンド>https://www.gohp.jp/blog/d...
--2024年のWebデザインでは操作する側への配慮が重要視される
--目的・技法別のWebサイト紹介
-[[国内のWebデザイン参考サイト集>https://sankoudesign.com]]
-Webアニメーションコーディング
--[[CSSとJavascriptで作る美しいテキストアニメーション10選...
~
***キーワード
-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 黒い金魚>紀野はるか/情報デザイン...
・スライドすることによって進む物語
・場面ごとに背景のアニメーションが変化する
-待ち時間を安らぎにするローディングのデザイン
--待ち時間を少なくするためのデザインまたは、待ち時間が苦...
--参考サイト
---[[架空のケーキショップ>https://graziexxparlor.onedesig...
・独自のクリックマークと同じパターンになっている
---[[TAPE YOU ALL! 使用情報>https://www.nittocs.co.jp/rec...
・青いテープが横に転がっていくアニメーション
---[[ZOOM>https://www.zoom-japan.com]]
・横スクロールのデザインはあまりみたことがない
・ローディングの画面がスタイリッシュ
---[[折り紙レター>https://sdgsstory.global.brother/j/spec...
・折り紙を折っているアニメーションが入っている
---[[SMBC DESIGN>https://www.smbc-careers.com/design/]]
・図形が動いている
・HP内で使用している図形と一致していて一体感がある
-AIを使用したデザイン
--Adobe IllustratorやPhotoshop に搭載されているAIの機能...
--何か仮想の目的をもとに雰囲気の異なるものをどれくらい生...
-言葉での理解が難しい単語の表現
~
~
~
終了行:
*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サイトに集ま...
~
***背景と目的
//&color(red){プロジェクトの背景と目的};
-背景
--睡眠時間が短く、のんびりとするような時間が少ない人が多い
--新しいアイデアが思い浮かぶ時間として、ぼーっとした時や...
-目的
--ゆったりと安らぐ時間を毎日少しでも作ってもらうことを目...
--JavaScript等を使用した、適切な動きのあるWebサイトの研究...
~
***コンセプト
//&color(red){基本的な考え方、枠組み、視点など};
-毎日訪れる仕掛けとして背景の種類を増やしたり、訪れた日を...
-ボタンで個人の必要な機能を取り出せるようにし、人ごとに好...
-スマホ表示は横向き使用を標準とし、通常使用する縦向きから...
~
***成果物の仕様
//&color(red){&small(成果物の形式・サイズ・時間尺等);};
-Webサイト
(中間報告)
-[[プロトタイプ>https://xd.adobe.com/view/08f16f32-656d-4...
-[[プロトタイプ デザインレビュー>https://xd.adobe.com/vi...
-[[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...
--[[高品質な映像条件が人にもたらす癒やし効果の検討>https:...
--[[花の観賞は心身のストレスを緩和する>https://www.naro.g...
~
***先行事例
//&color(red){プロジェクトのテーマに該当する先行事例の紹...
-[[4 MILES PROJECT>http://4milesproject.com/#]]
--音でアプローチ
--最初の画面での注意書き
-[[Kamome〜おやすみのテーマ〜>https://www.kamome-d.jp/kam...
--音とイラストで表現
--情報量を少なくしている
-[[021 NEW COLLECTION 「EMOTIONAL」| MAISON CACAO>https:/...
--色鮮やかで商品ごとに色と音楽が異なっている
--穏やかな気持ちになれるような音楽
~
***技法・技術情報
//&color(red){プロジェクトの遂行に必要な技法・技術に関す...
-[[簡単CSSアニメーション&デザイン20選>https://baigie.me/...
-[[サンプル付コピペOK!すごいCSSアニメーションライブラリ3...
-[[ランダム背景>https://coco-factory.jp/ugokuweb/move02/5...
-[[CSSとJavascriptで作る美しいテキストアニメーション10選>...
-[[時計機能の作り方>https://goworkship.com/magazine/clock...
-[[タイマー機能>https://lexikodicsho.com/posts/2020/06/ti...
~
~
**プロジェクト管理
***スケジュール
//&color(red){計画的な遂行のために、進行管理表を作成して...
-[[Googleスプレッドシート >https://docs.google.com/spread...
~
***ToDo
//&color(red){やるべきこと(タスク)を箇条書きにします。};
//&color(red){完了後は「%%取り消し線%%」あるいは「// コメ...
-%%スケジュール作成%%
-%%画像を7枚決める%%
-Adobe XD サイトデザイン
-音決め
-コーディング
-GItHub アップロード
~
~
#hr
CENTER:''進捗記録''
//&color(red){最新の情報を一番上に記載して下さい(古い記...
#hr
~
~
**2024.05.21
***中間報告
-次回報告
***コーディング
-ランダムで背景画像が変わる部分のコーディング 完了
--連動する音に関しては、一通り全体のコーディングが終わっ...
~
~
**2024.05.14
***中間報告準備
-[[サイトマップ>https://drive.google.com/file/d/1Kdu-kMpJ...
-[[プロトタイプ>https://xd.adobe.com/view/08f16f32-656d-4...
~
***コーディング
-画像クリックで背景画像が切り替わるように変更(javascript)
-ランダムで背景画像が変わる部分に苦戦中
~
~
**2024.05.07
***調査
-[[タイマー機能>https://lexikodicsho.com/posts/2020/06/ti...
***Adobe XD作業
-[[プロトタイプ>https://xd.adobe.com/view/08f16f32-656d-4...
***コーディング
-ロゴ部分の追加
-タイマーのアイコン追加
-画像をbackground-imageに変更
--ウィンドウサイズを変えても縦横比を保持したまま要素全体...
-右のメニューバーにスクロール機能を追加(overflow: auto;)
~
~
**2024.04.30
***調査
-[[感情と癒し>https://core.ac.uk/reader/70320900]]
--ストレス下の感情で、本来の自分に戻る過程で癒しの意味が...
--癒し(安らぎ・安心・明日へのエネルギーの充実)
-[[色効果>https://www.c-c-j.com/course/psychology/colorth...
-[[時計機能の作り方>https://goworkship.com/magazine/clock...
-音(環境音)
--[[springin>https://www.springin.org/sound-stock/subcate...
--%%[[NHKアーカイブス>https://www.nhk.or.jp/archives/crea...
--[[効果音ラボ>https://soundeffect-lab.info/sound/environ...
***(相談)
-[[スマホ版横向きサイト設定>https://nanos.jp/sikaku0/blog...
--バーの部分のみスクロールできるような設定を視野に入れる
--横向きにすることで普段の使い方と変わる→気持ちの切り替え
-[[Cookie アクセス回数カウント>https://dezanari.com/js-co...
***[[サイトマップ>https://drive.google.com/file/d/1Kdu-kM...
***Adobe XD作業
***HTML・CSS コーディング
~
~
**2024.04.23
***サイトデザイン
-背景はAdobe Fireflyを使用
--癒し・安らぎ等を検索し、その検索結果にある画像の傾向か...
---緑(葉っぱ・木・木漏れ日)
---空
---集中する部屋の一角
---海
---花
---動物
---水滴
---[[自然風景写真の癒やし要素の検討>https://www.jstage.js...
---[[高品質な映像条件が人にもたらす癒やし効果の検討>https...
---[[花の観賞は心身のストレスを緩和する>https://www.naro....
~
***調査
-[[簡単CSSアニメーション&デザイン20選>https://baigie.me/...
-[[サンプル付コピペOK!すごいCSSアニメーションライブラリ3...
-[[ランダム背景>https://coco-factory.jp/ugokuweb/move02/5...
***カレンダー機能について(話の内容)
-ログイン機能 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=「喜...
---喜:成果・達成感
---楽:趣味・快感
--[[2>https://chikaochiai.hatenablog.com/entry/2017/08/13...
---辞書的な意味合い
-怒の表し方
-哀の表し方
--寂しさ・悲しみを連想するようなイメージ
--詩的な感じ
--マイナスの方にも取れるが静かで落ち着けるような雰囲気に...
--[[窓ガラス越しに雨を降らせる>http://pannyatto.firebird....
-話を終えて
--マイナスの感情をプラスにする感情をピックアップする
--不快感のキーワードを並べてその感情をプラスにするページ...
→企画部分メモ1 変更
--安らぎ・ゆっくりする時間を増やすことのできるようなサイ...
→企画部分メモ2 作成
~
-スケジュール作成
~
***企画部分メモ1
-概要
--%%感情を刺激する%%不快な感情を軽減するWebサイト
-背景・目的
--感情を全面に出して表現できる人は少なく、制御したり偽っ...
--閲覧することで感情を共有したり、今ある感情を落ち着かせ...
--ストレスなどのマイナスの感情が多い世の中で、プラスの感...
-コンセプト
--%%喜怒哀楽%%不快感をベースとして、見ることで%%感情を刺...
--色や動きで感情変化を表す
~
***企画部分メモ2
-概要
--安らぎの時間を作るWebサイト
-背景・目的
--睡眠時間が短く、のんびりとするような時間が少ない人が多い
--新しいアイディアが思い浮かぶ時間として、ぼーっとした時...
--集中したい時、ゆったりとした時間を過ごしたい時に訪れるW...
-コンセプト
--落ち着いた雰囲気を表現する
-参考
--[[4 MILES PROJECT>http://4milesproject.com/#]]
---音でアプローチ
--[[Kamome〜おやすみのテーマ〜>https://www.kamome-d.jp/ka...
---音とイラストで表現
---情報量を少なくしている
--[[021 NEW COLLECTION 「EMOTIONAL」| MAISON CACAO>https:...
---色鮮やかで商品ごとに色と音楽が異なっている
---穏やかな気持ちになれるような音楽
~
-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-...
~
~
**2024.04.09
***調査
-[[2024年のWebデザイントレンド>https://www.gohp.jp/blog/d...
--2024年のWebデザインでは操作する側への配慮が重要視される
--目的・技法別のWebサイト紹介
-[[国内のWebデザイン参考サイト集>https://sankoudesign.com]]
-Webアニメーションコーディング
--[[CSSとJavascriptで作る美しいテキストアニメーション10選...
~
***キーワード
-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 黒い金魚>紀野はるか/情報デザイン...
・スライドすることによって進む物語
・場面ごとに背景のアニメーションが変化する
-待ち時間を安らぎにするローディングのデザイン
--待ち時間を少なくするためのデザインまたは、待ち時間が苦...
--参考サイト
---[[架空のケーキショップ>https://graziexxparlor.onedesig...
・独自のクリックマークと同じパターンになっている
---[[TAPE YOU ALL! 使用情報>https://www.nittocs.co.jp/rec...
・青いテープが横に転がっていくアニメーション
---[[ZOOM>https://www.zoom-japan.com]]
・横スクロールのデザインはあまりみたことがない
・ローディングの画面がスタイリッシュ
---[[折り紙レター>https://sdgsstory.global.brother/j/spec...
・折り紙を折っているアニメーションが入っている
---[[SMBC DESIGN>https://www.smbc-careers.com/design/]]
・図形が動いている
・HP内で使用している図形と一致していて一体感がある
-AIを使用したデザイン
--Adobe IllustratorやPhotoshop に搭載されているAIの機能...
--何か仮想の目的をもとに雰囲気の異なるものをどれくらい生...
-言葉での理解が難しい単語の表現
~
~
~
ページ名: