• バックアップ一覧
• 差分 を表示
• 現在との差分 を表示
• ソース を表示
• 田代爽乃/卒業研究 へ行く。
  • 1 (2024-11-28 (木) 02:58:41)
  • 2 (2024-12-06 (金) 08:57:53)
  • 3 (2024-12-06 (金) 14:13:11)
  • 4 (2024-12-06 (金) 14:19:59)

---

あともーしょん

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

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

概要

これは何？

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

背景と目的

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

コンセプト

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

サイト名の由来

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

成果物の仕様

サイト

あともーしょん<https://sayatuu.github.io/atomotion/

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

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

GIF

サイトの背景

使用・制作ツール

• Adobe Illustrator 2024
• Adobe Photoshop 2024
• Procreate
• RODE Connect
• Audacity
  
  

プロジェクトの期間

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

調査

現状調査

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

先行事例

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

技法・技術情報

• ODE NT-USB+とRODE CONNECTの組み合わせがかなり良いという話
• 1冊ですべて身につくHTML＆CSSとWEBデザイン入門講座(参考書)
• 1冊ですべて身につくHTML＆CSSとWEBデザイン実践講座(参考書)
  
  
  
  

プロジェクト管理

スケジュール

スケジュール

ToDo

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

---

---

2024.11.29

room1(背景)の制作

2024.11.22

room1(背景)の制作

部屋のラフ

部屋のラフ

サイト編集

• 背景の調整
  
  
  
  

2024.11.15

room2(背景)の制作

サイト編集

• 背景の調整
  
  

ジャンル分けするとしたら...

• 遊び
  • 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

アンプのパワーを上げずに低音を強調してパワフルなサウンドを作る

参考

• ODE NT-USB+とRODE CONNECTの組み合わせがかなり良いという話
  
  

録音

• マイクについている機能、ローカットフィルター(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におすすめなコンデンサーマイクの種類

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

参考

• 【徹底比較】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