あともーしょん
ASMRというコンテンツを気軽に体験できる音声を用いたWEBサイト
- 田代爽乃
- Keywords:website , asmr , motion , sound
- あともーしょん
概要
これは何?
ASMRというコンテンツを気軽に体験できる音声を用いたWEBサイト
背景と目的
近年YouTubeなどの媒体を中心にASMRというコンテンツが流行している。比較的新しいコンテンツの為、化学的な研究が十分に進んでいないことや、一部の人々が性的な要素などを混合していることから誤解や偏見が生じている。
この状況を改善するために、初めてASMRというコンテンツに触れる人が気軽にASMRを体験する方法がないかと考えた。
コンセプト
初めてASMRを体験する人をターゲットに、キャラクターを取り入れ、動かすことで親しみやすいサイトを作成する。
サイト名の由来
あともーしょん
ASMR(Autonomous Sensory Meridian Response)、atmosphere(雰囲気、ムード)とmotion(動作)を合わせて考えた
成果物の仕様
サイト
- 合計9つのGIFと音声を制作
- 1.ボールで遊ぶ音(子供っぽい部屋)
- 2.スライムで遊ぶ音(実験室っぽい部屋)
- 3.ページをめくる音(図書館みたいな部屋)
- 4.コーヒーを淹れる音(おしゃれ部屋)
- 5.お化粧する音(かわいい部屋)
- 6.掃除する音(ノーマル部屋)
- 7.タイピング音(シックな部屋)
- 8.筆記音(受験生部屋)
- 9.パソコンのクリック音(ゲーム部屋)
サイトのワイヤーフレーム
GIF
部屋の背景
使用・制作ツール
- Adobe Illustrator 2024
- Adobe Photoshop 2024
- Procreate
- TASCAM DR-07X (単一指向性マイク搭載ステレオオーディオレコーダー)
- Audacity
プロジェクトの期間
プロジェクトの期間|2024.04.12 - 2024.12.20
調査
現状調査
- 主にYouTubeなどの動画配信プラットフォームに投稿・配信されている
- 比較的新しいコンテンツの為、誤解や偏見が存在している
- ASMRの効果や意義について科学的な研究がまだ十分に進んでいない
- 一部の人々がASMRを性的なものと混同している
先行事例
技法・技術情報
- TASCAM DR-05X 使い方講座🎤ASMRの録音方法
- 1冊ですべて身につくHTML&CSSとWEBデザイン入門講座(参考書)
- 1冊ですべて身につくHTML&CSSとWEBデザイン実践講座(参考書)
プロジェクト管理
スケジュール
ToDo
テーマ決定調査サイトのワイヤーフレームキャラクターのラフ試作GIF制作録音サイト制作
まとめ
本研究は初めてASMRを体験する人をターゲットに、親しみやすく、視覚的、聴覚的に楽しめるサイトを制作することを目指して進めた。
キャラクターや実際に録音した生活音を使用することでサイトの雰囲気を柔らかくし、安心感や親しみを持たせることができた。
録音の際には、マイクについての知識がなかったため、調査を通してマイク1つ1つに特徴があり録音したい音に合わせて使い分けることが大切だと感じた。
本Webサイトを通して、ASMRに初めて触れる人々が安心して体験できる「入り口」を提供することができた。ASMRの多様な側面を尊重し、リラックスや癒しを目的としたASMRの魅力を伝えることができたと考える。
2025.01.08
ブラッシュアップ
部屋の背景の装飾追加
ロゴ制作
開いた窓に部屋ごとの色付け
サイト編集
- 線の太さの統一
- デスクトップパソコンとノートパソコンのレスポンシブ
- 新たに制作した背景画像の配置
- トップページの修正
- フッターの修正
- ローディング画面の追加
2024.12.06
発表メモ
- サイトの説明
- 音が出るとわかる表示(波形みたいなのとか)
- トップページ線の太さ
- 窓開閉時のずれ
- 窓開いた時の寂しさ
- ドアの意味
2024.11.29
部屋背景の制作
2024.11.22
部屋背景の制作
部屋のラフ
サイト編集
- 背景の調整
2024.11.15
room2(背景)の制作
サイト編集
- 背景の調整
2024.11.8
ジャンル分けするとしたら...
- 遊び
- 1.ボールで遊ぶ音(子供っぽい部屋)
- 2.スライムで遊ぶ音(実験室っぽい部屋)
- 3.ページをめくる音(図書館みたいな部屋)
- 日常
- 4.コーヒーを淹れる音(おしゃれ部屋)
- 5.お化粧する音(かわいい部屋)
- 6.掃除する音(ノーマル部屋)
- 作業
- 7.タイピング音(シックな部屋)
- 8.筆記音(受験生部屋)
- 9.パソコンのクリック音(ゲーム部屋)
2024.11.01
部屋のラフ
2024.10.25
中間発表メモ
- GIFと音声を合わせた方がいいのでは(After Effectsなどで編集してMP4形式にしては)
- 音声をジャンルごとに分ける
- ボタンを押したいと思うようなサイト
- サイトの導入(説明)が足りない
2024.10.18
サイトの編集
GIFラフの制作
ページの背景
2024.10.11
RODE Connect (録音アプリケーション) の使い方の確認
Noise Gate
基準に達している音のみを拾う(ノイズ除去)
Compressor
強弱の変化が激しい音を揃える
Aural Exciter
音色や音量を変えずに特定の音を強調する
Big Bottom
アンプのパワーを上げずに低音を強調してパワフルなサウンドを作る
参考
録音
- マイクについている機能、ローカットフィルター(75)、Aural Exciterを使用して録音
編集
- 不要な部分をカット
- 全体的な音量を上げる
- 音に影響が出ない程度にノイズを除去
2024.10.04
サイト編集
- 画像リンク(窓)を配置
2024.09.27
RODE VideoMic NTG 使い方の確認
ローカットフィルター(ハイパスフィルター)
- マイク本体の一番上のボタン(75、150、0から選べる)
- 決めた値以下の音をカットする機能
- 決めた値以下の音をカットする機能
ハイブースト
- マイク本体の一番上のボタンを長押し
- 特性の周波数以上の音を持ち上げる機能
- 特性の周波数以上の音を持ち上げる機能
下のボタン機能(左から)
- -20dB小さい音で録音する機能
- 左と比べ右を20dB小さい音で録音する機能(音割れ防止)
- 大きい音が出たらランプが光り警告してくれる機能
下のつまみ
- マイクで録音する音の大きさを調節できる機能(1~15まで)
参考
- 最新ショットガンマイクの進化がエグい! RODE VideoMic NTG
- 最新ショットガンマイクの進化がエグい!【後編】 RODE VideoMic NTG vs VideoMicro比較テスト
2024.09.20
GIF制作
背景画像の制作
サイト編集
- 背景画像の追加
夏季休暇
サイトに使用する画像の作成
- 窓(開、閉)
GIF制作
- ballGIFの修正
2024.07.19
マイクについての調査
マイクの種類
- ダイナミックマイク
- コンデンサーマイク
低域から広域までバランスの取れたサウンド、振動やノイズを拾いやすく単一指向性の場合が多い
ASMRに使用されるのはほとんどがコンデンサーマイク
全方向性と単一指向性の違い
マイクによって切り替えられるものがある
- 全方向性(無指向性)
マイクの周辺で発生した音を全て収録
空間を伝えることに適し、雰囲気や臨場感を収録したい際におすすめ
※周辺部の環境音を全て拾うため不要な音が入りやすい - 単一指向性
特定の角度から入った音を収録できる
全方向性マイク(無指向性マイク)に比べ不要な音が入りにくい
ノイズを抑えた収録をしたい場合におすすめ
※マイクから収録できる範囲が限られている
ASMRにおすすめなコンデンサーマイクの種類
- ガンマイク
- イヤホン型マイク
- ハンディレコーダー
- ダミーヘッドマイク
参考
2024.07.12
サイトの編集
マイクでの録音
- ボールで遊ぶ音
- スライムで遊ぶ音
GIF制作
2024.07.05
GIF内容決定
- コーヒーを淹れる音
- 筆記音
- タイピング音
- パソコンのクリック音
- スライムで遊ぶ音
- ボールで遊ぶ音
- お化粧する音
- 電気のスイッチの音
- ページをめくる音
GIFの案だし
- アパートの住人の生活音
- 料理を作る音
- コーヒーを淹れる音
- 筆記音
- タイピング音
- パソコンのクリック音
- スライムで遊ぶ音
- ボールで遊ぶ音
- おしゃれする音
- お化粧する音
- 電気のスイッチの音
- 窓拭きの音
- 炭酸ジュースを開ける音
- ページをめくる音
サイトのプロトタイプ制作
2024.06.28
ワイヤーフレームの修正
- メニューを無くし、メインビジュアルにサイトについての説明を加えることにした
2024.06.21
相談メモ
- 使用する音の案
- バイノーラル録音ができるか > アパートの中で聞こえても違和感のない音 >...という限定していく分け方をする
- とりあえずマイクで音声を録音してみる
- プロトタイプまで制作(サイト全体の大きな構成、 押したら録音した音がなる)
- ジャンル分けしなくてもいいのでは?
2024.06.14
サイトのアパート部分ラフ・配色
2024.06.07
録音する音声の案出し
- バイノーラル録音ができる音声
- 苦手な人の多い囁きや、咀嚼音は加えない
2024.05.31
中間発表メモ
- 録音する音声の案出し・ジャンル分け
- バイノーラルとASMRどちらも使ったら分かりにくい
- GIFと音声を流し続けるのかを決める
2024.05.24
サイトのワイヤーフレーム
試作
https://sayatuu.github.io/sotuten_shisaku1/
2024.05.17
サイトに使用するキャラクターのラフ
- 誰にでも親しみやすいキャラクター(シンプルに)
- ASMRに関連する物、モチーフを取り入れてみる
サイトに使用するGIFの試作
- どのくらいの長さのGIFにするか考える
- 何枚のイラストが必要か
2024.05.10
今週のToDo
- サイトの全体的なイメージ案(ラフ)の制作
- 試作制作
- JavaScriptの勉強
ASMRコンテンツの課題
- 比較的新しいコンテンツの為、誤解や偏見が存在している
- ASMRの効果や意義について科学的な研究がまだ十分に進んでいない
- 一部の人々がASMRを性的なものと混同している
先行事例2
- OpenSquareJP
- 猪本結衣/情報デザイン研究II
- 猪本結衣/卒業研究I
- 猪本結衣/卒業研究II-
- KETAKUMA Official | けたくま公式
- さっと ASMR
- 空想金融教室
- BRUTUS
2024.04.26
サイト名の決定
あともーしょん
ASMR(Autonomous Sensory Meridian Response)、atmosphere(雰囲気、ムード)とmotion(動作)を合わせて考えた
テーマの決定
ASMRというコンテンツを気軽に体験できる音声を用いたWEBサイト
試作
試作:画像を押すと音の鳴るサイト
使用した音源:効果音ラボ
2024.04.19
テーマ候補1
- WEBサイトにバイノーラル音声を使用することは可能か?
→使用できる形式だと可能 - WEBサイトに音声を載せることで音質は下がるのか?
→音質は変わらない - 1つ1つ出来るかの実験が必要
- レコーダー一体型マイクで録音するかコンデンサーマイクを使用するか
- Can I use
テーマ候補2
- キュートアグレッションを起こせるような可愛さの研究が必要
- WEBサイト(押したら変化する)
2024.04.12
テーマ候補1
- バイノーラル音声を用いたWebサイトの制作
先行事例
- ASMRの撮り方を紹介!ASMRの録音・配信・撮影方法やおすすめ機材を紹介
- OpenSquareJP
- KETAKUMA Official | けたくま公式
- ASMR motion
- さっと ASMR
- 【安い機材はどれ?】ASMR用マイクのおすすめ人気ランキング10選【バイノーラルマイクとは】
- 深江沙羅/卒業研究I
- 猪本結衣/卒業研究I
テーマ候補2
- キュートアグレッションをイラストで表現して、そのぬいぐるみやスクイーズを制作する
先行事例
- 可愛いと潰して破壊したくなる!?キュートアグレッションとは一体何なのか
- 原田朋奈/情報デザイン研究II
- すもも🍑 スクイーズ🍑 人肌のゲルでぷにぷにもちもち💛 作り方🍑 How to make squeeze💛 DIY
テーマ候補3
- 色んな猫の体の匂いをまとめたサイト
先行事例
- 猫からいい匂いがするのはなぜ?理由や匂いの違いも解説
- 猫を飼っている人にインタビューをする
- 猫カフェの店員さんに聞いてみる
- 牛の肉の部位みたいなイラストの匂いver