田代爽乃/卒業研究

あともーしょん

ASMRというコンテンツを気軽に体験できる音声を用いたWEBサイト

• 田代爽乃
• Keywords：website , asmr , motion , sound
• あともーしょん
  
  
  
  

概要

これは何？

ASMRというコンテンツを気軽に体験できる音声を用いたWEBサイト

背景と目的

近年YouTubeなどの媒体を中心にASMRというコンテンツが流行している。比較的新しいコンテンツの為、化学的な研究が十分に進んでいないことや、一部の人々が性的な要素などを混合していることから誤解や偏見が生じている。
この状況を改善するために、初めてASMRというコンテンツに触れる人が気軽にASMRを体験する方法がないかと考えた。

コンセプト

初めてASMRを体験する人をターゲットに、キャラクターを取り入れ、動かすことで親しみやすく、視覚的にも聴覚的にも楽しめるサイトを作成する。

サイト名の由来

あともーしょん
ASMR(Autonomous Sensory Meridian Response)、atmosphere(雰囲気、ムード)とmotion(動作)を合わせて考えた

成果物の仕様

サイト

あともーしょん

• 合計9つのGIFと音声を制作
  • コーヒーを淹れる音
  • 筆記音
  • タイピング音
  • パソコンのクリック音
  • スライムで遊ぶ音
  • ボールで遊ぶ音
  • お化粧する音
  • 電気のスイッチの音
  • ページをめくる音
    
    

サイトのワイヤーフレーム

GIF

制作ツール

• Adobe Illustrator 2024
• Adobe Photoshop 2024
• Procreate
  
  

プロジェクトの期間

プロジェクトの期間｜2024.04.12 - 2024.12.20

調査

現状調査

• 主にYouTubeなどの動画配信プラットフォームに投稿・配信されている
• 比較的新しいコンテンツの為、誤解や偏見が存在している
  • ASMRの効果や意義について科学的な研究がまだ十分に進んでいない
  • 一部の人々がASMRを性的なものと混同している
    
    

先行事例

• 猪本結衣/情報デザイン研究II
• 猪本結衣/卒業研究I
• 猪本結衣/卒業研究II-
• KETAKUMA Official | けたくま公式
• さっと ASMR
  
  

技法・技術情報

• OpenSquareJP
• ASMRの撮り方を紹介！ASMRの録音・配信・撮影方法やおすすめ機材を紹介
• 【徹底比較】ASMR用マイクおすすめ18選！(動画付き)with きつねASMR
• ASMR用マイクのおすすめ15選。人気メーカーの製品もラインナップ
• 1冊ですべて身につくHTML＆CSSとWEBデザイン入門講座(参考書)
• 1冊ですべて身につくHTML＆CSSとWEBデザイン実践講座(参考書)
  
  
  
  

プロジェクト管理

スケジュール

スケジュール

ToDo

• テーマ決定
• 調査
• サイトのワイヤーフレーム
• キャラクターのラフ
• 試作
• GIF制作
• 録音
  
  

まとめ

中間発表から、どのような音を使ってGIFを制作するのかを考えるのにかなり時間を使った。最終的にサイト自体をアパートのようにしてアパートの住人の生活音という体で制作するGIFと音声を決定することができた。
マイクで音を録音してみて、音が小さいのと、イヤホンで聴いた時に迫力がないと感じたので、マイクを変更してみたり、音の出やすい工夫をして録音していきたい。

2024.10.11

RODE VideoMic NTG 使い方の確認

ローカットフィルター(ハイパスフィルター)

• マイク本体の一番上のボタン(75、150、0から選べる)
  • 決めた値以下の音をカットする機能
    
    

ハイブースト

• マイク本体の一番上のボタンを長押し
  • 特性の周波数以上の音を持ち上げる機能
    
    

下のボタン機能(左から)

• -20dB小さい音で録音する機能
• 左と比べ右を20dB小さい音で録音する機能(音割れ防止)
• 大きい音が出たらランプが光り警告してくれる機能
  
  

下のつまみ

• マイクで録音する音の大きさを調節できる機能(1~15まで)
  
  

参考

• 最新ショットガンマイクの進化がエグい！ RODE VideoMic NTG
• 最新ショットガンマイクの進化がエグい！【後編】 RODE VideoMic NTG vs VideoMicro比較テスト
  
  
  
  

2024.10.04

GIF制作

2024.09.27

サイト編集

• 画像の差し替え
  
  
  
  

2024.09.20

サイト編集

• ページの追加
  
  
  
  

夏季休暇

サイトに使用する画像の作成

• 窓(開、閉)
  
  
  

GIF制作

• ballGIFの修正
  
  
  
  

2024.07.19

マイクについての調査

マイクの種類

• ダイナミックマイク
• コンデンサーマイク
  低域から広域までバランスの取れたサウンド、振動やノイズを拾いやすく単一指向性の場合が多い
  ASMRに使用されるのはほとんどがコンデンサーマイク
  
  

全方向性と単一指向性の違い

マイクによって切り替えられるものがある

• 全方向性(無指向性)
  マイクの周辺で発生した音を全て収録
  空間を伝えることに適し、雰囲気や臨場感を収録したい際におすすめ
  ※周辺部の環境音を全て拾うため不要な音が入りやすい
• 単一指向性
  特定の角度から入った音を収録できる
  全方向性マイク(無指向性マイク)に比べ不要な音が入りにくい
  ノイズを抑えた収録をしたい場合におすすめ
  ※マイクから収録できる範囲が限られている
  
  

ASMRにおすすめなコンデンサーマイクの種類

• ガンマイク
• イヤホン型マイク
• ハンディレコーダー
• ダミーヘッドマイク
  
  

参考

• 【徹底比較】ASMR用マイクおすすめ18選！(動画付き)with きつねASMR
• ASMR用マイクのおすすめ15選。人気メーカーの製品もラインナップ
  
  
  
  

2024.07.12

サイトの編集

あともーしょん

マイクでの録音

• ボールで遊ぶ音
• スライムで遊ぶ音
  
  

GIF制作

発表メモ

• スケジュールの再考(もっと具体的に)
• マイク、編集ツールについての知識(どんなマイクか説明できるように)
• 動きを止めるのは難しいから、押したら別のサイトに飛んで流れるようにしてみては
• 研究の名前の由来
• イコライザーの知識を
• 心地いい音なのかもう一度考えてみる(電気のクリック音など)その定義
• キャラクターについての説明
  
  

2024.07.05

GIF内容決定

• コーヒーを淹れる音
• 筆記音
• タイピング音
• パソコンのクリック音
• スライムで遊ぶ音
• ボールで遊ぶ音
• お化粧する音
• 電気のスイッチの音
• ページをめくる音
  
  

GIFの案だし

• アパートの住人の生活音
  • 料理を作る音
  • コーヒーを淹れる音
  • 筆記音
  • タイピング音
  • パソコンのクリック音
  • スライムで遊ぶ音
  • ボールで遊ぶ音
  • おしゃれする音
  • お化粧する音
  • 電気のスイッチの音
  • 窓拭きの音
  • 炭酸ジュースを開ける音
  • ページをめくる音
    
    

ワイヤーフレームの修正

• メニューを無くし、メインビジュアルにサイトについての説明を加えることにした
  
  

サイトのプロトタイプ制作

あともーしょん

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