LogoMark.png

猪本結衣/卒業研究I のバックアップ差分(No.7)


#author("2021-05-06T18:09:58+09:00;2021-04-22T19:25:56+09:00","default:member","member")
#author("2021-05-06T19:29:58+09:00","default:member","member")
*Peep
Java Scriptによるアニメーションの実装 

// ここに Main Visual
~
#image(猪本結衣/情報デザイン研究II/mainV.png,left,100%)
~
~
~
~
~
-''[[猪本 結衣>猪本結衣]]''
-'''Keywords:Web Design, Java Script, Animation'''
-http://takearest.php.xdomain.jp/peep/
~


**Overview
***Introduction / What is This
//&color(red){これは何か・・を簡潔に};
のんびり眺めるだけのサイト
*Peep…覗き見る
~

***Background and Purpose
//&color(red){プロジェクトの背景と目的};
絵を描くのが好きでアニメーションを作る技術も多少あるので、何か活用できないかと考えた。
「ただ眺めるだけのサイト」はあまり見ない気がしたので作成してみたいと思いこのプロジェクトに決定。
訪れた方の暇つぶしになるサイトを作ることが目的。
~

***Concept
//&color(red){基本的な考え方、枠組み、視点など};
-暇な時にぼーっと眺めるサイト
少しでも誰かの癒しになればと作成。
~

