LogoMark.png

小森丈/卒業研究II

logo01.png

WEBブラウザ上で表現できるマルチ映像の制作

SS2.jpg


Overview

Introduction / What is This

Background and Purpose

Concept

Output


Tools

illustrator , dreamwever

Term


Conclusion / Summary




Survey

Present Status

項目別のページの映像の本数が少ない
どんなサイトなのか伝わりやすくするためにサイトの世界観を作り込む必要がある

Precedent

インタラクティブなサイトの先行事例
https://canvas.jjangik.com/?ckattempt=1

Technique / Technology




Project Management

・10月-1週目
カラーチェンジ実装(〆)
映像の追加


・10月-2週目
映像の追加
ブラッシュアップ
概要作成


・10月-3週目
ブラッシュアップ
概要作成


・10月-4週目
概要作成
作品提出



ToDo

NotToDo







worklog




2021.11.10

進捗

概要のブラッシュアップ
https://drive.google.com/file/d/1UCQ8Hd4kbKU3BduXIeIm-4nR3wZA7K-D/view?usp=sharing

プレゼンページの整理
小森丈/Presentation

モックアップの作成

wall2.jpg
 
wall3.jpg




2021.12.26

進捗

映像消去を取り入れるのであれば操作方法は別にしたほうが良い
メニューが目立ちすぎている感じがする
無彩色にする、サイズを小さくなど試してみる



2021.11.4

進捗

概要作成
https://drive.google.com/file/d/1UCQ8Hd4kbKU3BduXIeIm-4nR3wZA7K-D/view?usp=sharing

ナイトモードの不具合を修正
SVGパスを直接書き込むことでクリック時の色の変更に対応できるようにした



2021.11.3

進捗

ナイトモードの不具合を修正
画像の色の変更が効かない箇所が一部ある



2021.10.28

進捗

レイアウトの微調整
個別ページのレイアウト調整
ナイトモード試作
→CSSメソッドでフィルターを付与しているが、
.toggleClassで切り替える方法にしたい




2021.10.20

memo

設定項目はナビボタンに格納する




2021.10.15

memo

映像スピードをJavascriptで変更
スローはコマ数が足りないので一番遅いスピードから早回しする。
メニューのサイズはもう少し小さくしても良いかも



2021.10.08

memo

映像制作のヒント
・時間を変える
・線の太さを変えるなど



2021.10.07

進捗

リロード時に映像がランダムで表示される仕様に変更した
https://ecmemo.net/jquery-shuffle

memo

直感的な操作ができるように、矢印ボタンで列数を変更できるようにしたい



2021.10.05

進捗

画面幅によって映像の列数が変化する機能
クリックで任意の映像を消せる機能の2つを新たに追加した

丸、四角、三角の映像を1種類づつ試作した
作品に入れ込んでみて違和感がなければ3色展開にしようと思う



2021.10.01

進捗

カラーチェンジの実装完了
クリックで映像の色が変わるようになった。

memo

前期から大きなアップデートがないので分かりやすい変化を作る必要がある(?)
モックアップを制作し展開事例を紹介する
映像を多くストックし、リロード時にランダムで映像を読み込むようにする

配列変数
let fileNameでファイルを読み込ませてランダムで並べさせる
https://design.kyusan-u.ac.jp/OpenSquareJP/?JavaScript/Syntax
https://koichi-inoue.github.io/JQ_ImageSwitcher/script.js
https://koichi-inoue.github.io/JQ_ImageSwitcher/



2021.09.29

memo

個別ページの作成、アップロード
border、other shapesはそのままの並べ方で新色を追加する方向性でも良いと思ったが、circleのページの映像の並べ方はもう少し考えようと思う。



2021.09.24

memo

拡大時のレイアウト崩れを防ぐために高さの調整を行った。

#canvas{height : auto}



2021.09.20

操作ガイドのデザイン例や追加する映像の調査







PAGES

GUIDE

Last-modified: 2021-11-04 (木) 13:41:37