研究経過報告
① 研究背景
Webサイトの主要なジャンルのひとつにフォトギャラリーがあるが、現在あるサイトは、写真を静的に配置しただけのものが多く、Web特有の表現が生かされていない。そこで本研究では、フォトギャラリーサイトにインタラクティブ要素を加えることで新たなユーザー体験の実現を目指します。
北京長陽公園は、自宅の近くにある公園のひとつで、時々散歩に出かける。春、夏、秋、冬、四季の景色が美しい場所である。フィットネスとエンターテイメント、落ち着いたムード、素晴らしい場所である。長陽公園は、房山区長陽町にある。北京で建設中の11万エーカーの新しい公園の1つです。最大の陸地、地理的な場所、最も完全な緑化樹種、および最も完全なインフラストラクチャを備えた公園。庭園では、人工の風景と元の生態学的な風景が組み合わさって、カラフルな園芸植物のコミュニティを形成し、都市の森の風景を作り出し、市民がリラックス、レクリエーション、フィットネスするのに理想的な場所を提供している。全体的な自然条件によれば、長陽公園は「2つの川と2つの庭園」の生態学的なウォーターフロントの景観を形成している。一部の情報はインターネットで確認できるが、公式のWebサイトは存在していないので、本研究のテーマとしました。
②目的 主旨
目指すサイトの特徴は以下のとおり。Webサイトの主要なジャンルのひとつにフォトギャラリーがあるが、現在ある多くのサイトは、写真を静的に配置しただけのものが多く、Web特有の表現が生かされていないです。そこで本研究では、
1) 誰もが容易に使えるインターフェイス、
2)クールな視覚効果、
3)“動感”が強いものなど、
フォトギャラリーサイトにインタラクティブ要素を加えることで新たなユーザー体験の実現を目指したいです。
③制作方法
研究開発に使用する言語は、1) HTML、2) CSS、3) JavaScript（jQuery）の３つであります。インタラクティブな仕組みの実現には、主に JavaScript と、そのライブラリーである jQueryプラグインを使用します。具体的には、以下のような「動き」や「触感」を実現する手法を開発します。
1) タッチ・クリックに反応して変化する「動的写真」の導入
2) 写真集の「ページめくり」を進化させたWeb特有のトランジション
3) ユーザーの動きに反応するパーティクル要素の導入
4) インタラクティブに反応する「背景」要素の導入
5) 電子媒体における「手触り感」の再現
誰もが最新情報を入手できるだけでなく、興味を持ってウェブサイトを開くことができるように、ダイナミックかつ、面白くて魅力的なウェブサイトを作ります。
①アンケートについて
みんなは公園の知る方法はウェブサイトがあまり使わないです。その原因は、北京長陽公園のホームページがなかったと思います。
アンケート調査した結果を見ると、みんな公園の環境が大切です。
（ 第４章）
② webサイトについてと私の考えます。
4.1. 公園ホームページのコンセプト
ビデオや写真は、公園の雰囲気をより直接的に感じるです。
公園の季節の移り変わりが一番気になります。
春にはチューリップ（3 月末）が咲き、牡丹（4 月末、5 月上旬）は咲きます。
蓮は夏の雨の日（6 月と 7 月）に咲きます。
紅葉とラベンダーが咲きます。
冬の雪が降って、雪の華です。
公園には四季があリます。
そのため、季節に応じてダイナミックに落ちていく感覚で、より直感
的で没入感のあるウェブページになっています。
4.2. 公園をウェブページにする理由
1. 日本語の場合、すべて紙版です。家に持ち帰ることもあります。もう一度読み
たいときは、見つけるのが面倒で、どこに置いたらいいのか忘れてしまうかもしれ
ないです。
2. 公園でしか入手できないので不便であリます。
ウェブサイトを作ると、いつでもどこでも見ることができ、確認も簡単である。
天気予報を載せて、旅行が有益かどうかを確認します。
新型コロナウイルスの流行により、旅行は不便になりましたが、Web ページを見
ると、最新の情報を入手でき、その場で（視覚）することもできます。
4.3. ウェブサイトについて分析
1、
ホームページ
いくつかの公園のウェブサイトを調べたら、「千編一律」という感じで、あまり大きな「創意」がなかったです。
しかし、天壇公園のホームページが
１.マウスをタッチすると、左右に揺れます。
2.中国の水墨画の効果
3.ページの一番下にスライドすると、Web デザインに一致するメニューバーが右側に表示されます。
小さいところで、デザインもあります。
結論：
上記のウェブサイトのホームページには「平面」は、情報が詳しく、取得の最新
情報もとてもいいです。
「動き」をより魅力的にして、誰もがウェブサイトを開くことができるようにします。
ダイナミックで面白くて魅力的なサイトなので、誰もが最新情報を入手できるだ
けでなく、興味を持ってウェブサイトを開くことができるように、ダイナミック
なウェブサイトを作ります。
面白くて魅力的なウェブサイトを作りたいです。
そのため、私のウェブサイトでは、季節の変化に応じてさまざまなパターンを追
加しています。
③4.4.北京長陽公園のネットユーザーの評価
たくさん良い評価があるので、北京長陽公園のホームページがなかった、そして、私は北京長陽公園についてホームページが作りたいです。
北京長陽公園は四季はっきり見えます。風景がきれいです。
ウェブサイトについて
誰もが最新情報を入手できるだけでなく、興味を持ってウェブサイトを
開くことができるように、ダイナミックかつ、面白くて魅力的なウェブ
サイトを作ります。
面白くて魅力的なウェブサイトを作りたいです。
そのため、私のウェブサイトでは、季節の変化に応じてさまざまなパター
ンを追加しています。
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. 雑誌や本を忘れてほしくない。つまり、ウェブは本のような感覚
を与えます。
以上です。
ご清聴ありがとうございます。
季卓芸/論文構成
InDesignで。
季卓芸/論文構成
InDesign60ページぐらいです。
季卓芸/論文構成
InDesign60ページぐらいです。
1.1.5.北京房山長陽公園への行き方 1.1.6.公園ルート紹介
4.1. 公園ホームページのコンセプト 4.2. 公園をウェブページにする理由 4.3. ウェブサイトについて分析 4.4. ネットユーザーの評価
（北京長陽公園紹介と感想、 ウェブサイトについて）
7.1. コンセプト 7.2. ウェブサイト作品紹介 7.2.1. Type1 7.2.2. Type2 7.2.3. Type3
書いています。
ウェブサイト TYPE2
問題：
原因探しました。
flower.js/ rain.js/ leaves.js/のJS部分で
/* Position the leaf at a random location along the screen 将叶沿屏幕随机放置 写真のサイズ 例えば１０２４px（０，１０２４）*/ leafDiv.style.left = pixelValue(randomInteger(0, 1024));
質問：
でも、高さの数値を変更する位置が見つかりませんでした。
ウェブサイト TYPE1
質問：
ボタンをクリックしてメニューが出て欲しいです。
スマホになったとき、画面のデザイン自動的にパソコン同じデザインようにします。
ウェブサイト TYPE3
Indesignで
1.背景
2.ウェブサイトについて分析
3.ネットユーザーの評価
書いています。
ウェブサイト TYPE1
 |  |
