季卓芸/デザイン総合研究II
をテンプレートにして作成
HOME
ABOUT
造形表現専攻概要
大学院進学希望の方へ
INFORMATION
論文等執筆要領
学位申請に関わる書類
学位論文等スケジュール
研究成果の公表
大学からのお知らせ
STUDENTS
STAFF
[ EDIT ]
?
SEARCH
開始行:
#setheadercolor(white,"linear-gradient(to top, #209cff 0%...
#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/BeijingChangyangParkType...
-https://ki0722.github.io/BeijingChangyangParkType1/
#qrcode(https://ki0722.github.io/BeijingChangyangParkType...
~
//#iframe(https://ki0722.github.io/BeijingChangyangPark8/)
//-https://ki0722.github.io/BeijingChangyangPark8/
//~
***Type 2
-ホームページ:写真の spring、summer などの文字から それ...
-その他のページ:通常のメニュー動作です。
-ページの演出
--spring:チューリップ花
--summer:雨とハスの花
--autumn:葉
--winter:雪の花
~
#iframe(https://ki0722.github.io/BeijingChangyangParkType...
-https://ki0722.github.io/BeijingChangyangParkType2/
~
~
***Type 3
-インターフェイスに「ページめくり」のプラグインを追加しま...
~
#iframe(https://ki0722.github.io/BeijingChangyangParkType...
-https://ki0722.github.io/BeijingChangyangParkType3/
~
~
***Type 4
"mouse更新"
#iframe( https://ki0722.github.io/BeijingChangyangPark11h...
- https://ki0722.github.io/BeijingChangyangPark11home/
~
"SUMMER"
#iframe( https://ki0722.github.io/BeijingChangyangPark11s...
-https://ki0722.github.io/BeijingChangyangPark11summer/
"参考1"
-https://design.kyusan-u.ac.jp/OpenSquareJP/?jQuery/WebGL...
~
~
~
**概要
***研究の背景
北京長陽公園は、自宅の近くにある公園のひとつで、時々散歩...
春、夏、秋、冬、四季の景色が美しい場所です。
フィットネスとエンターテイメント、落ち着いたムード、素晴...
長陽公園は、房山区長陽町にあります。北京で建設中の11万エ...
全体的な自然条件によれば、長陽公園は「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 と、...
~
-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などをクリックしてsp...
他のページはメニューが普通メニューです。
springチューリップ花、summer雨とハスの花、autumn葉、 wint...
#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=C...
-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...
~
***ToDo
&color(red){やるべきこと(タスク)を箇条書きにします。};
&color(red){完了後は「%%取り消し線%%」あるいは「// コメン...
~
~
~
**worklog
> [[季卓芸/WorkLog]]
~
~
~
終了行:
#setheadercolor(white,"linear-gradient(to top, #209cff 0%...
#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/BeijingChangyangParkType...
-https://ki0722.github.io/BeijingChangyangParkType1/
#qrcode(https://ki0722.github.io/BeijingChangyangParkType...
~
//#iframe(https://ki0722.github.io/BeijingChangyangPark8/)
//-https://ki0722.github.io/BeijingChangyangPark8/
//~
***Type 2
-ホームページ:写真の spring、summer などの文字から それ...
-その他のページ:通常のメニュー動作です。
-ページの演出
--spring:チューリップ花
--summer:雨とハスの花
--autumn:葉
--winter:雪の花
~
#iframe(https://ki0722.github.io/BeijingChangyangParkType...
-https://ki0722.github.io/BeijingChangyangParkType2/
~
~
***Type 3
-インターフェイスに「ページめくり」のプラグインを追加しま...
~
#iframe(https://ki0722.github.io/BeijingChangyangParkType...
-https://ki0722.github.io/BeijingChangyangParkType3/
~
~
***Type 4
"mouse更新"
#iframe( https://ki0722.github.io/BeijingChangyangPark11h...
- https://ki0722.github.io/BeijingChangyangPark11home/
~
"SUMMER"
#iframe( https://ki0722.github.io/BeijingChangyangPark11s...
-https://ki0722.github.io/BeijingChangyangPark11summer/
"参考1"
-https://design.kyusan-u.ac.jp/OpenSquareJP/?jQuery/WebGL...
~
~
~
**概要
***研究の背景
北京長陽公園は、自宅の近くにある公園のひとつで、時々散歩...
春、夏、秋、冬、四季の景色が美しい場所です。
フィットネスとエンターテイメント、落ち着いたムード、素晴...
長陽公園は、房山区長陽町にあります。北京で建設中の11万エ...
全体的な自然条件によれば、長陽公園は「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 と、...
~
-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などをクリックしてsp...
他のページはメニューが普通メニューです。
springチューリップ花、summer雨とハスの花、autumn葉、 wint...
#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=C...
-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...
~
***ToDo
&color(red){やるべきこと(タスク)を箇条書きにします。};
&color(red){完了後は「%%取り消し線%%」あるいは「// コメン...
~
~
~
**worklog
> [[季卓芸/WorkLog]]
~
~
~
ページ名: