Beijing Changyang Park
北京長陽公園の日常を記録するフォトギャラリーサイト
- Keywords：季節,映像 , 風景, 人物,その他
- GitHub：https://github.com/ki0722?tab=repositories
CONTENTS
第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.1.5. 北京房山長陽公園への行き方
北京房山长阳公园怎么去?
【自驾线路】
京港澳高速从长阳/京良路出口(19b)离开(经京良收费站)，遇岔口向右，进入S315/京良路(辅路)。沿S315/京良路(辅路)行驶1.5公里，右转进入长兴西街。沿长兴西街行驶327米，右转进入公园北路，行驶约300米，左手即可看见公园北门。
【自動運転ルート】 北京-香港-マカオ高速道路の長陽/京良道路出口（19b）（Jingliang有料駅経由）を出て、分岐点で右折し、S315 / Jingliang Road（補助道路）に入ります。 S315 / Jingliang Road（Secondary Road）に沿って1.5 km進み、右折してChangxing WestStreetに入ります。 Changxing West Streetに沿って327メートル進み、Gongyuan North Roadに右折し、約300メートル進むと、左側に公園の北門が見えます。
【公交路线】
1、六里桥东(E口进)乘坐地铁9号线(郭公庄方向)，7站，在郭公庄换乘地铁房山线(苏庄方向)，4站，在地铁篱笆房下车(A1口出)步行135米，地铁篱笆房站换乘房2(奥特莱斯方向)，2站，篱笆房下车步行675米，即达长阳公园北门。
2、六里桥东乘坐831(或835、837)，1站，约30分钟，在长阳环岛南下车，步行224米至九州溪雅苑南，换乘房2(或房15、房51、房42)篱笆房方向，1站，篱笆房下车步行694米，即达长阳公园北门。
【バス路線】 1. Liuli Bridgeの東（E出口から入る）から、メトロ9号線（郭公荘への方向）に7駅、郭公荘でFangshan Line（Suzhuangへの方向）に乗り換え、4駅、地下鉄籬笥駅で下車します。 （A1）出口）135メートル歩き、地下鉄リバファン駅の2号室に乗り換え（アウトレット方面）、2駅、リバファンで下車し、675メートル歩いて長陽公園の北門に到着します。 2. Liuli Bridgeの東831（または835、837）に乗り、1駅、約30分、Changyang Huandao Southで下車し、Jiuzhou Xiyayuan Southまで224メートル歩き、Room 2（またはRoom 15、Room 51、Room 42）Leibafang方面に1駅、Libafangで下車し、694メートル歩くとChangyangParkの北門に到着します。
1.1.6. 公園ルート紹介
公园路线简介
长阳公园是一条位于房山区，北京市，中国的步道，他的长度为2.1km (大约3,000步) ，爬升高度为0m，难度评级简单 。
公園ルート紹介
長陽公園は、中国北京房山区にあるトレイルで、長さ2.1km（約3,000段）、登山高さ0m、難易度はシンプルです。
电话 : 010-56290506
用时参考 : 1-3小时
门票 : 无需门票。
开放时间 :
05:00-21:00(旺季),06:00-21:00(淡季) (1月1日-12月31日 周一-周日)
• 電話 : 010-56290506
時間基準 : 1〜3時間
切符売場 : チケットは必要ありません。
営業時間 : 05：00〜21：00（ピークシーズン）、06：00〜21：00（ローシーズン）（1月1日〜12月31日月曜日〜日曜日）
1.2. サイトの仕様
1.2.1.サイトマップ
1.2.2.ワイヤーフレーム
1.2.3.携帯ワイヤーフレーム
第二章 制作方法
2.1. 言語・技術
研究開発に使用する言語は以下の_３つ_である。
- 1) HTML:ページの構造
- 2) CSS：ページのビジュアルデザイン
- 3) JavaScript（jQuery）： ページの動的変更
インタラクティブな仕組みの実現には、主に JavaScript と、そのライブラリーである jQueryプラグインを使用する。具体的には、以下のような「動き」や「触感」を実現する手法を開発する。
- 1) タッチ・クリックに反応して変化する「動的写真」の導入
- 2) 写真集の「ページめくり」を進化させたWeb特有のトランジション
- 3) ユーザーの動きに反応するパーティクル要素の導入
- 4) インタラクティブに反応する「背景」要素の導入
- 5) 電子媒体における「手触り感」の再現
2.2. 技法
- Photoshop：写真を調整
- Adobe Illustrator：logoのデザインを作成
- Adobe InDesign：レイアウト
- HTML:ページの構造
- CSS：ページのビジュアルデザイン
- JavaScript:ページの動的変更
- jQuery:ページの動的変更
- jQuery プラグイン:様々な表現機能
2.3. 制作環境
2.3.1. ハードウエア
- iMac、Mac、Windows、デジタルカメラ
2.3.2. ソフトウエア
- Atom Editor
- Adobe Photoshop
- Adobe Illustrator
- Adobe InDesign
- GitHub
第三章 アンケート調査
3.1. アンケートの方法
 |  |
