LogoMarkWhite.png

季卓芸/デザイン総合研究II の変更点


#author("2021-11-19T11:47:56+09:00","default:inoue.ko","inoue.ko")
#author("2021-12-02T22:43:57+09:00","default:art-gs","art-gs")
#setheadercolor(white,"linear-gradient(to top, #209cff 0%, #68e0cf 100%)",0.8)

#image(2.png,left,10%)
*Beijing Changyang Park 
北京長陽公園の日常を記録するフォトギャラリーサイト
-'''Keywords:季節,映像 , 風景,  人物,その他'''
-GitHub:https://github.com/ki0722?tab=repositories
-[[季卓芸/sample]]
~

~
//#iframe(https://jzy722.wordpress.com)
//-https://jzy722.wordpress.com


**予備審査指摘事項
***作品について
-SNSとの連動
--Instagram に写真をアップして連動させるなど
-ターゲットを明確に
--主たる使用言語を定めるとともに、多言語対応も要検討
-3つのサイトの位置付けを明確に
--Aboutのページに、サイトの主旨を記載
-3つのサイトを三部作とするために
--ヘッダー・フッターのデザインを統一
~

***レポートについて
-基本的な章構成を見直し
-サイトマップとワイヤーフレームについては、サイトごとにそれぞれ必要

~
~
~
~


***CONTENTS
#contents2_1
~
~
**研究成果(制作物の現状)
4つのWebサイトをシリーズで制作しています。
~

***Type 1
-メニューの機能強化と天気予報のプラグインを追加しました。
//下部分で写真もメニューの機能です。
~

#iframe(https://ki0722.github.io/BeijingChangyangPark12/)
-https://ki0722.github.io/BeijingChangyangPark12/
#iframe(https://ki0722.github.io/BeijingChangyangParkType1/)
-https://ki0722.github.io/BeijingChangyangParkType1/

#qrcode(https://ki0722.github.io/BeijingChangyangPark12/)
#qrcode(https://ki0722.github.io/BeijingChangyangParkType1/)
~

//#iframe(https://ki0722.github.io/BeijingChangyangPark8/)
//-https://ki0722.github.io/BeijingChangyangPark8/
//~

***Type 2
-ホームページ:写真の spring、summer などの文字から それぞれのページへリンクしています。
-その他のページ:通常のメニュー動作です。
-ページの演出
--spring:チューリップ花
--summer:雨とハスの花
--autumn:葉
--winter:雪の花
~

#iframe(https://ki0722.github.io/BeijingChangyangPark4/)
-https://ki0722.github.io/BeijingChangyangPark4/
#iframe(https://ki0722.github.io/BeijingChangyangParkType2/)
-https://ki0722.github.io/BeijingChangyangParkType2/
~
~

***Type 3
-インターフェイスに「ページめくり」のプラグインを追加しました。
~

#iframe(https://ki0722.github.io/BeijingChangyangPark9/)
-https://ki0722.github.io/BeijingChangyangPark9/
#iframe(https://ki0722.github.io/BeijingChangyangParkType3/)
-https://ki0722.github.io/BeijingChangyangParkType3/
~
~
***Type 4
"mouse更新"
#iframe( https://ki0722.github.io/BeijingChangyangPark11home/)
- https://ki0722.github.io/BeijingChangyangPark11home/
~
"SUMMER"
#iframe( https://ki0722.github.io/BeijingChangyangPark11summer/)
-https://ki0722.github.io/BeijingChangyangPark11summer/
"参考1"
-https://design.kyusan-u.ac.jp/OpenSquareJP/?jQuery/WebGL_Ripples
~
~
~
**概要
***研究の背景
北京長陽公園は、自宅の近くにある公園のひとつで、時々散歩に出かけます。
春、夏、秋、冬、四季の景色が美しい場所です。

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

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

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

***目的・主旨
目指すサイトの特徴は以下のとおりです。
-誰もが容易に使えるインターフェイス
-クールな視覚効果
-“動感”が強いもの
~

***ターゲット
-北京への観光を検討中の日本人
-北京市民
~

***ハイライト
-闲庭信步
散歩 "闲庭信步"スポットには、松云台、浣溪叠、枫舞清韵、涵秋叠影などのスポットがあります。全体的なテーマは木です。中庭をのんびり歩くなど、ゆったりとくつろげる場所を提供します。

-寧夏の秋の風景
「寧夏の秋の風景」のレジャーとエンターテイメントの景勝地には、白州広場、観音流水遊歩道、サクラダンス、空飛ぶ森、子供たちの楽しい広場、フィットネストレイル、その他の景勝地があります。この部分は色とりどりの葉が多く、秋には晩秋に太陽が沈み、空は赤い雲でいっぱいで、赤いカエデの葉は空と共通です。

-春华秋实
「春华秋实」のシーンには、主に梨花の春の雪、ベゴニアフラワーストリーム、サクラダンスフライング、秀逸台、陳西広場などの景勝地があります。この地域は、「春に開花し、秋に果物を広げる」植物、したがって「春の花と秋の果物」が優勢です。
~
~

**サイトの仕様

***サイトマップ
#image(sitemap.jpg) 
~

***ワイヤーフレーム
#image(wire frame1.jpg) 
~

***携帯ワイヤーフレーム
#image(wire frame2.jpg) 
~



