- 追加された行はこの色です。
- 削除された行はこの色です。
#author("2024-04-23T10:43:32+09:00;2024-04-16T15:22:56+09:00","default:member","member")
#author("2024-04-23T16:43:49+09:00;2024-04-23T14:44:44+09:00","default:member","member")
*MainTitle
SubTitle ・・・・・・・・・・・・・・・・
忙しい毎日に安らぎの時間を作るWebサイト
メインビジュアル、あるいは
プロジェクトの最新の状態を視覚的に掲載
-''興梠 媛愛''
-'''Keywords：Web, 安らぎ, CSS, JavaScript'''
//-https://www.example.com
//-__[[相互評価シート>https://www.example.com]]__ ← ここからコメントをお願いします。
~
~
**概要
***これは何？
//&color(red){これは何か・・を簡潔に};
-安らぎの時間を作るWebサイト
-忙しい毎日に安らぎの時間を作るWebサイト
~
***背景と目的
//&color(red){プロジェクトの背景と目的};
-背景
--睡眠時間が短く、のんびりとするような時間が少ない人が多い
--新しいアイディアが思い浮かぶ時間として、ぼーっとした時やリラックスしている時が挙げられていることが多い
-目的
--ゆったりと安らぐ時間を毎日少しでも作ってもらうことを目的としたWebサイトの制作
--JavaScript等を使用し、適切な動きのあるWebサイトの研究をする
~
***コンセプト
//&color(red){基本的な考え方、枠組み、視点など};
-毎日訪れる仕掛けとして背景の種類を増やしたり、訪れた日を可視化できるようにする
-温かみや癒しをイメージした優しい色合いを使用する
-毎日訪れる仕掛けとして背景の種類を増やしたり、訪れた日を可視化したりする
-温かみや癒しをイメージした優しい色合いと落ち着いた暗さの色を使用する
~
***成果物の仕様
//&color(red){&small(成果物の形式・サイズ・時間尺等);};
-Webサイト
~
//***メンバー
//&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 -
~
***まとめ
//&color(red){プロジェクトが完結したら「まとめ」を記載して下さい。};
~
~
**調査
***現状調査
//&color(red){プロジェクトのテーマに関わる社会の現状と問題の洗い出し};
~
***先行事例
//&color(red){プロジェクトのテーマに該当する先行事例の紹介、傾向分析など};
~
***技法・技術情報
//&color(red){プロジェクトの遂行に必要な技法・技術に関する調査};
~
~
**プロジェクト管理
***スケジュール
//&color(red){計画的な遂行のために、進行管理表を作成してリンクして下さい。};
-[[Googleスプレッドシート >https://docs.google.com/spreadsheets/d/1JFC3svgaUbuRVLLnmUrwEid8_XP0XRRGYHe6bupHGJo/edit?usp=sharing]]
~
***ToDo
//&color(red){やるべきこと（タスク）を箇条書きにします。};
//&color(red){完了後は「%%取り消し線%%」あるいは「// コメントアウト」」};
~
~
#hr
CENTER:''進捗記録''
//&color(red){最新の情報を一番上に記載して下さい（古い記事が下へ沈む）。};
#hr
~
~
**2024.04.23
***サイトデザイン
-背景はAdobe Fireflyを使用
--癒し・安らぎ等を検索し、その検索結果にある画像の傾向から7つ画像を生成
***調査
-[[簡単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が適応された状態でボタンを押すことによりログイン記録できないか
--自分で日付をクリックしてもらい、閲覧記録をつけてもらうようにする(受動できではなく、訪れた人に自ら記録してもらう）（自らする→面倒と思い本来の効果を発揮しづらいようにも思える）
~
~
**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
-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の機能を使用
--何か仮想の目的をもとに雰囲気の異なるものをどれくらい生成できるのか
-言葉での理解が難しい単語の表現
~
~
~