3.2. アンケートの結果
"中国ではみんなスマートフォンとコンピュータ持っています。"
1.群衆の年齢
10歳未満 7%
10歳から30歳 36%
30歳から50歳 48%
50歳以上 9%
2.住む場所
1キロ以内 56%
1キロ〜20キロ 38%
20キロ以上 6%
3.公園に来る目的
家族は週末に遊びに来て 7%
運動に来て 24%
通常は散歩します 59%
花見 8%
その他 2%
4.公園を知る方法
ウェブサイト 2%
スマートフォン 3%
他の人の話を聞く 94%
その他 1%
5.スマートフォンの種類
Apple 39%
Huawei 43%
Xiaomi 4%
OPPO 6%
Samsung 3%
その他 5%
6.コンピュータの種類
Apple 18%
Huawei 22%
Lenovo 31%
Dell 25%
Samsung 3%
その他 1%
7.公園の 何が一番気になりますか。 公園のどこの写真が一番見たいですか。
花 24%
橋と水 29%
環境 47%
第四章 webサイトについて
4.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/
- 結論：
4.2. ネットユーザーの評価(网民评价)
 |  |
 |  |
1.长阳公园位于北京市房山区，也叫房山新城滨水森林公园。公园按照地理环境形成了两河两园的生态滨水景观，两河是指小清河和哑叭河，两园指长阳公园和大学城公园。
長陽公園は北京の房山区にあり、房山ニューシティウォーターフロントフォレストパークとしても知られています。 地理的環境に応じて、公園は2つの川と2つの公園の生態学的なウォーターフロントの風景を形成します.2つの川は小清川と矢場川を指し、2つの公園は長陽公園と大学タウンパークを指します。
2.公园内景色优美、花草繁茂、环境清幽，主要有城市综合区，湿地展示区和郊野生态区三个部分，分布着华秋实、环翠岛、绿荫迷宫、凝霞秋色、闲庭信步等景点。园内草地开阔，除了荷花、樱花、海棠花、薰衣草等，还种植了银杏，开满了野花，是附近居民休闲娱乐、郊游放松的好地方。
公園は美しい景色、豊かな花や草、そして静かな環境を持っています。それは主に3つの部分で構成されています：包括的な都市部、湿地展示エリア、郊外の生態ゾーン。Huaqiushi、Huaqiu島、緑の迷路、Ningxia秋があります景色、そしてのんびりと庭を散歩。アトラクション。 庭の草原は開放的で、蓮、桜、クラブアップル、ラベンダーなどのほか、イチョウも植えられており、野花が咲き乱れ、近くの住民がくつろいだり、楽しませたり、楽しんだりするのに最適な場所です。ピクニックをします。
3.绿化很好，有专用跑道（虽然磨损较厉害），有儿童活动设备区域，有公共健身设施，天气好还会看到三五好友唱歌娱乐，冬天河面结冰就是天然溜冰场！总体很不错，管理和卫生都很好！对，还有应急对讲系统！
緑はとても良く、専用のトラックがあり（より摩耗していますが）、子供向けのアクティビティ機器エリアがあり、公共のフィットネス施設があり、天気が良く、3〜5人の友人が歌ったり娯楽を楽しんだりします。冬に凍る川は天然のアイススケートリンクです！ 全体的にとても良いです、管理と衛生はとても良いです！ はい、緊急インターホンシステムもあります！
第五章 考察（まとめ）
結論
北京長陽公園紹介と感想
公园一共分为城市综合区、湿地展示区和郊野生态区三部分，并且有春华秋实、环翠岛、绿荫迷宫、凝霞秋色等众多景点，是一处有山水、有树木、有花草的绝美之地。
公園は市内統合エリア、湿地展示場、郊外の生態区の3つの部分に分かれており、春華秋実、环翠岛、绿荫迷宫、凝霞秋色などの風光明媚なスポットがあります。それは風景です、木がありますそして花と草。美しい土地。
这里的绿化做得非常好，就连草地都是一尘不染，空气清新，天空湛蓝。 也正是如此，公园曾被北京市园林绿化局评为市级“精品公园”。
ここの緑はとても良く、草もきれいで、空気は新鮮で、空は青いです。 かつて、この公園は北京市造園局によって都市レベルの「絶妙な公園」として評価されていたのも事実です
公园所到之处皆是满眼绿色，青草、绿叶、碧水…… 负离子含量爆棚， 这里呼吸的每一口空气，都是洗肺的良药。
公園は緑の目、緑の草、緑の葉、澄んだ水でいっぱいです...マイナスイオンの含有量は爆発的であり、ここの空気のすべての呼吸は肺を洗うための良い薬です。
其实，这也是长阳公园的特点， “以绿为脉，以水为魂， 揽山入怀，纳河入城”，显山露水透绿间，绘就了一幅秀丽的山水图。
実際、これは長陽公園の特徴でもあります。「緑を静脈、水を魂として、山を抱きしめて街に入ると、川が街に流れ込みます。」山と露と緑の間に美しい景観図が描かれました。
公园湖畔荷花已开， 更为长阳公园增添了生气。 莲叶无穷碧，荷花别样红 ,园内朵朵粉色在池中悄然绽放，低调而高雅 ,绿叶繁华交相辉映，美不胜收。
公園の湖畔に蓮が咲き、長陽公園に活気を与えています。 蓮の葉は無限に緑、蓮は色違いで赤く、庭のピンクの花はプールに静かに咲き、落ち着きのある上品で、緑の葉の繁栄は美しい。
慢悠悠的走在栈道上,周边满是荷花的淡雅清香，欣赏着着红白荷花及酷似裙摆的荷叶,别有一番情调。
蓮の優雅な香りに包まれ、赤と白の蓮とスカートのような蓮の葉を眺めながら、ゆっくりと板の道を歩きます。
除了荷花，长阳公园还有不少其他夏花，也都正颜值在线。荷花、木槿、蜀葵等相映成趣，构成一幅优美的夏日画卷，独具韵味。
長陽公園には蓮のほかにもたくさんの夏の花があり、それらはすべてオンラインです。 蓮、ハイビスカス、ヒイラギなどが互いに補完し合い、独特の魅力を持った美しい夏の写真を形作っています。
除了如诗如画的美景，公园里的每一物都别有一番风情：供大家休憩的木亭， 蜿蜒曲折的栈道，布局精致、环境幽雅，让人对这里充满诗情画意的遐想。
絵のように美しい景色に加えて、公園内のすべてがユニークなスタイルを持っています：誰もが休むための木製のパビリオン、曲がりくねった板の道、絶妙なレイアウトとエレガントな環境は、人々を詩的で絵のように美しい空想に満ちさせます。
漫步在郁郁葱葱的林荫道， 呼吸着清新的空气，大小曲径在这里贯通,伴随着湖风吹过，整个人都心情愉悦了。
緑豊かな大通りを散歩し、新鮮な空気を吸い込み、小小の曲がりくねった小道がここを通り抜け、湖のそよ風が吹くと、人はみんな幸せな気分になります。
这里除了是一步一景以外，更是锻炼身体的好去处。公园内有一条被绿植围绕的健身步道，步道路面不但美观还具有一定的弹性，让人不由的想燃烧一下卡路里。
ステップバイステップのシーンであることに加えて、それはまた運動するのに良い場所です。 公園内には緑に囲まれたフィットネストレイルがあり、トレイルの表面が美しいだけでなく、ある程度の柔軟性があり、カロリーを消費したくなる。
这里树木茂盛、林荫掩映，不管是步行还是骑行都能感受美如画的景色。
緑豊かな木々や木陰があり、ウォーキングでもサイクリングでも絵のように美しい景色を体験できます。
除了木亭、栈道、健身步道、娱乐设施，园内还有很多极具特色的景观雕塑，有的寓意深刻，有的童趣满满。
木造のパビリオン、板張りの道、フィットネストレイル、娯楽施設に加えて、公園には多くのユニークな風景の彫刻があり、深遠な意味を持つものもあれば、幼稚さにあふれたものもあります。
有核桃上的蚂蚁
クルミにアリがいます
有奔跑的孩童和兔子
走っている子供とウサギがいます
有睡在荷叶上的青蛙
蓮の葉の上で眠っているカエルがいます
当然，还有充满野趣的它们
もちろん、彼らは野生の楽しみに満ちています
就连公园的大门都非常别致，树的造型，极具现代感。
公園の門もとてもユニークで、木の形はとてもモダンです。
白天的长阳公园生机勃勃风景如画，夜幕降临华灯初起后的景象更是迷人，沿线设置了优美的灯光，金光闪闪的灯和河岸附近高楼的光汇聚成摩登都市的霓虹闪耀夜景。
日中は長陽公園が活気にあふれ、絵のように美しい景色が広がり、夜になるとさらに魅力的な光景が広がります。美しい光が一列に並んでいます。きらびやかな光と近くの高層ビルからの光。川岸は、現代都市のネオンが輝く夜景に収束します。
小桥流水，草长莺飞，环境清幽、植被茂盛，长阳公园绝对是一处难得的清幽之地。
小さな橋と流れる水、長い草と飛んでいるウグイス、静かな環境と緑豊かな植生がある長陽公園は、間違いなく珍しくて平和な場所です。
ウェブサイトについて
做有动感的网站，为了大家不仅是获取最新情报，还可以有兴趣的打开网站，因为网站的动感有趣，而被吸引。
想要做有趣有魅力的网站
所以自己的网站，增加了根据季节变化，而飘落不同的图案。
ダイナミックで面白くて魅力的なサイトなので、誰もが最新情報を入手できるだけでなく、興味を持ってウェブサイトを開くことができるように、ダイナミックなウェブサイトを作ります。
面白くて魅力的なウェブサイトを作りたい
そのため、私のウェブサイトでは、季節の変化に応じてさまざまなパターンを追加しています。
第六章 研究成果（制作物の現状）
6.1. 作品
3つのWebサイトをシリーズで制作しています。
6.1.1 Type 1
- メニューの機能強化と天気予報のプラグインを追加しました。
6.1.2. Type 2
- ホームページ：写真の spring、summer などの文字から それぞれのページへリンクしています。
- その他のページ：通常のメニュー動作です。
- ページの演出
- spring：チューリップ花
- summer：雨とハスの花
- autumn：葉
- winter：雪の花
6.1.3. Type 3
- インターフェイスに「ページめくり」のプラグインを追加しました。
6.2. LOGO
第七章 作品概要
7.1. コンセプト
网站更生动有趣
ウェブサイトはもっと活気があり面白いです
7.2. ウェブサイト作品紹介
7.2.1. Type1
- メニューの機能強化と天気予報のプラグインを追加しました。
第一个作品
1.相对普通网页，图片放在一个网页上，更一目了然。
2.每个图片的 水波纹，落花，叶，雪 。动态效果，更好体现，身历其境感。
1番目の作品
1.通常のウェブページと比較して、写真は一目でより明確なウェブページに配置されます。
2.各写真の水の波紋、落ちてくる花、葉、雪。ダイナミックな効果がよりよく反映され、個人的な経験の感覚が反映されます。
7.2.2. Type2
- ホームページ：写真の spring、summer などの文字から それぞれのページへリンクしています。
- その他のページ：通常のメニュー動作です。
- ページの演出
- spring：チューリップ花
- summer：雨とハスの花
- autumn：葉
- winter：雪の花
第二个作品
1.全面根据季节主题，飘落郁金香，荷花，雨滴，落叶，雪花。
2.所有照片及信息，一目了然。
2番目の作品
1.季節のテーマに応じて、落ちてくるチューリップ、蓮、雨滴、落ち葉、雪片。
2.すべての写真と情報が一目でわかります。
7.2.3. Type3
"写真集の「ページめくり」を進化させたWeb特有のトランジション"
 |  |  |
