猪本結衣/卒業研究I
をテンプレートにして作成
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
開始行:
*Peep
JavaScriptを使用した誰かの癒しになるサイトの作成
// ここに Main Visual
~
#image(猪本結衣/情報デザイン研究II/mainV.png,left,100%)
~
~
~
~
~
-''[[猪本 結衣>猪本結衣]]''
-'''Keywords:Web Design, Java Script, Animation'''
-http://takearest.php.xdomain.jp/peep/
~
**Overview
***Introduction / What is This
//&color(red){これは何か・・を簡潔に};
のんびり眺めるサイト
*Peep…覗き見る
~
現状できること・見れるもの
-男の子(以下6種をランダムで表示)
--部屋を歩き回る
--パソコンをする
--雑誌を読む
--ゲームをする
--スマホをする
--寝る(夜0時〜6時は固定で寝てる)
~
-クリック処理
--扉横のスイッチ(部屋の照明のON/OFF)
--テレビ(電源のON/OFF)
--パソコン(電源のON/OFF)
--リロード(男の子の動作の再定義・部屋の照明を除き電源OFF)
--ヘルプ(このサイトについて)
--拡大/縮小
~
-その他
--時間により空の色が変化(朝・昼・夕・夜)
--カーソルの変化(クリックできる箇所にホバーでカーソルが...
--サイトにアクセス時、画像よりもウィンドウ幅が小さいと自...
~
***Background and Purpose
//&color(red){プロジェクトの背景と目的};
//絵を描くのが好きでアニメーションを作る技術も多少あるの...
ネットやテレビと短時間に多くの情報を浴びる機会の多い現代。
確かにたくさんの情報を受け取ることも大事だが、そればかり...
何も情報を受け取らない、ぼーっとする時間も大切だと考えた。
ターゲットは、ネットやテレビを扱う機会が多いであろうアニ...
イラストやアニメーションを用いることでそういった人たちに...
~
***Concept
//&color(red){基本的な考え方、枠組み、視点など};
-ぼーっと眺めるサイト
少しでも誰かの癒しになればと作成。
~
***Output
//&color(red){成果物の直接掲載またはリンク誘導};
//&color(red){&small(プロジェクトの途上では、試作品等、視...
//&color(red){&small(成果物の形式・サイズ・時間尺等の基本...
-[[Peep(http://takearest.php.xdomain.jp/peep/)>http://tak...
~
***Tools
//&color(red){使用するツール|ハードウエア・ソフトウエア};
-Atom
-CLIP STUDIO PAINT
~
***Term
//&color(red){プロジェクトの期間|20XX.XX.XX - 20XX.XX.XX...
2020.9.16 〜
~
***Plan
-男の子の色を付ける。
-現時点では左下のリロードボタン、もしくはサイトのリロード...
-背景に天気を入れたい。
-女の子を追加
--男の子のモーションとほとんど同じにする予定だが、一部だ...
(ゲームをしてるモーション→化粧するモーション など。何に...
--リロードボタンが消えるので、男の子に切り替えるボタンを...
--軽量化したいため、画像を切り替えるのではなくリンクを移...
~
#image(girl_demo.png,left,40%)
~
~
~
~
~
~
***Conclusion / Summary
//&color(red){プロジェクトが完結したら「まとめ」を記載し...
~
~
**Survey
***Present Status
//&color(red){現状調査、現状の問題の洗い出し};
-昨今、短時間に受け取る情報量が多い。(TwitterやTikTok、T...
~
参考
-[[総務省|令和2年版 情報通信白書|主なメディアの利用時間...
-「ドヤ顔で語れるちょっとした小ネタ」として、現代日本人が...
-[[現代人が1日に触れる情報量は、平安時代の一生分、江戸時...
九産大の図書館が同書籍と思しき資料を所蔵しているので、要...
-選択可能情報量をメディアグループ別にみると電気通信系の伸...
※選択可能情報量とは、各メディアの情報受信点において、1年...
受け取る情報ではなく受け取ることができる情報の量なので本...
-同資料のp113にて消費情報量は平成8年〜18年では横ばいとの...
-https://www.jst.go.jp/lcs/pdf/fy2020-pp-09.pdf(メモ。あ...
-ツイッターに絞って調べたところ有用な資料を発見。サイトに...
-[[【2021年2月更新!】データからみるTwitterユーザー実態ま...
-試しに自分で1分間に通過したツイート数を数えたところ35ツ...
調べていく上で、「現代で1日に受け取る情報量は江戸時代の1...
~
***Precedent
//&color(red){先行事例の紹介、傾向分析など};
*コンセプト
眺める、癒される等が目的のサイトでかつアニメーションのも...
-[[ぼーっと沖縄>http://boot-okinawa.com]]
-[[WindowSwap>https://window-swap.com]]
~
*デザイン
アイソメトリックのサイト・インタラクティブなサイトはそれ...
-アイソメトリック
--[[可愛い!動く!見ているだけで癒されるアイソメトリック...
--[[こんなところにTDK>https://www.jp.tdk.com/athletic/exp...
--[[株式会社メルペイ>https://jp.merpay.com/]]
--[[ボラギノールタウン|ボラギノール公式ブランドサイト>ht...
--[[こんなところに共和産業>https://www.kyowa-cab.co.jp/jp...
-インタラクティブ
--[[Nomadic Tribe — makemepulse>https://2019.makemepulse....
~
*レイアウト
作りたいサイトに似た雰囲気のサイトを収集。手書き感のある...
-[[クイックオバケさん(Twitter)>https://twitter.com/Quic...
-[[魔法部|フェリシモ>https://web.archive.org/web/2021012...
~
*その他
[[Gegenbauer – transparent, einfach, digital>https://chan...
(インタラクティブで、かつサイトの雰囲気が作成したいもの...
~
~
***Technique / Technology
//&color(red){プロジェクトの遂行に必要な技法・技術に関す...
//以前はJavaScriptで作成していたが、諸事情でjQueryの方が...
必要な技法
-JavaScript
-jQuery?
-イラスト・アニメーション
~
参考にしたサイト・文献(昨年の作業分を除く)
-[[マウスポインターをCSSでカスタマイズして任意の画像に変...
-[[マウスカーソルの形状を変える:スタイルシート(CSS)一...
-[[jquery - DIVの中央に水平スクロールバーを配置する方法 -...
[[【CSS3】Transform(変形)関連のまとめ - Qiita>https://q...
~
~
**Project Management
***Schedule
//&color(red){計画的な遂行のために、進行管理表を作成して...
[[スケジュール>https://docs.google.com/spreadsheets/d/1oc...
~
***ToDo
//&color(red){やるべきこと(タスク)を箇条書きにします。};
//&color(red){完了後は「%%取り消し線%%」あるいは「// コメ...
-最終的な完成図の作成
-スケジュールの完成
~
~
~
#hr
CENTER:''worklog''
//&color(red){最新の情報を一番上に記載して下さい(古い記...
#hr
~
~
**2021.7.1
***女の子バージョンの部屋の作画
前回のものに加え、テレビ、テレビ台、ゴミ箱のデザインを変...
他にも小物を加えたいがこれ以上作画しなくても一応はいいか...
併せて、実際にサイトに入れるとどうなるか確認するため先程...
~
#image(girl2.png,left,40%)
#image(girl_demo.png,left,40%)
~
~
~
~
~
~
***調査
背景の「情報を多く浴び続ける」が一体どれくらいなのか、テ...
-テレビの1日の平均使用時間は、平日で全年齢が161.2分。20...
休日で全年齢が215.9分。20代が138.5分。
([[総務省|令和2年版 情報通信白書|主なメディアの利用時...
-YouTubeの1日の平均使用時間は全年齢が27.8分。20代が22.9...
([[「スマートフォンでの情報収集に関する定点調査2020」利...
-Twitterの1日の利用時間は、20代は72.51分。
--22〜25歳の人はツイッターを見ている間、1秒に1ツイートを...
--試しに自分で1分間に通過したツイート数を数えたところ35ツ...
([[【2021年2月更新!】データからみるTwitterユーザー実態...
([[生活者は1秒当たり、いくつツイートをみるのか?~Twitte...
-
~
~
**2021.6.24
***女の子バージョンの部屋の作画
机と座椅子のデザインを変更。
他の部分も変更したいため、完成次第画像をアップロードする。
~
~
**2021.6.15
***取得した天気の反映
[[先日作成した試作品>http://takearest.php.xdomain.jp/weat...
取得した天気に合わせた絵文字がページ下部に表示されるよう...
晴れ 所により〜のように天気の名詞だけでないことがままあ...
これを応用すればPeepのサイト上の天気を変えることができる...
-[[【JavaScript】 文字列切り出し(slice, substr, substrin...
~
***ヘルプ画面のバグ修正
ヘルプ画面がレスポンシブやズームイン/ズームアウトをした際...
~
~
**2021.6.11
***天気の取得
[[試作品>http://takearest.php.xdomain.jp/weather/]]([[気...
昨日見つけたサイトのプログラムを引用し天気を取得すること...
都道府県コードを書き換えることにより場所を指定することが...
-福岡は40。東京は13。
-[[その他都道府県コード>https://nlftp.mlit.go.jp/ksj/gml/...
「今日の天気」の部分に入っている文字列から全て、もしくは...
~
***現在地の取得
[[試作品>http://takearest.php.xdomain.jp/location/]]([[j...
昨日見つけたサイトのプログラムを引用したところ上手く動作...
どうやらこの方法はブラウザ次第ではきちんと動作しないらし...
-動作確認した環境(全て失敗)
--mac OS XのSafari、Google Chrome、Firefox
--GALAXY feel2のGoogle Chrome、Firefox、GALAXYオリジナル...
ここまで失敗が重なるとプログラムが機能していないという可...
phpを用いて取得することができるかもしれないと昨日面談にて...
~
参考にしたサイト
-[[javascriptでアクセスした国などを取得する方法 | web-wiz...
-[[開発メモ:W3C Geolocation APIで位置情報を取得|理総研W...
~
そもそもアクセスした場所でなく特定の地域(例えば九産大の...
世界観を先に決めてしまってから現在地取得を勉強した方が時...
~
~
**2021.6.10
***面談
サイトの背景(空)の天気が変わると楽しいのでは?との意見...
併せて、指定の地域の天気を取得するプログラムと現在地を取...
後日試運転用のサイトを立ち上げて見たいと思う。
[[気象庁の天気予報JSONファイルをWebAPI的に利用したサンプ...
[[javascript で訪問者のアクセス地域(国、都道府県、市区町...
~
~
**2021.6.8
***女の子のキャラデザ
女の子のキャラクターデザインをしました。
部屋の切り替えはリンクの移動を予定。
~
#image(girl_chara.png,left,40%)
~
~
~
~
~
~
**2021.6.4
***女の子の部屋の作成
女の子の部屋を作成することにしました。
それに併せて部屋を作成。キャラクターは未作成。
#image(girl.png,left,40%)
~
~
~
~
~
~
**2021.5.30
***動画の埋め込み
サイトに何回も訪れてもらえるように、テレビで動画がランダ...
全ての動画を一回のアクセスで見終わらないように、あえて動...
上記はサイトの軽量化も兼ねている。
[[【CSS3】Transform(変形)関連のまとめ - Qiita>https://q...
[[【YouTube入門】動画の埋め込みコードをカスタマイズする方...
~
~
**2021.5.20
***サイトの更新
背景・コンセプトを主に、サイトの埋めていない項目を埋めた...
~
~
**2021.5.19
***プロジェクトの背景・コンセプト
先日の面談時に背景やコンセプト等を簡単に考えていたため、...
~
~
**2021.5.8
***ズームイン/ズームアウト機能の作成
スマホのピンチアウトをできないようにしていたため、ズーム...
画像の全体がすでに見えるようになっている状態でもズームア...
~
~
**2021.5.7
***面談
背景の方向性を相談
ターゲットをアニメや漫画を好きな女性に絞ることを検討。
~
***バグの修正
先日見つけたテレビとパソコンの明るさのバグを修正。
~
***レスポンシブの改善
画像サイズをpxで管理していたためモニターが大きい時に小さ...
~
~
**2021.5.6
***サイトの更新
背景やコンセプト等を掲載していなかったため、ひとまず昨年...
未だに背景の部分が曖昧になっているため思案が必要。
~
***スケジュールの作成
ひとまず1ヶ月単位で作成しようとしたものの着地点が定まって...
最終的にどんなものを作るのか、どこまで作るのかを仮にでも...
~
~
**2021.5.5
***レスポンシブデザインの修正
タイトル・時計・リロード/ヘルプボタンがスマホだと画面外に...
~
***プログラムの修正
去年レスポンシブで変わる画像のサイズや位置を全てpx単位で...
それにより現れたバグ(歩くモーションの位置のずれ等)を併...
~
***バグの発見
-夜寝ているモーションの時に電気をつけ、テレビ/パソコンのO...
明日辺りに修正する予定。
~
~
**2021.5.4
***ヘルプ画面の実装
先日作成したデザインをサイトに実装した。
~
***カーソルの変更
上記に併せてカーソルを変更。クリックできる箇所にホバーす...
パソコンでしかカーソルが表示させられないため、
スマホ用にデザインを作成しなければならない。
-[[マウスポインターをCSSでカスタマイズして任意の画像に変...
-[[マウスカーソルの形状を変える:スタイルシート(CSS)一...
~
***レスポンシブの作成
スマホでサイトを開くと縮小された状態で表示されていたため...
部屋の左上の方しか表示されないので、サイトを開いたタイミ...
-[[jquery - DIVの中央に水平スクロールバーを配置する方法 -...
(参考にしたサイトを貼り付けたほうが後から便利なことに気...
~
~
**2021.4.29
***ヘルプ画面のデザイン作成
昨年に受講した[[情報デザイン研究II>猪本結衣/情報デザイン...
~
#image(help_rough.png,left,40%)
~
~
~
~
~
~
**2021.4.21
***模様替え機能の検討
大きく家具の位置を移動させることは厳しいものの、色を変え...
~
#image(color1.png,left,40%)
#image(color2.png,left,40%)
~
~
~
~
~
~
**2021.4.15
***参考サイト探し
アイソメトリックのサイト・インタラクティブなサイトはそれ...
~
-アイソメトリック
--[[可愛い!動く!見ているだけで癒されるアイソメトリック...
--[[こんなところにTDK>https://www.jp.tdk.com/athletic/exp...
--[[株式会社メルペイ>https://jp.merpay.com/]]
--[[ボラギノールタウン|ボラギノール公式ブランドサイト>ht...
-インタラクティブ
--[[Nomadic Tribe — makemepulse>https://2019.makemepulse....
~
強いて言えばこのサイトが両方の要素を持ってるかもしれない。
[[Gegenbauer – transparent, einfach, digital>https://chan...
~
***卒業研究でしたいことの書き出し
#image(rough0415.png,left,50%)
~
~
~
~
~
~
~
~
**2020.9.22〜2020.11.25
[[昨年度の情報デザイン研究IIにて作成▷▷▷>猪本結衣/情報デザ...
~
~
終了行:
*Peep
JavaScriptを使用した誰かの癒しになるサイトの作成
// ここに Main Visual
~
#image(猪本結衣/情報デザイン研究II/mainV.png,left,100%)
~
~
~
~
~
-''[[猪本 結衣>猪本結衣]]''
-'''Keywords:Web Design, Java Script, Animation'''
-http://takearest.php.xdomain.jp/peep/
~
**Overview
***Introduction / What is This
//&color(red){これは何か・・を簡潔に};
のんびり眺めるサイト
*Peep…覗き見る
~
現状できること・見れるもの
-男の子(以下6種をランダムで表示)
--部屋を歩き回る
--パソコンをする
--雑誌を読む
--ゲームをする
--スマホをする
--寝る(夜0時〜6時は固定で寝てる)
~
-クリック処理
--扉横のスイッチ(部屋の照明のON/OFF)
--テレビ(電源のON/OFF)
--パソコン(電源のON/OFF)
--リロード(男の子の動作の再定義・部屋の照明を除き電源OFF)
--ヘルプ(このサイトについて)
--拡大/縮小
~
-その他
--時間により空の色が変化(朝・昼・夕・夜)
--カーソルの変化(クリックできる箇所にホバーでカーソルが...
--サイトにアクセス時、画像よりもウィンドウ幅が小さいと自...
~
***Background and Purpose
//&color(red){プロジェクトの背景と目的};
//絵を描くのが好きでアニメーションを作る技術も多少あるの...
ネットやテレビと短時間に多くの情報を浴びる機会の多い現代。
確かにたくさんの情報を受け取ることも大事だが、そればかり...
何も情報を受け取らない、ぼーっとする時間も大切だと考えた。
ターゲットは、ネットやテレビを扱う機会が多いであろうアニ...
イラストやアニメーションを用いることでそういった人たちに...
~
***Concept
//&color(red){基本的な考え方、枠組み、視点など};
-ぼーっと眺めるサイト
少しでも誰かの癒しになればと作成。
~
***Output
//&color(red){成果物の直接掲載またはリンク誘導};
//&color(red){&small(プロジェクトの途上では、試作品等、視...
//&color(red){&small(成果物の形式・サイズ・時間尺等の基本...
-[[Peep(http://takearest.php.xdomain.jp/peep/)>http://tak...
~
***Tools
//&color(red){使用するツール|ハードウエア・ソフトウエア};
-Atom
-CLIP STUDIO PAINT
~
***Term
//&color(red){プロジェクトの期間|20XX.XX.XX - 20XX.XX.XX...
2020.9.16 〜
~
***Plan
-男の子の色を付ける。
-現時点では左下のリロードボタン、もしくはサイトのリロード...
-背景に天気を入れたい。
-女の子を追加
--男の子のモーションとほとんど同じにする予定だが、一部だ...
(ゲームをしてるモーション→化粧するモーション など。何に...
--リロードボタンが消えるので、男の子に切り替えるボタンを...
--軽量化したいため、画像を切り替えるのではなくリンクを移...
~
#image(girl_demo.png,left,40%)
~
~
~
~
~
~
***Conclusion / Summary
//&color(red){プロジェクトが完結したら「まとめ」を記載し...
~
~
**Survey
***Present Status
//&color(red){現状調査、現状の問題の洗い出し};
-昨今、短時間に受け取る情報量が多い。(TwitterやTikTok、T...
~
参考
-[[総務省|令和2年版 情報通信白書|主なメディアの利用時間...
-「ドヤ顔で語れるちょっとした小ネタ」として、現代日本人が...
-[[現代人が1日に触れる情報量は、平安時代の一生分、江戸時...
九産大の図書館が同書籍と思しき資料を所蔵しているので、要...
-選択可能情報量をメディアグループ別にみると電気通信系の伸...
※選択可能情報量とは、各メディアの情報受信点において、1年...
受け取る情報ではなく受け取ることができる情報の量なので本...
-同資料のp113にて消費情報量は平成8年〜18年では横ばいとの...
-https://www.jst.go.jp/lcs/pdf/fy2020-pp-09.pdf(メモ。あ...
-ツイッターに絞って調べたところ有用な資料を発見。サイトに...
-[[【2021年2月更新!】データからみるTwitterユーザー実態ま...
-試しに自分で1分間に通過したツイート数を数えたところ35ツ...
調べていく上で、「現代で1日に受け取る情報量は江戸時代の1...
~
***Precedent
//&color(red){先行事例の紹介、傾向分析など};
*コンセプト
眺める、癒される等が目的のサイトでかつアニメーションのも...
-[[ぼーっと沖縄>http://boot-okinawa.com]]
-[[WindowSwap>https://window-swap.com]]
~
*デザイン
アイソメトリックのサイト・インタラクティブなサイトはそれ...
-アイソメトリック
--[[可愛い!動く!見ているだけで癒されるアイソメトリック...
--[[こんなところにTDK>https://www.jp.tdk.com/athletic/exp...
--[[株式会社メルペイ>https://jp.merpay.com/]]
--[[ボラギノールタウン|ボラギノール公式ブランドサイト>ht...
--[[こんなところに共和産業>https://www.kyowa-cab.co.jp/jp...
-インタラクティブ
--[[Nomadic Tribe — makemepulse>https://2019.makemepulse....
~
*レイアウト
作りたいサイトに似た雰囲気のサイトを収集。手書き感のある...
-[[クイックオバケさん(Twitter)>https://twitter.com/Quic...
-[[魔法部|フェリシモ>https://web.archive.org/web/2021012...
~
*その他
[[Gegenbauer – transparent, einfach, digital>https://chan...
(インタラクティブで、かつサイトの雰囲気が作成したいもの...
~
~
***Technique / Technology
//&color(red){プロジェクトの遂行に必要な技法・技術に関す...
//以前はJavaScriptで作成していたが、諸事情でjQueryの方が...
必要な技法
-JavaScript
-jQuery?
-イラスト・アニメーション
~
参考にしたサイト・文献(昨年の作業分を除く)
-[[マウスポインターをCSSでカスタマイズして任意の画像に変...
-[[マウスカーソルの形状を変える:スタイルシート(CSS)一...
-[[jquery - DIVの中央に水平スクロールバーを配置する方法 -...
[[【CSS3】Transform(変形)関連のまとめ - Qiita>https://q...
~
~
**Project Management
***Schedule
//&color(red){計画的な遂行のために、進行管理表を作成して...
[[スケジュール>https://docs.google.com/spreadsheets/d/1oc...
~
***ToDo
//&color(red){やるべきこと(タスク)を箇条書きにします。};
//&color(red){完了後は「%%取り消し線%%」あるいは「// コメ...
-最終的な完成図の作成
-スケジュールの完成
~
~
~
#hr
CENTER:''worklog''
//&color(red){最新の情報を一番上に記載して下さい(古い記...
#hr
~
~
**2021.7.1
***女の子バージョンの部屋の作画
前回のものに加え、テレビ、テレビ台、ゴミ箱のデザインを変...
他にも小物を加えたいがこれ以上作画しなくても一応はいいか...
併せて、実際にサイトに入れるとどうなるか確認するため先程...
~
#image(girl2.png,left,40%)
#image(girl_demo.png,left,40%)
~
~
~
~
~
~
***調査
背景の「情報を多く浴び続ける」が一体どれくらいなのか、テ...
-テレビの1日の平均使用時間は、平日で全年齢が161.2分。20...
休日で全年齢が215.9分。20代が138.5分。
([[総務省|令和2年版 情報通信白書|主なメディアの利用時...
-YouTubeの1日の平均使用時間は全年齢が27.8分。20代が22.9...
([[「スマートフォンでの情報収集に関する定点調査2020」利...
-Twitterの1日の利用時間は、20代は72.51分。
--22〜25歳の人はツイッターを見ている間、1秒に1ツイートを...
--試しに自分で1分間に通過したツイート数を数えたところ35ツ...
([[【2021年2月更新!】データからみるTwitterユーザー実態...
([[生活者は1秒当たり、いくつツイートをみるのか?~Twitte...
-
~
~
**2021.6.24
***女の子バージョンの部屋の作画
机と座椅子のデザインを変更。
他の部分も変更したいため、完成次第画像をアップロードする。
~
~
**2021.6.15
***取得した天気の反映
[[先日作成した試作品>http://takearest.php.xdomain.jp/weat...
取得した天気に合わせた絵文字がページ下部に表示されるよう...
晴れ 所により〜のように天気の名詞だけでないことがままあ...
これを応用すればPeepのサイト上の天気を変えることができる...
-[[【JavaScript】 文字列切り出し(slice, substr, substrin...
~
***ヘルプ画面のバグ修正
ヘルプ画面がレスポンシブやズームイン/ズームアウトをした際...
~
~
**2021.6.11
***天気の取得
[[試作品>http://takearest.php.xdomain.jp/weather/]]([[気...
昨日見つけたサイトのプログラムを引用し天気を取得すること...
都道府県コードを書き換えることにより場所を指定することが...
-福岡は40。東京は13。
-[[その他都道府県コード>https://nlftp.mlit.go.jp/ksj/gml/...
「今日の天気」の部分に入っている文字列から全て、もしくは...
~
***現在地の取得
[[試作品>http://takearest.php.xdomain.jp/location/]]([[j...
昨日見つけたサイトのプログラムを引用したところ上手く動作...
どうやらこの方法はブラウザ次第ではきちんと動作しないらし...
-動作確認した環境(全て失敗)
--mac OS XのSafari、Google Chrome、Firefox
--GALAXY feel2のGoogle Chrome、Firefox、GALAXYオリジナル...
ここまで失敗が重なるとプログラムが機能していないという可...
phpを用いて取得することができるかもしれないと昨日面談にて...
~
参考にしたサイト
-[[javascriptでアクセスした国などを取得する方法 | web-wiz...
-[[開発メモ:W3C Geolocation APIで位置情報を取得|理総研W...
~
そもそもアクセスした場所でなく特定の地域(例えば九産大の...
世界観を先に決めてしまってから現在地取得を勉強した方が時...
~
~
**2021.6.10
***面談
サイトの背景(空)の天気が変わると楽しいのでは?との意見...
併せて、指定の地域の天気を取得するプログラムと現在地を取...
後日試運転用のサイトを立ち上げて見たいと思う。
[[気象庁の天気予報JSONファイルをWebAPI的に利用したサンプ...
[[javascript で訪問者のアクセス地域(国、都道府県、市区町...
~
~
**2021.6.8
***女の子のキャラデザ
女の子のキャラクターデザインをしました。
部屋の切り替えはリンクの移動を予定。
~
#image(girl_chara.png,left,40%)
~
~
~
~
~
~
**2021.6.4
***女の子の部屋の作成
女の子の部屋を作成することにしました。
それに併せて部屋を作成。キャラクターは未作成。
#image(girl.png,left,40%)
~
~
~
~
~
~
**2021.5.30
***動画の埋め込み
サイトに何回も訪れてもらえるように、テレビで動画がランダ...
全ての動画を一回のアクセスで見終わらないように、あえて動...
上記はサイトの軽量化も兼ねている。
[[【CSS3】Transform(変形)関連のまとめ - Qiita>https://q...
[[【YouTube入門】動画の埋め込みコードをカスタマイズする方...
~
~
**2021.5.20
***サイトの更新
背景・コンセプトを主に、サイトの埋めていない項目を埋めた...
~
~
**2021.5.19
***プロジェクトの背景・コンセプト
先日の面談時に背景やコンセプト等を簡単に考えていたため、...
~
~
**2021.5.8
***ズームイン/ズームアウト機能の作成
スマホのピンチアウトをできないようにしていたため、ズーム...
画像の全体がすでに見えるようになっている状態でもズームア...
~
~
**2021.5.7
***面談
背景の方向性を相談
ターゲットをアニメや漫画を好きな女性に絞ることを検討。
~
***バグの修正
先日見つけたテレビとパソコンの明るさのバグを修正。
~
***レスポンシブの改善
画像サイズをpxで管理していたためモニターが大きい時に小さ...
~
~
**2021.5.6
***サイトの更新
背景やコンセプト等を掲載していなかったため、ひとまず昨年...
未だに背景の部分が曖昧になっているため思案が必要。
~
***スケジュールの作成
ひとまず1ヶ月単位で作成しようとしたものの着地点が定まって...
最終的にどんなものを作るのか、どこまで作るのかを仮にでも...
~
~
**2021.5.5
***レスポンシブデザインの修正
タイトル・時計・リロード/ヘルプボタンがスマホだと画面外に...
~
***プログラムの修正
去年レスポンシブで変わる画像のサイズや位置を全てpx単位で...
それにより現れたバグ(歩くモーションの位置のずれ等)を併...
~
***バグの発見
-夜寝ているモーションの時に電気をつけ、テレビ/パソコンのO...
明日辺りに修正する予定。
~
~
**2021.5.4
***ヘルプ画面の実装
先日作成したデザインをサイトに実装した。
~
***カーソルの変更
上記に併せてカーソルを変更。クリックできる箇所にホバーす...
パソコンでしかカーソルが表示させられないため、
スマホ用にデザインを作成しなければならない。
-[[マウスポインターをCSSでカスタマイズして任意の画像に変...
-[[マウスカーソルの形状を変える:スタイルシート(CSS)一...
~
***レスポンシブの作成
スマホでサイトを開くと縮小された状態で表示されていたため...
部屋の左上の方しか表示されないので、サイトを開いたタイミ...
-[[jquery - DIVの中央に水平スクロールバーを配置する方法 -...
(参考にしたサイトを貼り付けたほうが後から便利なことに気...
~
~
**2021.4.29
***ヘルプ画面のデザイン作成
昨年に受講した[[情報デザイン研究II>猪本結衣/情報デザイン...
~
#image(help_rough.png,left,40%)
~
~
~
~
~
~
**2021.4.21
***模様替え機能の検討
大きく家具の位置を移動させることは厳しいものの、色を変え...
~
#image(color1.png,left,40%)
#image(color2.png,left,40%)
~
~
~
~
~
~
**2021.4.15
***参考サイト探し
アイソメトリックのサイト・インタラクティブなサイトはそれ...
~
-アイソメトリック
--[[可愛い!動く!見ているだけで癒されるアイソメトリック...
--[[こんなところにTDK>https://www.jp.tdk.com/athletic/exp...
--[[株式会社メルペイ>https://jp.merpay.com/]]
--[[ボラギノールタウン|ボラギノール公式ブランドサイト>ht...
-インタラクティブ
--[[Nomadic Tribe — makemepulse>https://2019.makemepulse....
~
強いて言えばこのサイトが両方の要素を持ってるかもしれない。
[[Gegenbauer – transparent, einfach, digital>https://chan...
~
***卒業研究でしたいことの書き出し
#image(rough0415.png,left,50%)
~
~
~
~
~
~
~
~
**2020.9.22〜2020.11.25
[[昨年度の情報デザイン研究IIにて作成▷▷▷>猪本結衣/情報デザ...
~
~
ページ名: