LogoMarkWhite.png

季卓芸/WorkLog

16.png

季卓芸

研究経過報告

ToDo

37.png

1.-本審査申請について > 学位論文等スケジュール

3.-修了作品展について

5-修了生研究発表(Web公開)について

予備審査指摘事項

作品について

レポートについて






2021.12.11~12.17


1.修了作品展について
AIで作ります。




研究の背景:

Webサイトの主要なジャンルのひとつに
フォトギャラリーがあるが、現在あるサイトは、
写真を静的に配置しただけのものが多く、
Web特有の表現が生かされていない。
そこで本研究では、フォトギャラリーサイトに
インタラクティブ要素を加えることで新たな
ユーザー体験の実現を目指す。




研究の目的:

目指すサイトの特徴は以下のとおりである

誰もが容易に使えるインターフェイス

クールな視覚効果

“ 動感 ” が強いもの





概要:

当作品は、北京長陽公園の日常を記録するフォトギャラリーサイトである。
四季の変化をカタログ化するとともに、インタラクティブな体験ができるサイトを構築した。

一般に公園に関するウェブサイトの多くは、詳細な情報が掲載されているが、公園の写真や植物の写真が単に掲載されているのみので、視覚的な動きが無い。

そこで本制作では、画像の掲載に関してインタラクティブな要素を加え、動的な体験ができるような演出を試みた。さらに、天気予報等の情報を掲載することで、旅行者にとって実用的なものになるよう工夫した。




まとめ


Type1
視覚的な喜び。
ホームページを開けたら、
季節によっては舞い降る。
写真をクリックすると、
水の波紋が感じられる。
視覚的衝撃力を増す。


Type2
それぞれのページへリンクしています。
その他のページ:通常のメニュー動作です。
ページの演出
spring:チューリップ花
summer:雨とハスの花
autumn:葉
winter:雪の花


Type3
インターフェイスに「ページめくり」のプラグインを追加した



3つのサイトを三部作とするために





2.ウェブサイト調整




2021.12.04~12.10


1.学位論文・作品等の本審査申請
wordで作ります。

2.修了作品展について
AIで作ります。

3.ウェブサイト調整
header位置,footer,message,aboutなど。。。


ウェブサイト TYPE1






2021.11.17~12.03

「主たる使用言語を定める」中国語


3つのサイトの位置付けを明確に

3つのサイトを三部作とするために

2021.11.16予備審査の発表は 30分 〜 45分

31.png




2021.11.06~11.11

予備審査のプレゼン





2021.10.29~11.05

論文構成

季卓芸/論文構成
InDesignで。



2021.10.22~10.28

論文構成

季卓芸/論文構成
InDesign60ページぐらいです。

M申請書2021(R3)年改定


Type1,Type2,Type3ウェブサイト調整しました。




2021.10.15~10.21

論文構成

季卓芸/論文構成
InDesign60ページぐらいです。

1 1.背景

1.1.5.北京房山長陽公園への行き方
1.1.6.公園ルート紹介


2 4.webサイトについて

4.1. 公園ホームページのコンセプト
4.2. 公園をウェブページにする理由
4.3.    ウェブサイトについて分析
4.4.    ネットユーザーの評価


3 第5章まとめ

(北京長陽公園紹介と感想、
ウェブサイトについて)


4 第七章 作品概要

7.1. コンセプト
7.2. ウェブサイト作品紹介
7.2.1. Type1 
7.2.2. Type2
7.2.3. Type3 

書いています。



2021.10.08~10.14

1.webサイト編集

ウェブサイト TYPE2



問題:

2.1拡大する ことが編集。

原因探しました。

横ずっと拡大している原因 

flower.js/ rain.js/ leaves.js/のJS部分で

 /* Position the leaf at a random location along the screen
   将叶沿屏幕随机放置  写真のサイズ  例えば1024px(0,1024)*/
   leafDiv.style.left = pixelValue(randomInteger(0, 1024));

前の「2056」は「1024」に変わって、横は大丈夫になります。 

質問:

縦ずっと拡大している原因 

  でも、高さの数値を変更する位置が見つかりませんでした。



2.webサイト編集

ウェブサイト TYPE1

質問:

メニュー : 画面が小さくなり、メニューが自動的に出ますが、

ボタンをクリックしてメニューが出て欲しいです。

スマホ画面について写真サイズ

スマホになったとき、画面のデザイン自動的にパソコン同じデザインようにします。

3.webサイト編集

ウェブサイト TYPE3






2021.10.01~10.07

1.作品レポート

Indesignで
1.背景
2.ウェブサイトについて分析
3.ネットユーザーの評価
書いています。

季卓芸/論文構成



2.webサイト編集

ウェブサイト TYPE1

1.1aside場所下になりましたが、画面の右に欲しいです。

29.png
28.png


1.2スマホについてメニューのサイズ大きくなりたいです。画面に合わせるようにします。

30.png




3.webサイト編集

ウェブサイト TYPE2

2.1拡大する ことが編集。




4.webサイト編集

ウェブサイト TYPE3

2021.09.24~09.30

1.作品レポート

第四章 考察 について

Webサイトの調査と説明
Indesignで

2.レイアウトの編集Indesignで




2021.09.17~

2021.07.17~

1.作品レポート

季卓芸/論文構成


2.Type 3 インターフェイスに「ページめくり」のプラグインを追加しました。 ページ増えています。

3.TYPE4についてページJump

"参考"

3.TYPE4についてページJump


3.TYPE4sample(記録だけです)

"summer page OK"

全部sample

季卓芸/sample




2021.07.10~07.16

1.作品レポート

目次

22.png
23.png



  質問:公園ホームページ作る理由(公園季節)と 公園をウェブページにする必要がある理由/調査: メニューどの部分に入ったらいいですか。
"公園ホームページ作る理由(公園季節)"

11.png


"公園をウェブページにする必要がある理由/調査:"

12.png


24.png


季卓芸/論文構成

2.アンケート結果

"アンケート"

19.png
20.png



"アンケート結果"

25.png


参考

2021.07.02~07.09

"TYPE4"

HOME

SUMMER

更新ウェブサイト Ver.2

aboutページ作って、新しい映像を作った、入りました。

2021.06.19~07.01

更新

1. ウェブサイト Ver.2

2.sample

2021.06.11~06.18

更新

1. ウェブサイト Ver.2

問題1:スマホとノートパソコンについて、ダメになりました。 前天気予報の位置大丈夫でしたが、現在も問題になっています。

はじめに、HTMLファイルの<head>内に<meta>タグを使って、
以下の記述を追加します。
<meta name="viewport" content="width=device-width, initial-scale=1.0">


問題2:buttonの場所でSpring.htmlページに移動したいです。

2. ウェブサイトVer.4

Home page

問題3: 動く感じが説明のようにやってみますが、まだできません。

"ホームページ"

参考

curtain.js

curtain.jsは小さいvanilla WebGL JavaScriptのライブラリです。3Dのインタラクションやアニメーションを作ることができます。

HTMLの画像を含んだ要素を3DのWebGLテクスチャーplaneに変換し、shadersを使い、アニメーションを加えることができるようにしています。それぞれのplaneの大きさやpositionはCSSで変更することができるので、楽に配置変更サイズ変更をすることができます。



3.ウェブサイト調査(まだ考え中です。)





2021.06.04~06.11


1.LOGO

21.png


2.アンケート

19.png
20.png


3.卒研プレゼン




更新ウェブサイトlogoと「BeijingChangyangPark」比例で拡大すると縮小自動的に変更します。

天気予報が調整します。

4.更新ウェブサイトlogoと背景色と天気予報場所とlogo、メニュー位置


Ver.3

本の感じでページを動かします。

Ver.2


4-https://ki0722.github.io/BeijingChangyangPark4/
"参考:
ButtonAnimation

ハンバーガーアイコンをCSSでアニメーションさせています。"
DEMO:-https://koichi-inoue.github.io/Navi-ButtonAnimation/
CODE:-https://github.com/koichi-inoue/Navi-ButtonAnimation

Ver.1

-メニューの機能強化と天気予報のプラグインを追加しました。。

10-https://ki0722.github.io/BeijingChangyangPark10/

参考天気予報

参考色CSS

2021.05.29~6.4


1. アンケート


17.png
18.png

このアンケートを公園来場者100人を目標に6月末までに実施。

2.ウェブサイト

新しいウェブサイト Ver.4

Home page

更新ウェブサイト Ver.3

本の感じでページを動かします。

作品説明

ウェブサイト Ver.2



作品説明

ウェブサイト Ver.1

-メニューの機能強化と天気予報のプラグインを追加しました。。

10-https://ki0722.github.io/BeijingChangyangPark10/


作品説明

2021.05.22~5.28

1.公園ホームページ作る理由(公園季節)

11.png


2. 公園をウェブページにする必要がある理由/調査:

12.png


3. アンケート

10.png


4. logoの制作(継続)


7.png
8.png
LOGOlogo
14.png
15.png
LOGOlogo

logoの説明

9.png




5. ウェブサイト Ver.3

本の感じでページを動かします。
ホームページとspringページだけでサンプルを作りました。

9-https://ki0722.github.io/BeijingChangyangPark9/

作品説明

6. 更新ウェブサイト Ver.2

springチューリップ花、summer雨とハスの花、autumn葉、 winter雪の花全面的に落ちる。

4-https://ki0722.github.io/BeijingChangyangPark4/

7.ウェブサイト Ver.1

メニューの機能と天気予報を増えています.
下部分で写真もメニューの機能です。

10-https://ki0722.github.io/BeijingChangyangPark10/

8-https://ki0722.github.io/BeijingChangyangPark8/


作品説明

8. 作品説明

13.png






2021.05.14~5.21

1. logoの制作(継続)


3.png
4.png
LOGO段組、説明



参考:https://participation.tokyo2020.jp/jp/data/subbrand-usage-guidelines.pdf



2. 研究報告作っています。

5.png




3. 新しいホームページを作ります。

メニューとページ動きを組み合わせる表現します。

下部分で写真もメニューの機能です。

8-https://ki0722.github.io/BeijingChangyangPark8/


問題

      <div class="BOX">
           <a href="spring_07.html">
             <img src="images/spring/spring_07.jpg">
           </a>
         </div>

この部分は消したいですが、消したら、aside部分白くなります。

6.png
bug





更新。
ホームページ、spring、autumn葉全面的落ちる、 winter雪の花全面的に落ちる。
ホームページ:写真の spring、summerなどをクリックしてspringページになります。

他のページはメニューが普通メニューです。

4-https://ki0722.github.io/BeijingChangyangPark4/



2021.05.07~5.13

logoを作って、ページめくりホームページ。

NavigationDesign

レスポンシブデザイン

MaterialDesign

https://design.kyusan-u.ac.jp/OpenSquareJP/?MaterialDesign

薄い本の感じです。

2) 写真集の「ページめくり」を進化させたWeb特有のトランジション







2021.04.23

情報デザイン研究II

tianqi

薄い本の感じです。

2) 写真集の「ページめくり」を進化させたWeb特有のトランジション

2021.04.16

いくつかの作品の構想を多く設計します。

全部

1

2

3

4

5




PAGES

GUIDE

添付ファイル: file39.png 26件 [詳細] file42.png 23件 [詳細] file41.png 23件 [詳細] file40.png 20件 [詳細] file38.png 21件 [詳細] file37.png 59件 [詳細] file36.png 24件 [詳細] file35.png 30件 [詳細] file34.png 66件 [詳細] file33.png 58件 [詳細] file32.png 60件 [詳細] file31.png 113件 [詳細] file30.png 81件 [詳細] file28.png 86件 [詳細] file27.png 85件 [詳細] file29.png 87件 [詳細] file26.png 134件 [詳細] file25.png 128件 [詳細] file24.png 128件 [詳細] file23.png 129件 [詳細] file22.png 135件 [詳細] file21.png 151件 [詳細] file20.png 154件 [詳細] file19.png 150件 [詳細] file18.png 156件 [詳細] file17.png 153件 [詳細] file16.png 179件 [詳細] file11.png 167件 [詳細] file12.png 160件 [詳細] file15.png 161件 [詳細] file14.png 167件 [詳細] file13.png 155件 [詳細] file10.png 160件 [詳細] file9.png 160件 [詳細] file8.png 158件 [詳細] file7.png 156件 [詳細] file6.png 166件 [詳細] file5.png 161件 [詳細] file4.png 149件 [詳細] file3.png 175件 [詳細] file2.png 176件 [詳細] filesc_image.png 124件 [詳細] file1.png 187件 [詳細]
Last-modified: 2021-12-17 (金) 12:17:47