濱有希子/情報デザイン研究I をテンプレートにして作成

開始行:
*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){基本的な考え方、枠組み、視点など}; -スクロールやクリックなどで読み手側が干渉できるなど、紙で... -その場にあった音やアニメーションを使い、臨場感を出す -実際に主人公目線になることで、生きているその時々が大切だ... -全体のデザインは日記帳やシールをモチーフに ~ ***成果物の仕様 //&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サイトでの規制が強まり、自動的に音を流せな... ~ ~ **調査 ***現状調査 //&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/We... --[[タイプライター>https://give-shot.jp/tokyocss/typing-t... --[[jQueryスクロール時に要素をフェードインさせる方法>http... --[[タイプライター長文>https://dubdesign.net/javascript/s... --[[罫線を引く方法>https://web-dev.tech/front-end/css/not... --[[audioタグで効果音の出るボタンを設置する方法>https://m... ~ ~ **プロジェクト管理 ***スケジュール __[[スケジュール>https://docs.google.com/spreadsheets/d/1... //&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://driv... -効果音が鳴らないボタンの原因追及→未だ不明 -文章の添削→途中 ~ ~ ~ **2023.06.27 -挿入絵作成 -効果音が鳴るボタンを設置 --自動で効果音を流したかったがＷＥＢサイトの音に関する規... -効果音の編集 -ボタン作成 -アテンションページの追加 ~ ~ ~ **2023.06.20 -ロゴをヘッダーに挿入 -タイトルビジュアル作成、挿入 -ＵＩ作成、設置 --[[タイトルビジュアル、UI素材(Google drive)>https://driv... -プロローグ画面のシステム変更 --あらすじとタイトル表示をページ分け ~ ~ ~ **2023.06.13 -ページごとにタイトルビジュアルのサンプルを設置 --タイトルビジュアルのアニメーション(ページめくり)を模索... -挿入絵サンプルをそれぞれの場所に設置 -字コンテ制作 -ロゴ制作 --記録するなどの意味を持つ【Record】＋繰り返しの意味を持... #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回以... //--それを続けることでそのものが成長する ~ ~ ~

終了行:
*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){基本的な考え方、枠組み、視点など}; -スクロールやクリックなどで読み手側が干渉できるなど、紙で... -その場にあった音やアニメーションを使い、臨場感を出す -実際に主人公目線になることで、生きているその時々が大切だ... -全体のデザインは日記帳やシールをモチーフに ~ ***成果物の仕様 //&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サイトでの規制が強まり、自動的に音を流せな... ~ ~ **調査 ***現状調査 //&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/We... --[[タイプライター>https://give-shot.jp/tokyocss/typing-t... --[[jQueryスクロール時に要素をフェードインさせる方法>http... --[[タイプライター長文>https://dubdesign.net/javascript/s... --[[罫線を引く方法>https://web-dev.tech/front-end/css/not... --[[audioタグで効果音の出るボタンを設置する方法>https://m... ~ ~ **プロジェクト管理 ***スケジュール __[[スケジュール>https://docs.google.com/spreadsheets/d/1... //&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://driv... -効果音が鳴らないボタンの原因追及→未だ不明 -文章の添削→途中 ~ ~ ~ **2023.06.27 -挿入絵作成 -効果音が鳴るボタンを設置 --自動で効果音を流したかったがＷＥＢサイトの音に関する規... -効果音の編集 -ボタン作成 -アテンションページの追加 ~ ~ ~ **2023.06.20 -ロゴをヘッダーに挿入 -タイトルビジュアル作成、挿入 -ＵＩ作成、設置 --[[タイトルビジュアル、UI素材(Google drive)>https://driv... -プロローグ画面のシステム変更 --あらすじとタイトル表示をページ分け ~ ~ ~ **2023.06.13 -ページごとにタイトルビジュアルのサンプルを設置 --タイトルビジュアルのアニメーション(ページめくり)を模索... -挿入絵サンプルをそれぞれの場所に設置 -字コンテ制作 -ロゴ制作 --記録するなどの意味を持つ【Record】＋繰り返しの意味を持... #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回以... //--それを続けることでそのものが成長する ~ ~ ~

ページ名: