紀野はるか/情報デザイン研究I
をテンプレートにして作成
HOME
ABOUT
最新の更新
2021
MEMBER 2021
青木暁光
石坂大翔
出光美心
岩崎貴生
岩下雄真
内尾颯太
江川珠貴
大中啓旦
亀田日向
川村洸太
木村円香
久保絢菜
倉員優実
桑原歩未
鴻上早紀
崔昊
佐光美憂
柴田一輝
竹谷匠冬
田籠祐貴
田代爽乃
内藤彩乃
西山実伶
濱有希子
濱田侑里
藤本唯人
松岡佑樹
松藤陽
村山陽菜
山田宗周
渡邊来美
渡辺侑貴
中西華子
原田朋奈
水田修太朗
宮副咲葉
猪須大翔
川面翔太
隈翔太
柴田葉月
角祐菜
豊岡壮大朗
吉井麻吏菜
2022
MEMBER 2022
棈松智也
梅木悠民
江頭奏
大井このか
大石颯
太田糸音
太田姫奈
越智楓
鎌田真幸
楠田佑月
興梠媛愛
後藤太成
坂井彩華
指方依緒
徐泰陽
杉野市之助
堤晴司
角田雄一
中井千尋
原朋恵
平嶋明日花
増田里奈
深町彩海
藤島早希
宮路咲希
梁井英翔
山口愛麗
山本彩花
松田葉奈
松本龍太郎
石松匡広
上田莉帆
宇田川春稀
宇美希美
佐野美和
竹之内咲希
土斐崎種定
野村優亜
福田千紗
山川彩香
山田侑加子
重松優花
2023
MEMBER 2023
秋月靖雅
浅田真優花
阿南慶子
荒谷唯斗
安藤貴仁
池邉成
井上大河
岩本愛結
梅﨑美和
浦朱里
江村梨里香
大場こころ
勝田喜一
亀崎瑞穂
神田舞
白井くるみ
髙市遥
竹松莉羽
寺田圭志
中村心香
原晴紀
菱谷実来
日山晃良
平崎千夏
福井涼
堀玲二
山口恵
早稲田加奈恵
渡邊優希
石井彩晶
大神槙之介
大熊玄樹
大山花音
岡萌絵子
荻野美咲
鐘ヶ江雅
金田桜子
北村美優香
清野梨果
高庄玲衣
津覇稜也
中川飛鳥
福屋早希乃
脇山千寛
2024
STAFF
専任教員一覧
伊藤敬生
井上貢一
井上友子
岩田敦之
桜井祐
永嶋さゆり
北島己佐吉
OBOG
2023年度卒業生
2022年度卒業生
2021年度卒業生
2020年度卒業生
2019年度卒業生
SESSION
専門科目一覧
ソーシャルデザイン概論
ソーシャルデザイン演習
情報デザイン演習IIA
情報デザイン演習IIB
地域ブランド企画演習IIA
地域ブランド企画演習IIB
視覚デザイン演習
Webデザイン演習
3DCG演習
情報デザイン研究I
地域ブランド企画研究I
卒業研究
教務ガイダンス
RecommendedVideo
BasicKnowledge
PROJECT
LINKS
SEARCH
開始行:
#setbgcolor(#fafdff)
*Web小説 『 黒い金魚 』
スクロールで読む動く小説
#image(title.jpg)
-''Project Director'':紀野はるか
-'''Keywords:Web, 小説, 映像, グラフィック'''
-https://k19as009.github.io/black_goldfish/
~
**Overview
***Introduction / What is This
//{これは何か・・を簡潔に}
~
Web上で読む小説。
Webとグラフィックと映像を組み合わせて、動く小説にする。
~
~
***Background and Purpose
//{プロジェクトの背景と目的}
~
背景:小説を読むことのメリット
~
読書が ''好きな人''・''嫌いな人'' 。娯楽の多様化により...
『言葉に触れ素敵な表現を自分の中にストックする。意思の疎...
この言葉のように、小説の中に溢れた表現は私たちを豊かにす...
小説を読むメリット、そして娯楽としての面白さを敬遠してい...
~
目的:新しい娯楽としての形
~
小説を読むことを苦手とする人が、読むことのとっかかりや入...
それにより、小説の新しい娯楽としての形を産みだす。
~
~
***Concept
//{基本的な考え方、枠組み、視点など}
~
-読書が苦手な人でも読める、娯楽としての新しい小説の形
-スクロールで読む、動くWeb小説
~
~
***Output
//{成果物の直接掲載またはリンク誘導}
//(プロジェクトの途上では、試作品等、視覚的な資料を掲載・...
//(成果物の形式・サイズ・時間尺等の基本情報も記載して下さ...
~
~
#image(output.jpg)
【完成作品】
~
__[[『 黒い金魚 』>https://k19as009.github.io/goldfish/...
~
~
-約3000字の自作小説のWebサイト
-Githubを使って公開
~
~
***Tools
//{使用するツール|ハードウエア・ソフトウエア}
~
-Dreamweaver
-Atom
-Illustrator
-After Effects
-CSS
-Javascript
~
~
***Term
//{プロジェクトの期間|20XX.XX.XX - 20XX.XX.XX }
~
2021.04.08 - 2021.07.08
~
~
***Conclusion / Summary
//{プロジェクトが完結したら「まとめ」を記載して下さい。}
~
-Web小説という形にすることで、苦手な人でも読んでもらえる...
-今後、Web小説という新しいコンテンツが広がっていくことで...
-長編小説では、携帯小説のように短くページを区切ったり、冒...
~
~
~
**Survey
***Present Status
//{現状調査、現状の問題の洗い出し}
~
***アンケート調査
~
-読書についての現状把握
#image(research.jpg,right,17%)
~
[[Instagram>https://about.instagram.com/]]のアンケート機...
フォロワー内の、同世代男女34名の方から回答を得た
~
~
|40|5|40|c
|#image(question1.jpg)| |#image(question2.jpg)|
RIGHT:2021/04/15
~
--読書が好きか嫌いか
--読書の頻度
についてのアンケート調査を行いました。
~
-本を読まない理由の調査結果
~
--文章が苦手。小さい頃から文章を読む習慣がない。
--文字列が苦手。絵があったら絵ばかりみてしまう。
--小さい文字が均一に並んでいるのが苦手で目がチカチカする。
--漫画やアニメ、映画があるので、そっちでいい。
--想像するのが難しい。挿絵があると読めるかも。
--興味がないと最後まで読めない。
~
''調査結果''
-本を読まない・読書が嫌いという人は全体の約1/4の割合で...
-文字列が苦手、文章の続きが苦手という人が多数いる
-受動的な部分を苦手だと感じている
~
~
~
***Precedent
//{先行事例の紹介、傾向分析など}
~
-__[[ストーリーテリング型Webデザインまとめ>https://www.qa...
ストーリーテリングとは・・・
物語を話して聞かせること。ここでは「物語」を引用し、例示...
~
-__[[パララックスデザインを使ったストーリー性のあるWebサ...
パララックスデザインとは・・・
Webサイトに立体感や遠近感、高いデザイン性を持たせるデザイ...
~
~
***Technique / Technology
//{プロジェクトの遂行に必要な技法・技術に関する調査}
~
-__[[Progate>https://prog-8.com/]]__
-__[[ドットインストール>https://dotinstall.com/]]__
プログラミング学習
~
-__[[動くWebデザインアイディア帳>https://coco-factory.jp/...
-__[[CSSで雨を降らす>https://1-notes.com/css-rain-animati...
CSSアニメーション
~
-__[[Workship>https://goworkship.com/magazine/text-effect...
-__[[function fadeIn>https://flex-box.net/js-scrollin/]]__
テキストアニメーション
~
~
**Project Management
***Schedule
//{計画的な遂行のために、進行管理表を作成してリンクして下...
~
[[スケジュール管理〔スプレッドシート〕>https://docs.googl...
~
~
***ToDo
//{やるべきこと(タスク)を箇条書きにします。}
-%%小説を決める%%
-%%アイデアスケッチする%%
-%%イラスト制作%%
-%%試作する%%
-%%背景が反映されない問題の解決%%
-%%アニメーションの追加%%
~
~
~
#hr
CENTER:''worklog''
//{最新の情報を一番上に記載して下さい(古い記事が下へ沈む...
#hr
~
~
**2021.06.30
~
***研究結果
~
-完成作品を読んでもらった感想を数名の方にいただいた。
~
--前回のアンケート調査で読書が嫌い・しないと回答した方の...
---短く感じた
---飽きがなく、最後まで読めた
---文章を区切ったり、色がついていたり、動きがあるだけで全...
~
--前回のアンケート調査で読書が好き・すると回答した方の感想
---普通の文章を読むより物語に入り込めた
---より感情移入ができた
~
などの意見をいただきました。感想ありがとうございました。
~
~
**2021.06.28
~
***途中経過
~
-__[[ 『 黒い金魚 』 >https://k19as009.github.io/Samp...
--アニメーションを少し追加しました。
--画像が反映されない問題はCSSからHTMLに記述することで解決
~
~
**2021.06.23
~
***サンプル作品
~
-__[[ 『 黒い金魚 』 >https://k19as009.github.io/samp...
何故か背景が反映されない問題を調節中
~
~
**2021.06.17
~
***使用イラストの準備
~
-自分の画力では作品の雰囲気に合わせたものを準備出来そうに...
~
|20|0.3|20|0.3|20|0.3|20|c
|#image(image1.jpg)| |#image(image2.jpg)| |#image(image3....
~
~
**2021.06.10
~
***メイン動画の制作
~
#youtube(nFbudeuoh9A)
-タイトルの動画を制作。aftereffectsを使用しました。
~
~
**2021.06.03
~
***中間発表でいただいたご指摘続き
~
-%%作中の名前にルビをふる%%
-%%小説を誰かに読んでもらって感想をもらう%%
~
--小説を誰かにもらって感想をもらう
同世代の友人数名から感想をいただきました
「贖罪」「気疎い」などの言葉が難しかったというご指摘があ...
~
~
**2021.05.30
~
***中間発表でいただいたご指摘
~
-%%作中の名前にルビをふる%%
-%%小説を誰かに読んでもらって感想をもらう%%
~
--作中の名前にルビをふる
「''朱李''(しゅり)」と「''玄乃''(しずの)」
サンプルページにルビを追加しました。
~
~
**2021.05.23
~
***アイデアスケッチ
~
|20|1|20|1|20|c
|#image(back1.jpg)| |#image(back2.jpg)| |#image(back10.jp...
~
-アイデアスケッチをしました __[[アイデアスケッチ>https:/...
~
--背景に必要なイラストが何点か見つかり、その制作をToDoリ...
~
~
**2021.05.17
~
***小説の完成とサンプルページ
~
-__[[ 『 黒い金魚 』 >https://k19as009.github.io/samp...
[[Github>https://github.co.jp/]]で小説をサンプルページと...
~
~
**2021.05.13
~
***メインビジュアルの作成
~
#image(title.jpg,left,20%)
-学科ページのメインビジュアルをIllustratorとPhotoshopを使...
~
~
**2021.05.06
~
***背景と目的のブラッシュアップ
~
''背景のブラッシュアップにあたっての調査''
~
-__[[小説を読むメリットとは?>https://thun-fine.com/novel...
「言語化された思考や感情に触れられる」これは映像作品と小...
-__[[「小説を読む」ことの7つのメリット>https://ddnavi.co...
「娯楽」の中にある計り知れないメリット
~
//"目的のブラッシュアップにあたっての調査
~
~
**2021.04.22
~
-小説の決定
自作小説『黒い金魚』を使用する
~
-スケジュール管理表の作成
[[スケジュール管理〔スプレッドシート〕>https://docs.googl...
~
-研究ページの詳細情報の書き込み
-ToDoリストの作成
~
~
**2021.04.15
~
***アンケート調査
~
''読書についての現状調査''
~
***調査:絵本のようなWebサイト
~
-__[[Ikano>http://ikano.ge]]__
スクロールでページやイラストが変化していったりボトルが動く
-__[[Size your Power>http://yourpower.panda.org]]__
ストーリー性のあるWebサイト。自分の名前を打ち込める。
-__[[タテコミMove!>https://renta.papy.co.jp/renta/sc/frm/...
動くスクロール漫画。セリフやイラストがストーリーに合わせ...
~
***調査:小説と漫画と映像
~
-__[[小説家になろう『小説と漫画と映画の違い』>https://nco...
あくまで ” 小説 ” 定義がぶれないようにしっかりと理解...
~
-__[[マイナビ ウーマン『「マンガ」or「小説」』>https://wo...
小説のメリットを生かしつつ、デメリットを減らせるアイデア...
~
~
**2021.04.08
~
研究テーマ
スクロールで読む動くWeb小説
~
***調査:動きのあるWebサイト
~
-__[[株式会社リクサス>http://www.lixus.co.jp/#!/logistics...
スクロールすることでトラックが動き、トラックが通過するこ...
次ページに強制スクロールする
-__[[Feedmusic>http://feedmusic.com]]__
スクロールすることで、コマ撮り写真が動いていく
-__[[toridori>https://toridori.co.jp]]__
ペンで落書きされていくようなアニメーションを使ったサイト
~
***調査:紙媒体から電子媒体へ変化する読み物
~
-__[[KADOKAWA縦スクロール漫画大賞>https://promo.kadokawa....
-__[[ジャンプ縦スクロール漫画賞 結果発表>https://rookie....
電子媒体従来のスクロールの仕方で読める漫画が主流になりつ...
現在では、縦スクロール漫画を対象としたコンクールも存在し...
~
-__[[【絵本】あおいアヒル『ご紹介動画』>https://youtu.be/...
-__[[【絵本】スイミー [Swimmy]>https://youtu.be/oWQr3t2v3...
絵本の中のイラストが動く。これに朗読やサウンドをプラスす...
ひとつのアニメーションが作り出されている
~
-__[[Dream Switch | セガトイズ>https://www.segatoys.co.jp...
動く絵本を用いて作られた読み聞かせ用のプロジェクター
~
~
~
終了行:
#setbgcolor(#fafdff)
*Web小説 『 黒い金魚 』
スクロールで読む動く小説
#image(title.jpg)
-''Project Director'':紀野はるか
-'''Keywords:Web, 小説, 映像, グラフィック'''
-https://k19as009.github.io/black_goldfish/
~
**Overview
***Introduction / What is This
//{これは何か・・を簡潔に}
~
Web上で読む小説。
Webとグラフィックと映像を組み合わせて、動く小説にする。
~
~
***Background and Purpose
//{プロジェクトの背景と目的}
~
背景:小説を読むことのメリット
~
読書が ''好きな人''・''嫌いな人'' 。娯楽の多様化により...
『言葉に触れ素敵な表現を自分の中にストックする。意思の疎...
この言葉のように、小説の中に溢れた表現は私たちを豊かにす...
小説を読むメリット、そして娯楽としての面白さを敬遠してい...
~
目的:新しい娯楽としての形
~
小説を読むことを苦手とする人が、読むことのとっかかりや入...
それにより、小説の新しい娯楽としての形を産みだす。
~
~
***Concept
//{基本的な考え方、枠組み、視点など}
~
-読書が苦手な人でも読める、娯楽としての新しい小説の形
-スクロールで読む、動くWeb小説
~
~
***Output
//{成果物の直接掲載またはリンク誘導}
//(プロジェクトの途上では、試作品等、視覚的な資料を掲載・...
//(成果物の形式・サイズ・時間尺等の基本情報も記載して下さ...
~
~
#image(output.jpg)
【完成作品】
~
__[[『 黒い金魚 』>https://k19as009.github.io/goldfish/...
~
~
-約3000字の自作小説のWebサイト
-Githubを使って公開
~
~
***Tools
//{使用するツール|ハードウエア・ソフトウエア}
~
-Dreamweaver
-Atom
-Illustrator
-After Effects
-CSS
-Javascript
~
~
***Term
//{プロジェクトの期間|20XX.XX.XX - 20XX.XX.XX }
~
2021.04.08 - 2021.07.08
~
~
***Conclusion / Summary
//{プロジェクトが完結したら「まとめ」を記載して下さい。}
~
-Web小説という形にすることで、苦手な人でも読んでもらえる...
-今後、Web小説という新しいコンテンツが広がっていくことで...
-長編小説では、携帯小説のように短くページを区切ったり、冒...
~
~
~
**Survey
***Present Status
//{現状調査、現状の問題の洗い出し}
~
***アンケート調査
~
-読書についての現状把握
#image(research.jpg,right,17%)
~
[[Instagram>https://about.instagram.com/]]のアンケート機...
フォロワー内の、同世代男女34名の方から回答を得た
~
~
|40|5|40|c
|#image(question1.jpg)| |#image(question2.jpg)|
RIGHT:2021/04/15
~
--読書が好きか嫌いか
--読書の頻度
についてのアンケート調査を行いました。
~
-本を読まない理由の調査結果
~
--文章が苦手。小さい頃から文章を読む習慣がない。
--文字列が苦手。絵があったら絵ばかりみてしまう。
--小さい文字が均一に並んでいるのが苦手で目がチカチカする。
--漫画やアニメ、映画があるので、そっちでいい。
--想像するのが難しい。挿絵があると読めるかも。
--興味がないと最後まで読めない。
~
''調査結果''
-本を読まない・読書が嫌いという人は全体の約1/4の割合で...
-文字列が苦手、文章の続きが苦手という人が多数いる
-受動的な部分を苦手だと感じている
~
~
~
***Precedent
//{先行事例の紹介、傾向分析など}
~
-__[[ストーリーテリング型Webデザインまとめ>https://www.qa...
ストーリーテリングとは・・・
物語を話して聞かせること。ここでは「物語」を引用し、例示...
~
-__[[パララックスデザインを使ったストーリー性のあるWebサ...
パララックスデザインとは・・・
Webサイトに立体感や遠近感、高いデザイン性を持たせるデザイ...
~
~
***Technique / Technology
//{プロジェクトの遂行に必要な技法・技術に関する調査}
~
-__[[Progate>https://prog-8.com/]]__
-__[[ドットインストール>https://dotinstall.com/]]__
プログラミング学習
~
-__[[動くWebデザインアイディア帳>https://coco-factory.jp/...
-__[[CSSで雨を降らす>https://1-notes.com/css-rain-animati...
CSSアニメーション
~
-__[[Workship>https://goworkship.com/magazine/text-effect...
-__[[function fadeIn>https://flex-box.net/js-scrollin/]]__
テキストアニメーション
~
~
**Project Management
***Schedule
//{計画的な遂行のために、進行管理表を作成してリンクして下...
~
[[スケジュール管理〔スプレッドシート〕>https://docs.googl...
~
~
***ToDo
//{やるべきこと(タスク)を箇条書きにします。}
-%%小説を決める%%
-%%アイデアスケッチする%%
-%%イラスト制作%%
-%%試作する%%
-%%背景が反映されない問題の解決%%
-%%アニメーションの追加%%
~
~
~
#hr
CENTER:''worklog''
//{最新の情報を一番上に記載して下さい(古い記事が下へ沈む...
#hr
~
~
**2021.06.30
~
***研究結果
~
-完成作品を読んでもらった感想を数名の方にいただいた。
~
--前回のアンケート調査で読書が嫌い・しないと回答した方の...
---短く感じた
---飽きがなく、最後まで読めた
---文章を区切ったり、色がついていたり、動きがあるだけで全...
~
--前回のアンケート調査で読書が好き・すると回答した方の感想
---普通の文章を読むより物語に入り込めた
---より感情移入ができた
~
などの意見をいただきました。感想ありがとうございました。
~
~
**2021.06.28
~
***途中経過
~
-__[[ 『 黒い金魚 』 >https://k19as009.github.io/Samp...
--アニメーションを少し追加しました。
--画像が反映されない問題はCSSからHTMLに記述することで解決
~
~
**2021.06.23
~
***サンプル作品
~
-__[[ 『 黒い金魚 』 >https://k19as009.github.io/samp...
何故か背景が反映されない問題を調節中
~
~
**2021.06.17
~
***使用イラストの準備
~
-自分の画力では作品の雰囲気に合わせたものを準備出来そうに...
~
|20|0.3|20|0.3|20|0.3|20|c
|#image(image1.jpg)| |#image(image2.jpg)| |#image(image3....
~
~
**2021.06.10
~
***メイン動画の制作
~
#youtube(nFbudeuoh9A)
-タイトルの動画を制作。aftereffectsを使用しました。
~
~
**2021.06.03
~
***中間発表でいただいたご指摘続き
~
-%%作中の名前にルビをふる%%
-%%小説を誰かに読んでもらって感想をもらう%%
~
--小説を誰かにもらって感想をもらう
同世代の友人数名から感想をいただきました
「贖罪」「気疎い」などの言葉が難しかったというご指摘があ...
~
~
**2021.05.30
~
***中間発表でいただいたご指摘
~
-%%作中の名前にルビをふる%%
-%%小説を誰かに読んでもらって感想をもらう%%
~
--作中の名前にルビをふる
「''朱李''(しゅり)」と「''玄乃''(しずの)」
サンプルページにルビを追加しました。
~
~
**2021.05.23
~
***アイデアスケッチ
~
|20|1|20|1|20|c
|#image(back1.jpg)| |#image(back2.jpg)| |#image(back10.jp...
~
-アイデアスケッチをしました __[[アイデアスケッチ>https:/...
~
--背景に必要なイラストが何点か見つかり、その制作をToDoリ...
~
~
**2021.05.17
~
***小説の完成とサンプルページ
~
-__[[ 『 黒い金魚 』 >https://k19as009.github.io/samp...
[[Github>https://github.co.jp/]]で小説をサンプルページと...
~
~
**2021.05.13
~
***メインビジュアルの作成
~
#image(title.jpg,left,20%)
-学科ページのメインビジュアルをIllustratorとPhotoshopを使...
~
~
**2021.05.06
~
***背景と目的のブラッシュアップ
~
''背景のブラッシュアップにあたっての調査''
~
-__[[小説を読むメリットとは?>https://thun-fine.com/novel...
「言語化された思考や感情に触れられる」これは映像作品と小...
-__[[「小説を読む」ことの7つのメリット>https://ddnavi.co...
「娯楽」の中にある計り知れないメリット
~
//"目的のブラッシュアップにあたっての調査
~
~
**2021.04.22
~
-小説の決定
自作小説『黒い金魚』を使用する
~
-スケジュール管理表の作成
[[スケジュール管理〔スプレッドシート〕>https://docs.googl...
~
-研究ページの詳細情報の書き込み
-ToDoリストの作成
~
~
**2021.04.15
~
***アンケート調査
~
''読書についての現状調査''
~
***調査:絵本のようなWebサイト
~
-__[[Ikano>http://ikano.ge]]__
スクロールでページやイラストが変化していったりボトルが動く
-__[[Size your Power>http://yourpower.panda.org]]__
ストーリー性のあるWebサイト。自分の名前を打ち込める。
-__[[タテコミMove!>https://renta.papy.co.jp/renta/sc/frm/...
動くスクロール漫画。セリフやイラストがストーリーに合わせ...
~
***調査:小説と漫画と映像
~
-__[[小説家になろう『小説と漫画と映画の違い』>https://nco...
あくまで ” 小説 ” 定義がぶれないようにしっかりと理解...
~
-__[[マイナビ ウーマン『「マンガ」or「小説」』>https://wo...
小説のメリットを生かしつつ、デメリットを減らせるアイデア...
~
~
**2021.04.08
~
研究テーマ
スクロールで読む動くWeb小説
~
***調査:動きのあるWebサイト
~
-__[[株式会社リクサス>http://www.lixus.co.jp/#!/logistics...
スクロールすることでトラックが動き、トラックが通過するこ...
次ページに強制スクロールする
-__[[Feedmusic>http://feedmusic.com]]__
スクロールすることで、コマ撮り写真が動いていく
-__[[toridori>https://toridori.co.jp]]__
ペンで落書きされていくようなアニメーションを使ったサイト
~
***調査:紙媒体から電子媒体へ変化する読み物
~
-__[[KADOKAWA縦スクロール漫画大賞>https://promo.kadokawa....
-__[[ジャンプ縦スクロール漫画賞 結果発表>https://rookie....
電子媒体従来のスクロールの仕方で読める漫画が主流になりつ...
現在では、縦スクロール漫画を対象としたコンクールも存在し...
~
-__[[【絵本】あおいアヒル『ご紹介動画』>https://youtu.be/...
-__[[【絵本】スイミー [Swimmy]>https://youtu.be/oWQr3t2v3...
絵本の中のイラストが動く。これに朗読やサウンドをプラスす...
ひとつのアニメーションが作り出されている
~
-__[[Dream Switch | セガトイズ>https://www.segatoys.co.jp...
動く絵本を用いて作られた読み聞かせ用のプロジェクター
~
~
~
ページ名: