Web小説 『 黒い金魚 』
スクロールで読む動く小説
- Project Director:紀野はるか
- Keywords:Web, 小説, 映像, グラフィック
- https://k19as009.github.io/black_goldfish/
Overview
Introduction / What is This
Web上で読む小説。
Webとグラフィックと映像を組み合わせて、動く小説にする。
Background and Purpose
背景:小説を読むことのメリット
読書が 好きな人・嫌いな人 。娯楽の多様化により、この二極化が進んでいる。私のように好きな人にとって本を読むことはメリットでしかないが、嫌いな人にとっては、その楽しさや面白さにたどり着く前の段階で、読書を不便だと感じていることを知った。嫌いな人にとって、読書はそもそも娯楽の選択肢の中に入っていないのだ。読書の良さを知らない人に、いくら読書のメリットを伝えても、それ以前の問題である。
『言葉に触れ素敵な表現を自分の中にストックする。意思の疎通は言葉ありき。』 - 美輪明宏
この言葉のように、小説の中に溢れた表現は私たちを豊かにするものだ。
小説を読むメリット、そして娯楽としての面白さを敬遠している人のへ、小説を読むきっかけを作れないか。小説を読まない人が感じる読書の苦手部分を解決するためには、現状の形ではなく、新しい要素を含んだ小説の新しい形が必要だと考えた。このことから、今回このような研究テーマに取り組むことにした。
目的:新しい娯楽としての形
小説を読むことを苦手とする人が、読むことのとっかかりや入口になるようなものを作ること。
それにより、小説の新しい娯楽としての形を産みだす。
Concept
- 読書が苦手な人でも読める、娯楽としての新しい小説の形
- スクロールで読む、動くWeb小説
Output
【完成作品】
『 黒い金魚 』
- 約3000字の自作小説のWebサイト
- Githubを使って公開
Tools
- Dreamweaver
- Atom
- Illustrator
- After Effects
- CSS
- Javascript
Term
2021.04.08 - 2021.07.08
Conclusion / Summary
- Web小説という形にすることで、苦手な人でも読んでもらえることが分かった。
- 今後、Web小説という新しいコンテンツが広がっていくことで、小説を読む人口が増えていくのではないかと考える。
- 長編小説では、携帯小説のように短くページを区切ったり、冒頭の部分のみに動きをつけたWebサイトにすることによって、利用できる。
Survey
Present Status
アンケート調査
- 読書についての現状把握
Instagramのアンケート機能・クイズ機能・質問機能を使っての独自調査を実施
フォロワー内の、同世代男女34名の方から回答を得た
2021/04/15
- 読書が好きか嫌いか
- 読書の頻度
についてのアンケート調査を行いました。
- 本を読まない理由の調査結果
- 文章が苦手。小さい頃から文章を読む習慣がない。
- 文字列が苦手。絵があったら絵ばかりみてしまう。
- 小さい文字が均一に並んでいるのが苦手で目がチカチカする。
- 漫画やアニメ、映画があるので、そっちでいい。
- 想像するのが難しい。挿絵があると読めるかも。
- 興味がないと最後まで読めない。
調査結果
- 本を読まない・読書が嫌いという人は全体の約1/4の割合でいる
- 文字列が苦手、文章の続きが苦手という人が多数いる
- 受動的な部分を苦手だと感じている
Precedent
- ストーリーテリング型Webデザインまとめ
ストーリーテリングとは・・・
物語を話して聞かせること。ここでは「物語」を引用し、例示することで聞き手に聞かせ、印象付けるWebやビジネスの手法のこと
- パララックスデザインを使ったストーリー性のあるWebサイトまとめ
パララックスデザインとは・・・
Webサイトに立体感や遠近感、高いデザイン性を持たせるデザイン表現
Technique / Technology
- Progate
- ドットインストール
プログラミング学習
- 動くWebデザインアイディア帳
- CSSで雨を降らす
CSSアニメーション
- Workship
- function fadeIn
テキストアニメーション
Project Management
Schedule
ToDo
小説を決めるアイデアスケッチするイラスト制作試作する背景が反映されない問題の解決アニメーションの追加
worklog
2021.06.30
研究結果
- 完成作品を読んでもらった感想を数名の方にいただいた。
- 前回のアンケート調査で読書が嫌い・しないと回答した方の感想
- 短く感じた
- 飽きがなく、最後まで読めた
- 文章を区切ったり、色がついていたり、動きがあるだけで全然違う
- 前回のアンケート調査で読書が好き・すると回答した方の感想
- 普通の文章を読むより物語に入り込めた
- より感情移入ができた
などの意見をいただきました。感想ありがとうございました。
2021.06.28
途中経過
- 『 黒い金魚 』
- アニメーションを少し追加しました。
- 画像が反映されない問題はCSSからHTMLに記述することで解決
2021.06.23
サンプル作品
- 『 黒い金魚 』
何故か背景が反映されない問題を調節中
2021.06.17
使用イラストの準備
- 自分の画力では作品の雰囲気に合わせたものを準備出来そうになかったので
お友達に協力してもらい、作品中のイラストを完成させた。
2021.06.10
メイン動画の制作
- タイトルの動画を制作。aftereffectsを使用しました。
2021.06.03
中間発表でいただいたご指摘続き
作中の名前にルビをふる小説を誰かに読んでもらって感想をもらう
- 小説を誰かにもらって感想をもらう
同世代の友人数名から感想をいただきました
「贖罪」「気疎い」などの言葉が難しかったというご指摘がありましたのでサンプルページにルビを追加しました。
- 小説を誰かにもらって感想をもらう
2021.05.30
中間発表でいただいたご指摘
作中の名前にルビをふる小説を誰かに読んでもらって感想をもらう
- 作中の名前にルビをふる
「朱李(しゅり)」と「玄乃(しずの)」
サンプルページにルビを追加しました。
- 作中の名前にルビをふる
2021.05.23
アイデアスケッチ
- アイデアスケッチをしました アイデアスケッチ
- 背景に必要なイラストが何点か見つかり、その制作をToDoリストに追加
- 背景に必要なイラストが何点か見つかり、その制作をToDoリストに追加
2021.05.17
小説の完成とサンプルページ
2021.05.13
メインビジュアルの作成
- 学科ページのメインビジュアルをIllustratorとPhotoshopを使用して作成
2021.05.06
背景と目的のブラッシュアップ
背景のブラッシュアップにあたっての調査
- 小説を読むメリットとは?
「言語化された思考や感情に触れられる」これは映像作品と小説の決定的な違いである。
- 「小説を読む」ことの7つのメリット
「娯楽」の中にある計り知れないメリット
2021.04.22
- 小説の決定
自作小説『黒い金魚』を使用する
- スケジュール管理表の作成
スケジュール管理〔スプレッドシート〕
- 研究ページの詳細情報の書き込み
- ToDoリストの作成
2021.04.15
アンケート調査
読書についての現状調査
調査:絵本のようなWebサイト
- Ikano
スクロールでページやイラストが変化していったりボトルが動く - Size your Power
ストーリー性のあるWebサイト。自分の名前を打ち込める。 - タテコミMove!
動くスクロール漫画。セリフやイラストがストーリーに合わせて動く。
調査:小説と漫画と映像
- 小説家になろう『小説と漫画と映画の違い』
あくまで ” 小説 ” 定義がぶれないようにしっかりと理解する
- マイナビ ウーマン『「マンガ」or「小説」』
小説のメリットを生かしつつ、デメリットを減らせるアイデアを考えたい
2021.04.08
研究テーマ
スクロールで読む動くWeb小説
調査:動きのあるWebサイト
- 株式会社リクサス
スクロールすることでトラックが動き、トラックが通過することによってポップを表示したり、
次ページに強制スクロールする - Feedmusic
スクロールすることで、コマ撮り写真が動いていく - toridori
ペンで落書きされていくようなアニメーションを使ったサイト
調査:紙媒体から電子媒体へ変化する読み物
- KADOKAWA縦スクロール漫画大賞
- ジャンプ縦スクロール漫画賞 結果発表
電子媒体従来のスクロールの仕方で読める漫画が主流になりつつある。
現在では、縦スクロール漫画を対象としたコンクールも存在している
- 【絵本】あおいアヒル『ご紹介動画』
- 【絵本】スイミー [Swimmy]
絵本の中のイラストが動く。これに朗読やサウンドをプラスすることで、
ひとつのアニメーションが作り出されている
- Dream Switch | セガトイズ
動く絵本を用いて作られた読み聞かせ用のプロジェクター