LogoMark.png

紀野はるか/情報デザイン研究I の変更点


#author("2021-11-24T11:17:55+09:00","default:member","member")
#author("2021-11-24T11:29:58+09:00","default:member","member")
#setbgcolor(#fafdff)
*Web小説  『 黒い金魚 』
スクロールで読む動く小説


#image(title.jpg)


-''Project Director'':紀野はるか
-'''Keywords:Web, 小説, 映像, グラフィック'''
-https://k19as009.github.io/blackgoldfish/
-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小説という新しいコンテンツが広がっていくことで、小説を読む人口が増えていくのではないかと考える。
-長編小説では、携帯小説のように短くページを区切ったり、冒頭の部分のみに動きをつけた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.qam-web.com/?p=10674]]__
ストーリーテリングとは・・・
物語を話して聞かせること。ここでは「物語」を引用し、例示することで聞き手に聞かせ、印象付けるWebやビジネスの手法のこと
~
-__[[パララックスデザインを使ったストーリー性のあるWebサイトまとめ>https://goodpatch.com/blog/parallax-web-site-tell-a-story]]__
パララックスデザインとは・・・
Webサイトに立体感や遠近感、高いデザイン性を持たせるデザイン表現
~
~

***Technique / Technology
//{プロジェクトの遂行に必要な技法・技術に関する調査}
~

-__[[Progate>https://prog-8.com/]]__
-__[[ドットインストール>https://dotinstall.com/]]__
プログラミング学習
~
-__[[動くWebデザインアイディア帳>https://coco-factory.jp/ugokuweb/]]__
-__[[CSSで雨を降らす>https://1-notes.com/css-rain-animation/]]__
CSSアニメーション
~
-__[[Workship>https://goworkship.com/magazine/text-effect-typography/]]__
-__[[function fadeIn>https://flex-box.net/js-scrollin/]]__
テキストアニメーション
~
~

**Project Management

***Schedule
//{計画的な遂行のために、進行管理表を作成してリンクして下さい。}
~

[[スケジュール管理〔スプレッドシート〕>https://docs.google.com/spreadsheets/d/1QbDOCxaDvZ0PzNm1iYx3MeW1E5cnTtfnH7vOtFWJoZs/edit?usp=sharing]]

~
~

***ToDo
//{やるべきこと(タスク)を箇条書きにします。}
-%%小説を決める%%
-%%アイデアスケッチする%%
-%%イラスト制作%%
-%%試作する%%
-%%背景が反映されない問題の解決%%
-%%アニメーションの追加%%

~
~
~

#hr
CENTER:''worklog''
//{最新の情報を一番上に記載して下さい(古い記事が下へ沈む)。}
#hr
~
~
**2021.06.30
~
***研究結果
~
-完成作品を読んでもらった感想を数名の方にいただいた。
~

--前回のアンケート調査で読書が嫌い・しないと回答した方の感想
---短く感じた
---飽きがなく、最後まで読めた
---文章を区切ったり、色がついていたり、動きがあるだけで全然違う
~
--前回のアンケート調査で読書が好き・すると回答した方の感想
---普通の文章を読むより物語に入り込めた
---より感情移入ができた
~

などの意見をいただきました。感想ありがとうございました。

~
~
**2021.06.28
~
***途中経過
~
-__[[ 『 黒い金魚 』 >https://k19as009.github.io/Sample_03/]]__
--アニメーションを少し追加しました。
--画像が反映されない問題はCSSからHTMLに記述することで解決
~
~
**2021.06.23
~
***サンプル作品
~
-__[[ 『 黒い金魚 』 >https://k19as009.github.io/sample_02/]]__
何故か背景が反映されない問題を調節中
~
~
**2021.06.17
~
***使用イラストの準備
~
-自分の画力では作品の雰囲気に合わせたものを準備出来そうになかったので&br;お友達に協力してもらい、作品中のイラストを完成させた。
~
|20|0.3|20|0.3|20|0.3|20|c
|#image(image1.jpg)| |#image(image2.jpg)| |#image(image3.jpg)|  |#image(image4.jpg)|
~
~
**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.jpg)|
~
-アイデアスケッチをしました __[[アイデアスケッチ>https://drive.google.com/drive/folders/1I71ev3eKga3ekzar8jGx7pDiBmJjbzm2?usp=sharing]]__
~
--背景に必要なイラストが何点か見つかり、その制作をToDoリストに追加
~
~
**2021.05.17
~
***小説の完成とサンプルページ
~
-__[[ 『 黒い金魚 』 >https://k19as009.github.io/sample_01/]]__
[[Github>https://github.co.jp/]]で小説をサンプルページとして公開しました

~
~
**2021.05.13
~
***メインビジュアルの作成
~
#image(title.jpg,left,20%)
-学科ページのメインビジュアルをIllustratorとPhotoshopを使用して作成

~
~
**2021.05.06
~
***背景と目的のブラッシュアップ
~
''背景のブラッシュアップにあたっての調査''
~
-__[[小説を読むメリットとは?>https://thun-fine.com/novel-merits]]__
「言語化された思考や感情に触れられる」これは映像作品と小説の決定的な違いである。

-__[[「小説を読む」ことの7つのメリット>https://ddnavi.com/serial/570978/a/]]__
「娯楽」の中にある計り知れないメリット

~
//"目的のブラッシュアップにあたっての調査

~
~
**2021.04.22

~
-小説の決定
自作小説『黒い金魚』を使用する
~
-スケジュール管理表の作成
[[スケジュール管理〔スプレッドシート〕>https://docs.google.com/spreadsheets/d/1QbDOCxaDvZ0PzNm1iYx3MeW1E5cnTtfnH7vOtFWJoZs/edit?usp=sharing]]
~
-研究ページの詳細情報の書き込み
-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/item/143135/]]__
動くスクロール漫画。セリフやイラストがストーリーに合わせて動く。


~

***調査:小説と漫画と映像
~
-__[[小説家になろう『小説と漫画と映画の違い』>https://ncode.syosetu.com/n8831cl/57/]]__
あくまで ” 小説 ” 定義がぶれないようにしっかりと理解する
~
-__[[マイナビ ウーマン『「マンガ」or「小説」』>https://woman.mynavi.jp/article/150109-115/]]__
小説のメリットを生かしつつ、デメリットを減らせるアイデアを考えたい


~
~

**2021.04.08

~
研究テーマ
 スクロールで読む動くWeb小説
~

***調査:動きのあるWebサイト
~
-__[[株式会社リクサス>http://www.lixus.co.jp/#!/logistics-business/]]__
スクロールすることでトラックが動き、トラックが通過することによってポップを表示したり、
次ページに強制スクロールする
-__[[Feedmusic>http://feedmusic.com]]__
スクロールすることで、コマ撮り写真が動いていく
-__[[toridori>https://toridori.co.jp]]__
ペンで落書きされていくようなアニメーションを使ったサイト

~
***調査:紙媒体から電子媒体へ変化する読み物
~
-__[[KADOKAWA縦スクロール漫画大賞>https://promo.kadokawa.co.jp/tatesuku/]]__
-__[[ジャンプ縦スクロール漫画賞 結果発表>https://rookie.shonenjump.com/scroll/result]]__
電子媒体従来のスクロールの仕方で読める漫画が主流になりつつある。
現在では、縦スクロール漫画を対象としたコンクールも存在している

~
-__[[【絵本】あおいアヒル『ご紹介動画』>https://youtu.be/ZnJaDbUxVmA]]__
-__[[【絵本】スイミー [Swimmy]>https://youtu.be/oWQr3t2v3n8]]__
絵本の中のイラストが動く。これに朗読やサウンドをプラスすることで、
ひとつのアニメーションが作り出されている

~
-__[[Dream Switch | セガトイズ>https://www.segatoys.co.jp/toy/9172/]]__
動く絵本を用いて作られた読み聞かせ用のプロジェクター

~
~

~