LogoMark.png

田代爽乃/プレゼンページ の変更点


#author("2024-12-06T14:39:20+09:00;2024-12-06T14:08:48+09:00","default:member","member")
#author("2024-12-06T14:41:29+09:00;2024-12-06T14:08:48+09:00","default:member","member")
*あともーしょん
ASMRというコンテンツを気軽に体験できる音声を用いたWEBサイト 
#image(mainvisual.png)

-''田代爽乃''
-'''Keywords:website , asmr , motion , sound '''
-[[あともーしょん>https://sayatuu.github.io/atomotion/]]
~
~

**概要
***これは何?
ASMRというコンテンツを気軽に体験できる音声を用いたWEBサイト
~

***背景と目的
//&color(red){プロジェクトの背景と目的};
近年YouTubeなどの媒体を中心にASMRというコンテンツが流行している。比較的新しいコンテンツの為、化学的な研究が十分に進んでいないことや、一部の人々が性的な要素などを混合していることから誤解や偏見が生じている。
この状況を改善するために、初めてASMRというコンテンツに触れる人が気軽にASMRを体験する方法がないかと考えた。
~

***コンセプト
初めてASMRを体験する人をターゲットに、キャラクターを取り入れ、動かすことで親しみやすいサイトを作成する。
初めてASMRを体験する人をターゲットに、キャラクターを取り入れ、動かすことで親しみやすいサイトを制作する。
~

***サイト名の由来
あともーしょん
ASMR(Autonomous Sensory Meridian Response)、atmosphere(雰囲気、ムード)とmotion(動作)を合わせて考えた
~
~
**調査
***現状調査
-主に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://sayatuu.github.io/atomotion/]]
~
-合計9つのGIFと音声を制作
--1.ボールで遊ぶ音(子供っぽい部屋)
--2.スライムで遊ぶ音(実験室っぽい部屋)
--3.ページをめくる音(図書館みたいな部屋)
--4.コーヒーを淹れる音(おしゃれ部屋)
--5.お化粧する音(かわいい部屋)
--6.掃除する音(ノーマル部屋)
--7.タイピング音(シックな部屋)
--8.筆記音(受験生部屋)
--9.パソコンのクリック音(ゲーム部屋)
~

***使用・制作ツール
//&color(red){使用するツール|ハードウエア・ソフトウエア};
-Adobe Illustrator 2024
-Adobe Photoshop 2024
-Procreate
-TASCAM DR-07X (単一指向性マイク搭載ステレオオーディオレコーダー)
-Audacity(音声編集ソフト)
~

***サイトのワイヤーフレーム
|#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)|
~

***サイトの背景
[[サイト背景のラフ>https://drive.google.com/drive/folders/1SzjQvl13NWhl5DQykAAvuP9kuf_SAo5P?usp=drive_link]]
~
|#image(room1.png)|#image(room2.png)|
|#image(room3.png)|#image(room4.png)|
|#image(room5.png)|#image(room6.png)|
|#image(room7.png)|#image(room8.png)|
|#image(room9.png)|
~
~

**まとめ
本研究では、ASMRコンテンツを気軽に体験できるWEBサイトを制作した。
このサイトではキャラクターや生活音を取り入れ、親しみやすさを重視した。
キャラクターはそれぞれに違いをつけるために部屋の雰囲気やシチュエーションを考えながらGIFや部屋の背景を制作した。
サイト全体を通してASMRとはどのようなものかについての説明が不足していると感じた。
今後、サイト利用者がASMRについて理解し、より安心して楽しめるように改善していきたい。
~
~
~
~