LogoMark.png

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


Peep

Java Scriptによるアニメーションの実装


mainV.png










Overview

Introduction / What is This

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


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

Background and Purpose

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

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


Concept

Output

Tools

Term

2020.9.16 〜

Conclusion / Summary




Survey

Present Status

Precedent

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

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

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

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



Technique / Technology

必要な技法

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

Project Management

Schedule

スケジュール(作成中)

ToDo


worklog




2021.5.20

サイトの更新

背景・コンセプトを主に、サイトの埋めていない項目を埋めたりデザイン研究から変わった点の修正を行なったりした。



2021.5.19

プロジェクトの背景・コンセプト

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



2021.5.8

ズームイン/ズームアウト機能の作成

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



2021.5.7

面談

背景の方向性を相談
ターゲットをアニメや漫画を好きな女性に絞ることを検討。

バグの修正

先日見つけたテレビとパソコンの明るさのバグを修正。

レスポンシブの改善

画像サイズをpxで管理していたためモニターが大きい時に小さく表示されてしまっていたので、vhで管理する事でどのサイズにも対応できるようにした。



2021.5.6

サイトの更新

背景やコンセプト等を掲載していなかったため、ひとまず昨年の分(情報デザイン研究II)を転用した。
未だに背景の部分が曖昧になっているため思案が必要。

スケジュールの作成

ひとまず1ヶ月単位で作成しようとしたものの着地点が定まっていないため前半部分しか作成できていない。
最終的にどんなものを作るのか、どこまで作るのかを仮にでもいいので作成しなければいけない。



2021.5.5

レスポンシブデザインの修正

タイトル・時計・リロード/ヘルプボタンがスマホだと画面外に入ってしまっていたため、positionをfixedにし常に画面内に収まるようにした。

プログラムの修正

去年レスポンシブで変わる画像のサイズや位置を全てpx単位で作っていたらしく、それらを全て%に修正。
それにより現れたバグ(歩くモーションの位置のずれ等)を併せて修正。

バグの発見

2021.5.4

ヘルプ画面の実装

先日作成したデザインをサイトに実装した。

カーソルの変更

上記に併せてカーソルを変更。クリックできる箇所にホバーするとカーソルが変化するように。
パソコンでしかカーソルが表示させられないため、
スマホ用にデザインを作成しなければならない。

レスポンシブの作成

スマホでサイトを開くと縮小された状態で表示されていたため、等倍で表示されるように。
部屋の左上の方しか表示されないので、サイトを開いたタイミングに画面の中央に自動でスクロールするようにした。

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



2021.4.29

ヘルプ画面のデザイン作成

昨年に受講した情報デザイン研究IIにてヘルプ画面作成の予定を立てていたためデザインを作成。

help_rough.png












2021.4.21

模様替え機能の検討

大きく家具の位置を移動させることは厳しいものの、色を変えるだけであれば可能なため検討した。

color1.png
color2.png












2021.4.15

参考サイト探し

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

強いて言えばこのサイトが両方の要素を持ってるかもしれない。
Gegenbauer – transparent, einfach, digital

卒業研究でしたいことの書き出し

rough0415.png
















2020.9.22〜2020.11.25

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