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.サイトマップ
1.2.2.ワイヤーフレーム
1.2.3.携帯ワイヤーフレーム
第二章 制作方法
2.1. 言語・技術
研究開発に使用する言語は以下の_3つ_である。
- 1) HTML:ページの構造
- 2) CSS:ページのビジュアルデザイン
- 3) JavaScript(jQuery): ページの動的変更
インタラクティブな仕組みの実現には、主に JavaScript と、そのライブラリーである jQueryプラグインを使用する。具体的には、以下のような「動き」や「触感」を実現する手法を開発する。
- 1) タッチ・クリックに反応して変化する「動的写真」の導入
- 2) 写真集の「ページめくり」を進化させたWeb特有のトランジション
- 3) ユーザーの動きに反応するパーティクル要素の導入
- 4) インタラクティブに反応する「背景」要素の導入
- 5) 電子媒体における「手触り感」の再現
2.2. 技法
- Photoshop:写真を調整
- Adobe Illustrator:logoのデザインを作成
- HTML:ページの構造
- CSS:ページのビジュアルデザイン
- JavaScript:ページの動的変更
- jQuery:ページの動的変更
- jQuery プラグイン:様々な表現機能
2.3. 制作環境
2.3.1. ハードウエア
2.3.2. ソフトウエア
- Atom Editor
- Adobe Photoshop
- Adobe Illustrator
- GitHub
第三章 アンケート調査
3.1. アンケートの方法
3.2. アンケートの結果
"中国ではみんなスマートフォンとコンピュータ持っています。"
第四章 考察
4.1. 公園ホームページ作る理由(公園季節)
"公園ホームページ作る理由(公園季節)"
4.2. 公園をウェブページにする必要がある理由/調査:
ウェブサイト調査
第五章 考察(まとめ)
結論
第II部
第六章 研究成果(制作物の現状)
6.1. 作品
4つのWebサイトをシリーズで制作しています。
6.1.1 Type 1
- メニューの機能強化と天気予報のプラグインを追加しました。
6.1.2. Type 2
- ホームページ:写真の spring、summer などの文字から それぞれのページへリンクしています。
- その他のページ:通常のメニュー動作です。
- ページの演出
- spring:チューリップ花
- summer:雨とハスの花
- autumn:葉
- winter:雪の花
6.1.3. Type 3
- インターフェイスに「ページめくり」のプラグインを追加しました。
6.1.4. Type4
"mouse更新"
6.2. LOGO
第七章 作品概要
7.1. コンセプト
7.2. ウェブサイト作品紹介
7.2.1. Type1
- メニューの機能強化と天気予報のプラグインを追加しました。
7.2.2. Type2
- ホームページ:写真の spring、summer などの文字から それぞれのページへリンクしています。
- その他のページ:通常のメニュー動作です。
- ページの演出
- spring:チューリップ花
- summer:雨とハスの花
- autumn:葉
- winter:雪の花
7.2.3. Type3
"写真集の「ページめくり」を進化させたWeb特有のトランジション"
|
|
|
Spring | Spring | Summer |
|
|
|
Autumn | Winter | Other |
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
参考