• バックアップ一覧
• 現在との差分 を表示
• ソース を表示
• バックアップ を表示
• 季卓芸/論文構成 へ行く。
  • 1 (2021-06-04 (金) 22:41:18)
  • 2 (2021-06-05 (土) 02:10:14)
  • 3 (2021-06-05 (土) 02:13:46)
  • 4 (2021-06-11 (金) 16:08:59)
  • 5 (2021-06-17 (木) 20:43:48)
  • 6 (2021-08-03 (火) 15:53:19)
  • 7 (2021-08-03 (火) 16:12:15)
  • 8 (2021-08-23 (月) 17:49:47)
  • 9 (2021-09-08 (水) 18:37:23)
  • 10 (2021-09-17 (金) 11:25:04)
  • 11 (2021-09-17 (金) 11:25:04)
  • 12 (2021-09-17 (金) 11:25:04)
  • 13 (2021-10-10 (日) 16:53:55)
  • 14 (2021-10-17 (日) 15:56:46)
  • 15 (2021-10-17 (日) 22:55:21)
  • 16 (2021-10-18 (月) 17:07:47)
  • 17 (2021-10-19 (火) 21:43:40)
  • 18 (2021-10-20 (水) 00:01:49)
  • 19 (2021-10-20 (水) 02:06:20)
  • 20 (2021-10-22 (金) 12:13:42)
  • 21 (2021-11-17 (水) 17:25:31)

---

• 追加された行はこの色です。
• 削除された行はこの色です。

#author("2021-09-08T18:37:23+09:00","default:art-gs","art-gs")
#author("2021-09-17T11:42:14+09:00;2021-09-17T11:25:04+09:00","default:inoue.ko","inoue.ko")
#setheadercolor(white,"linear-gradient(to top, #209cff 0%, #68e0cf 100%)",0.8)

#image(1.png,left,12%)
*Beijing Changyang Park　
北京長陽公園の日常を記録するフォトギャラリーサイト
-'''Keywords：季節,映像 , 風景,  人物,その他'''
-GitHub：https://github.com/ki0722?tab=repositories
~

***CONTENTS
#contents2_1
~
~
**第I部
**第1章　序論
#hr
CENTER:''第I部''
#hr
~


*第1章　序論

**1.1.　概要
***1.1.1.　研究の背景
北京長陽公園は、自宅の近くにある公園のひとつで、時々散歩に出かけます。
春、夏、秋、冬、四季の景色が美しい場所です。

フィットネスとエンターテイメント、落ち着いたムード、素晴らしい場所です。

長陽公園は、房山区長陽町にあります。北京で建設中の11万エーカーの新しい公園の1つです。最大の陸地、地理的な場所、最も完全な緑化樹種、および最も完全なインフラストラクチャを備えた公園です。庭園では、人工の風景と元の生態学的な風景が組み合わさって、カラフルな園芸植物のコミュニティを形成し、都市の森の風景を作り出し、市民がリラックス、レクリエーション、フィットネスするのに理想的な場所を提供します。この庭園は、2013年に北京庭園を受賞しました緑化局は市の「質の高い公園」として評価されました。共植：53550本の木、19920本の灌木、717952年生の花、105743 105芝生、668914㎡地被。
全体的な自然条件によれば、長陽公園は「2つの川と2つの庭園」の生態学的なウォーターフロントの景観を形成しています。

一部の情報はインターネットで確認できますが、公式のWebサイトは存在していないので、私がデザインしたいと考えました。
~

***1.1.2.　目的・主旨
目指すサイトの特徴は以下のとおりです。
-誰もが容易に使えるインターフェイス
-クールな視覚効果
-“動感”が強いもの
~

***1.1.3.　ターゲット
-北京への観光を検討中の日本人
-北京市民
~

***1.1.4.　ハイライト
-闲庭信步
散歩 "闲庭信步"スポットには、松云台、浣溪叠、枫舞清韵、涵秋叠影などのスポットがあります。全体的なテーマは木です。中庭をのんびり歩くなど、ゆったりとくつろげる場所を提供します。
-閑庭散歩
散歩 "閑庭散歩"スポットには、松云台、浣溪叠、枫舞清韵、涵秋叠影などのスポットがあります。全体的なテーマは木です。中庭をのんびり歩くなど、ゆったりとくつろげる場所を提供します。

