LogoMark.png

猪本結衣/卒業研究I

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

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

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

Technique / Technology




Project Management

Schedule

スケジュール(作成中)

ToDo


worklog




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




















PAGES

GUIDE

添付ファイル: filehelp_rough.png 2件 [詳細] filecolor1.png 19件 [詳細] filecolor2.png 12件 [詳細] filerough0415.png 38件 [詳細]
Last-modified: 2021-05-06 (木) 19:29:58