***Output
//&color(red){成果物の直接掲載またはリンク誘導};
//&color(red){&small(プロジェクトの途上では、試作品等、視覚的な資料を掲載・リンクして下さい。);};
//&color(red){&small(成果物の形式・サイズ・時間尺等の基本情報も記載して下さい。);};
-[[Peep(http://takearest.php.xdomain.jp/peep/)>http://takearest.php.xdomain.jp/peep/]]
~

***Member
//&color(red){共同プロジェクトの場合のみ|メンバーと役割分担を明記};
~

***Tools
//&color(red){使用するツール|ハードウエア・ソフトウエア};
-Atom
-CLIP STUDIO PAINT
~

***Term
//&color(red){プロジェクトの期間|20XX.XX.XX - 20XX.XX.XX };
2020.9.16 〜
~

***Conclusion / Summary 
//&color(red){プロジェクトが完結したら「まとめ」を記載して下さい。};
~
~


**Survey

***Present Status
//&color(red){現状調査、現状の問題の洗い出し};
~

***Precedent
//&color(red){先行事例の紹介、傾向分析など};
*コンセプト
眺める、癒される等が目的のサイトでかつアニメーションのものを探したものの、あまり見受けられなかった。以下近しいサイト。
-[[ぼーっと沖縄>http://boot-okinawa.com]]
-[[WindowSwap>https://window-swap.com]]
~

*デザイン
アイソメトリックのサイト・インタラクティブなサイトはそれぞれ存在するものの、両方の要素を持つサイトは見受けられなかった。
-アイソメトリック
--[[可愛い!動く!見ているだけで癒されるアイソメトリックなイラストを使用したサイト5選 | 株式会社LIG>https://liginc.co.jp/444279]]
--[[こんなところにTDK>https://www.jp.tdk.com/athletic/experience/]]
--[[株式会社メルペイ>https://jp.merpay.com/]]
--[[ボラギノールタウン|ボラギノール公式ブランドサイト>https://www.borraginol.com/town/japan]]
--[[こんなところに共和産業>https://www.kyowa-cab.co.jp/jp/animation/]]
-インタラクティブ
--[[Nomadic Tribe — makemepulse>https://2019.makemepulse.com/]]
~
*レイアウト
作りたいサイトに似た雰囲気のサイトを収集。手書き感のある雰囲気のもの。
-[[クイックオバケさん(Twitter)>https://twitter.com/QuickObake/status/1310174687876456451?s=20]]
-[[魔法部|フェリシモ>https://web.archive.org/web/20210120234639/https://www.felissimo.co.jp/mahoubu/]](年度が変わったためかデザインが更新されたためアーカイブを掲載。プログラムが多少壊れている)
~
~

***Technique / Technology
//&color(red){プロジェクトの遂行に必要な技法・技術に関する調査};

~
~

**Project Management

***Schedule
//&color(red){計画的な遂行のために、進行管理表を作成してリンクして下さい。};
[[スケジュール>https://docs.google.com/spreadsheets/d/1ocb2doQljyJi03mQ7eW-lf6-DyiaHFMkWY04GCYhogo/edit?usp=sharing](作成中)
[[スケジュール>https://docs.google.com/spreadsheets/d/1ocb2doQljyJi03mQ7eW-lf6-DyiaHFMkWY04GCYhogo/edit?usp=sharing]](作成中)
~

***ToDo
//&color(red){やるべきこと(タスク)を箇条書きにします。};
//&color(red){完了後は「%%取り消し線%%」あるいは「// コメントアウト」」};

-最終的な完成図の作成
-スケジュールの完成
~
~
~

#hr
CENTER:''worklog''
//&color(red){最新の情報を一番上に記載して下さい(古い記事が下へ沈む)。};
#hr
~
~

**2021.5.6
**サイトの更新
背景やコンセプト等を掲載していなかったため、ひとまず昨年の分([[情報デザイン研究II>猪本結衣/情報デザイン研究II]])を転用した。
未だに背景の部分が曖昧になっているため思案が必要。
~
***スケジュールの作成
ひとまず1ヶ月単位で作成しようとしたものの着地点が定まっていないため前半部分しか作成できていない。
最終的にどんなものを作るのか、どこまで作るのかを仮にでもいいので作成しなければいけない。
~

**2021.5.5
***レスポンシブデザインの修正
タイトル・時計・リロード/ヘルプボタンがスマホだと画面外に入ってしまっていたため、positionをfixedにし常に画面内に収まるようにした。
~
***プログラムの修正
去年レスポンシブで変わる画像のサイズや位置を全てpx単位で作っていたらしく、それらを全て%に修正。
それにより現れたバグ(歩くモーションの位置のずれ等)を併せて修正。
~
***バグの発見
-夜寝ているモーションの時に電気をつけ、テレビ/パソコンのON/OFFを切り替えた時にバグが発生。
明日辺りに修正する予定。
~
~

**2021.5.4
***ヘルプ画面の実装
先日作成したデザインをサイトに実装した。
~
***カーソルの変更
上記に併せてカーソルを変更。クリックできる箇所にホバーするとカーソルが変化するように。
パソコンでしかカーソルが表示させられないため、
スマホ用にデザインを作成しなければならない。
-[[マウスポインターをCSSでカスタマイズして任意の画像に変化させる方法 | TECHNICAL CREATOR>https://technical-creator.com/cursor-img/]]
-[[マウスカーソルの形状を変える:スタイルシート(CSS)一覧 - HTMLタグボード>https://www.dspt.net/stylesheet_css/009/003.html]]
~
***レスポンシブの作成
スマホでサイトを開くと縮小された状態で表示されていたため、等倍で表示されるように。
部屋の左上の方しか表示されないので、サイトを開いたタイミングに画面の中央に自動でスクロールするようにした。
-[[jquery - DIVの中央に水平スクロールバーを配置する方法 - ITツールウェブ>https://cloud6.net/so/jquery/1175151]]

(参考にしたサイトを貼り付けたほうが後から便利なことに気づいたので極力貼りたい)
~
~

**2021.4.29
***ヘルプ画面のデザイン作成
昨年に受講した情報デザイン研究にてヘルプ画面を作成の予定を立てていたためデザインを作成。
昨年に受講した[[情報デザイン研究II>猪本結衣/情報デザイン研究II]]にてヘルプ画面作成の予定を立てていたためデザインを作成。
~
#image(help_rough.png,left,40%)


~
~
~
~
~
~

**2021.4.21
***模様替え機能の検討
大きく家具の位置を移動させることは厳しいものの、色を変えるだけであれば可能なため検討した。
~
#image(color1.png,left,40%)
#image(color2.png,left,40%)

~
~
~
~
~
~

**2021.4.15
***参考サイト探し
アイソメトリックのサイト・インタラクティブなサイトはそれぞれ存在するものの、両方の要素を持つサイトは見受けられなかった。
~
-アイソメトリック
--[[可愛い!動く!見ているだけで癒されるアイソメトリックなイラストを使用したサイト5選 | 株式会社LIG>https://liginc.co.jp/444279]]
--[[こんなところにTDK>https://www.jp.tdk.com/athletic/experience/]]
--[[株式会社メルペイ>https://jp.merpay.com/]]
--[[ボラギノールタウン|ボラギノール公式ブランドサイト>https://www.borraginol.com/town/japan]]
-インタラクティブ
--[[Nomadic Tribe — makemepulse>https://2019.makemepulse.com/]]
~

強いて言えばこのサイトが両方の要素を持ってるかもしれない。
[[Gegenbauer – transparent, einfach, digital>https://change.gegenbauer.de/]]
~
***卒業研究でしたいことの書き出し
#image(rough0415.png,left,50%)

~
~
~
~
~
~
~
~
~
~