小森丈/情報デザイン研究II をテンプレートにして作成

開始行:
//*Normotion Graphics #image(logo01.png,,43.5%); WEBブラウザ上で表現できるマルチ映像の制作 ~ #image(SS03.jpg); //#iframe(http://normotion.html.xdomain.jp,100%,70%) //http://normotion.html.xdomain.jp ~ -''Takeru Komori'' -'''Movie , Shape Animation , Web Design , Mulch Pattern''' -http://normotion.html.xdomain.jp ~ ~ ~ ~ **概要 ~ ***これは何か -Normotion Graphicsはブラウザ上を利用したマルチ映像と、そ... //シンプルな動きの映像が多いので //normalの略称であるnormと単語のmotionを掛け合わせた造語... //複数の映像を ~ ***背景・目的 -映像の新たな表現の舞台としてWebサイトを使いたい。 -研究Ⅰで制作したサイトに新たな機能を追加したい。 -WEBの利点を生かした映像作品にすればさらに面白くなるので... ~ ~ ~ ~ **調査 ~ ***現状の調査、問題点 //#image(web01.jpg,,58%); -研究Ⅰの段階では映像を貼っただけでWEBの利点を生かしきれて... -映像が少ない。 ~ ~ ***映像の先行事例 //&color(red){先行事例の紹介、傾向分析など}; -正方形グリッドに合わせて作られたようなジオメトリックなポ... -映像ではないがモーショングラフィックスとの相性も良さそう。 &image(img02.jpg,,28%); &image(img01.jpg,,28%); &size(12){画像出典：};[[&size(12){・society6.com/geometri... ~ ~ ***WEBサイトの利点 -Javascript、jQueryを使用すると文字や映像に動きを加えるこ... ~ ~ ~ ~ **制作 ~ ***コンセプト -シンプルな図形のアニメーションが複数あるマルチ映像。 -映像のテイストに合わせたミニマルな雰囲気のサイト。 -映像の色を制限して統一感を出す。 ~ ***WEB //&image(web01.jpg,,40%); &image(web02.jpg,,40%); |研究Ⅰ||研究Ⅱ| |#image(web01.jpg,);|→|#image(web02.jpg,);| -レイアウトを変更し、映像を大きくしても窮屈な印象にならな... -映像の下にAboutページを追加。 -映像を要素ごとに分類したページの作成。 -下までスクロールするとTOPに戻るボタンが出てくる。 ~ ***映像 -前回の4種類の映像からさらに12種類ほど追加。 -ドラッグ&ドロップで映像の組み替え。 -映像をクリックするとフルスクリーンモードに切り替わる。 -真ん中の映像をホバーした際に注意書きの吹き出しが出る。 ~ ***完成品 #iframe(http://normotion.html.xdomain.jp,100%,70%) ~ ~ ~ ~ **まとめ ~ -企画段階では映像とHTMLタグを使うだけの予定だったので、ゼ... -シンプルな技術で面白い表現ができたと思う。 -今後は動作環境によって正しく動作しないバグなどの修正をし... ~ ~ //**Overview //~ //***Introduction //&color(red){これは何か？ 簡潔に}; //Normotiongraphics //前期に制作したものをさらにブラッシュアップさせる。 //***Background and Purpose //&color(red){プロジェクトの背景と目的}; //映像表現の場をWebに移し、新たな表現方法を模索したい。 //***Target //&color(red){誰のために}; //***Output //&color(red){成果物の形式・サイズ}; //Webサイト //映像 //***Tools //AfterEffects //Dreamweaver //&color(red){使用する機材・ソフトウエア}; //***Term //&color(red){プロジェクトの期間}; //**CurrentStatus //http://normotion.html.xdomain.jp //#iframe(http://normotion.html.xdomain.jp,100%,70%) //&color(red){ここにプロジェクトの最新の状態を掲載}; //**Survey //***Present Status //&color(red){現状調査、現状の問題の洗い出し}; //研究Ⅰの段階では映像を貼っただけだったので面白味に欠けて... //映像が少ない //TOPページだけだと何のサイトなのか分からない //***Precedent //&color(red){先行事例の紹介、傾向分析など}; //マルチ映像の参考: //[[&image(mov_sankoh.jpg);>https://pin.it/3V7VKFf]] //***Technique / Technology //&color(red){プロジェクトの遂行に必要な技法・技術に関す... //jQuery //**Project Management //***Schedule //&color(red){計画的な遂行のために、進行管理表を作成して... ~ ~ ~ #hr CENTER:''worklog'' //&color(red){最新の情報を一番上に記載して下さい（古い記... #hr ~ ***ToDo //&color(red){やるべきこと（タスク）を箇条書きにします。}; //&color(red){完了後は「%%取り消し線%%」あるいは「// コメ... //・円、三角、四角の新しい動きの映像を1つ以上制作する %%・フルスクリーン対応%% //・列の数が変化するなどの仕掛けがあるボタンも設置したい %%・footerを作る%% %%・大きなディスプレイで起こるフルスクリーンのバグを修正... %%・フルスクリーンモード、ホバー注意書き%% %%・script.js にまとめて独立化した方が良い%% %%・htmlのエラーを修正する%% ~ ~ **2020.12.04 ***進捗 発表後に指摘を受けたhtmlのエラー修正とscriptの独立化を行... ~ ~ **2020.11.24 ***進捗 全ページ更新 あえて映像を敷き詰めずに余白を作り、遊びを持たせている ~ ~ **2020.11.18 ***進捗 %%フルスクリーンモードで映像をクリックする際に、注意書き... ***進捗(追記) Balloon.cssを使用し吹き出しを追加。 全ての映像に追加すると映像の邪魔になるかなと思い、一箇所... ***問題点 一箇所だけだと吹き出しの存在に気付きにくい。 →映像全体にcssを適応させ、吹き出しを追従させたい。 ~ ~ **2020.11.11 ***進捗 footerを追加。 トップに戻るボタンを追加。 ***問題点 トップに戻るボタンは下にスクロールすると表示されるような... ~ ~ **2020.11.11 ***進捗 全体の文字詰め。 ***問題点 ナビやタイトルには適応されてない（？） ~ ~ **2020.11.10 ***進捗 使用フォントの見直し。 映像のテイストに合わせ、テキストの色を黒のベタ塗りより若... ・ヘッダー、タイトル　#252525 ・文章　#626262 映像を一段追加。 ~ ~ **2020.11.03 ***進捗 screenfull.jsでフルスクリーンモードを導入 ***問題点 映像の間に隙間ができる ~ ~ **2020.10.28 ***進捗 ヘッダーやアバウトページの文字の間隔の修正。 フルスクリーンモードの仕組みの調査。 クリックで映像以外を非表示にする方法が良さそう（？） https://liginc.co.jp/490960 ~ ~ **2020.10.21 ***メモ タイトルとナビの間をもう少し狭めて、ナビと映像の間はもう... Aboutの行間が広すぎる →文字を詰めた時に出るスカスカ感は他の方法で補った方が良い 参考:https://valentin-chevalier.com/workflow ~ ~ **2020.10.16 ***調査 マウスカーソルが独特なサイト https://maisoncacao.com 実装方法 https://www.useful-blog.info/mouse-cursor/ https://wemo.tech/3229 問題点 リンクのホバーアニメーションが効かない ~ ~ **2020.10.14 ***授業メモ フルスクリーン対応にする。 %%サイト閲覧者も自由に動画を組み替えられることをどこかで... %%文章の段落を整理した方が良い。%% //flex クリックで映像が回転、全体のリセットボタンなどもできれば... ~ ~ **2020.10.13 ***進捗 aboutページのフォントサイズを大きくした。 色違いの動画を追加。 使用した色をまとめた表を作成。 #image(NMGcolor.jpg); ~ ~ **2020.10.07 ***調査 セクションが変わるときに背景色が変わるサイト https://valentin-chevalier.com/workflow https://in-general.com 参考にしたいテイストのサイト https://canvascreative.co ~ ***授業メモ 動画に一定のルールを加えてみる →色は何色まで、動画の秒数など。 すでにある動画のバージョン違いを作る。 →色、スピード、形など。 ~ ~ **2020.10.03 ***進捗 可視範囲に入ると横からフェードインしてくるアニメーション... ジャンプボタンを押すとスムーズスクロールで移動できるよう... ~ ~ **2020.09.29 ***進捗 簡単なjsを使い、ドラッグ&ドロップで映像の並び替えが出来る... トップページとアバウトページを連結し、スクロールするとア... ~ ~ **2020.09.22 ***企画案 前期に制作したNormotiongraphicsのブラッシュアップ。 ・jsを使い、動きのある仕掛けを作りたい。 ・映像の数を増やしたい。（4×6で配置する24種類の動画） ~ 架空の企業やアーティストのWebサイト制作。 ~ ~ ~ ~

