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

参考