猪本結衣/情報デザイン研究II
をテンプレートにして作成
HOME
ABOUT
最新の更新
2021
MEMBER 2021
青木暁光
石坂大翔
出光美心
岩崎貴生
岩下雄真
内尾颯太
江川珠貴
大中啓旦
亀田日向
川村洸太
木村円香
久保絢菜
倉員優実
桑原歩未
鴻上早紀
崔昊
佐光美憂
柴田一輝
竹谷匠冬
田籠祐貴
田代爽乃
内藤彩乃
西山実伶
濱有希子
濱田侑里
藤本唯人
松岡佑樹
松藤陽
村山陽菜
山田宗周
渡邊来美
渡辺侑貴
中西華子
原田朋奈
水田修太朗
宮副咲葉
猪須大翔
川面翔太
隈翔太
柴田葉月
角祐菜
豊岡壮大朗
吉井麻吏菜
2022
MEMBER 2022
棈松智也
梅木悠民
江頭奏
大井このか
大石颯
太田糸音
太田姫奈
越智楓
鎌田真幸
楠田佑月
興梠媛愛
後藤太成
坂井彩華
指方依緒
徐泰陽
杉野市之助
堤晴司
角田雄一
中井千尋
原朋恵
平嶋明日花
増田里奈
深町彩海
藤島早希
宮路咲希
梁井英翔
山口愛麗
山本彩花
松田葉奈
松本龍太郎
石松匡広
上田莉帆
宇田川春稀
宇美希美
佐野美和
竹之内咲希
土斐崎種定
野村優亜
福田千紗
山川彩香
山田侑加子
重松優花
2023
MEMBER 2023
秋月靖雅
浅田真優花
阿南慶子
荒谷唯斗
安藤貴仁
池邉成
井上大河
岩本愛結
梅﨑美和
浦朱里
江村梨里香
大場こころ
勝田喜一
亀崎瑞穂
神田舞
白井くるみ
髙市遥
竹松莉羽
寺田圭志
中村心香
原晴紀
菱谷実来
日山晃良
平崎千夏
福井涼
堀玲二
山口恵
早稲田加奈恵
渡邊優希
石井彩晶
大神槙之介
大熊玄樹
大山花音
岡萌絵子
荻野美咲
鐘ヶ江雅
金田桜子
北村美優香
清野梨果
高庄玲衣
津覇稜也
中川飛鳥
福屋早希乃
脇山千寛
2024
STAFF
専任教員一覧
伊藤敬生
井上貢一
井上友子
岩田敦之
桜井祐
永嶋さゆり
北島己佐吉
OBOG
2023年度卒業生
2022年度卒業生
2021年度卒業生
2020年度卒業生
2019年度卒業生
SESSION
専門科目一覧
ソーシャルデザイン概論
ソーシャルデザイン演習
情報デザイン演習IIA
情報デザイン演習IIB
地域ブランド企画演習IIA
地域ブランド企画演習IIB
視覚デザイン演習
Webデザイン演習
3DCG演習
情報デザイン研究I
地域ブランド企画研究I
卒業研究
教務ガイダンス
RecommendedVideo
BasicKnowledge
PROJECT
LINKS
SEARCH
開始行:
[[卒業研究にて続きを作成中 ▷▷▷>猪本結衣/卒業研究I]]
~
*Peep
Java Scriptによるアニメーションの実装
// ここに Main Visual
~
#image(mainV.png,left,100%)
~
~
~
~
~
-''[[猪本 結衣>猪本結衣]]''
-'''Keywords:Web Design, Java Script, Animation'''
-http://takearest.php.xdomain.jp/peep/
~
**Overview
~
***Introduction
//&color(red){これは何か? 簡潔に};
のんびり眺めるだけのサイト
*Peep…覗き見る
~
現状できること・見れるもの
-男の子(以下6種をランダムで表示)
--部屋を歩き回る
--パソコンをする
--雑誌を読む
--ゲームをする
--スマホをする
--寝る(夜0時〜6時は固定で寝てる)
~
-クリック処理
--扉横のスイッチ(部屋の照明のON/OFF)
--テレビ(電源のON/OFF)
--パソコン(電源のON/OFF)
--リロード(男の子の動作の再定義・部屋の照明を除き電源OFF)
~
-その他
--時間により空の色が変化(朝・昼・夕・夜)
~
***Background and Purpose
//&color(red){プロジェクトの背景と目的};
絵を描くのが好きでアニメーションを作る技術も多少あるので...
「ただ眺めるだけのサイト」はあまり見ない気がしたので作成...
訪れた方の暇つぶしになるサイトを作ることが目的。
~
***Concept
//基本的な考え方、枠組み、視点など
-暇な時にぼーっと眺めるサイト
少しでも誰かの癒しになればと作成。
~
//***Target
//&color(red){誰のために};
//息抜きしたい人(仮)
//~
***Output
//&color(red){成果物の形式・サイズ};
-[[Peep(http://takearest.php.xdomain.jp/peep/)>http://tak...
~
***Tools
//&color(red){使用する機材・ソフトウエア};
-Atom
-CLIP STUDIO PAINT
~
***Term
//&color(red){プロジェクトの期間};
2020.9.16 〜
~
~
**CurrentStatus
~
当初の目的通り「眺めるだけ」の「暇つぶしができる」サイト...
時間帯によって空の色が変わる点やそれに伴い部屋の照明を消...
またプロジェクトを初めてすぐにはなかった、干渉できる仕組...
まだ決定事項ではないが卒業制作で続きを作成することを考え...
~
~
**Survey
~
***Present Status
//現状調査、現状の問題の洗い出し
現状できること・見れるもの
-男の子(以下6種をランダムで表示)
--部屋を歩き回る
--パソコンをする
--雑誌を読む
--ゲームをする
--スマホをする
--寝る(夜0時〜6時は固定で寝てる)
~
-クリック処理
--扉横のスイッチ(部屋の照明のON/OFF)
--テレビ(電源のON/OFF)
--パソコン(電源のON/OFF)
--リロード(男の子の動作の再定義・部屋の照明を除き電源OFF)
~
-その他
--時間により空の色が変化(朝・昼・夕・夜)
~
問題点
-男の子の動作の種類が少ない。
-男の子の動作をリロードしないと切り替えられない。
-メインビジュアルのように色をちゃんとつけてやりたかったが...
~
~
***Precedent
//先行事例の紹介、傾向分析など
眺めることを目的にしたサイトを調べたところ、実際に撮影さ...
-[[ぼーっと沖縄>http://boot-okinawa.com]]
-[[WindowSwap>https://window-swap.com]]
~
レイアウトの参考
-[[こんなところに共和産業>https://www.kyowa-cab.co.jp/jp/...
-[[クイックオバケさん(Twitter)>https://twitter.com/Quic...
~
~
*** Technique / Technology
//プロジェクトの遂行に必要な技法・技術に関する調査
参考にしたサイトにてCreateJSが使われていたため勉強。
%%行き詰まり相談したところ別の方法を勧められたためそちら...
結局全く知らないCreateJSよりも多少知識のあるJavaScriptnの...
JavaScriptの勉強用に作成した試作品もせっかくなのでいくつ...
//まあもとよりCreateJSもJavaScriptも勉強し始めの知識量は...
-[[CreateJSの試作たち>http://takearest.php.xdomain.jp/cre...
~
~
**Project Management
~
//***Schedule
//&color(red){計画的な遂行のために、進行管理表を作成して...
//~
***ToDo
//&color(red){やるべきこと(タスク)を箇条書きにします。};
//&color(red){完了後は「%%取り消し線%%」あるいは「// コメ...
-男の子の動作の種類を増やす
-クリックした際のアクションを増やす
--種類を増やすための作画
-%%時計の実装%%
-%%夕方の実装%%
-%%背景画像の作成%%
-%%背景・ターゲットの練り込み%%
~
-%%CreateJSの勉強%%
--%%コマアニメーションの勉強%%
--%%画像の処理%%
-%%作成物の決定%%
~
~
~
#hr
CENTER:''worklog''
//&color(red){最新の情報を一番上に記載して下さい(古い記...
#hr
~
~
**2020.11.25
***面談
以下面談で上がった話のメモとその導入方法
-Aboutページを作ったら親切かもしれないので後日、または卒...
イメージとしては画面が暗くなったあと上に文字(白文字?)...
--Peepとは?(学科サイトのIntroductionやConceptから引用し...
--リロードボタンに矢印をつけて「リロード」って書いて見た...
---背景が暗くなっても押せるところは明るいまま、で説明文な...
「明るい場所はクリックできる場所です。押してみてください...
--画面を暗くするのは照明のON/OFFを応用すればいい?かも。...
---すでに暗いのを追加で暗くするには?
filter : brightness(' + dark + '%);
現状これで部屋の照明を変更しているのでdarkを(dark - about...
-男の子に直接干渉できると楽しいので卒制時に考える。
-男の子にちゃんと色をつけてやりたいのでこれも卒制時に。
~
~
**2020.11.24
***バグの修正
テレビがつかなくなってしまったため修正。
~
***バグの発見
[[CreateJSの試作たちのキーボード操作のページ>http://takea...
あくまで試作品で、かつ本来したかったキーボード操作に影響...
後日時間を見つけて修正したい。
~
~
**2020.11.23
***夕方の追加
時間によって背景や部屋の明るさが変わるプログラムに夕方を...
併せて夕方用の窓の画像を作成。
~
***男の子の種類の追加
スマホをいじっているものとゲームをしているもの・ゲームの...
~
***バグの修正
画面を縮めると画像が右にはみ出してスクロールできないバグ...
~
~
**2020.11.22
***リロードボタンの追加
サイトを開くたびにランダムで男の子の動作が変わるように作...
画像を多く使っていてリロードに少し時間を要してしまってい...
一度数値をリセットして再度ランダムに男の子を表示させるこ...
~
***時計を追加
時計用の数字を作成し、画面右下に時計を追加した。
~
~
**2020.11.21
***ランダム関数の実装
ランダム関数を利用し、
リロードするたびに男の子の動作が変わるようプログラムを作...
併せてパソコンを見ている時に画面がつくよう調整。
~
~
**2020.11.20
***サイトの軽量化
歩いているgifの正面・背面を不透明度で切り替えていたので、
htmlを書き換えるものに変更。
~
***夜寝るように
24時になると寝ているgifに切り替わるようプログラムを作成。
併せて部屋の電気が消えるようにした。
~
~
**2020.11.18
***部屋の電気の設定
部屋の照明をスイッチを押すことでon/offを切り替えられるよ...
~
~
**2020.11.17
***gifを書き出し
動きの確認用でしか書き出していなかったため、
サイトで扱えるよう色を単色でつけ背景を透過したものを作成。
本当はきちんと色をつけたものを使いたいが時間の関係で単色...
時間ができたら色をつけ再度書き出したいが怪しい。
また様子を見るために試しに全てサイトに設置した。
~
***窓の外の画像を作成
窓の外を作り忘れていたため作成。
こちらも時間に合わせて変わる。
~
***レスポンシブの作成
ウィンドウを最大にすると画像が小さくなってしまったため大...
ぐるぐる回っている男の子もきちんとレスポンシブデザインに...
スマホ用のデザインは作成できていない。
~
***背景の修正
部屋の淵が変に目立ってしまっていたので修正。
~
~
**2020.11.16
***パソコンとテレビの作成
テレビとパソコンをクリックしたら画面がつくようgifとプログ...
イメージはどうぶつの森。
~
~
**2020.11.15
***バグの修正
ウィンドウ幅を変えると背景は合わせて移動するが、
男の子が無視して歩き続けるバグが発生していたため修正。
~
~
**2020.11.14
***時間で動くプログラムの作成
時間に合わせて背景が変わるプログラムを作成。
朝、昼、夜を実装。
夕方を入れてもいいかもしれない。
~
~
**2020.11.11
***面談
以下面談で浮上した修正点
-部屋の淵の色が悪目立ちしている。
-グルグル歩く男の子のバグ。
~
~
**2020.11.8
***gifの作成
ベッドで眠っている男の子を作成
[[作成物>https://drive.google.com/file/d/1_ecQFRjcS3QCaBb...
~
***サイトのデザイン
左から順番に朝、昼、夜
時計のデザイン案1、2
[[高画質版>https://drive.google.com/drive/folders/1VgtlvP...
(メモ)男の子の色、作画コストを考えると単色でもいいのか...
背景が青系統なので赤系の色で色をつけたら目立つ。
時計は2つめの方が個人的に好き。
~
#image(asa.png,left,25%);
#image(hiru.png,left,25%);
#image(yoru.png,left,25%);
#image(clock1.png,left,25%);
#image(clock2.png,left,25%);
~
~
~
~
~
~
~
~
**2020.11.3
***gifの作成
パソコンを扱ってる男の子のgifを作成
[[作成物>https://drive.google.com/file/d/1Xsx9MvYKybwiI7x...
~
~
**2020.11.2
***gifの作成
メインビジュアルの絵のgifをまだ作成していなかったので作成。
[[作成物>https://drive.google.com/file/d/1OAeD9afQBrWjipO...
~
~
**2020.11.1
***サイトのデザイン
-白い背景では少し絵が弱い気がしたので先行事例を収集。
--[[トコトコネコパズル>http://unico-inc.jp/app/tokotoko/]...
--[[源氏物語>https://www.google.com/search?q=%E6%BA%90%E6...
--[[箱庭>https://www.google.com/search?q=%E7%AE%B1%E5%BA%...
トコトコネコパズルのようなものが個人的には好きだが、
Peepでそのまま使うと少しくどい?ような気がする。
あとこれは屋外のゲームのため室内にする場合そのまま参考に...
源氏物語の絵を以前紹介してもらったがいまいちピンと来なか...
Peepを考え始めた一番最初の構想としてはこの箱庭のようなも...
実際に描いた部屋の背景が白めなせいで絵が弱く見えてしまっ...
色味を変えてもっと小物を増やせば良くなるだろうか。
~
-歩き回るプログラム
--自動で歩き回るプログラム
--移動に伴う画像の重なる順番の入れ替え
--動作の変更による男の子のgifの切り替え
以上3点ができるようにひとまず机の周りをグルグル歩き回るプ...
http://takearest.php.xdomain.jp/create/walk2/walk.html
~
~
**2020.10.27
***時計の作成
-部屋の中に時計を置きたかったので勉強。
http://takearest.php.xdomain.jp/create/clock/clock.html
~
~
**2020.10.25
***アニメーションの作画
以前こちら側に歩いてくるgifは作成したため、あちら側に歩く...
こちらも色はまだつけていない。
[[作成物>https://drive.google.com/file/d/1uMyHwilp8BP4M39...
~
~
**2020.10.23
***JavaScriptの勉強
-画像の移動処理をあまり把握できていなかったため勉強。
[[以前頂いてたサンプル>https://design.kyusan-u.ac.jp/Open...
ただ時間が足りず一から自分で組めなかったため今度時間を見...
~
~
**2020.10.21
***中間発表
-以下発表にて浮上した課題等のメモ
--Webサイトのデザイン決めを早くしないといけない。
--また時間によって部屋の明るさを変えたり行動パターンを変...
難しそうであればボタンを設置しそれで時間を変えられるよう...
--クリックやキーボードでテレビやパソコンの画面をオンオフ...
--テレビやパソコンだけでなく他のものも考えてみる。
~
~
**2020.10.20
***歩くモーションの組み込み
先日作成した歩くアニメーションをサイト上で動くよう作成。
キーボードの十字キーで動くが実物は自動で動かすため要勉強。
-[[http://takearest.php.xdomain.jp/peep>http://takearest....
-メインビジュアルの作成
当サイト上部に掲載するメインビジュアル用の画像を作成。
~
~
**2020.10.17
***歩くモーションの作成
ひとまず線画のみで歩くアニメーションを作成。
後日様子を見ながら色をつけていく予定。
[[作成物>https://drive.google.com/file/d/17D1HTD4dkB5eVTh...
~
~
**2020.10.13
#image(bg2.png,right,20%);
***背景の描き込み
-背景を描きこんだ。
10日時点では背景に線画を使う予定はなかったが試しに入れて...
小物をもっと増やしたい。ティッシュとかテレビのリモコンと...
手前がスカスカなので何か入れたい。
猫飼わせる?作画コストが大幅に上がってしまうので余裕がで...
[[高画質版>https://drive.google.com/file/d/1NYsaBYREc4uQ7...
-作画中にいくつか浮かんだアイデアメモ
--ベッドに目覚まし時計を置いてクリックしたら鳴る→男の子が...
--部屋の照明のスイッチをクリック→電気が消える
自分の技術的に実装できるかはわからないため、ひとまず保留。
全て作成が終わり余裕があれば作成予定。
-peepで検索をかけたところ人工呼吸?とアプリがヒット。
タイトル変えた方がいいかもしれない。
~
~
**2020.10.11
#image(chara.png,right,20%);
***キャラクターの作成
-キャラクターのデザインや配色を作成
当初女の子で考えていたが髪の動き等作画コストが大きいため...
アニメーションの作画に想像以上の時間がかかる気配がする。
[[高画質版>https://drive.google.com/file/d/16CnVG7SVruSuP...
~
~
**2020.10.10
#image(bg1.png,right,20%);
***背景画像の作成
-ラフ程度のものを作成
家具の位置や間取りが決まらないため苦戦中。
[[高画質版>https://drive.google.com/file/d/1cxEbygVKTJtpz...
~
~
**2020.10.9
***参考サイトの収集
-[[アイソメトリックイラストを使用したサイト>https://ligin...
https://twitter.com/QuickObake/status/1310174687876456451...
2個目のリンクのような雰囲気のものを作成したい。
~
~
**2020.10,7
#image(rough.png,right,20%);
***面談
-現在考えている方向で良さそうなので続行
-ラフの作成
現在右上2つのような家の中で構想中。
[[高画質版>https://drive.google.com/file/d/14U6uFkpcBqyC8...
~
~
**2020.10.6
***タイトル等の設定
-(仮)でタイトルやイントロダクションを設定。
ターゲットや背景がまだ固まっていないため早く考えないとい...
~
~
**2020.10.3
***JavaScriptの勉強
-以前面談の時に紹介してもらったサイト([[https://design.k...
このサイト内のコードと仕組みに関してはある程度把握できた...
これを応用して画像をパラパラ漫画の要領で動かしたいが、画...
~
~
**2020.9.29
***試作のアップロード・CreateJSの勉強(コマアニメーション)
-今までのcreateJSの勉強をする際に作ったものをまとめたサイ...
メモ的な用途を想定。
[[CreateJSの試作たち>http://takearest.php.xdomain.jp/crea...
~
-先日のサイト([[Canvasで連番画像をコマアニメーション>htt...
よく見たらcanvasを用いたものでCreateJSでなかったためもう...
[[PreloadJSをつかって画像をプリロードする>https://kimizuk...
コピペしたところきちんと動作したものの、どういった仕組み...
~
~
**2020.9.27
***作りたいもののイメージ
-たまたま見つけたツイートが作りたいイメージに近かったため...
定点カメラから眺めるイメージ
https://twitter.com/QuickObake/status/1310174687876456451...
~
~
**2020.9.26
***CreateJSの勉強(画像の導入・アニメーション)
-最初の方に見つけたサイト([[cly7796.net CreateJSを使って...
~
-画像をパラパラ漫画の要領で動かす方法を調べたものの目当て...
それに近い?サイトは見つけたが、連番の画像を動かすような...
[[IT工房 HTML5 canvasを使用してみる>https://itstudio.co/...
~
-オブジェクトの削除([[CreateJSで表示オブジェクトを削除す...
ただしやたらコードが長くなったためやはりきちんとした方法...
--追記:それらしいサイトを発見したものの時間がなかったた...
ただ記事が4年前のもののため動くかはわからない。
[[Canvasで連番画像をコマアニメーション>https://kimizuka.h...
~
-上記の無理やり作成したアニメーションに移動の処理を施すた...
親子構造を用いる必要があったため勉強。
[[CreateJSの表示オブジェクトの親子構造>https://ics.media/...
~
~
**2020.9.25
***CreateJSの勉強(導入〜簡単な動作)
-先日見つけたサイト([[cly7796.net CreateJSを使ってみる>h...
恐らくオブジェクトを右から左に…のような簡単な動きの応用を...
その部分だけでも自分で理解して組めるようになることを目標...
~
-CreateJSについて調べていたらクリック処理について出てきた...
きちんと動かすことができたため何かに応用したい。未定。
[[CreateJSのクリック処理の実施方法>https://ics.media/tuto...
[[CreateJSのドラッグ&ドロップの実施方法>https://ics.medi...
~
~
**2020.9.23
***面談
-22日に出したアイデアの後者([[参考サイト>https://www.kyo...
CreateJSを使うといいとのアドバイスを頂いたが全く触ったこ...
~
-空き時間が少しあったため試しにCreateJSを調べた。
まだよくわからないため腰を据えて勉強しなくてはいけない。
[[CreateJSホームページ>https://www.createjs.com]]
[[CreateJS入門サイト>https://ics.media/tutorial-createjs/]]
[[cly7796.net CreateJSを使ってみる>http://cly7796.net/wp/...
~
~
**2020.9.22
***資料集め・アイデア出し
-http://web-media.blue-puddle.com
以前見つけた好きなサイトを発掘
こういう系統の変わったサイトを作るのも楽しいかも知れない
~
-https://www.kyowa-cab.co.jp/jp/animation/
こういう雰囲気で、時間によって景色が変わるサイト
Webサイトである必要性は?
眺めるだけか何か要素を足すべきか、要検討
~
~
~
~
//http://design.kyusan-u.ac.jp/socialdesign/index.php?cmd...
終了行:
[[卒業研究にて続きを作成中 ▷▷▷>猪本結衣/卒業研究I]]
~
*Peep
Java Scriptによるアニメーションの実装
// ここに Main Visual
~
#image(mainV.png,left,100%)
~
~
~
~
~
-''[[猪本 結衣>猪本結衣]]''
-'''Keywords:Web Design, Java Script, Animation'''
-http://takearest.php.xdomain.jp/peep/
~
**Overview
~
***Introduction
//&color(red){これは何か? 簡潔に};
のんびり眺めるだけのサイト
*Peep…覗き見る
~
現状できること・見れるもの
-男の子(以下6種をランダムで表示)
--部屋を歩き回る
--パソコンをする
--雑誌を読む
--ゲームをする
--スマホをする
--寝る(夜0時〜6時は固定で寝てる)
~
-クリック処理
--扉横のスイッチ(部屋の照明のON/OFF)
--テレビ(電源のON/OFF)
--パソコン(電源のON/OFF)
--リロード(男の子の動作の再定義・部屋の照明を除き電源OFF)
~
-その他
--時間により空の色が変化(朝・昼・夕・夜)
~
***Background and Purpose
//&color(red){プロジェクトの背景と目的};
絵を描くのが好きでアニメーションを作る技術も多少あるので...
「ただ眺めるだけのサイト」はあまり見ない気がしたので作成...
訪れた方の暇つぶしになるサイトを作ることが目的。
~
***Concept
//基本的な考え方、枠組み、視点など
-暇な時にぼーっと眺めるサイト
少しでも誰かの癒しになればと作成。
~
//***Target
//&color(red){誰のために};
//息抜きしたい人(仮)
//~
***Output
//&color(red){成果物の形式・サイズ};
-[[Peep(http://takearest.php.xdomain.jp/peep/)>http://tak...
~
***Tools
//&color(red){使用する機材・ソフトウエア};
-Atom
-CLIP STUDIO PAINT
~
***Term
//&color(red){プロジェクトの期間};
2020.9.16 〜
~
~
**CurrentStatus
~
当初の目的通り「眺めるだけ」の「暇つぶしができる」サイト...
時間帯によって空の色が変わる点やそれに伴い部屋の照明を消...
またプロジェクトを初めてすぐにはなかった、干渉できる仕組...
まだ決定事項ではないが卒業制作で続きを作成することを考え...
~
~
**Survey
~
***Present Status
//現状調査、現状の問題の洗い出し
現状できること・見れるもの
-男の子(以下6種をランダムで表示)
--部屋を歩き回る
--パソコンをする
--雑誌を読む
--ゲームをする
--スマホをする
--寝る(夜0時〜6時は固定で寝てる)
~
-クリック処理
--扉横のスイッチ(部屋の照明のON/OFF)
--テレビ(電源のON/OFF)
--パソコン(電源のON/OFF)
--リロード(男の子の動作の再定義・部屋の照明を除き電源OFF)
~
-その他
--時間により空の色が変化(朝・昼・夕・夜)
~
問題点
-男の子の動作の種類が少ない。
-男の子の動作をリロードしないと切り替えられない。
-メインビジュアルのように色をちゃんとつけてやりたかったが...
~
~
***Precedent
//先行事例の紹介、傾向分析など
眺めることを目的にしたサイトを調べたところ、実際に撮影さ...
-[[ぼーっと沖縄>http://boot-okinawa.com]]
-[[WindowSwap>https://window-swap.com]]
~
レイアウトの参考
-[[こんなところに共和産業>https://www.kyowa-cab.co.jp/jp/...
-[[クイックオバケさん(Twitter)>https://twitter.com/Quic...
~
~
*** Technique / Technology
//プロジェクトの遂行に必要な技法・技術に関する調査
参考にしたサイトにてCreateJSが使われていたため勉強。
%%行き詰まり相談したところ別の方法を勧められたためそちら...
結局全く知らないCreateJSよりも多少知識のあるJavaScriptnの...
JavaScriptの勉強用に作成した試作品もせっかくなのでいくつ...
//まあもとよりCreateJSもJavaScriptも勉強し始めの知識量は...
-[[CreateJSの試作たち>http://takearest.php.xdomain.jp/cre...
~
~
**Project Management
~
//***Schedule
//&color(red){計画的な遂行のために、進行管理表を作成して...
//~
***ToDo
//&color(red){やるべきこと(タスク)を箇条書きにします。};
//&color(red){完了後は「%%取り消し線%%」あるいは「// コメ...
-男の子の動作の種類を増やす
-クリックした際のアクションを増やす
--種類を増やすための作画
-%%時計の実装%%
-%%夕方の実装%%
-%%背景画像の作成%%
-%%背景・ターゲットの練り込み%%
~
-%%CreateJSの勉強%%
--%%コマアニメーションの勉強%%
--%%画像の処理%%
-%%作成物の決定%%
~
~
~
#hr
CENTER:''worklog''
//&color(red){最新の情報を一番上に記載して下さい(古い記...
#hr
~
~
**2020.11.25
***面談
以下面談で上がった話のメモとその導入方法
-Aboutページを作ったら親切かもしれないので後日、または卒...
イメージとしては画面が暗くなったあと上に文字(白文字?)...
--Peepとは?(学科サイトのIntroductionやConceptから引用し...
--リロードボタンに矢印をつけて「リロード」って書いて見た...
---背景が暗くなっても押せるところは明るいまま、で説明文な...
「明るい場所はクリックできる場所です。押してみてください...
--画面を暗くするのは照明のON/OFFを応用すればいい?かも。...
---すでに暗いのを追加で暗くするには?
filter : brightness(' + dark + '%);
現状これで部屋の照明を変更しているのでdarkを(dark - about...
-男の子に直接干渉できると楽しいので卒制時に考える。
-男の子にちゃんと色をつけてやりたいのでこれも卒制時に。
~
~
**2020.11.24
***バグの修正
テレビがつかなくなってしまったため修正。
~
***バグの発見
[[CreateJSの試作たちのキーボード操作のページ>http://takea...
あくまで試作品で、かつ本来したかったキーボード操作に影響...
後日時間を見つけて修正したい。
~
~
**2020.11.23
***夕方の追加
時間によって背景や部屋の明るさが変わるプログラムに夕方を...
併せて夕方用の窓の画像を作成。
~
***男の子の種類の追加
スマホをいじっているものとゲームをしているもの・ゲームの...
~
***バグの修正
画面を縮めると画像が右にはみ出してスクロールできないバグ...
~
~
**2020.11.22
***リロードボタンの追加
サイトを開くたびにランダムで男の子の動作が変わるように作...
画像を多く使っていてリロードに少し時間を要してしまってい...
一度数値をリセットして再度ランダムに男の子を表示させるこ...
~
***時計を追加
時計用の数字を作成し、画面右下に時計を追加した。
~
~
**2020.11.21
***ランダム関数の実装
ランダム関数を利用し、
リロードするたびに男の子の動作が変わるようプログラムを作...
併せてパソコンを見ている時に画面がつくよう調整。
~
~
**2020.11.20
***サイトの軽量化
歩いているgifの正面・背面を不透明度で切り替えていたので、
htmlを書き換えるものに変更。
~
***夜寝るように
24時になると寝ているgifに切り替わるようプログラムを作成。
併せて部屋の電気が消えるようにした。
~
~
**2020.11.18
***部屋の電気の設定
部屋の照明をスイッチを押すことでon/offを切り替えられるよ...
~
~
**2020.11.17
***gifを書き出し
動きの確認用でしか書き出していなかったため、
サイトで扱えるよう色を単色でつけ背景を透過したものを作成。
本当はきちんと色をつけたものを使いたいが時間の関係で単色...
時間ができたら色をつけ再度書き出したいが怪しい。
また様子を見るために試しに全てサイトに設置した。
~
***窓の外の画像を作成
窓の外を作り忘れていたため作成。
こちらも時間に合わせて変わる。
~
***レスポンシブの作成
ウィンドウを最大にすると画像が小さくなってしまったため大...
ぐるぐる回っている男の子もきちんとレスポンシブデザインに...
スマホ用のデザインは作成できていない。
~
***背景の修正
部屋の淵が変に目立ってしまっていたので修正。
~
~
**2020.11.16
***パソコンとテレビの作成
テレビとパソコンをクリックしたら画面がつくようgifとプログ...
イメージはどうぶつの森。
~
~
**2020.11.15
***バグの修正
ウィンドウ幅を変えると背景は合わせて移動するが、
男の子が無視して歩き続けるバグが発生していたため修正。
~
~
**2020.11.14
***時間で動くプログラムの作成
時間に合わせて背景が変わるプログラムを作成。
朝、昼、夜を実装。
夕方を入れてもいいかもしれない。
~
~
**2020.11.11
***面談
以下面談で浮上した修正点
-部屋の淵の色が悪目立ちしている。
-グルグル歩く男の子のバグ。
~
~
**2020.11.8
***gifの作成
ベッドで眠っている男の子を作成
[[作成物>https://drive.google.com/file/d/1_ecQFRjcS3QCaBb...
~
***サイトのデザイン
左から順番に朝、昼、夜
時計のデザイン案1、2
[[高画質版>https://drive.google.com/drive/folders/1VgtlvP...
(メモ)男の子の色、作画コストを考えると単色でもいいのか...
背景が青系統なので赤系の色で色をつけたら目立つ。
時計は2つめの方が個人的に好き。
~
#image(asa.png,left,25%);
#image(hiru.png,left,25%);
#image(yoru.png,left,25%);
#image(clock1.png,left,25%);
#image(clock2.png,left,25%);
~
~
~
~
~
~
~
~
**2020.11.3
***gifの作成
パソコンを扱ってる男の子のgifを作成
[[作成物>https://drive.google.com/file/d/1Xsx9MvYKybwiI7x...
~
~
**2020.11.2
***gifの作成
メインビジュアルの絵のgifをまだ作成していなかったので作成。
[[作成物>https://drive.google.com/file/d/1OAeD9afQBrWjipO...
~
~
**2020.11.1
***サイトのデザイン
-白い背景では少し絵が弱い気がしたので先行事例を収集。
--[[トコトコネコパズル>http://unico-inc.jp/app/tokotoko/]...
--[[源氏物語>https://www.google.com/search?q=%E6%BA%90%E6...
--[[箱庭>https://www.google.com/search?q=%E7%AE%B1%E5%BA%...
トコトコネコパズルのようなものが個人的には好きだが、
Peepでそのまま使うと少しくどい?ような気がする。
あとこれは屋外のゲームのため室内にする場合そのまま参考に...
源氏物語の絵を以前紹介してもらったがいまいちピンと来なか...
Peepを考え始めた一番最初の構想としてはこの箱庭のようなも...
実際に描いた部屋の背景が白めなせいで絵が弱く見えてしまっ...
色味を変えてもっと小物を増やせば良くなるだろうか。
~
-歩き回るプログラム
--自動で歩き回るプログラム
--移動に伴う画像の重なる順番の入れ替え
--動作の変更による男の子のgifの切り替え
以上3点ができるようにひとまず机の周りをグルグル歩き回るプ...
http://takearest.php.xdomain.jp/create/walk2/walk.html
~
~
**2020.10.27
***時計の作成
-部屋の中に時計を置きたかったので勉強。
http://takearest.php.xdomain.jp/create/clock/clock.html
~
~
**2020.10.25
***アニメーションの作画
以前こちら側に歩いてくるgifは作成したため、あちら側に歩く...
こちらも色はまだつけていない。
[[作成物>https://drive.google.com/file/d/1uMyHwilp8BP4M39...
~
~
**2020.10.23
***JavaScriptの勉強
-画像の移動処理をあまり把握できていなかったため勉強。
[[以前頂いてたサンプル>https://design.kyusan-u.ac.jp/Open...
ただ時間が足りず一から自分で組めなかったため今度時間を見...
~
~
**2020.10.21
***中間発表
-以下発表にて浮上した課題等のメモ
--Webサイトのデザイン決めを早くしないといけない。
--また時間によって部屋の明るさを変えたり行動パターンを変...
難しそうであればボタンを設置しそれで時間を変えられるよう...
--クリックやキーボードでテレビやパソコンの画面をオンオフ...
--テレビやパソコンだけでなく他のものも考えてみる。
~
~
**2020.10.20
***歩くモーションの組み込み
先日作成した歩くアニメーションをサイト上で動くよう作成。
キーボードの十字キーで動くが実物は自動で動かすため要勉強。
-[[http://takearest.php.xdomain.jp/peep>http://takearest....
-メインビジュアルの作成
当サイト上部に掲載するメインビジュアル用の画像を作成。
~
~
**2020.10.17
***歩くモーションの作成
ひとまず線画のみで歩くアニメーションを作成。
後日様子を見ながら色をつけていく予定。
[[作成物>https://drive.google.com/file/d/17D1HTD4dkB5eVTh...
~
~
**2020.10.13
#image(bg2.png,right,20%);
***背景の描き込み
-背景を描きこんだ。
10日時点では背景に線画を使う予定はなかったが試しに入れて...
小物をもっと増やしたい。ティッシュとかテレビのリモコンと...
手前がスカスカなので何か入れたい。
猫飼わせる?作画コストが大幅に上がってしまうので余裕がで...
[[高画質版>https://drive.google.com/file/d/1NYsaBYREc4uQ7...
-作画中にいくつか浮かんだアイデアメモ
--ベッドに目覚まし時計を置いてクリックしたら鳴る→男の子が...
--部屋の照明のスイッチをクリック→電気が消える
自分の技術的に実装できるかはわからないため、ひとまず保留。
全て作成が終わり余裕があれば作成予定。
-peepで検索をかけたところ人工呼吸?とアプリがヒット。
タイトル変えた方がいいかもしれない。
~
~
**2020.10.11
#image(chara.png,right,20%);
***キャラクターの作成
-キャラクターのデザインや配色を作成
当初女の子で考えていたが髪の動き等作画コストが大きいため...
アニメーションの作画に想像以上の時間がかかる気配がする。
[[高画質版>https://drive.google.com/file/d/16CnVG7SVruSuP...
~
~
**2020.10.10
#image(bg1.png,right,20%);
***背景画像の作成
-ラフ程度のものを作成
家具の位置や間取りが決まらないため苦戦中。
[[高画質版>https://drive.google.com/file/d/1cxEbygVKTJtpz...
~
~
**2020.10.9
***参考サイトの収集
-[[アイソメトリックイラストを使用したサイト>https://ligin...
https://twitter.com/QuickObake/status/1310174687876456451...
2個目のリンクのような雰囲気のものを作成したい。
~
~
**2020.10,7
#image(rough.png,right,20%);
***面談
-現在考えている方向で良さそうなので続行
-ラフの作成
現在右上2つのような家の中で構想中。
[[高画質版>https://drive.google.com/file/d/14U6uFkpcBqyC8...
~
~
**2020.10.6
***タイトル等の設定
-(仮)でタイトルやイントロダクションを設定。
ターゲットや背景がまだ固まっていないため早く考えないとい...
~
~
**2020.10.3
***JavaScriptの勉強
-以前面談の時に紹介してもらったサイト([[https://design.k...
このサイト内のコードと仕組みに関してはある程度把握できた...
これを応用して画像をパラパラ漫画の要領で動かしたいが、画...
~
~
**2020.9.29
***試作のアップロード・CreateJSの勉強(コマアニメーション)
-今までのcreateJSの勉強をする際に作ったものをまとめたサイ...
メモ的な用途を想定。
[[CreateJSの試作たち>http://takearest.php.xdomain.jp/crea...
~
-先日のサイト([[Canvasで連番画像をコマアニメーション>htt...
よく見たらcanvasを用いたものでCreateJSでなかったためもう...
[[PreloadJSをつかって画像をプリロードする>https://kimizuk...
コピペしたところきちんと動作したものの、どういった仕組み...
~
~
**2020.9.27
***作りたいもののイメージ
-たまたま見つけたツイートが作りたいイメージに近かったため...
定点カメラから眺めるイメージ
https://twitter.com/QuickObake/status/1310174687876456451...
~
~
**2020.9.26
***CreateJSの勉強(画像の導入・アニメーション)
-最初の方に見つけたサイト([[cly7796.net CreateJSを使って...
~
-画像をパラパラ漫画の要領で動かす方法を調べたものの目当て...
それに近い?サイトは見つけたが、連番の画像を動かすような...
[[IT工房 HTML5 canvasを使用してみる>https://itstudio.co/...
~
-オブジェクトの削除([[CreateJSで表示オブジェクトを削除す...
ただしやたらコードが長くなったためやはりきちんとした方法...
--追記:それらしいサイトを発見したものの時間がなかったた...
ただ記事が4年前のもののため動くかはわからない。
[[Canvasで連番画像をコマアニメーション>https://kimizuka.h...
~
-上記の無理やり作成したアニメーションに移動の処理を施すた...
親子構造を用いる必要があったため勉強。
[[CreateJSの表示オブジェクトの親子構造>https://ics.media/...
~
~
**2020.9.25
***CreateJSの勉強(導入〜簡単な動作)
-先日見つけたサイト([[cly7796.net CreateJSを使ってみる>h...
恐らくオブジェクトを右から左に…のような簡単な動きの応用を...
その部分だけでも自分で理解して組めるようになることを目標...
~
-CreateJSについて調べていたらクリック処理について出てきた...
きちんと動かすことができたため何かに応用したい。未定。
[[CreateJSのクリック処理の実施方法>https://ics.media/tuto...
[[CreateJSのドラッグ&ドロップの実施方法>https://ics.medi...
~
~
**2020.9.23
***面談
-22日に出したアイデアの後者([[参考サイト>https://www.kyo...
CreateJSを使うといいとのアドバイスを頂いたが全く触ったこ...
~
-空き時間が少しあったため試しにCreateJSを調べた。
まだよくわからないため腰を据えて勉強しなくてはいけない。
[[CreateJSホームページ>https://www.createjs.com]]
[[CreateJS入門サイト>https://ics.media/tutorial-createjs/]]
[[cly7796.net CreateJSを使ってみる>http://cly7796.net/wp/...
~
~
**2020.9.22
***資料集め・アイデア出し
-http://web-media.blue-puddle.com
以前見つけた好きなサイトを発掘
こういう系統の変わったサイトを作るのも楽しいかも知れない
~
-https://www.kyowa-cab.co.jp/jp/animation/
こういう雰囲気で、時間によって景色が変わるサイト
Webサイトである必要性は?
眺めるだけか何か要素を足すべきか、要検討
~
~
~
~
//http://design.kyusan-u.ac.jp/socialdesign/index.php?cmd...
ページ名: