LogoMarkWhite.png

季卓芸/論文構成 のバックアップ(No.7)


1.png

Beijing Changyang Park 

北京長陽公園の日常を記録するフォトギャラリーサイト

CONTENTS




概要

研究の背景

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

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

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

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

目的・主旨

目指すサイトの特徴は以下のとおりです。

ターゲット

ハイライト

サイトの仕様

サイトマップ

sitemap.jpg


ワイヤーフレーム

wire frame1.jpg


携帯ワイヤーフレーム

wire frame2.jpg


研究方法(制作方法)

制作方法(言語・技術)

研究開発に使用する言語は以下の_3つ_である。

制作方法(技法)

制作環境




研究成果(制作物の現状)

4つのWebサイトをシリーズで制作しています。

Type 1

Type 2

Type 3

8.jpg
9.jpg
10.jpg
SpringSpringSummer
11.jpg
12.jpg
13.jpg
AutumnWinterOther




Type4

"mouse更新"

LOGO

2.png


調査

"公園ホームページ作る理由(公園季節)"

5.png



"公園をウェブページにする必要がある理由/調査:"

6.png

アンケート

3.png
4.png



"結果"

7.png



"中国ではみんなスマートフォンとコンピュータ持っています。"






考察(まとめ)




参考資料


参考文献

1.Generative Design with P5.js
2.Webデザイン良質見本帳
3.すべての人に知っておいてほしいJavaScriptの基本原則
4.jQuery仕事の現場でサッと使える!デザイン教科書
5.Web前端开发入门与实战
6.计算机网络 自项下方法
7.深入理解计算机系统



参考サイト|技法

参考サイト|公園

参考サイト|サイトデザイン

参考天気予報

参考色CSS

ウェブサイト調査


参考

curtain.js

curtain.jsは小さいvanilla WebGL JavaScriptのライブラリです。3Dのインタラクションやアニメーションを作ることができます。

HTMLの画像を含んだ要素を3DのWebGLテクスチャーplaneに変換し、shadersを使い、アニメーションを加えることができるようにしています。それぞれのplaneの大きさやpositionはCSSで変更することができるので、楽に配置変更サイズ変更をすることができます。