-寧夏の秋の風景
「寧夏の秋の風景」のレジャーとエンターテイメントの景勝地には、白州広場、観音流水遊歩道、サクラダンス、空飛ぶ森、子供たちの楽しい広場、フィットネストレイル、その他の景勝地があります。この部分は色とりどりの葉が多く、秋には晩秋に太陽が沈み、空は赤い雲でいっぱいで、赤いカエデの葉は空と共通です。

-春华秋实
「春华秋实」のシーンには、主に梨花の春の雪、ベゴニアフラワーストリーム、サクラダンスフライング、秀逸台、陳西広場などの景勝地があります。この地域は、「春に開花し、秋に果物を広げる」植物、したがって「春の花と秋の果物」が優勢です。
-春華秋実
「春華秋実」のシーンには、主に梨花の春の雪、ベゴニアフラワーストリーム、サクラダンスフライング、秀逸台、陳西広場などの景勝地があります。この地域は、「春に開花し、秋に果物を広げる」植物、したがって「春の花と秋の果物」が優勢です。
~
~

**1.2.　サイトの仕様

***1.2.1.サイトマップ
#image(sitemap.jpg) 
~

***1.2.2.ワイヤーフレーム
#image(wire frame1.jpg) 
~

***1.2.3.携帯ワイヤーフレーム
#image(wire frame2.jpg) 
~
~
~

*第二章　制作方法

**第二章　方法

***2.1.　制作方法（言語・技術）
**2.1.　言語・技術
//(多做一些动画网页小样，问卷调查，选出好的网页)
//(如何查阅CSS，JS，JQ内容)
研究開発に使用する言語は以下の_３つ_である。
-1) HTML:ページの構造
-2) CSS：ページのビジュアルデザイン
-3) JavaScript（jQuery）： ページの動的変更
インタラクティブな仕組みの実現には、主に JavaScript と、そのライブラリーである jQueryプラグインを使用する。具体的には、以下のような「動き」や「触感」を実現する手法を開発する。
~

-1) タッチ・クリックに反応して変化する「動的写真」の導入
-2) 写真集の「ページめくり」を進化させたWeb特有のトランジション
-3) ユーザーの動きに反応するパーティクル要素の導入
-4) インタラクティブに反応する「背景」要素の導入
-5) 電子媒体における「手触り感」の再現
~
~

***2.2.　制作方法（技法）
**2.2.　技法
-Photoshop：写真を調整
-Adobe Illustrator：logoのデザインを作成
-HTML:ページの構造
-CSS：ページのビジュアルデザイン
-JavaScript:ページの動的変更  
-jQuery:ページの動的変更  
-jQuery プラグイン:様々な表現機能
~
~

***2.3.　制作環境
-ハードウエア
**2.3.　制作環境
***2.3.1.  ハードウエア
--iMac、Mac、Windows、デジタルカメラ
-ソフトウエア
~

***2.3.2.  ソフトウエア
--Atom Editor
--Adobe Photoshop
--Adobe Illustrator
--GitHub

~
~
~

**第三章　結果
***3.1.　　アンケート
***3.1.1.　アンケート
*第三章　アンケート調査

**3.1.　アンケートの方法
#settableborder(none)
|33|33|33|c
|#image(3.png)|#image(4.png)|
~
***3.1.2.　アンケート結果
~

**3.2.　アンケートの結果
#image(7.png)
~
"中国ではみんなスマートフォンとコンピュータ持っています。"

~
~
~


**第四章　考察
***4.1.　公園ホームページ作る理由（公園季節）
*第四章　考察
**4.1.　公園ホームページ作る理由（公園季節）
"公園ホームページ作る理由（公園季節）"
#image(5.png)
~
***4.2.　公園をウェブページにする必要がある理由/調査：
~

**4.2.　公園をウェブページにする必要がある理由/調査：
#image(6.png)
~
ウェブサイト調査

***4.2.1.　ウェブサイト調査
-公園について：
JAPAN
--1.http://www.hanakoen.com/
--2.http://kanatakenosato.jp
--3.https://www.showakinen-koen.jp/
--4.https://hitachikaihin.jp/
--5.https://tsumugiweb.com/2020/06/01/minnanokouen-hp/
--6.https://www.shinrinkoen.jp/
--7.https://uminaka-park.jp/
--8.https://www.tokyo-park.or.jp/
--9.https://www.huistenbosch.co.jp/
CHINA
--10.http://www.capg.org.cn/
--11.http://www.bjjspark.com/index.jhtml
--12.https://www.beihaipark.com.cn/
--13.http://www.tiantanpark.com/
--14.
--15.
-結論：

~


~
~
**第五章　考察（まとめ）
***　5.1.　結論