終了行:
//*Normotion Graphics #image(logo01.png,,43.5%); WEBブラウザ上で表現できるマルチ映像の制作 ~ #image(SS03.jpg); //#iframe(http://normotion.html.xdomain.jp,100%,70%) //http://normotion.html.xdomain.jp ~ -''Takeru Komori'' -'''Movie , Shape Animation , Web Design , Mulch Pattern''' -http://normotion.html.xdomain.jp ~ ~ ~ ~ **概要 ~ ***これは何か -Normotion Graphicsはブラウザ上を利用したマルチ映像と、そ... //シンプルな動きの映像が多いので //normalの略称であるnormと単語のmotionを掛け合わせた造語... //複数の映像を ~ ***背景・目的 -映像の新たな表現の舞台としてWebサイトを使いたい。 -研究Ⅰで制作したサイトに新たな機能を追加したい。 -WEBの利点を生かした映像作品にすればさらに面白くなるので... ~ ~ ~ ~ **調査 ~ ***現状の調査、問題点 //#image(web01.jpg,,58%); -研究Ⅰの段階では映像を貼っただけでWEBの利点を生かしきれて... -映像が少ない。 ~ ~ ***映像の先行事例 //&color(red){先行事例の紹介、傾向分析など}; -正方形グリッドに合わせて作られたようなジオメトリックなポ... -映像ではないがモーショングラフィックスとの相性も良さそう。 &image(img02.jpg,,28%); &image(img01.jpg,,28%); &size(12){画像出典：};[[&size(12){・society6.com/geometri... ~ ~ ***WEBサイトの利点 -Javascript、jQueryを使用すると文字や映像に動きを加えるこ... ~ ~ ~ ~ **制作 ~ ***コンセプト -シンプルな図形のアニメーションが複数あるマルチ映像。 -映像のテイストに合わせたミニマルな雰囲気のサイト。 -映像の色を制限して統一感を出す。 ~ ***WEB //&image(web01.jpg,,40%); &image(web02.jpg,,40%); |研究Ⅰ||研究Ⅱ| |#image(web01.jpg,);|→|#image(web02.jpg,);| -レイアウトを変更し、映像を大きくしても窮屈な印象にならな... -映像の下にAboutページを追加。 -映像を要素ごとに分類したページの作成。 -下までスクロールするとTOPに戻るボタンが出てくる。 ~ ***映像 -前回の4種類の映像からさらに12種類ほど追加。 -ドラッグ&ドロップで映像の組み替え。 -映像をクリックするとフルスクリーンモードに切り替わる。 -真ん中の映像をホバーした際に注意書きの吹き出しが出る。 ~ ***完成品 #iframe(http://normotion.html.xdomain.jp,100%,70%) ~ ~ ~ ~ **まとめ ~ -企画段階では映像とHTMLタグを使うだけの予定だったので、ゼ... -シンプルな技術で面白い表現ができたと思う。 -今後は動作環境によって正しく動作しないバグなどの修正をし... ~ ~ //**Overview //~ //***Introduction //&color(red){これは何か？ 簡潔に}; //Normotiongraphics //前期に制作したものをさらにブラッシュアップさせる。 //***Background and Purpose //&color(red){プロジェクトの背景と目的}; //映像表現の場をWebに移し、新たな表現方法を模索したい。 //***Target //&color(red){誰のために}; //***Output //&color(red){成果物の形式・サイズ}; //Webサイト //映像 //***Tools //AfterEffects //Dreamweaver //&color(red){使用する機材・ソフトウエア}; //***Term //&color(red){プロジェクトの期間}; //**CurrentStatus //http://normotion.html.xdomain.jp //#iframe(http://normotion.html.xdomain.jp,100%,70%) //&color(red){ここにプロジェクトの最新の状態を掲載}; //**Survey //***Present Status //&color(red){現状調査、現状の問題の洗い出し}; //研究Ⅰの段階では映像を貼っただけだったので面白味に欠けて... //映像が少ない //TOPページだけだと何のサイトなのか分からない //***Precedent //&color(red){先行事例の紹介、傾向分析など}; //マルチ映像の参考: //[[&image(mov_sankoh.jpg);>https://pin.it/3V7VKFf]] //***Technique / Technology //&color(red){プロジェクトの遂行に必要な技法・技術に関す... //jQuery //**Project Management //***Schedule //&color(red){計画的な遂行のために、進行管理表を作成して... ~ ~ ~ #hr CENTER:''worklog'' //&color(red){最新の情報を一番上に記載して下さい（古い記... #hr ~ ***ToDo //&color(red){やるべきこと（タスク）を箇条書きにします。}; //&color(red){完了後は「%%取り消し線%%」あるいは「// コメ... //・円、三角、四角の新しい動きの映像を1つ以上制作する %%・フルスクリーン対応%% //・列の数が変化するなどの仕掛けがあるボタンも設置したい %%・footerを作る%% %%・大きなディスプレイで起こるフルスクリーンのバグを修正... %%・フルスクリーンモード、ホバー注意書き%% %%・script.js にまとめて独立化した方が良い%% %%・htmlのエラーを修正する%% ~ ~ **2020.12.04 ***進捗 発表後に指摘を受けたhtmlのエラー修正とscriptの独立化を行... ~ ~ **2020.11.24 ***進捗 全ページ更新 あえて映像を敷き詰めずに余白を作り、遊びを持たせている ~ ~ **2020.11.18 ***進捗 %%フルスクリーンモードで映像をクリックする際に、注意書き... ***進捗(追記) Balloon.cssを使用し吹き出しを追加。 全ての映像に追加すると映像の邪魔になるかなと思い、一箇所... ***問題点 一箇所だけだと吹き出しの存在に気付きにくい。 →映像全体にcssを適応させ、吹き出しを追従させたい。 ~ ~ **2020.11.11 ***進捗 footerを追加。 トップに戻るボタンを追加。 ***問題点 トップに戻るボタンは下にスクロールすると表示されるような... ~ ~ **2020.11.11 ***進捗 全体の文字詰め。 ***問題点 ナビやタイトルには適応されてない（？） ~ ~ **2020.11.10 ***進捗 使用フォントの見直し。 映像のテイストに合わせ、テキストの色を黒のベタ塗りより若... ・ヘッダー、タイトル　#252525 ・文章　#626262 映像を一段追加。 ~ ~ **2020.11.03 ***進捗 screenfull.jsでフルスクリーンモードを導入 ***問題点 映像の間に隙間ができる ~ ~ **2020.10.28 ***進捗 ヘッダーやアバウトページの文字の間隔の修正。 フルスクリーンモードの仕組みの調査。 クリックで映像以外を非表示にする方法が良さそう（？） https://liginc.co.jp/490960 ~ ~ **2020.10.21 ***メモ タイトルとナビの間をもう少し狭めて、ナビと映像の間はもう... Aboutの行間が広すぎる →文字を詰めた時に出るスカスカ感は他の方法で補った方が良い 参考:https://valentin-chevalier.com/workflow ~ ~ **2020.10.16 ***調査 マウスカーソルが独特なサイト https://maisoncacao.com 実装方法 https://www.useful-blog.info/mouse-cursor/ https://wemo.tech/3229 問題点 リンクのホバーアニメーションが効かない ~ ~ **2020.10.14 ***授業メモ フルスクリーン対応にする。 %%サイト閲覧者も自由に動画を組み替えられることをどこかで... %%文章の段落を整理した方が良い。%% //flex クリックで映像が回転、全体のリセットボタンなどもできれば... ~ ~ **2020.10.13 ***進捗 aboutページのフォントサイズを大きくした。 色違いの動画を追加。 使用した色をまとめた表を作成。 #image(NMGcolor.jpg); ~ ~ **2020.10.07 ***調査 セクションが変わるときに背景色が変わるサイト https://valentin-chevalier.com/workflow https://in-general.com 参考にしたいテイストのサイト https://canvascreative.co ~ ***授業メモ 動画に一定のルールを加えてみる →色は何色まで、動画の秒数など。 すでにある動画のバージョン違いを作る。 →色、スピード、形など。 ~ ~ **2020.10.03 ***進捗 可視範囲に入ると横からフェードインしてくるアニメーション... ジャンプボタンを押すとスムーズスクロールで移動できるよう... ~ ~ **2020.09.29 ***進捗 簡単なjsを使い、ドラッグ&ドロップで映像の並び替えが出来る... トップページとアバウトページを連結し、スクロールするとア... ~ ~ **2020.09.22 ***企画案 前期に制作したNormotiongraphicsのブラッシュアップ。 ・jsを使い、動きのある仕掛けを作りたい。 ・映像の数を増やしたい。（4×6で配置する24種類の動画） ~ 架空の企業やアーティストのWebサイト制作。 ~ ~ ~ ~

ページ名: