LogoMarkWhite.png

季卓芸/WorkLog のバックアップ(No.66)


16.png

季卓芸

研究経過報告

CONTENTS




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

31.png




2021.11.06~11.11

予備審査のプレゼン


1. (第1章)

  ① 研究背景
Webサイトの主要なジャンルのひとつにフォトギャラリーがあるが、現在あるサイトは、写真を静的に配置しただけのものが多く、Web特有の表現が生かされていない。そこで本研究では、フォトギャラリーサイトにインタラクティブ要素を加えることで新たなユーザー体験の実現を目指します。
北京長陽公園は、自宅の近くにある公園のひとつで、時々散歩に出かける。春、夏、秋、冬、四季の景色が美しい場所である。フィットネスとエンターテイメント、落ち着いたムード、素晴らしい場所である。長陽公園は、房山区長陽町にある。北京で建設中の11万エーカーの新しい公園の1つです。最大の陸地、地理的な場所、最も完全な緑化樹種、および最も完全なインフラストラクチャを備えた公園。庭園では、人工の風景と元の生態学的な風景が組み合わさって、カラフルな園芸植物のコミュニティを形成し、都市の森の風景を作り出し、市民がリラックス、レクリエーション、フィットネスするのに理想的な場所を提供している。全体的な自然条件によれば、長陽公園は「2つの川と2つの庭園」の生態学的なウォーターフロントの景観を形成している。一部の情報はインターネットで確認できるが、公式のWebサイトは存在していないので、本研究のテーマとしました。


  ②目的 主旨
目指すサイトの特徴は以下のとおり。Webサイトの主要なジャンルのひとつにフォトギャラリーがあるが、現在ある多くのサイトは、写真を静的に配置しただけのものが多く、Web特有の表現が生かされていないです。そこで本研究では、
1) 誰もが容易に使えるインターフェイス、
2)クールな視覚効果、
3)“動感”が強いものなど、
フォトギャラリーサイトにインタラクティブ要素を加えることで新たなユーザー体験の実現を目指したいです。


  ③制作方法
研究開発に使用する言語は、1) HTML、2) CSS、3) JavaScript(jQuery)の3つであります。インタラクティブな仕組みの実現には、主に JavaScript と、そのライブラリーである jQueryプラグインを使用します。具体的には、以下のような「動き」や「触感」を実現する手法を開発します。
1) タッチ・クリックに反応して変化する「動的写真」の導入
2) 写真集の「ページめくり」を進化させたWeb特有のトランジション
3) ユーザーの動きに反応するパーティクル要素の導入
4) インタラクティブに反応する「背景」要素の導入
5) 電子媒体における「手触り感」の再現
誰もが最新情報を入手できるだけでなく、興味を持ってウェブサイトを開くことができるように、ダイナミックかつ、面白くて魅力的なウェブサイトを作ります。

2.アンケートと( 第4章)

  ①アンケートについて
みんなは公園の知る方法はウェブサイトがあまり使わないです。その原因は、北京長陽公園のホームページがなかったと思います。
 アンケート調査した結果を見ると、みんな公園の環境が大切です。


( 第4章)
 
 ② webサイトについてと私の考えます。

4.1. 公園ホームページのコンセプト

ビデオや写真は、公園の雰囲気をより直接的に感じるです。
公園の季節の移り変わりが一番気になります。
春にはチューリップ(3 月末)が咲き、牡丹(4 月末、5 月上旬)は咲きます。
蓮は夏の雨の日(6 月と 7 月)に咲きます。
紅葉とラベンダーが咲きます。
冬の雪が降って、雪の華です。
公園には四季があリます。
そのため、季節に応じてダイナミックに落ちていく感覚で、より直感
的で没入感のあるウェブページになっています。

4.2. 公園をウェブページにする理由

1. 日本語の場合、すべて紙版です。家に持ち帰ることもあります。もう一度読み
たいときは、見つけるのが面倒で、どこに置いたらいいのか忘れてしまうかもしれ
ないです。
2. 公園でしか入手できないので不便であリます。
ウェブサイトを作ると、いつでもどこでも見ることができ、確認も簡単である。
天気予報を載せて、旅行が有益かどうかを確認します。
新型コロナウイルスの流行により、旅行は不便になりましたが、Web ページを見
ると、最新の情報を入手でき、その場で(視覚)することもできます。

4.3. ウェブサイトについて分析

1、
ホームページ
いくつかの公園のウェブサイトを調べたら、「千編一律」という感じで、あまり大きな「創意」がなかったです。
しかし、天壇公園のホームページが
1.マウスをタッチすると、左右に揺れます。
2.中国の水墨画の効果
3.ページの一番下にスライドすると、Web デザインに一致するメニューバーが右側に表示されます。
小さいところで、デザインもあります。


結論:
上記のウェブサイトのホームページには「平面」は、情報が詳しく、取得の最新
情報もとてもいいです。
「動き」をより魅力的にして、誰もがウェブサイトを開くことができるようにします。
ダイナミックで面白くて魅力的なサイトなので、誰もが最新情報を入手できるだ
けでなく、興味を持ってウェブサイトを開くことができるように、ダイナミック
なウェブサイトを作ります。
面白くて魅力的なウェブサイトを作りたいです。
そのため、私のウェブサイトでは、季節の変化に応じてさまざまなパターンを追
加しています。


③4.4.北京長陽公園のネットユーザーの評価
たくさん良い評価があるので、北京長陽公園のホームページがなかった、そして、私は北京長陽公園についてホームページが作りたいです。

3.(第五章) 考察(まとめ)

北京長陽公園は四季はっきり見えます。風景がきれいです。
ウェブサイトについて

誰もが最新情報を入手できるだけでなく、興味を持ってウェブサイトを
開くことができるように、ダイナミックかつ、面白くて魅力的なウェブ
サイトを作ります。
面白くて魅力的なウェブサイトを作りたいです。
そのため、私のウェブサイトでは、季節の変化に応じてさまざまなパター
ンを追加しています。

4.logo

21.png


5.(第七章)作品概要


7.1. コンセプト

アンケートによると、公園の環境が一番気になるので、四季によってウェ
ブサイトのカタログを作成して、利用者が見やすいようにしました。
ウェブサイトを通じて調べてみると、公園に関するウェブサイトの多くは、
情報は非常に詳細ですが、ウェブサイトの視覚設計には、単純に公園の写
真や植物の写真が載せられています。ウェブサイトの視覚的衝撃は少し単
調です。
「天壇公園」のサイトを開くと、ページのデザインや細部のデザインに惹か
れ、公園の情報を知りたいだけでなく、このサイトを見ています。ウェブ
サイトのデザインに対して、惹かれました。
視覚的な喜び。ホームページを開けたら、季節によっては舞い降る。写真
をクリックすると、水の波紋が感じられる。視覚的衝撃力を増す。


ウェブサイト作品紹介

7.2.1. Type1  

メニューの機能強化と天気予報のプラグインを追加しました。
1 番目の作品
1. 通常のウェブページと比較して、写真は一目でより明確な
ウェブページに配置されます。
2. 各写真の水の波紋、落ちてくる花、葉、雪。ダイナミック
な効果がよりよく反映され、個人的な経験の感覚が反映されます。

7.2.2. Type2  

ホームページ:写真の spring、summer などの文字から
それぞれのページへリンクしています。
その他のページ:通常のメニュー動作です。
ページの演出
spring:チューリップ花
summer:雨とハスの花
autumn:葉
winter:雪の花
2 番目の作品
1. 季節のテーマに応じて、落ちてくるチューリップ、
蓮、雨滴、落ち葉、雪片です。
2. すべての写真と情報が一目でわかります。

7.2.3. Type3  

" 写真集の「ページめくり」を進化させた Web 特有のトランジション "
3 番目の作品
1. 電子時代では、紙の本を読む人が少ないので、本の質感を作りた
いです。
2. 本は重いですが、本を覗き込んでいるような感覚がある。
3. ケースの簡単な紹介を持っているような気がします、ウェブペー
ジはリアルタイムで更新することができます。
4. 雑誌や本を忘れてほしくない。つまり、ウェブは本のような感覚
を与えます。


                             以上です。
                      ご清聴ありがとうございます。



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