LogoMark.png

小森丈/卒業研究I のバックアップ差分(No.9)


#author("2021-05-21T16:38:19+09:00;2021-05-20T10:43:34+09:00","default:member","member")
#author("2021-05-21T19:24:54+09:00;2021-05-20T10:43:34+09:00","default:member","member")
*gallery
javascriptを使用したインタラクティブなWebサイト制作



#image(top02.jpg);



-''Takeru Komori''
-'''Keywords:graphic, Web, jQuery, ・・・'''
-https://www.example.com

~


**Overview
***Introduction / What is This
//&color(red){これは何か・・を簡潔に};
jQueryのライブラリなどを使用したWEBサイトの制作プロジェクト
~

***Background and Purpose
//&color(red){プロジェクトの背景と目的};
昨年の研究で興味を持ったjavascriptやjQueryなどのプログラミング言語と、グラフィックデザインを掛け合わせた作品を制作したい
~

***Concept
//&color(red){基本的な考え方、枠組み、視点など};
ゲーム性のあるギャラリーサイト的なもの。
~

***Output
//&color(red){成果物の直接掲載またはリンク誘導};
//&color(red){&small(プロジェクトの途上では、試作品等、視覚的な資料を掲載・リンクして下さい。);};
//&color(red){&small(成果物の形式・サイズ・時間尺等の基本情報も記載して下さい。);};
~



***Tools
//&color(red){使用するツール|ハードウエア・ソフトウエア};
Photoshop , Dreamweaver , Illustrator
~

//***Term
//&color(red){プロジェクトの期間|20XX.XX.XX - 20XX.XX.XX };

***Conclusion / Summary 
//&color(red){プロジェクトが完結したら「まとめ」を記載して下さい。};
~
~


**Survey

***Present Status
//&color(red){現状調査、現状の問題の洗い出し};
ただグラフィックを掲載し、少しゲーム的な要素を加えたでは面白みに欠ける。

~

***Precedent
//&color(red){先行事例の紹介、傾向分析など};
[[ 福岡県立バーチャル美術館 >https://virtualmuseum.fukuoka-kenbi.jp/takara/ ]]
福岡県立美術館のバーチャル美術館。
ただ眺めるだけでなく、スクロールやカーソルの移動などで手を動かす事ができる。
作品がノングリッド配置されていることで良い違和感を生み、目を惹きつけられるようなつくりになっている。
~

***Technique / Technology
//&color(red){プロジェクトの遂行に必要な技法・技術に関する調査};

~
~

**Project Management

***Schedule
//&color(red){計画的な遂行のために、進行管理表を作成してリンクして下さい。};
~

***ToDo
//&color(red){やるべきこと(タスク)を箇条書きにします。};
//&color(red){完了後は「%%取り消し線%%」あるいは「// コメントアウト」」};
-テーマ固め
-
-
~
~
~

#hr
CENTER:''worklog''
//&color(red){最新の情報を一番上に記載して下さい(古い記事が下へ沈む)。};
#hr
~
~
**2021.05.21
***中間報告
-なぜこの研究をするのか
→javascriptやjQueryを使うことでWebならではの作品性を高める事ができる
-作品の方向性
Webの機能を活かしたグラフィック作品 or   ゲームの一通りのジャンルを網羅した作品

~
***調査
https://canvas.jjangik.com/?ckattempt=1
https://editor.p5js.org/SybilQin/present/c47v21yP1
javascriptを使用したインタラクティブなサイトの先行事例
//https://brooke-stanley-finalproject.glitch.me
//コマ送りのアニメーション
https://goworkship.com/magazine/repelling-effect-in-web-design/

~
~
**2021.05.20
***調査
https://virtualmuseum.fukuoka-kenbi.jp/takara/
~
~
**2021.05.08
***進捗
ライブラリを使用したパズルゲームとイラストの試作
&image(img01.jpg,,50%); &image(img02.jpg,,50%); 

**2021.05.07
***テーマの模索
グラフィックとWebを掛け合わせた作品
プログラミングでどんな事ができるのかを調査
***調査
読み込んだ画像から自動でパズルを生成
http://www.2meter3.de/jqPuzzle/
~
~
**2021.04.22
***調査
-先行事例
https://www.prototypo.io

~
~

**2021.04.20
***テーマの模索
https://pin.it/5NCydzY
https://pin.it/2Q2KFgq
タイポグラフィーやイラストの自動生成、カスタマイズができるサイトを作ってみたい
~
***調査
-先行事例
https://picrew.me
キャラクターもののアイコンをカスタマイズできるサイトを見つけたが、文字やポスター、背景などを作れそうなサイトは見つからなかった。
~
~



~