| Spring | Spring | Summer |
 |  |  |
| Autumn | Winter | Other |
第三个作品
1.现在电子时代，看纸质书的人少了，所以想做出书的质感。
2.书带的比较沉重，但是有想要书的翻阅感。
3.就像拿着案内简介的感觉，网页可以做到实时更新。
4.不想让杂志，书籍所遗忘。所以网页做出书的感觉。
3番目の作品
1.電子時代では、紙の本を読む人が少ないので、本の質感を作りたいです。
2.本は重いですが、本を覗き込んでいるような感覚があります。
3.ケースの簡単な紹介を持っているような気がします、ウェブページはリアルタイムで更新することができます。
4.雑誌や本を忘れてほしくない。つまり、ウェブは本のような感覚を与えます。
参考資料
参考文献
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
参考サイト｜公園
- 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 全部
参考サイト｜サイトデザイン
参考天気予報
参考色CSS
- 動く、機能性について：
参考
- マウスのデザインです。
- マウス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/
23.png
22.png
21.png
20.png
19.png
18.png
17.png
16.png
25.png
15.jpg
14.jpg
13.jpg
12.jpg
11.jpg
10.jpg
9.jpg
8.jpg
7.png
6.png
5.png
4.png
3.png
2.png
wire frame2.jpg
wire frame1.jpg
sitemap.jpg
1.png