**研究方法(制作方法)

***制作方法(言語・技術)
//(多做一些动画网页小样,问卷调查,选出好的网页)
//(如何查阅CSS,JS,JQ内容)
研究開発に使用する言語は以下の_3つ_である。
-1) HTML:ページの構造
-2) CSS:ページのビジュアルデザイン
-3) JavaScript(jQuery): ページの動的変更
インタラクティブな仕組みの実現には、主に JavaScript と、そのライブラリーである jQueryプラグインを使用する。具体的には、以下のような「動き」や「触感」を実現する手法を開発する。
~

-1) タッチ・クリックに反応して変化する「動的写真」の導入
-2) 写真集の「ページめくり」を進化させたWeb特有のトランジション
-3) ユーザーの動きに反応するパーティクル要素の導入
-4) インタラクティブに反応する「背景」要素の導入
-5) 電子媒体における「手触り感」の再現
~
~

***制作方法(技法)
-Photoshop:写真を調整
-Adobe Illustrator:logoのデザインを作成
-HTML:ページの構造
-CSS:ページのビジュアルデザイン
-JavaScript:ページの動的変更  
-jQuery:ページの動的変更  
-jQuery プラグイン:様々な表現機能
~

***制作環境
-ハードウエア
--iMac、Mac、Windows、デジタルカメラ
-ソフトウエア
--Atom Editor
--Adobe Photoshop
--Adobe Illustrator
--GitHub

~
~

**研究  サンプル成果物
-https://jzy722.wordpress.com
-https://ki0722.github.io/BeijingChangyangPark/

-https://ki0722.github.io/BeijingChangyangPark/
-https://ki0722.github.io/BeijingChangyangPark2/
-https://ki0722.github.io/BeijingChangyangPark3/
-https://ki0722.github.io/BeijingChangyangPark4/
-https://ki0722.github.io/BeijingChangyangPark5/
-https://ki0722.github.io/BeijingChangyangPark6/
-https://ki0722.github.io/BeijingChangyangPark7/
-https://ki0722.github.io/BeijingChangyangPark8/
-https://ki0722.github.io/BeijingChangyangPark9/
-https://ki0722.github.io/BeijingChangyangPark10/
- https://ki0722.github.io/BeijingChangyangPark11home/
~
~
#iframe(https://ki0722.github.io/BeijingChangyangPark/)
1-https://ki0722.github.io/BeijingChangyangPark/
~
~
-メニューの機能と天気予報を増えています.
#iframe(https://ki0722.github.io/BeijingChangyangPark2/)
2-https://ki0722.github.io/BeijingChangyangPark2/
~
~
-youtubeの映像を使います。
#iframe(https://ki0722.github.io/BeijingChangyangPark3/)
3-https://ki0722.github.io/BeijingChangyangPark3/
~
~
-ホームページ:写真の spring、summerなどをクリックしてspringページになります。
他のページはメニューが普通メニューです。
springチューリップ花、summer雨とハスの花、autumn葉、 winter雪の花全面的に落ちる。
#iframe(https://ki0722.github.io/BeijingChangyangPark4/)
4-https://ki0722.github.io/BeijingChangyangPark4/
~
~
-メニューの機能です。
#iframe(https://ki0722.github.io/BeijingChangyangPark5/)
5-https://ki0722.github.io/BeijingChangyangPark5/
~
~
-本の感じでページを動きいます。
#iframe(https://ki0722.github.io/BeijingChangyangPark6/)
6-https://ki0722.github.io/BeijingChangyangPark6/
~
~
-homeとspring(写真自動的動きます)だけです。
#iframe(https://ki0722.github.io/BeijingChangyangPark7/)
7-https://ki0722.github.io/BeijingChangyangPark7/
~
~
-下部分で写真もメニューの機能です。
#iframe(https://ki0722.github.io/BeijingChangyangPark8/)
8-https://ki0722.github.io/BeijingChangyangPark8/
~
~
-本の感じでページを動きいます。
#iframe(https://ki0722.github.io/BeijingChangyangPark9/)
9-https://ki0722.github.io/BeijingChangyangPark9/
~
~
-メニューの機能と天気予報を増えています.
-下部分で写真もメニューの機能です。
#iframe(https://ki0722.github.io/BeijingChangyangPark10/)
10-https://ki0722.github.io/BeijingChangyangPark10/
~
~

**考察(まとめ)
~
~
**参考資料
~
***参考文献
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

***参考サイト|公園
-http://www.hanakoen.com
-http://kanatakenosato.jp

-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 全部

***参考サイト|サイトデザイン
-https://www.ikesai.com/cat/travel/
-1
--https://nisekohakuunso.com/ja/
--https://hoshinoya.com    
--https://studio-has.jp

-2
--https://www.museum-kawakyu.jp  

-3
--http://robinmastromarino.com

~
~
**Project Management

***Schedule
[[&image(スクリーンショット.png);>https://docs.google.com/spreadsheets/d/11b_3atpqIAoyMCADDhex8ReZGgPlR0uZXVoTZjqOaA4/edit?usp=sharing]]
~

***ToDo
&color(red){やるべきこと(タスク)を箇条書きにします。};
&color(red){完了後は「%%取り消し線%%」あるいは「// コメントアウト」」};

~
~
~
**worklog
> [[季卓芸/WorkLog]]

~
~
~