LogoMark.png

猪本結衣/卒業研究II

Peep

JavaScriptを使用した誰かの癒しになるサイトの作成


mainV.png










Overview

Introduction / What is This

のんびり眺めるサイト
*Peep…覗き見る


現状できること・見れるもの

Background and Purpose

ネットやテレビと短時間に多くの情報を浴びる機会の多い現代。
確かにたくさんの情報を受け取ることも大事だが、そればかりだと疲れてしまう。
何も情報を受け取らない、ぼーっとする時間も大切だと考えた。

ターゲットは、ネットやテレビを扱う機会が多いであろうアニメや漫画・ゲーム等が好きな人たち。
イラストやアニメーションを用いることでそういった人たちに親しみやすいサイトを目指す。


Concept

Output

Tools

Term

2020.9.16 〜

Plan

Conclusion / Summary




Survey

Present Status



参考

調べていく上で、「現代で1日に受け取る情報量は江戸時代の1年分・平安時代の一生分」といった記述を多く目にした。しかしそのほとんどが「〜という説がある」に留まり、ソースはどこにも見受けられない。一体何を根拠にその説を掲げているのか。

Precedent

*コンセプト
眺める、癒される等が目的のサイトでかつアニメーションのものを探したものの、あまり見受けられなかった。以下近しいサイト。

*デザイン
アイソメトリックのサイト・インタラクティブなサイトはそれぞれ存在するものの、両方の要素を持つサイトは見受けられなかった。

*レイアウト
作りたいサイトに似た雰囲気のサイトを収集。手書き感のある雰囲気のもの。

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



Technique / Technology

必要な技法

参考にしたサイト・文献(昨年の作業分を除く)

Project Management

Schedule

スケジュール(作成中)

ToDo


worklog




2021.10.14

カーテンとクローゼットのGIFの作成

closet_b.png
closet_g.png

カーテンとクローゼットをクリックすることで開閉できるようにしたいため、開閉のGIFを作成。
併せてクローゼットの中も新規で描いた。
しかし描きこみすぎて浮いてしまったため色を塗り直す予定。
(もったいないので掲載)
カーテン_開く閉じる
クローゼット_開く閉じる



2021.10.13

andasi.png

アンケートの作成

アンケートに入れる設問を書き出し、整理し削る作業をした。
その後設問を作成した。今度の授業にて先生方にこれでいいか相談する予定。







2021.10.12

うろうろするプログラム(女の子.ver)の作成

男の子のプログラムを複製し歩き回るプログラムを作成。
歩き回るプログラムを作成するのに際し他のプログラムも少し修正を加えていたため、その部分も併せて修正。
案の定バグが乱立したためそちらも修正し、ひとまず確認されている分は全て修正した。
これで男の子と女の子、両方のプログラムが作成し終わった。



2021.10.11

うろうろするプログラムの続き

昨日乱立したバグを修正。
歩き回るプログラムを作成するのに際し他のプログラムも少し修正を加えていたため、その部分を修正。
これで男の子と女の子、両方のプログラムが作成し終わった。

アンケートの作成

コンセプト通りに作成できてるか、ブラッシュアップに向けたアンケートを作成し始めた。



2021.10.11

うろうろするプログラムの続き

昨日乱立したバグを修正。
歩き回るプログラムを作成するのに際し他のプログラムも少し修正を加えていたため、その部分を修正。
これで男の子と女の子、両方のプログラムが作成し終わった。

アンケートの作成

コンセプト通りに作成できてるか、ブラッシュアップに向けたアンケートを作成し始めた。



2021.10.10

スイッチを押すGIFの作成

不足していたGIFを作画。
昨日作成していたのは全て男の子の部屋だが、女の子の同GIFもいずれ必要になるため併せて作成。
照明のスイッチON/OFF(男の子)
〃(女の子)

うろうろするプログラムの続き

作成したGIFを追加し、寝る前後に都度照明を点滅するようプログラムを作成。
部屋の照明を管理するために作っていたフラグを利用し、すでに消えている時はベッドに直行するようにした。(起きた時も同様)
これで男の子の方のプログラムは完成。

うろうろするプログラム(女の子.ver)の作成

男の子のプログラムを複製し歩き回るプログラムを作成。
案の定バグが乱立したので明日修正する予定。



2021.10.9

うろうろするプログラムの作成の続き

引き続きうろうろするプログラムを作成。
ゲームをしに行く、ゲームを終え別の場所に移動するプログラムを追加。
また寝るためにベッドへ行くプログラムを作成しようとしたものの、部屋の照明を切り替えるためにスイッチの下まで行く→スイッチを押す、といった動きをしなくてはいけないことに気づいた。
スイッチを押すアニメーションは作成していなかったため明日描く予定。



2021.10.8

先生との面談

主にアンケートの取り方についての相談をし、作成方法を検討。
部屋の中をうろうろするプログラムが未完成なため、完成次第作成予定。

ランダムでうろうろするプログラムの作成

男の子のうろうろするプログラムを作成。
全て作成し終わったら女の子の方に複製し、調整することで同じ動きができるようになるはず。
先日作成していた読書⇔PCのプログラムを応用し、ひとまず他のアイテムの干渉がないスマホを追加。
バグが乱立するため時間がかかりそうな予感がしている。



2021.10.7

GIFの作成

ベッドから出る/入るGIFを作成。
以上で全ての立つ/座るGIFが完成したため、サイトに入れ込む作業をしなくてはいけない。
立つ
座る
この記事を書きながら手からスマホを消す作業をしていないことに気づいたため、修正。
立つ(修正版)

作成したGIFの反映作業

