LogoMarkWhite.png

季卓芸/論文構成 の履歴(No.13)


1.png

Beijing Changyang Park 

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

↑

CONTENTS





第I部


↑

第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.サイトマップ

sitemap.jpg


↑

1.2.2.ワイヤーフレーム

wire frame1.jpg


↑

1.2.3.携帯ワイヤーフレーム

wire frame2.jpg






↑

第二章 制作方法

↑

2.1. 言語・技術

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

↑

2.2. 技法

↑

2.3. 制作環境

↑

2.3.1. ハードウエア

↑

2.3.2. ソフトウエア






↑

第三章 アンケート調査

↑

3.1. アンケートの方法

3.png
4.png




↑

3.2. アンケートの結果

7.png



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






↑

第四章 webサイトについて

↑

4.1. 公園ホームページのコンセプト

"公園ホームページのコンセプト:四季"

5.png



视频,图片会更直接感受到公园氛围。
最在意公园四季变化
春天的郁金香(3月底)花开,牡丹花(4月底,5月初开)花开
夏天的雨天与荷花(6,7月)开。
秋天的落叶与薰衣草开。
冬天下雪的雪花。
公园四季鲜明。
所以网页做出根据季节飘落的动态感,使用户更加直观,身临其境。


ビデオや写真は、公園の雰囲気をより直接的に感じるでしょう。
公園の季節の移り変わりが一番気になる
春にはチューリップ(3月末)が咲き、牡丹(4月末、5月上旬)は咲きます
蓮は夏の雨の日(6月と7月)に咲きます。
紅葉とラベンダーが咲きます。
冬の雪の雪。
公園には四季があります。
そのため、季節に応じてダイナミックに落ちていく感覚で、より直感的で没入感のあるウェブページになっています。




↑

4.2. 公園をウェブページにする理由:

6.png


1.日本案内,都是纸质版,有时拿到家里了,想要再看时,查找不方便,会出现忘记放哪儿了的情况。
2.只能到了公园才可以拿到,不方便。
如果做成了网站,随时随地就可以看到,方便查阅。
把天气预报放上,好知道是否有利出行

现在新冠疫情,会出行不方便,但是如果看到了网页后,也可以得到最新情报,也可以身临其境(视觉上感知)。

1.日本語の場合、すべて紙版です。家に持ち帰ることもあります。もう一度読みたいときは、見つけるのが面倒で、どこに置いたらいいのか忘れてしまうかもしれません。
2.公園でしか入手できないので不便です。
ウェブサイトを作ると、いつでもどこでも見ることができ、確認も簡単です。
天気予報を載せて、旅行が有益かどうかを確認しましょう

新しい王冠の流行により、旅行は不便になりましたが、Webページを見ると、最新の情報を入手でき、その場で(視覚)することもできます。





ウェブサイト調査






↑

第五章 考察(まとめ)

↑

結論







第II部




↑

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

↑

6.1. 作品

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

↑

6.1.1 Type 1

↑

6.1.2. Type 2




↑

6.1.3. Type 3




↑

6.1.4. Type4

"mouse更新"




↑

6.2. LOGO

2.png






↑

第七章 作品概要

↑

7.1. コンセプト




↑

7.2. ウェブサイト作品紹介


↑

7.2.1. Type1  


↑

7.2.2. Type2  


第二个作品
1.全面根据季节主题,飘落郁金香,荷花,雨滴,落叶,雪花。
2.所有照片及信息,一目了然。


2番目の作品
1.季節のテーマに応じて、落ちてくるチューリップ、蓮、雨滴、落ち葉、雪片。
2.すべての写真と情報が一目でわかります。




↑

7.2.3. Type3  

"写真集の「ページめくり」を進化させたWeb特有のトランジション"

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


第三个作品
1.现在电子时代,看纸质书的人少了,所以想做出书的质感。
2.书带的比较沉重,但是有想要书的翻阅感。
3.就像拿着案内简介的感觉,网页可以做到实时更新。
4.不想让杂志,书籍所遗忘。所以网页做出书的感觉。


3番目の作品
1.電子時代では、紙の本を読む人が少ないので、本の質感を作りたいです。
2.本は重いですが、本を覗き込んでいるような感覚があります。
3.ケースの簡単な紹介を持っているような気がします、ウェブページはリアルタイムで更新することができます。
4.雑誌や本を忘れてほしくない。つまり、ウェブは本のような感覚を与えます。


↑

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.深入理解计算机系统



↑

参考サイト|技法

↑

参考サイト|公園

↑

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

↑

参考天気予報

↑

参考色CSS

↑

参考