ウェブサイト TYPE2
ウェブサイト TYPE3
第四章 考察 について
Webサイトの調査と説明
Indesignで
"参考"
"summer page OK"
目次
質問：公園ホームページ作る理由（公園季節）と 公園をウェブページにする必要がある理由/調査： メニューどの部分に入ったらいいですか。
"公園ホームページ作る理由（公園季節）"
"公園をウェブページにする必要がある理由/調査："
"アンケート"
 |  |
"アンケート結果"
"TYPE4"
aboutページ作って、新しい映像を作った、入りました。
更新
更新
はじめに、HTMLファイルの＜head＞内に＜meta＞タグを使って、 以下の記述を追加します。 <meta name="viewport" content="width=device-width, initial-scale=1.0">
button作る原因は見にやすいです。
Home page
"ホームページ"
curtain.jsは小さいvanilla WebGL JavaScriptのライブラリです。3Dのインタラクションやアニメーションを作ることができます。
HTMLの画像を含んだ要素を3DのWebGLテクスチャーplaneに変換し、shadersを使い、アニメーションを加えることができるようにしています。それぞれのplaneの大きさやpositionはCSSで変更することができるので、楽に配置変更サイズ変更をすることができます。
| |
天気予報が調整します。
本の感じでページを動かします。
4-https://ki0722.github.io/BeijingChangyangPark4/
"参考：
ButtonAnimation
ハンバーガーアイコンをCSSでアニメーションさせています。"
DEMO：-https://koichi-inoue.github.io/Navi-ButtonAnimation/
CODE：-https://github.com/koichi-inoue/Navi-ButtonAnimation
-メニューの機能強化と天気予報のプラグインを追加しました。。
10-https://ki0722.github.io/BeijingChangyangPark10/
 |  |
このアンケートを公園来場者100人を目標に6月末までに実施。
Home page
本の感じでページを動かします。
-<embed src=" https://v.douyin.com/euU5qfW/ " rel="external nofollow" width="480" height="400" type="application/x-shockwave-flash"> </embed>
作品説明
作品説明
-メニューの機能強化と天気予報のプラグインを追加しました。。
10-https://ki0722.github.io/BeijingChangyangPark10/
作品説明
 |  |
| LOGO | logo |
 |  |
| LOGO | logo |
logoの説明
本の感じでページを動かします。
ホームページとspringページだけでサンプルを作りました。
9-https://ki0722.github.io/BeijingChangyangPark9/
作品説明
springチューリップ花、summer雨とハスの花、autumn葉、 winter雪の花全面的に落ちる。
4-https://ki0722.github.io/BeijingChangyangPark4/
メニューの機能と天気予報を増えています.
下部分で写真もメニューの機能です。
10-https://ki0722.github.io/BeijingChangyangPark10/
8-https://ki0722.github.io/BeijingChangyangPark8/
作品説明
 |  |
| LOGO | 段組、説明 |
参考：https://participation.tokyo2020.jp/jp/data/subbrand-usage-guidelines.pdf
メニューとページ動きを組み合わせる表現します。
下部分で写真もメニューの機能です。
8-https://ki0722.github.io/BeijingChangyangPark8/
問題
<div class="BOX">
<a href="spring_07.html">
<img src="images/spring/spring_07.jpg">
</a>
</div>
この部分は消したいですが、消したら、aside部分白くなります。
| bug |
更新。
ホームページ、spring、autumn葉全面的落ちる、 winter雪の花全面的に落ちる。
ホームページ：写真の spring、summerなどをクリックしてspringページになります。
他のページはメニューが普通メニューです。
4-https://ki0722.github.io/BeijingChangyangPark4/
logoを作って、ページめくりホームページ。
https://design.kyusan-u.ac.jp/OpenSquareJP/?MaterialDesign
2) 写真集の「ページめくり」を進化させたWeb特有のトランジション
2) 写真集の「ページめくり」を進化させたWeb特有のトランジション
いくつかの作品の構想を多く設計します。