*第五章　考察（まとめ）
**結論
~
~
**参考資料
~
***参考文献
1.Generative Design with P5.js
2.Webデザイン良質見本帳
3.すべての人に知っておいてほしいJavaScriptの基本原則
4.jQuery仕事の現場でサッと使える！デザイン教科書
5.Web前端开发入门与实战
6.计算机网络 自项下方法
7.深入理解计算机系统
~
~
***参考サイト｜技法
-http://babeltheking.com/eng
-http://mike-tucker.com/13/
-https://www.nike-react.com/
-https://run.mockplus.cn/bXjHi8XasvtPbcaA/index.html?to=C0D6B533-1BE3-E811-9D33-D4619D08F0A4
-https://monyssb.com/
-https://faits-marquants.inra.fr

***参考サイト｜公園
-http://www.hanakoen.com
-http://kanatakenosato.jp

-https://www.17sucai.com/pins/demo-show?id=37923　桜　春
-https://www.17sucai.com/pins/demo-show?id=7609　落葉　秋
-https://www.17sucai.com/pins/demo-show?id=27371　雪　冬
-https://www.17sucai.com/pins/demo-show?id=36013　雪　冬
-https://www.17sucai.com/pins/demo-show?id=8465　雪　冬
-https://www.17sucai.com/pins/tag/6584.html　全部

***参考サイト｜サイトデザイン
-https://www.ikesai.com/cat/travel/
-1
--https://nisekohakuunso.com/ja/
--https://hoshinoya.com    
--https://studio-has.jp

-2
--https://www.museum-kawakyu.jp  

-3
--http://robinmastromarino.com
#hr
CENTER:''第II部''
#hr
~

***参考天気予報
-https://blog.csdn.net/qq_39019822/article/details/85248755
-https://www.tianqi.com/plugin/
~
***参考色CSS
-https://color.uisdc.com/
~

