#author("2024-12-06T15:51:22+09:00;2024-12-06T14:19:59+09:00","default:member","member") #author("2024-12-20T14:36:11+09:00","default:member","member") *あともーしょん ASMRというコンテンツを気軽に体験できる音声を用いたWEBサイト #image(mainvisual.png) -''田代爽乃'' -'''Keywords：website , asmr , motion , sound ''' //-__[[相互評価シート>https://www.example.com]]__ ← ここからコメントをお願いします。 -[[あともーしょん>https://sayatuu.github.io/atomotion/]] -[[プレゼンページ>田代爽乃/プレゼンページ]] ~ ~ **概要 ***これは何？ ASMRというコンテンツを気軽に体験できる音声を用いたWEBサイト ~ ***背景と目的 //&color(red){プロジェクトの背景と目的}; 近年YouTubeなどの媒体を中心にASMRというコンテンツが流行している。比較的新しいコンテンツの為、化学的な研究が十分に進んでいないことや、一部の人々が性的な要素などを混合していることから誤解や偏見が生じている。 この状況を改善するために、初めてASMRというコンテンツに触れる人が気軽にASMRを体験する方法がないかと考えた。 ~ ***コンセプト 初めてASMRを体験する人をターゲットに、キャラクターを取り入れ、動かすことで親しみやすいサイトを作成する。 ~ ***サイト名の由来 あともーしょん ASMR(Autonomous Sensory Meridian Response)、atmosphere(雰囲気、ムード)とmotion(動作)を合わせて考えた ~ ***成果物の仕様 ***サイト [[あともーしょん>https://sayatuu.github.io/atomotion/]] -合計9つのGIFと音声を制作 --1.ボールで遊ぶ音(子供っぽい部屋) --2.スライムで遊ぶ音(実験室っぽい部屋) --3.ページをめくる音(図書館みたいな部屋) --4.コーヒーを淹れる音(おしゃれ部屋) --5.お化粧する音(かわいい部屋) --6.掃除する音(ノーマル部屋) --7.タイピング音(シックな部屋) --8.筆記音(受験生部屋) --9.パソコンのクリック音(ゲーム部屋) ~ ***サイトのワイヤーフレーム |#image(wireframe1.png) |#image(wireframe2.png)| ~ ***GIF |#image(ball.GIF)|#image(slime.GIF)|#image(book.GIF)| |#image(coffee.GIF)|#image(puff.GIF)|#image(souji.GIF)| |#image(typing.gif)|#image(writing.gif)|#image(click.gif)| ~ ***部屋の背景 |#image(room1.png)|#image(room2.png)| |#image(room3.png)|#image(room4.png)| |#image(room5.png)|#image(room.png)| |#image(room7.png)|#image(room8.png)| |#image(room9.png)| ~ ***使用・制作ツール //&color(red){使用するツール｜ハードウエア・ソフトウエア}; -Adobe Illustrator 2024 -Adobe Photoshop 2024 -Procreate -TASCAM DR-07X (単一指向性マイク搭載ステレオオーディオレコーダー) -Audacity ~ ***プロジェクトの期間 プロジェクトの期間｜2024.04.12 - 2024.12.20 ~ ~ **調査 ***現状調査 -主にYouTubeなどの動画配信プラットフォームに投稿・配信されている -比較的新しいコンテンツの為、誤解や偏見が存在している --ASMRの効果や意義について科学的な研究がまだ十分に進んでいない --一部の人々がASMRを性的なものと混同している ~ ***先行事例 -[[猪本結衣/情報デザイン研究II>https://design.kyusan-u.ac.jp/socialdesign/?%E7%8C%AA%E6%9C%AC%E7%B5%90%E8%A1%A3/%E6%83%85%E5%A0%B1%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E7%A0%94%E7%A9%B6II]] -[[猪本結衣/卒業研究I>https://design.kyusan-u.ac.jp/socialdesign/?%E7%8C%AA%E6%9C%AC%E7%B5%90%E8%A1%A3/%E5%8D%92%E6%A5%AD%E7%A0%94%E7%A9%B6I]] -[[猪本結衣/卒業研究II>https://design.kyusan-u.ac.jp/socialdesign/?%E7%8C%AA%E6%9C%AC%E7%B5%90%E8%A1%A3/%E5%8D%92%E6%A5%AD%E7%A0%94%E7%A9%B6II]]- -[[KETAKUMA Official | けたくま公式>https://ketakuma.com/]] -[[さっと ASMR>https://www.youtube.com/@satttto]] ~ ***技法・技術情報 -[[TASCAM DR-05X 使い方講座🎤ASMRの録音方法>https://youtu.be/lsAejRm66xE?si=Gl4O4Lp-qyO_IO28]] -1冊ですべて身につくHTML＆CSSとWEBデザイン入門講座(参考書) -1冊ですべて身につくHTML＆CSSとWEBデザイン実践講座(参考書) ~ ~ **プロジェクト管理 ***スケジュール [[スケジュール>https://docs.google.com/spreadsheets/d/1ONKcAbifdn405KvLJSFkIs8gaYrbWtY_3bjWKiWJiYg/edit?usp=sharing]] ~ ***ToDo -%%テーマ決定%% -%%調査%% -%%サイトのワイヤーフレーム%% -%%キャラクターのラフ%% -%%試作%% -GIF制作 -録音 -サイト制作 ~ ***まとめ 本研究では、ASMRコンテンツを気軽に体験できるWEBサイトを制作した。 このサイトではキャラクターや生活音を取り入れ、親しみやすさを重視した。 キャラクターはそれぞれに違いをつけるために部屋の雰囲気やシチュエーションを考えながらGIFや部屋の背景を制作した。 サイト全体を通してASMRとはどのようなものかについての説明が不足していると感じた。 今後、サイト利用者がASMRについて理解し、より安心して楽しめるように改善していきたい。 ~ ~ #hr CENTER:''進捗記録'' //&color(red){最新の情報を一番上に記載して下さい（古い記事が下へ沈む）。}; #hr ~ ~ **2025.01.08 ***ブラッシュアップ ~ ~ **2024.12.06 ***発表メモ -サイトの説明 -音が出るとわかる表示(波形みたいなのとか) -トップページ線の太さ -窓開閉時のずれ -窓開いた時の寂しさ -ドアの意味 ~ ~ **2024.11.29 ***部屋背景の制作 |#image(room7.png)|#image(room8.png)| |#image(room9.png)| ~ ~ **2024.11.22 ***部屋背景の制作 |#image(room1.png)|#image(room3.png)| |#image(room4.png)|#image(room5.png)| ~ ***部屋のラフ [[部屋のラフ>https://drive.google.com/drive/folders/1SzjQvl13NWhl5DQykAAvuP9kuf_SAo5P?usp=drive_link]] ~ ***サイト編集 -背景の調整 ~ ~ **2024.11.15 ***room2(背景)の制作 #image(room2.png) ~ ***サイト編集 -背景の調整 ~ ***ジャンル分けするとしたら... -遊び --1.ボールで遊ぶ音(子供っぽい部屋) --2.スライムで遊ぶ音(実験室っぽい部屋) --3.ページをめくる音(図書館みたいな部屋) -日常 --4.コーヒーを淹れる音(おしゃれ部屋) --5.お化粧する音(かわいい部屋) --6.掃除する音(ノーマル部屋) -作業 --7.タイピング音(シックな部屋) --8.筆記音(受験生部屋) --9.パソコンのクリック音(ゲーム部屋) ~ ~ ~ **2024.11.01 ***部屋のラフ [[部屋のラフ>https://drive.google.com/drive/folders/1SzjQvl13NWhl5DQykAAvuP9kuf_SAo5P?usp=drive_link]] ~ ~ **2024.10.25 ***中間発表メモ -GIFと音声を合わせた方がいいのでは(After Effectsなどで編集してMP4形式にしては) -音声をジャンルごとに分ける -ボタンを押したいと思うようなサイト -サイトの導入(説明)が足りない ~ ~ **2024.10.18 ***サイトの編集 ~ ***GIFラフの制作 |#image(typing.png)|#image(writing.png)|#image(souji.png)| |#image(click.png)|#image(book.png)|#image(coffee.png)| ~ ***ページの背景 #image(room.png) ~ ~ **2024.10.11 ***RODE Connect (録音アプリケーション) の使い方の確認 ***Noise Gate 基準に達している音のみを拾う(ノイズ除去) ~ ***Compressor 強弱の変化が激しい音を揃える ~ ***Aural Exciter 音色や音量を変えずに特定の音を強調する ~ ***Big Bottom アンプのパワーを上げずに低音を強調してパワフルなサウンドを作る ~ ***参考 -[[ODE NT-USB+とRODE CONNECTの組み合わせがかなり良いという話>https://youtu.be/ZlOJShusp8k?si=iX_yVJf5EG_jg7pc]] ~ ***録音 -マイクについている機能、ローカットフィルター(75)、Aural Exciterを使用して録音 ~ ***編集 -不要な部分をカット -全体的な音量を上げる -音に影響が出ない程度にノイズを除去 ~ ~ **2024.10.04 ***サイト編集 -画像リンク(窓)を配置 ~ ~ **2024.09.27 ***RODE VideoMic NTG 使い方の確認 ***ローカットフィルター(ハイパスフィルター) -マイク本体の一番上のボタン(75、150、0から選べる) --決めた値以下の音をカットする機能 ~ ***ハイブースト -マイク本体の一番上のボタンを長押し --特性の周波数以上の音を持ち上げる機能 ~ ***下のボタン機能(左から) - -20dB小さい音で録音する機能 -左と比べ右を20dB小さい音で録音する機能(音割れ防止) -大きい音が出たらランプが光り警告してくれる機能 ~ ***下のつまみ -マイクで録音する音の大きさを調節できる機能(1~15まで) ~ ***参考 -[[最新ショットガンマイクの進化がエグい！ RODE VideoMic NTG >https://youtu.be/5COLK6nipGM?si=lR_8r8EGYUxl_5QR]] -[[最新ショットガンマイクの進化がエグい！【後編】 RODE VideoMic NTG vs VideoMicro比較テスト>https://youtu.be/VWG2CbMvmbA?si=SOtA-vb8aiuQHTsR]] ~ ~ **2024.09.20 ***GIF制作 #image(coffee.GIF,50%) ~ ***背景画像の制作 ***サイト編集 -背景画像の追加 ~ ~ **夏季休暇 ***サイトに使用する画像の作成 -窓(開、閉) #image(mado.png,50%) ~ ***GIF制作 -ballGIFの修正 ~ ~ **2024.07.19 ***マイクについての調査 ***マイクの種類 -ダイナミックマイク -コンデンサーマイク 低域から広域までバランスの取れたサウンド、振動やノイズを拾いやすく単一指向性の場合が多い ASMRに使用されるのはほとんどがコンデンサーマイク ~ ***全方向性と単一指向性の違い マイクによって切り替えられるものがある -全方向性(無指向性) マイクの周辺で発生した音を全て収録 空間を伝えることに適し、雰囲気や臨場感を収録したい際におすすめ ※周辺部の環境音を全て拾うため不要な音が入りやすい -単一指向性 特定の角度から入った音を収録できる 全方向性マイク(無指向性マイク)に比べ不要な音が入りにくい ノイズを抑えた収録をしたい場合におすすめ ※マイクから収録できる範囲が限られている ~ ***ASMRにおすすめなコンデンサーマイクの種類 -ガンマイク -イヤホン型マイク -ハンディレコーダー -ダミーヘッドマイク ~ ***参考 -[[【徹底比較】ASMR用マイクおすすめ18選！(動画付き)with きつねASMR>https://plugplus.rittor-music.co.jp/learning/series/kitsune_asmr/mic18/]] -[[ASMR用マイクのおすすめ15選。人気メーカーの製品もラインナップ>https://sakidori.co/article/1728672]] ~ ~ **2024.07.12 ***サイトの編集 [[あともーしょん>https://sayatuu.github.io/atomotion/]] ~ ***マイクでの録音 -ボールで遊ぶ音 -スライムで遊ぶ音 ~ ***GIF制作 #image(ball.gif,50%) #image(slime.GIF,50%) ~ ~ **2024.07.05 ***GIF内容決定 --コーヒーを淹れる音 --筆記音 --タイピング音 --パソコンのクリック音 --スライムで遊ぶ音 --ボールで遊ぶ音 --お化粧する音 --電気のスイッチの音 --ページをめくる音 ~ ***GIFの案だし -アパートの住人の生活音 --料理を作る音 --コーヒーを淹れる音 --筆記音 --タイピング音 --パソコンのクリック音 --スライムで遊ぶ音 --ボールで遊ぶ音 --おしゃれする音 --お化粧する音 --電気のスイッチの音 --窓拭きの音 --炭酸ジュースを開ける音 --ページをめくる音 ~ ***ワイヤーフレームの修正 #image(wireframe1.png,20%) #image(wireframe2.png,20%) -メニューを無くし、メインビジュアルにサイトについての説明を加えることにした ~ ***サイトのプロトタイプ制作 [[あともーしょん>https://sayatuu.github.io/ato_motion/]] ~ ~ **2024.06.21 ***相談メモ -使用する音の案 --バイノーラル録音ができるか > アパートの中で聞こえても違和感のない音 >...という限定していく分け方をする -とりあえずマイクで音声を録音してみる -プロトタイプまで制作(サイト全体の大きな構成、 押したら録音した音がなる) -ジャンル分けしなくてもいいのでは? ~ ~ **2024.06.14 ***サイトのアパート部分ラフ・配色 #image(raf.JPG,50%) ~ ~ **2024.06.07 ***録音する音声の案出し -バイノーラル録音ができる音声 -苦手な人の多い囁きや、咀嚼音は加えない ~ ~ **2024.05.31 ***中間発表メモ -録音する音声の案出し・ジャンル分け -バイノーラルとASMRどちらも使ったら分かりにくい -GIFと音声を流し続けるのかを決める ~ ~ **2024.05.24 ***サイトのワイヤーフレーム [[ワイヤーフレーム>https://xd.adobe.com/view/3245cf49-efe7-45f0-b9b8-8e062c24f241-6716/]] ~ ***試作 https://sayatuu.github.io/sotuten_shisaku1/ ~ ~ **2024.05.17 ***サイトに使用するキャラクターのラフ #image(character1.JPG,50%) -誰にでも親しみやすいキャラクター(シンプルに) -ASMRに関連する物、モチーフを取り入れてみる ~ ***サイトに使用するGIFの試作 #image(slime.GIF,50%) -どのくらいの長さのGIFにするか考える -何枚のイラストが必要か ~ ~ **2024.05.10 ***今週のToDo -サイトの全体的なイメージ案(ラフ)の制作 -試作制作 -JavaScriptの勉強 ~ ***ASMRコンテンツの課題 -比較的新しいコンテンツの為、誤解や偏見が存在している --ASMRの効果や意義について科学的な研究がまだ十分に進んでいない --一部の人々がASMRを性的なものと混同している ~ ***先行事例2 -[[OpenSquareJP>https://design.kyusan-u.ac.jp/OpenSquareJP/?WebDesign]] -[[猪本結衣/情報デザイン研究II>https://design.kyusan-u.ac.jp/socialdesign/?%E7%8C%AA%E6%9C%AC%E7%B5%90%E8%A1%A3/%E6%83%85%E5%A0%B1%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E7%A0%94%E7%A9%B6II]] -[[猪本結衣/卒業研究I>https://design.kyusan-u.ac.jp/socialdesign/?%E7%8C%AA%E6%9C%AC%E7%B5%90%E8%A1%A3/%E5%8D%92%E6%A5%AD%E7%A0%94%E7%A9%B6I]] -[[猪本結衣/卒業研究II>https://design.kyusan-u.ac.jp/socialdesign/?%E7%8C%AA%E6%9C%AC%E7%B5%90%E8%A1%A3/%E5%8D%92%E6%A5%AD%E7%A0%94%E7%A9%B6II]]- -[[KETAKUMA Official | けたくま公式>https://ketakuma.com/]] -[[さっと ASMR>https://www.youtube.com/@satttto]] -[[空想金融教室>https://www.mizuho-fg.co.jp/csr/education/kyoshitsu/index.html]] -[[BRUTUS>https://brutus.jp/special/2023/hotel-indigo/]] ~ ~ **2024.04.26 ***サイト名の決定 あともーしょん ASMR(Autonomous Sensory Meridian Response)、atmosphere(雰囲気、ムード)とmotion(動作)を合わせて考えた ~ ***テーマの決定 ASMRというコンテンツを気軽に体験できる音声を用いたWEBサイト ~ ***試作 試作：[[画像を押すと音の鳴るサイト>https://sayatuu.github.io/sotuten_shisaku/]] 使用した音源：[[効果音ラボ>https://soundeffect-lab.info/]] ~ ~ **2024.04.19 ***テーマ候補1 -WEBサイトにバイノーラル音声を使用することは可能か？ →使用できる形式だと可能 -WEBサイトに音声を載せることで音質は下がるのか？ →音質は変わらない -1つ1つ出来るかの実験が必要 -レコーダー一体型マイクで録音するかコンデンサーマイクを使用するか -[[Can I use>https://caniuse.com/]] ~ ***テーマ候補2 -キュートアグレッションを起こせるような可愛さの研究が必要 -WEBサイト(押したら変化する) ~ ~ **2024.04.12 ***テーマ候補1 -バイノーラル音声を用いたWebサイトの制作 ***先行事例 -[[ASMRの撮り方を紹介！ASMRの録音・配信・撮影方法やおすすめ機材を紹介>https://do-gen.jp/asmr-record/]] -[[OpenSquareJP>https://design.kyusan-u.ac.jp/OpenSquareJP/?WebDesign]] -[[KETAKUMA Official | けたくま公式>https://ketakuma.com/]] -[[ASMR motion>https://www.youtube.com/@ASMR_motion]] -[[さっと ASMR>https://www.youtube.com/@satttto]] -[[【安い機材はどれ？】ASMR用マイクのおすすめ人気ランキング10選【バイノーラルマイクとは】>https://ranking.goo.ne.jp/select/36773]] -[[深江沙羅/卒業研究I>https://design.kyusan-u.ac.jp/socialdesign/?cmd=read&page=%E6%B7%B1%E6%B1%9F%E6%B2%99%E7%BE%85%2F%E5%8D%92%E6%A5%AD%E7%A0%94%E7%A9%B6I&word=%E6%B7%B1%E6%B1%9F%E6%B2%99%E7%BE%85]] -[[猪本結衣/卒業研究I>https://design.kyusan-u.ac.jp/socialdesign/?%E7%8C%AA%E6%9C%AC%E7%B5%90%E8%A1%A3/%E5%8D%92%E6%A5%AD%E7%A0%94%E7%A9%B6II]] ~ ***テーマ候補2 -キュートアグレッションをイラストで表現して、そのぬいぐるみやスクイーズを制作する ***先行事例 -[[可愛いと潰して破壊したくなる！？キュートアグレッションとは一体何なのか>https://pursue.fun/psychology/cute-aggression/]] -[[原田朋奈/情報デザイン研究II>原田朋奈/情報デザイン研究II]] -[[すもも🍑 スクイーズ🍑 人肌のゲルでぷにぷにもちもち💛 作り方🍑 How to make squeeze💛 DIY>https://youtu.be/va_eiHTe-e4?si=pTZ-48kvnWkczw0m]] ~ ***テーマ候補3 -色んな猫の体の匂いをまとめたサイト ***先行事例 -[[猫からいい匂いがするのはなぜ？理由や匂いの違いも解説>https://www.aeonpet.com/topics/pet-column_106.html]] --猫を飼っている人にインタビューをする --猫カフェの店員さんに聞いてみる --牛の肉の部位みたいなイラストの匂いver ~ ~