LogoMark.png

猪本結衣/卒業研究II

アンケートを実施中

Peepがどれだけコンセプト通りに作成できているか等の調査を目的としたアンケートです。
ご協力のほどよろしくお願いします。
アンケート回答用のリンク





Peep

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


mainV.png










Overview

Introduction / What is This

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


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

Background and Purpose

ネットやテレビと短時間に多くの情報を浴びる機会の多い現代。
確かにたくさんの情報を受け取ることも大事だが、そればかりだと疲れてしまう。
「焚き火を眺めるだけ」のような動画が流行ったことから何も情報を受け取らない、ぼーっとする時間も大切だと考えた。
ターゲットは、特にネットやテレビを扱う機会が多いであろう若い人たち。
イラストやアニメーションを用いることでそういった人たちに親しみやすいサイトを目指す。


Concept

大量の情報を浴び続ける現代の人たちにゆとりを提供できるようなサイト。
ターゲットは情報を特に多く受ける機会の多い若い人たち。
そういった方々に受け入れてもらいやすいイラストやアニメーションを使用する。

Output

Tools

Term

2020.9.16 〜





Conclusion / Summary




Survey

Present Status



参考

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

Precedent

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

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

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

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



Technique / Technology

必要な技法

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

Project Management

Schedule

スケジュール(作成中)

ToDo

(※はあわよくばしたい、くらいのもの)



worklog




2021.10.21

サーバーの移動

昨日から時間をおいてサイトにアクセスしたものの改善されなかった。
それどころか以前に作成して当時はきちんと動いていたはずの別のサイトも開かれなかったため、xFreeとFireFoxは相性が悪い?のかもしれない。
xFreeのサーバーからアップすると広告がついてしまうという問題点もあったため、以前から考えていたサーバーの移動を実施した。
GitHubにアカウントを作成。アップロードの方法を調べつつサーバーを移動することに成功した。
移動前(xFree)http://takearest.php.xdomain.jp/peep/
移動先(GitHub)https://takearest1.github.io/peep/
参考にしたサイト自分で作ったWebページをインターネット上に公開しよう! | プログラミングの入門なら基礎から学べるProgate[プロゲート]
後日元のページリンクから新規のリンクに飛ぶプログラムを作成予定。



2021.10.20

天気の導入

昨日に引き続き天気を導入。
くもりの窓を作画し、背景同様雨が窓を伝うGIFを重ねて雨の画面を作成した。

概要の作成

前期の概要のファーストビュー等に使用していた画像を最新のものに差し替えた。

アンケートの回答確認

バグ?の確認

2021.10.19

天気の作成

以前に試作していたものをPeepに組み込んだ。
利用したjsonにどう言う名前で登録されているのかわからないため、現状反映できるのは晴れ・くもり・雨。
それ以外の天気が出た際にバグってしまうため要修正。
天気の反映に伴いくもり・雨の背景色を、時間ごとに切り替わる背景の色を元に彩度を落とした色に決めた。
雨はくもりの背景をベースに雨が降っているGIFを重ねることで作成。
明日は天気に合わせた窓の作画を予定。

2021.10.17

アンケートの設置

昨日作成したアンケートを学科サイトのトップに設置。
併せて当ページのトップにも設置した。



2021.10.16

アンケートの修正

先日いただいたアドバイスを元にアンケートを作り込んだ。
時間が遅かったため明日設置予定。



2021.10.15

開閉するプログラムの作成

先日作成したクローゼットとカーテンのGIFをサイトに実装。
クリックすることでGIFが入れ替わり開閉できる。

面談

忘れないうちに頂いたアドバイスや意見をメモしておく。

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 4件 [詳細] filecloset_g.png 4件 [詳細] fileandasi.png 4件 [詳細]
Last-modified: 2021-10-21 (木) 19:19:35