-動く、機能性について：
--1.https://www.17sucai.com/pins/demo-show?id=7609
~
***参考
--[[マウスのデザインです。>https://weekend.jp/aroma-diffuser/]]
--マウスhttps://design.kyusan-u.ac.jp/OpenSquareJP/?CSS/Tips
--https://www.museum-kawakyu.jp
--http://robinmastromarino.com/
"https://chordbook.com/guitar-scales/"
--https://design.kyusan-u.ac.jp/OpenSquareJP/?jQuery/ModalWindow
--https://design.kyusan-u.ac.jp/OpenSquareJP/?jQuery/Slider
--https://design.kyusan-u.ac.jp/OpenSquareJP/?jQuery/WebGL_Ripples
--https://www.museum-kawakyu.jp/
"button"
--https://jajaaan.co.jp/css/button/
-"mouse"
--https://wk-partners.co.jp/homepage/blog/hpseisaku/javascript/mouse-cursor-css-jquery/


**第II部
**第一章　研究成果（制作物の現状）
**1.1.　作品
*第六章　研究成果（制作物の現状）
** 6.1.　作品
4つのWebサイトをシリーズで制作しています。
~

***1.1.1　Type 1
***6.1.1　Type 1
-メニューの機能強化と天気予報のプラグインを追加しました。
//下部分で写真もメニューの機能です。
~

#iframe(https://ki0722.github.io/BeijingChangyangPark10/)
-https://ki0722.github.io/BeijingChangyangPark10/
~

//#iframe(https://ki0722.github.io/BeijingChangyangPark8/)
//-https://ki0722.github.io/BeijingChangyangPark8/
//~

***1.1.2.　Type 2
***6.1.2.　Type 2
-ホームページ：写真の spring、summer などの文字から それぞれのページへリンクしています。
-その他のページ：通常のメニュー動作です。
-ページの演出
--spring：チューリップ花
--summer：雨とハスの花
--autumn：葉
--winter：雪の花
~

#iframe(https://ki0722.github.io/BeijingChangyangPark4/)
-https://ki0722.github.io/BeijingChangyangPark4/
~
~

***1.1.3.　Type 3
***6.1.3.　Type 3
-インターフェイスに「ページめくり」のプラグインを追加しました。
~

#iframe(https://ki0722.github.io/BeijingChangyangPark9/)
-https://ki0722.github.io/BeijingChangyangPark9/
~




~
~



***1.1.4.　Type4
***6.1.4.　Type4
"mouse更新"

#iframe( https://ki0722.github.io/BeijingChangyangPark11home/)
- https://ki0722.github.io/BeijingChangyangPark11home/
~

#iframe( https://ki0722.github.io/BeijingChangyangPark11summer/)
- https://ki0722.github.io/BeijingChangyangPark11summer/
~

#iframe( https://ki0722.github.io/Beijingcangyangpark11summer2/)
-https://ki0722.github.io/Beijingcangyangpark11summer2/

~
~
**1.2.　LOGO

**6.2.　LOGO
#image(2.png)
~
~
**第二章　作品概要
***2.1.　コンセプト
~

*第七章　作品概要

**7.1.　コンセプト

~
***2.2.　ウェブサイト作品紹介
~
***2.2.1.　Type1　　

**7.2.　ウェブサイト作品紹介
~
***7.2.1.　Type1　　
-メニューの機能強化と天気予報のプラグインを追加しました。

~
***2.2.2.　Type2　　
***7.2.2.　Type2　　
-ホームページ：写真の spring、summer などの文字から それぞれのページへリンクしています。
-その他のページ：通常のメニュー動作です。
-ページの演出
--spring：チューリップ花
--summer：雨とハスの花
--autumn：葉
--winter：雪の花

~
~　
***2.2.3.　Type3　　

***7.2.3.　Type3　　
"写真集の「ページめくり」を進化させたWeb特有のトランジション"
#settableborder(none)
|33|33|33|33|c
|#image(8.jpg)|#image(9.jpg)|#image(10.jpg)|
|Spring|Spring|Summer|
|#image(11.jpg)|#image(12.jpg)|#image(13.jpg)|
|Autumn|Winter|Other|

~
***2.2.4.　Type4　　
***7.2.4.　Type4　　
"mouse更新"
"背景画像に波紋をつくる jQuery WebGL Ripples "
"jQuery Slider / Carousel
スライダー（カルーセル）の活用事例"
~
~
~
*参考資料
~
**参考文献
1.Generative Design with P5.js
2.Webデザイン良質見本帳
3.すべての人に知っておいてほしいJavaScriptの基本原則
4.jQuery仕事の現場でサッと使える！デザイン教科書
5.Web前端开发入门与实战
6.计算机网络 自项下方法
7.深入理解计算机系统
~
~
**参考サイト｜技法
-http://babeltheking.com/eng
-http://mike-tucker.com/13/
-https://www.nike-react.com/
-https://run.mockplus.cn/bXjHi8XasvtPbcaA/index.html?to=C0D6B533-1BE3-E811-9D33-D4619D08F0A4
-https://monyssb.com/
-https://faits-marquants.inra.fr
~
~
**参考サイト｜公園
-http://www.hanakoen.com
-http://kanatakenosato.jp

-https://www.17sucai.com/pins/demo-show?id=37923　桜　春
-https://www.17sucai.com/pins/demo-show?id=7609　落葉　秋
-https://www.17sucai.com/pins/demo-show?id=27371　雪　冬
-https://www.17sucai.com/pins/demo-show?id=36013　雪　冬
-https://www.17sucai.com/pins/demo-show?id=8465　雪　冬
-https://www.17sucai.com/pins/tag/6584.html　全部
~
~
**参考サイト｜サイトデザイン
-https://www.ikesai.com/cat/travel/
-1
--https://nisekohakuunso.com/ja/
--https://hoshinoya.com    
--https://studio-has.jp

-2
--https://www.museum-kawakyu.jp  

-3
--http://robinmastromarino.com
~
~
**参考天気予報
-https://blog.csdn.net/qq_39019822/article/details/85248755
-https://www.tianqi.com/plugin/
~
~
**参考色CSS
-https://color.uisdc.com/
~

-動く、機能性について：
--1.https://www.17sucai.com/pins/demo-show?id=7609
~

**参考
--[[マウスのデザインです。>https://weekend.jp/aroma-diffuser/]]
--マウスhttps://design.kyusan-u.ac.jp/OpenSquareJP/?CSS/Tips
--https://www.museum-kawakyu.jp
--http://robinmastromarino.com/
"https://chordbook.com/guitar-scales/"
--https://design.kyusan-u.ac.jp/OpenSquareJP/?jQuery/ModalWindow
--https://design.kyusan-u.ac.jp/OpenSquareJP/?jQuery/Slider
--https://design.kyusan-u.ac.jp/OpenSquareJP/?jQuery/WebGL_Ripples
--https://www.museum-kawakyu.jp/
"button"
--https://jajaaan.co.jp/css/button/
-"mouse"
--https://wk-partners.co.jp/homepage/blog/hpseisaku/javascript/mouse-cursor-css-jquery/

~
~
~