GIFをサイトに入れる際のCSSの部分を全て調整した。

細かいアイテムの追加

女の子の読んでいる本や手芸道具など、アニメーションを自動で動かす上で画面上に表示させなくてはならなくなったアイテムを書き出し、サイトに反映した。
以下追加したもの一覧

2021.10.6

GIFの作成

ベッドから出るアニメーションを作成。
完成まではしなかったが、ベッドに入るアニメーションは今日描いた絵や以前のスマホもしくは読書の絵を多く使えると思うので、明日まとめて完成させられると思う。
明日まとめて書き出したものを掲載予定。



2021.10.5

GIFの作成

スマホの座るアニメーションを作成。
スマホと同じベッドに上がるアニメーションをいくつか用いて読書の立つ/座るGIFも完成させた。
10/1から1日遅れていたスケジュールがようやく追いついて一安心。
座る(スマホ)
立つ(読書)
座る(読書)



2021.10.4

GIFの作成

手芸しているアニメーションの座るGIFとスマホの立つGIFを完成させた。
座る(手芸)
立つ(スマホ)



2021.10.3

GIFの作成

PCの立つ/座るアニメーションを完成させた。
手芸は同じ机の前に座るアニメーションのため、PCの分をいくつか流用し立つGIFも完成させた。
手芸道具や布は机の上に最初から置いてあることにしたので、その画像も後日準備しなくてはいけない。
立つ(PC)
座る(PC)
立つ(手芸)



2021.10.1

GIFの作成

ベッドに入るアニメーションを完成させた。
PCの立つアニメーションに少しだけ着手したため、こちらも完成次第アップロード予定。本来今日中に完成させたかったので急ぎ完成させたい。
起きる



2021.9.30

GIFの作成

寝ているアニメーションの立つ・布団に入るGIFを作成。
立ち上がる方はまだ描いている途中。布団に入るアニメーションを逆再生したものを一部使用しても違和感なく動いた。
描きかけの方も何となく書き出したのでアップロードしてみる。
寝る
起きる(途中)



2021.9.29

GIFの作成

寝ているアニメーションの布団に入るGIFを作成。
布団が動くため作画に時間がかかる。
男の子の布団は無地なためまだいい方だが、女の子の布団は模様がプリントされているためさらに時間がかかりそうだ。
作画の途中なので完成し次第アップロードを予定。



2021.9.27

GIFの作成

スマホをしているアニメーションの立つ/座るGIFを作成。
立つGIF
座るGIF



2021.9.26

GIFの作成

ゲームをしているアニメーションの立つ/座るGIFを作成。
立つGIF
座るGIF



2021.9.24

自動化のシステムの試作

ひとまず現在ある素材(PCの立つ/座る・雑誌の立つ/座る)を利用し、一定時間毎に自動的に部屋の中を歩いて回るシステムを試作した。
<立つ・移動先をランダムで指定>→<移動>→<座る>→<アニメーションを開始>といった順序で動く。
PCと雑誌しか存在しないため種類を増やすとバグが生まれる可能性もないわけではないが、おそらくこれで問題なく動くはず。
現段階ではPC⇔雑誌をぐるぐる移動し、他のアニメーションに変えるためにはリロードボタンを押さなければならない。


前期の終わりでは全てを自動化した後はリロードボタンを消す予定だったが、その場合一定時間は同じ動作を見続けなくてはいけないため残しておいてもいいかもしれない。



2021.9.23

立つ/座るアニメーションの作成

昨日に引き続き、今日はベッドの上で雑誌を読んでいるものの立つ/座るアニメーションを作成。
処理の手間を省くため、手に持っていた雑誌を手に届く範囲(ベッドの上)に置いた。部屋が散らかってく。生活感がでていいね…ってことにしました。
明日ベッドの上の雑誌のpngを作る。
二日かけてアニメーションを作ってみたものの、これできちんと処理できるのかはわからないため近いうちに作ってみる必要あり。



2021.9.22

立つ/座るアニメーションの作成

リロードボタンを消すための自動化に必要な固定→移動の繋ぎのアニメーションの作成を開始。
今回はパソコンをしているものの立つ/座るのアニメーションを作成。
ゲームも同じ場所に座っているため一部複製できないかと思ったものの、座り方が違うため実現は難しそうだ。
ゲームと番組の切り替え用にテレビのリモコンを机の上に置いた方がいいかもしれない。



2021.9.20

女の子の手芸のアニメーションの作成

先日の線画を修正。のち着彩。
完成したGIFのプレビュー

バグの修正

併せてサイトのゲームをしているGIFと入れ替え、ゲーム画面を表示していたプログラム等を修正。



2021.9.19

女の子の手芸のアニメーションの作成

先日の原画をもとにアニメーションの線画を作成。明日着彩の予定。



2021.9.18

女の子の手芸のアニメーションの作成

原画を数枚だけ作成。未完成なため、完成し次第掲載。



2021.9.17

男の子の着彩の終了

着彩の途中だった歩いているアニメーションの着彩を完了。併せてサイトのGIFを差し替えた。

女の子の歩くアニメーションを作成

男の子のアニメーションをトレースする形で女の子の歩くアニメーションを作成。
併せてサイトに仮置きしていたものを差し替えた。



夏季休暇中の作業

2021.4.15〜2021.7.1

前期の卒業研究Iにて作成▷▷▷



2020.9.22〜2020.11.25

昨年度の情報デザイン研究IIにて作成▷▷▷



PAGES

GUIDE

添付ファイル: filecloset_b.png [詳細] filecloset_g.png 1件 [詳細] fileandasi.png 1件 [詳細]
Last-modified: 2021-10-15 (金) 05:12:10