季卓芸/デザイン応用演習
をテンプレートにして作成
HOME
ABOUT
造形表現専攻概要
大学院進学希望の方へ
INFORMATION
論文等執筆要領
学位申請に関わる書類
学位論文等スケジュール
研究成果の公表
大学からのお知らせ
STUDENTS
STAFF
[ EDIT ]
?
SEARCH
開始行:
#setheadercolor(white,"linear-gradient(to top, #209cff 0%...
#image(2.png,left,10%)
*Beijing Changyang Park
北京長陽公園の日常を記録するフォトギャラリーサイト
#image(back.jpg,left,100%)
-'''Keywords:季節,映像 , 風景, 人物,その他'''
-[[季卓芸/sample]]
-Repository:https://github.com/ki0722
-https://ki0722.github.io/BeijingChangyangPark/
-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/
~
**概要
***研究の背景
北京長陽公園は、自宅の近くにある公園のひとつで、時々散歩...
春、夏、秋、冬、四季の景色が美しい場所です。
フィットネスとエンターテイメント、落ち着いたムード、素晴...
長陽公園は、房山区長陽町にあります。北京で建設中の11万エ...
全体的な自然条件によれば、長陽公園は「2つの川と2つの庭園...
一部の情報はインターネットで確認できますが、公式のWebサイ...
~
***目的・主旨
目指すサイトの特徴は以下のとおりです。
-誰もが容易に使えるインターフェイス
-クールな視覚効果
-“動感”が強いもの
~
***サイトの仕様
1-https://ki0722.github.io/BeijingChangyangPark/
2-https://ki0722.github.io/BeijingChangyangPark2/
3-https://ki0722.github.io/BeijingChangyangPark3/
4-https://ki0722.github.io/BeijingChangyangPark4/
5-https://ki0722.github.io/BeijingChangyangPark5/
6-https://ki0722.github.io/BeijingChangyangPark6/
7-https://ki0722.github.io/BeijingChangyangPark7/
8-https://ki0722.github.io/BeijingChangyangPark8/
9-https://ki0722.github.io/BeijingChangyangPark9/
10-https://ki0722.github.io/BeijingChangyangPark10/
11-https://ki0722.github.io/BeijingChangyangPark11home/
~
***研究方法(制作方法)
-調査方法
//(多做一些动画网页小样,问卷调查,选出好的网页)
//(如何查阅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
~
~
**Project Management
***Schedule
&color(red){計画的な遂行のために、進行管理表を作成してリ...
~
***ToDo
&color(red){やるべきこと(タスク)を箇条書きにします。};
&color(red){完了後は「%%取り消し線%%」あるいは「// コメン...
~
~
~
#hr
CENTER:''worklog''
~
***CONTENTS
#contents2_1
~
~
**2021.06.23~06.29
-[[季卓芸/sample]]
~
~
**2021.06.16~06.22
#iframe(https://ki0722.github.io/BeijingChangyangPark4/)
4-https://ki0722.github.io/BeijingChangyangPark4/
~
~
**2021.6.08~6.15
~
''更新''
*** ウェブサイト&color(red){Ver.4};mouse更新
''Home page''
--mouse更新
#iframe( https://ki0722.github.io/BeijingChangyangPark11h...
- https://ki0722.github.io/BeijingChangyangPark11home/
~
-"mouse参考"
--https://wk-partners.co.jp/homepage/blog/hpseisaku/javas...
--https://wemo.tech/3229
~
~
**2021.6.03~6.07
***メニュー
"質問1"
logo比例で拡大すると縮小できません。
"参考:"
-https://design.kyusan-u.ac.jp/OpenSquareJP/?cmd=read&pag...
*** &color(red){Ver.3};
''本の感じでページを動かします。''
-インターフェイスに「ページめくり」のプラグインを追加しま...
#iframe(https://ki0722.github.io/BeijingChangyangPark9/)
9-https://ki0722.github.io/BeijingChangyangPark9/
"質問2":
メニューの位置は右に移動します。
~
*** &color(red){Ver.2};
#iframe(https://ki0722.github.io/BeijingChangyangPark4/)
4-https://ki0722.github.io/BeijingChangyangPark4/
"参考:
ButtonAnimation
ハンバーガーアイコンをCSSでアニメーションさせています。"
DEMO:-https://koichi-inoue.github.io/Navi-ButtonAnimation/
CODE:-https://github.com/koichi-inoue/Navi-ButtonAnimation
~
~
**2021.05.29~6.2
***新しいウェブサイト &color(red){Ver.4};
''Home page''
- https://ki0722.github.io/BeijingChangyangPark11home/
#iframe( https://ki0722.github.io/BeijingChangyangPark11h...
~
'' page''
~
~
"参考"
-https://design.kyusan-u.ac.jp/OpenSquareJP/?jQuery/Modal...
-https://design.kyusan-u.ac.jp/OpenSquareJP/?jQuery/Slider
-https://design.kyusan-u.ac.jp/OpenSquareJP/?jQuery/WebGL...
-https://www.museum-kawakyu.jp/
~
~
**2021.05.23~5.28
''更新''
***1. ウェブサイト &color(red){Ver.3};
''本の感じでページを動かします。''
ホームページとspringページだけでサンプルを作りました。
#iframe(https://ki0722.github.io/BeijingChangyangPark9/)
9-https://ki0722.github.io/BeijingChangyangPark9/
~
''作品説明''
-1.電子時代では、紙の本を読む人が少ないので、本の質感を作...
-2.本は重いですが、本を覗き込んでいるような感覚があります。
-3.ケースの簡単な紹介を持っているような気がします、ウェブ...
4-.雑誌や本を忘れてほしくない。つまり、ウェブは本のような...
~
~
***2. ウェブサイト &color(red){Ver.2};
springチューリップ花、summer雨とハスの花、autumn葉、 wint...
#iframe(https://ki0722.github.io/BeijingChangyangPark4/)
4-https://ki0722.github.io/BeijingChangyangPark4/
-ホームページ:写真の spring、summerなどをクリックしてsp...
-他のページはメニューが普通メニューです。
~
''作品説明''
-1.季節のテーマに応じて、落ちてくるチューリップ、蓮、雨滴...
-2.すべての写真と情報が一目でわかります。
~
~
***3.ウェブサイト &color(red){Ver.1};
''メニューの機能と天気予報を増えています.''
''下部分で写真もメニューの機能です。''
#iframe(https://ki0722.github.io/BeijingChangyangPark10/)
10-https://ki0722.github.io/BeijingChangyangPark10/
~
''作品説明''
-1.通常のウェブページと比較して、写真は一目でより明確なウ...
-2.各写真の水の波紋、落ちてくる花、葉、雪。ダイナミックな...
~
~
~
~
**2021.05.14~5.22
~
**更新
springチューリップ花、summer雨とハスの花、autumn葉、 wint...
#iframe(https://ki0722.github.io/BeijingChangyangPark4/)
4-https://ki0722.github.io/BeijingChangyangPark4/
***ホームページ:写真の spring、summerなどをクリックして...
他のページはメニューが普通メニューです。
~
~
**2021.04.20|調査
***面白サイト・面白アイデアのリンク
-https://y-n10.com
-https://all.cast-er.com
-https://www.seed-recruit.com
-https://www.pola.co.jp/wecaremore/
-https://www.utopiaagriculture.com
-https://www.m-chemical.co.jp/saiyo/
-https://quoitworks.com
-https://www.aircord.co.jp/careers
-https://www.m-trust.co.jp さくら動き感じ
~
***XXXXXXX
-◯◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯
-◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯
~
~
~
終了行:
#setheadercolor(white,"linear-gradient(to top, #209cff 0%...
#image(2.png,left,10%)
*Beijing Changyang Park
北京長陽公園の日常を記録するフォトギャラリーサイト
#image(back.jpg,left,100%)
-'''Keywords:季節,映像 , 風景, 人物,その他'''
-[[季卓芸/sample]]
-Repository:https://github.com/ki0722
-https://ki0722.github.io/BeijingChangyangPark/
-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/
~
**概要
***研究の背景
北京長陽公園は、自宅の近くにある公園のひとつで、時々散歩...
春、夏、秋、冬、四季の景色が美しい場所です。
フィットネスとエンターテイメント、落ち着いたムード、素晴...
長陽公園は、房山区長陽町にあります。北京で建設中の11万エ...
全体的な自然条件によれば、長陽公園は「2つの川と2つの庭園...
一部の情報はインターネットで確認できますが、公式のWebサイ...
~
***目的・主旨
目指すサイトの特徴は以下のとおりです。
-誰もが容易に使えるインターフェイス
-クールな視覚効果
-“動感”が強いもの
~
***サイトの仕様
1-https://ki0722.github.io/BeijingChangyangPark/
2-https://ki0722.github.io/BeijingChangyangPark2/
3-https://ki0722.github.io/BeijingChangyangPark3/
4-https://ki0722.github.io/BeijingChangyangPark4/
5-https://ki0722.github.io/BeijingChangyangPark5/
6-https://ki0722.github.io/BeijingChangyangPark6/
7-https://ki0722.github.io/BeijingChangyangPark7/
8-https://ki0722.github.io/BeijingChangyangPark8/
9-https://ki0722.github.io/BeijingChangyangPark9/
10-https://ki0722.github.io/BeijingChangyangPark10/
11-https://ki0722.github.io/BeijingChangyangPark11home/
~
***研究方法(制作方法)
-調査方法
//(多做一些动画网页小样,问卷调查,选出好的网页)
//(如何查阅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
~
~
**Project Management
***Schedule
&color(red){計画的な遂行のために、進行管理表を作成してリ...
~
***ToDo
&color(red){やるべきこと(タスク)を箇条書きにします。};
&color(red){完了後は「%%取り消し線%%」あるいは「// コメン...
~
~
~
#hr
CENTER:''worklog''
~
***CONTENTS
#contents2_1
~
~
**2021.06.23~06.29
-[[季卓芸/sample]]
~
~
**2021.06.16~06.22
#iframe(https://ki0722.github.io/BeijingChangyangPark4/)
4-https://ki0722.github.io/BeijingChangyangPark4/
~
~
**2021.6.08~6.15
~
''更新''
*** ウェブサイト&color(red){Ver.4};mouse更新
''Home page''
--mouse更新
#iframe( https://ki0722.github.io/BeijingChangyangPark11h...
- https://ki0722.github.io/BeijingChangyangPark11home/
~
-"mouse参考"
--https://wk-partners.co.jp/homepage/blog/hpseisaku/javas...
--https://wemo.tech/3229
~
~
**2021.6.03~6.07
***メニュー
"質問1"
logo比例で拡大すると縮小できません。
"参考:"
-https://design.kyusan-u.ac.jp/OpenSquareJP/?cmd=read&pag...
*** &color(red){Ver.3};
''本の感じでページを動かします。''
-インターフェイスに「ページめくり」のプラグインを追加しま...
#iframe(https://ki0722.github.io/BeijingChangyangPark9/)
9-https://ki0722.github.io/BeijingChangyangPark9/
"質問2":
メニューの位置は右に移動します。
~
*** &color(red){Ver.2};
#iframe(https://ki0722.github.io/BeijingChangyangPark4/)
4-https://ki0722.github.io/BeijingChangyangPark4/
"参考:
ButtonAnimation
ハンバーガーアイコンをCSSでアニメーションさせています。"
DEMO:-https://koichi-inoue.github.io/Navi-ButtonAnimation/
CODE:-https://github.com/koichi-inoue/Navi-ButtonAnimation
~
~
**2021.05.29~6.2
***新しいウェブサイト &color(red){Ver.4};
''Home page''
- https://ki0722.github.io/BeijingChangyangPark11home/
#iframe( https://ki0722.github.io/BeijingChangyangPark11h...
~
'' page''
~
~
"参考"
-https://design.kyusan-u.ac.jp/OpenSquareJP/?jQuery/Modal...
-https://design.kyusan-u.ac.jp/OpenSquareJP/?jQuery/Slider
-https://design.kyusan-u.ac.jp/OpenSquareJP/?jQuery/WebGL...
-https://www.museum-kawakyu.jp/
~
~
**2021.05.23~5.28
''更新''
***1. ウェブサイト &color(red){Ver.3};
''本の感じでページを動かします。''
ホームページとspringページだけでサンプルを作りました。
#iframe(https://ki0722.github.io/BeijingChangyangPark9/)
9-https://ki0722.github.io/BeijingChangyangPark9/
~
''作品説明''
-1.電子時代では、紙の本を読む人が少ないので、本の質感を作...
-2.本は重いですが、本を覗き込んでいるような感覚があります。
-3.ケースの簡単な紹介を持っているような気がします、ウェブ...
4-.雑誌や本を忘れてほしくない。つまり、ウェブは本のような...
~
~
***2. ウェブサイト &color(red){Ver.2};
springチューリップ花、summer雨とハスの花、autumn葉、 wint...
#iframe(https://ki0722.github.io/BeijingChangyangPark4/)
4-https://ki0722.github.io/BeijingChangyangPark4/
-ホームページ:写真の spring、summerなどをクリックしてsp...
-他のページはメニューが普通メニューです。
~
''作品説明''
-1.季節のテーマに応じて、落ちてくるチューリップ、蓮、雨滴...
-2.すべての写真と情報が一目でわかります。
~
~
***3.ウェブサイト &color(red){Ver.1};
''メニューの機能と天気予報を増えています.''
''下部分で写真もメニューの機能です。''
#iframe(https://ki0722.github.io/BeijingChangyangPark10/)
10-https://ki0722.github.io/BeijingChangyangPark10/
~
''作品説明''
-1.通常のウェブページと比較して、写真は一目でより明確なウ...
-2.各写真の水の波紋、落ちてくる花、葉、雪。ダイナミックな...
~
~
~
~
**2021.05.14~5.22
~
**更新
springチューリップ花、summer雨とハスの花、autumn葉、 wint...
#iframe(https://ki0722.github.io/BeijingChangyangPark4/)
4-https://ki0722.github.io/BeijingChangyangPark4/
***ホームページ:写真の spring、summerなどをクリックして...
他のページはメニューが普通メニューです。
~
~
**2021.04.20|調査
***面白サイト・面白アイデアのリンク
-https://y-n10.com
-https://all.cast-er.com
-https://www.seed-recruit.com
-https://www.pola.co.jp/wecaremore/
-https://www.utopiaagriculture.com
-https://www.m-chemical.co.jp/saiyo/
-https://quoitworks.com
-https://www.aircord.co.jp/careers
-https://www.m-trust.co.jp さくら動き感じ
~
***XXXXXXX
-◯◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯
-◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯
~
~
~
ページ名: