#author("2023-07-04T16:29:53+09:00;2023-07-04T15:56:03+09:00","default:member","member") #author("2023-07-18T21:25:42+09:00;2023-07-04T15:56:03+09:00","default:member","member") *Re:cord ~レコード~ 過去に戻れるWEBサイトのお話 #image(main.png) -''濱 有希子'' -'''Keywords：website, html, novel,staging''' -https://yukko-lab.github.io/record_1123/ //-__[[相互評価シート>https://www.example.com]]__ ← ここからコメントをお願いします。 ~ **概要 ***これは何？ //&color(red){これは何か・・を簡潔に}; -WEBサイト小説 ~ ***背景と目的 //&color(red){プロジェクトの背景と目的}; -背景１： WEBサイトの物語を展開する媒体としての可能性の探究 --情報伝達を主としているWEBサイトで、それ以外で何ができるのかという可能性を図る。その中でも、物語を展開する媒体として使う際、物語の面白さを伝達するためにはどの様な演出が行えるのか、その中でもどの様な演出が有効なのかを探して試す。 -背景２： 本サイトを読んだ人に新しい読書体験の提供 --読者に分岐を選択させるなど、WEBサイトだからこそできる演出がある。そのように他の媒体では味わえないような読書を体験してもらいたい。 ~ -目的 ： WEBサイトの物語を展開する媒体としての可能性の探究 ~ ***コンセプト //&color(red){基本的な考え方、枠組み、視点など}; -スクロールやクリックなどで読み手側が干渉できるなど、紙ではなくWEBサイトであることを活かす -その場にあった音やアニメーションを使い、臨場感を出す -実際に主人公目線になることで、生きているその時々が大切だということを感じてもらいたい -全体のデザインは日記帳やシールをモチーフに ~ ***成果物の仕様 //&color(red){&small(成果物の形式・サイズ・時間尺等);}; -WEBサイト ~ ***制作ツール //&color(red){使用するツール｜ハードウエア・ソフトウエア}; -Windows11 -サクラエディタ -ibisPaint X -Illustrator ~ ***プロジェクトの期間 //&color(red){プロジェクトの期間｜20XX.XX.XX - 20XX.XX.XX }; -2023.04.11 ~ ~ ***まとめ //&color(red){プロジェクトが完結したら「まとめ」を記載して下さい。}; //-他の人にも有益な情報、それをすることによってどういう効果が得られたか -WEBサイトにしかできない展開方法がある --今回は、ページを分けることによってシーンが変わったことを表現し、実際に読み手に操作(ボタンや選択肢)をしてもらうことで、より読み手と物語との距離を近づけるなどWEBサイトならではの物語の展開を可能とした。 -文章のバランスを考えることが大事 --文章が長すぎると内容を理解しようとしてシステムに目がいかなくなるが、文章を短くしすぎると逆に内容を上手く理解できなくなる。そのためどう文章を構成するかもパフォーマンスを向上する上で重要。 -WEBサイト上で自動的に音を流すことができないので注意 --最近では、WEBサイトでの規制が強まり、自動的に音を流せないようになっているブラウザが増えた。理由は、急に音を流すと利用者に優しくない(驚く、公共の場にいるなど)とのこと。そのため音を流すには利用者にボタンを押してもらうなどしないと流せなくなっている。 ~ ~ **調査 ***現状調査 //&color(red){プロジェクトのテーマに関わる社会の現状と問題の洗い出し}; -WEBサイトの主な運用目的 --企業の紹介・認知度向上 --商品の販売・促進 --人材採用 --ブランドイメージ向上 --カスタマーサポートなど ~ ***先行事例 //&color(red){プロジェクトのテーマに該当する先行事例の紹介、傾向分析など}; -仕掛けが面白いWEBサイト --[[JANAICOFFEE>https://janaicoffee.tokyo]] --[[KETAKUMA>https://ketakuma.com]] --[[痩せるWEB>https://web-media.blue-puddle.com/diet/]] --[[株式会社ライデン>https://www.ryden.co.jp/]] ~ ***技法・技術情報 //&color(red){プロジェクトの遂行に必要な技法・技術に関する調査}; -参考にしたアニメーションコード --[[ページめくり>https://developer.mozilla.org/ja/docs/Web/CSS/animation-fill-mode]] --[[タイプライター>https://give-shot.jp/tokyocss/typing-text/]] --[[jQueryスクロール時に要素をフェードインさせる方法>https://dezanari.com/jquery-scroll-fadein/]] --[[タイプライター長文>https://dubdesign.net/javascript/scrollin-typetext/]] --[[罫線を引く方法>https://web-dev.tech/front-end/css/note-design-solid-dashed-line/]] --[[audioタグで効果音の出るボタンを設置する方法>https://minagawa.design/blog/webdesign/html5koukaon/]] ~ ~ **プロジェクト管理 ***スケジュール __[[スケジュール>https://docs.google.com/spreadsheets/d/1SzQT33TKwkldvYqpHMiqSbwdPGoyJoyoCbrzTCIpt7Q/edit?usp=sharing]]__ //&color(red){計画的な遂行のために、進行管理表を作成してリンクして下さい。}; ~ ***ToDo //&color(red){やるべきこと（タスク）を箇条書きにします。}; //&color(red){完了後は「%%取り消し線%%」あるいは「// コメントアウト」」}; -効果音の挿入 -挿絵の作成、挿入 -%%メインビジュアルの作成%% -%%ロゴの作成%% -%%ストーリ決め%% -%%サイトマップ、ワイヤーフレーム作成%% -%%テーマ決定%% -%%スケジュール制作%% //***NotToDo //&color(red){やらないこと：何をするかではなく「何をしないか」を考える}; //&color(red){例：10人以上の会議には出ない。苦手なことは誰かに頼む・・}; ~ ~ #hr CENTER:''進捗記録'' //&color(red){最新の情報を一番上に記載して下さい（古い記事が下へ沈む）。}; #hr ~ ~ **2023.07.11 -文章添削 -効果音が鳴らないボタンの原因追及→未だ不明 -ページ上部にあるビジュアルの手直し→途中 ~ ~ ~ **2023.07.04 -挿入絵作成 --[[タイトルビジュアル、UI素材(Google drive)>https://drive.google.com/drive/folders/1SkR3eov3PvMmGCfeGTtGTUkLI41yLuor?usp=sharing]] -効果音が鳴らないボタンの原因追及→未だ不明 -文章の添削→途中 ~ ~ ~ **2023.06.27 -挿入絵作成 -効果音が鳴るボタンを設置 --自動で効果音を流したかったがＷＥＢサイトの音に関する規制が高まり、利用者が許可(ボタンを押す)を出さないと音を流せないようになっている -効果音の編集 -ボタン作成 -アテンションページの追加 ~ ~ ~ **2023.06.20 -ロゴをヘッダーに挿入 -タイトルビジュアル作成、挿入 -ＵＩ作成、設置 --[[タイトルビジュアル、UI素材(Google drive)>https://drive.google.com/drive/folders/1SkR3eov3PvMmGCfeGTtGTUkLI41yLuor?usp=sharing]] -プロローグ画面のシステム変更 --あらすじとタイトル表示をページ分け ~ ~ ~ **2023.06.13 -ページごとにタイトルビジュアルのサンプルを設置 --タイトルビジュアルのアニメーション(ページめくり)を模索、設置 -挿入絵サンプルをそれぞれの場所に設置 -字コンテ制作 -ロゴ制作 --記録するなどの意味を持つ【Record】＋繰り返しの意味を持つ【Re】を組み合わせたもの。それらに合わせこれが何であるかあを明確に示すためにWEBサイト小説と明記。 #image(title_image.png ,center,60%) ~ ~ ~ **2023.06.06 -テキストアニメーション(typewriter)を全文に設置 -ABOUTページを作成、文章作成 -フォント挿入 -アニメーションの例探し ~ ~ ~ **2023.05.30 -スクロールをして画面内に対象が来るとアニメーションが開始するトリガーを設置 -背景に罫線を設置(cssで作成) -プロローグページを作成 -メインビジュアル作成 - ~ ~ ~ **2023.05.23 -スクロールをして画面内に対象が来るとアニメーションが開始するトリガーを設定中 -テキストアニメーション(typewriter)を一部に設置 -ワイヤーフレーム（仮）作成 #image(wireframe.png,center,60%) ~ ~ ~ **2023.05.16 -お試しでHTMLを組む --全ページを繋げてそれぞれに飛べるようにするところまで -サイトマップ作成 #image(sitemap.png,center,60%) ~ ~ ~ **2023.05.09 -ストーリー内容 --__[[メモ>濱有希子/情デ研究メモ]]__ ※ネタバレ注意 ~ ~ ~ **2023.05.02 ***WEBサイトと紙の比較 -WEBサイト --良い点 ---演出がつけられる ---ハードルが低い ---誰でも無料で見れる ---目だけで追うより内容が入りやすい ---選択肢など読み手次第でストーリーを変えれる ~ --悪い点 ---ネットがないと使えない ---作る際技術がいる ~ -紙 --良い点 ---実際に紙を捲る感覚を楽しめる ---文章に集中できる ---好きなペースで読める ~ --悪い点 ---ハードルが高い ---最後まで読めない人が多い ~ ~ -ストーリー内容 --__[[メモ>濱有希子/情デ研究メモ]]__ ※ネタバレ注意 ~ ~ ~ **2023.04.25 ***ターゲット -普段本を読まない人 --普段小説を読まない人が『文章』に触れる足掛かりに ~ ***ストーリーテーマ決め %%-ネットリテラシーについて%% %%-睡眠不足の人の日々%% %%-植物成長日記（夏休みの観察日記的な）%% %%-小学生の夏休みの絵日記%% %%-植物成長日記ホラー版（夏休みの観察日記的な）%% -セーブができる世界 - ~ ~ ~ **2023.04.18 ***技術 -[[JANAICOFFEE>https://janaicoffee.tokyo]] -[[KETAKUMA>https://ketakuma.com]] -[[痩せるWEB>https://web-media.blue-puddle.com/diet/]] -[[株式会社ライデン>https://www.ryden.co.jp/]] -[[―（ぼう）>https://tadanobou.com/about]] ~ ***案まとめ -⭕️WEBサイト上で物語を展開する --テーマは再度考え中 -ゲームラボで作ったゲームのWEBサイトを作る -創作VTuberグループの紹介サイトを作る ~ ***案追加 -創作VTuberグループの紹介サイトを作る --オリジナルでVtuberグループを作ってそれを紹介するサイトを作る --キャラ本人が投稿したかのような記事を投稿 --二次創作のガイドラインの重要さやマナーなどを伝えられたら・・・ ~ ~ ~ **2023.04.11 ***コンセプト -ただのWEBサイトではないものを作りたい -何かができるWEBサイトを作りたい -WEBサイトであることを活かしたい -HTMLを使う ~ ***案出し -WEBサイト上で物語を展開する --小説みたいに文章を主に使いながら挿絵や映像、音楽などを挟む --実際に操作してもらう（例えば送信ボタンを押させるとか） --例えば日付毎にページを分けて、読んだらページが増えていくとか --隠し要素とかちょっと謎を挟んだりとか読むだけでなく体験してもらいたい --テーマは誹謗中傷や無断転載 -ゲームラボで作ったゲームのWEBサイトを作る --文章、イラスト、PVで伝える --WEB上でお試しプレイができるようにする --サイトオリジナルシナリオを作る（ゲーム形式／その後とか） //-WEB上でゲーム？ //--毎日ログイン、アクセスすることで成長する植物か人物か何か //--植物なら水やり肥料、人物ならご飯やふれあいを毎日1回以上行う //--それを続けることでそのものが成長する ~ ~ ~