Re:cord ~レコード~
過去に戻れるWEBサイトのお話
- 濱 有希子
- Keywords：website, html, novel,staging
- https://yukko-lab.github.io/record_1123/
概要
これは何？
- WEBサイト小説
背景と目的
- 背景１： WEBサイトの物語を展開する媒体としての可能性の探究
- 情報伝達を主としているWEBサイトで、それ以外で何ができるのかという可能性を図る。その中でも、物語を展開する媒体として使う際、物語の面白さを伝達するためにはどの様な演出が行えるのか、その中でもどの様な演出が有効なのかを探して試す。
- 背景２： 本サイトを読んだ人に新しい読書体験の提供
- 読者に分岐を選択させるなど、WEBサイトだからこそできる演出がある。そのように他の媒体では味わえないような読書を体験してもらいたい。
- 目的 ： WEBサイトの物語を展開する媒体としての可能性の探究
コンセプト
- スクロールやクリックなどで読み手側が干渉できるなど、紙ではなくWEBサイトであることを活かす
- その場にあった音やアニメーションを使い、臨場感を出す
- 実際に主人公目線になることで、生きているその時々が大切だということを感じてもらいたい
- 全体のデザインは日記帳やシールをモチーフに
成果物の仕様
- WEBサイト
制作ツール
- Windows11
- サクラエディタ
- ibisPaint X
- Illustrator
プロジェクトの期間
- 2023.04.11
まとめ
- WEBサイトにしかできない展開方法がある
- 今回は、ページを分けることによってシーンが変わったことを表現し、実際に読み手に操作(ボタンや選択肢)をしてもらうことで、より読み手と物語との距離を近づけるなどWEBサイトならではの物語の展開を可能とした。
- 文章のバランスを考えることが大事
- 文章が長すぎると内容を理解しようとしてシステムに目がいかなくなるが、文章を短くしすぎると逆に内容を上手く理解できなくなる。そのためどう文章を構成するかもパフォーマンスを向上する上で重要。
- WEBサイト上で自動的に音を流すことができないので注意
- 最近では、WEBサイトでの規制が強まり、自動的に音を流せないようになっているブラウザが増えた。理由は、急に音を流すと利用者に優しくない(驚く、公共の場にいるなど)とのこと。そのため音を流すには利用者にボタンを押してもらうなどしないと流せなくなっている。
- 最近では、WEBサイトでの規制が強まり、自動的に音を流せないようになっているブラウザが増えた。理由は、急に音を流すと利用者に優しくない(驚く、公共の場にいるなど)とのこと。そのため音を流すには利用者にボタンを押してもらうなどしないと流せなくなっている。
調査
現状調査
- WEBサイトの主な運用目的
- 企業の紹介・認知度向上
- 商品の販売・促進
- 人材採用
- ブランドイメージ向上
- カスタマーサポートなど
先行事例
- 仕掛けが面白いWEBサイト
技法・技術情報
- 参考にしたアニメーションコード
プロジェクト管理
スケジュール
ToDo
- 効果音の挿入
- 挿絵の作成、挿入
メインビジュアルの作成ロゴの作成ストーリ決めサイトマップ、ワイヤーフレーム作成テーマ決定スケジュール制作
進捗記録
2023.07.11
- 文章添削
- 効果音が鳴らないボタンの原因追及→未だ不明
- ページ上部にあるビジュアルの手直し→途中
2023.07.04
- 挿入絵作成
- 効果音が鳴らないボタンの原因追及→未だ不明
- 文章の添削→途中
2023.06.27
- 挿入絵作成
- 効果音が鳴るボタンを設置
- 自動で効果音を流したかったがＷＥＢサイトの音に関する規制が高まり、利用者が許可(ボタンを押す)を出さないと音を流せないようになっている
- 効果音の編集
- ボタン作成
- アテンションページの追加
2023.06.20
- ロゴをヘッダーに挿入
- タイトルビジュアル作成、挿入
- ＵＩ作成、設置
- プロローグ画面のシステム変更
- あらすじとタイトル表示をページ分け
- あらすじとタイトル表示をページ分け
2023.06.13
- ページごとにタイトルビジュアルのサンプルを設置
- タイトルビジュアルのアニメーション(ページめくり)を模索、設置
- 挿入絵サンプルをそれぞれの場所に設置
- 字コンテ制作
- ロゴ制作
- 記録するなどの意味を持つ【Record】＋繰り返しの意味を持つ【Re】を組み合わせたもの。それらに合わせこれが何であるかあを明確に示すためにWEBサイト小説と明記。
- 記録するなどの意味を持つ【Record】＋繰り返しの意味を持つ【Re】を組み合わせたもの。それらに合わせこれが何であるかあを明確に示すためにWEBサイト小説と明記。
2023.06.06
- テキストアニメーション(typewriter)を全文に設置
- ABOUTページを作成、文章作成
- フォント挿入
- アニメーションの例探し
2023.05.30
- スクロールをして画面内に対象が来るとアニメーションが開始するトリガーを設置
- 背景に罫線を設置(cssで作成)
- プロローグページを作成
- メインビジュアル作成
2023.05.23
- スクロールをして画面内に対象が来るとアニメーションが開始するトリガーを設定中
- テキストアニメーション(typewriter)を一部に設置
- ワイヤーフレーム（仮）作成
2023.05.16
- お試しでHTMLを組む
- 全ページを繋げてそれぞれに飛べるようにするところまで
- サイトマップ作成
2023.05.09
- ストーリー内容
- メモ
※ネタバレ注意
- メモ
2023.05.02
WEBサイトと紙の比較
- WEBサイト
- 良い点
- 演出がつけられる
- ハードルが低い
- 誰でも無料で見れる
- 目だけで追うより内容が入りやすい
- 選択肢など読み手次第でストーリーを変えれる
- 悪い点
- ネットがないと使えない
- 作る際技術がいる
- 良い点
- 紙
- 良い点
- 実際に紙を捲る感覚を楽しめる
- 文章に集中できる
- 好きなペースで読める
- 悪い点
- ハードルが高い
- 最後まで読めない人が多い
- 良い点
- ストーリー内容
- メモ
※ネタバレ注意
- メモ
2023.04.25
ターゲット
- 普段本を読まない人
- 普段小説を読まない人が『文章』に触れる足掛かりに
ストーリーテーマ決め
-ネットリテラシーについて
-睡眠不足の人の日々
-植物成長日記（夏休みの観察日記的な）
-小学生の夏休みの絵日記
-植物成長日記ホラー版（夏休みの観察日記的な）
- セーブができる世界
2023.04.18
技術
案まとめ
- ⭕️WEBサイト上で物語を展開する
- テーマは再度考え中
- ゲームラボで作ったゲームのWEBサイトを作る
- 創作VTuberグループの紹介サイトを作る
案追加
- 創作VTuberグループの紹介サイトを作る
- オリジナルでVtuberグループを作ってそれを紹介するサイトを作る
- キャラ本人が投稿したかのような記事を投稿
- 二次創作のガイドラインの重要さやマナーなどを伝えられたら・・・
2023.04.11
コンセプト
- ただのWEBサイトではないものを作りたい
- 何かができるWEBサイトを作りたい
- WEBサイトであることを活かしたい
- HTMLを使う
案出し
- WEBサイト上で物語を展開する
- 小説みたいに文章を主に使いながら挿絵や映像、音楽などを挟む
- 実際に操作してもらう（例えば送信ボタンを押させるとか）
- 例えば日付毎にページを分けて、読んだらページが増えていくとか
- 隠し要素とかちょっと謎を挟んだりとか読むだけでなく体験してもらいたい
- テーマは誹謗中傷や無断転載
- ゲームラボで作ったゲームのWEBサイトを作る
- 文章、イラスト、PVで伝える
- WEB上でお試しプレイができるようにする
- サイトオリジナルシナリオを作る（ゲーム形式／その後とか）
main.png
title_image.png
main.jpg
wireframe.png
sitemap.png
