研究経過報告
1.-本審査申請について ＞ 学位論文等スケジュール
3.-修了作品展について
5-修了生研究発表（Web公開）について
1.修了作品展について
AIで作ります。
研究の背景:
Webサイトの主要なジャンルのひとつに
フォトギャラリーがあるが、現在あるサイトは、
写真を静的に配置しただけのものが多く、
Web特有の表現が生かされていない。
そこで本研究では、フォトギャラリーサイトに
インタラクティブ要素を加えることで新たな
ユーザー体験の実現を目指す。
研究の目的:
目指すサイトの特徴は以下のとおりである
誰もが容易に使えるインターフェイス
クールな視覚効果
“ 動感 ” が強いもの
概要:
当作品は、北京長陽公園の日常を記録するフォトギャラリーサイトである。
四季の変化をカタログ化するとともに、インタラクティブな体験ができるサイトを構築した。
一般に公園に関するウェブサイトの多くは、詳細な情報が掲載されているが、公園の写真や植物の写真が単に掲載されているのみので、視覚的な動きが無い。
そこで本制作では、画像の掲載に関してインタラクティブな要素を加え、動的な体験ができるような演出を試みた。さらに、天気予報等の情報を掲載することで、旅行者にとって実用的なものになるよう工夫した。
まとめ
Type1
視覚的な喜び。
ホームページを開けたら、
季節によっては舞い降る。
写真をクリックすると、
水の波紋が感じられる。
視覚的衝撃力を増す。
Type2
それぞれのページへリンクしています。
その他のページ：通常のメニュー動作です。
ページの演出
spring：チューリップ花
summer：雨とハスの花
autumn：葉
winter：雪の花
Type3
インターフェイスに「ページめくり」のプラグインを追加した
 |  |  |
| Type1 | Type2 | Type3 |
2.ウェブサイト調整
1.学位論文・作品等の本審査申請
wordで作ります。
2.修了作品展について
AIで作ります。
3.ウェブサイト調整
header位置，footer，message，aboutなど。。。
ウェブサイト TYPE1
 |  |  |
| Type1 | Type2 | Type3 |
季卓芸/論文構成
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特有のトランジション
いくつかの作品の構想を多く設計します。
