LogoMark.png

猪本結衣/卒業研究I のバックアップソース(No.12)

#author("2021-05-21T03:21:23+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…覗き見る
~
現状できること・見れるもの

-男の子(以下6種をランダムで表示)
--部屋を歩き回る
--パソコンをする
--雑誌を読む
--ゲームをする
--スマホをする
--寝る(夜0時〜6時は固定で寝てる)
~
-クリック処理
--扉横のスイッチ(部屋の照明のON/OFF)
--テレビ(電源のON/OFF)
--パソコン(電源のON/OFF)
--リロード(男の子の動作の再定義・部屋の照明を除き電源OFF)
--ヘルプ(このサイトについて)
--拡大/縮小
~
-その他
--時間により空の色が変化(朝・昼・夕・夜)
--カーソルの変化(クリックできる箇所にホバーでカーソルが拡大・色の変化)
--サイトにアクセス時、画像よりもウィンドウ幅が小さいと自動で中央にスクロール
~

***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/]]
~

***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){現状調査、現状の問題の洗い出し};
-昨今、短時間に受け取る情報量が多い。(TwitterやTikTok、TV等)
~

***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/]](年度が変わったためかデザインが更新されたためアーカイブを掲載。プログラムが多少壊れている)
~

*その他
[[Gegenbauer – transparent, einfach, digital>https://change.gegenbauer.de/]]
(インタラクティブで、かつサイトの雰囲気が作成したいものと似ていた。手描き感。)
~
~

***Technique / Technology
//&color(red){プロジェクトの遂行に必要な技法・技術に関する調査};
//以前はJavaScriptで作成していたが、諸事情でjQueryの方が詳しくなってしまったため組み直すか考え中。面倒いなどうするよ??
必要な技法
-JavaScript
-jQuery?
-イラスト・アニメーション
~

参考にしたサイト・文献(昨年の作業分を除く)
-[[マウスポインターを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]]
~
~

**Project Management

***Schedule
//&color(red){計画的な遂行のために、進行管理表を作成してリンクして下さい。};
[[スケジュール>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.20
***サイトの更新
背景・コンセプトを主に、サイトの埋めていない項目を埋めたりデザイン研究から変わった点の修正を行なったりした。
~
~

**2021.5.19
***プロジェクトの背景・コンセプト
先日の面談時に背景やコンセプト等を簡単に考えていたため、それらをまとめた。
~
~

**2021.5.8
***ズームイン/ズームアウト機能の作成
スマホのピンチアウトをできないようにしていたため、ズームイン/ズームアウトをできるようにした。
画像の全体がすでに見えるようになっている状態でもズームアウトできてしまうため、修正予定。
~
~


**2021.5.7
***面談
背景の方向性を相談
ターゲットをアニメや漫画を好きな女性に絞ることを検討。
~
***バグの修正
先日見つけたテレビとパソコンの明るさのバグを修正。
~
***レスポンシブの改善
画像サイズをpxで管理していたためモニターが大きい時に小さく表示されてしまっていたので、vhで管理する事でどのサイズにも対応できるようにした。
~
~

**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%)

~
~
~
~
~
~
~
~

**2020.9.22〜2020.11.25
[[昨年度の情報デザイン研究IIにて作成▷▷▷>猪本結衣/情報デザイン研究II]]
~
~