杉野市之助/卒業研究

FUKUOKA shrine：photo with sound

福岡の神社を音写真で紹介するWebサイト

• 杉野 市之助
  https://giraffe529.github.io/test/　（試作）

概要

これは何？

福岡の神社を音写真で紹介するWebサイト

背景と目的

写真を撮ることを趣味としている人々の中でも、被写体として日本人に馴染み深いものと言ったらまず神社が思い浮かぶ人も多いだろう。神社という場所には、日本固有の宗教である神道の神々だけでなく、先人や天皇の祖神、怨霊といった非常に多彩な神々が祀られている。また、地域によって様々な特徴が見られ、その周辺の自然環境なども様々であり、神社を訪れた人がリラックス効果を感じられるという意見も多く聞く。そこで、神社の美しい写真とその場の環境音を組み合わせることにより、目と耳でその神社について知ってもらい、現地に足を運ぶきっかけになるような媒体を作成したいと考えた。

コンセプト

写真と音を通じて、神社ごとの違いや魅力を表現する。
あえて動画ではなく、情報量を減らすことで見る人の想像力に訴えかけるようなものにしたい。

成果物の仕様

Webサイト

制作ツール

MacBook Air
Visual Studio Code
Nikon D5100

プロジェクトの期間

まとめ

調査

現状調査

• 音写真についてと、その実践例
  https://note.com/ysuie_o/n/ndc02a4d16a16
• 音風景(サウンドスケープ)について
  https://ja.m.wikipedia.org/wiki
• 環境音が与える効果
  https://officework-bgm.com/article/office-music-shizen2/
• 写真に適した環境音を生成するAIサービス
  https://www.imaginarysoundscape.net
  https://qosmo.jp/news/imaginary-soundscape-v2

先行事例

• 音が効果的に用いられているサイト集
  https://note.com/mefilas/n/n1fe9d4e14774
• 先輩の類似研究
  • Mutedscapes ビルの窓ガラスに映る時間軸と空間を記録するタイムラプスと写真による研究
    https://adamay-design.github.io/mutedscapes/
  • STONE 石の魅力についてのWebサイト
    https://xd.adobe.com/view/34196d25-325a-458a-96bf-1e236923c914-614a/?fullscreen&hints=off
    
    

プロジェクト管理

スケジュール

ガントチャート

ToDo

• 撮影場所の選定 約10箇所
• 写真の収集
  • 10箇所で5枚ずつ 約60枚
• 試作用の音の収集
• サイトのプロトタイプ制作
• サイトマップの作成
• 使用予定の写真をまとめる

今後について

• 素材の収集
• Webサイトのレイアウト制作
• サイトの効果の確認方法を考える
• スマホへの対応

2026.05.09

調査

1/fゆらぎについて
https://club.informatix.co.jp/?p=1994

技術的試作

• 音写真の掲載例
  ※音が出ます
  https://giraffe529.github.io/test/
• MAPの掲載例（他講義で制作したもの）
  https://giraffe529.github.io/photoGallery/
  
  

サイトマップ

メモ

神社の選定理由と福岡の神社についての記載を考える

2026.05.02

素材収集

写真と音のWeb用素材を各地から収集

• 撮影場所
  • 愛宕神社
  • 高祖神社
  • 志賀海神社
  • 宗像大社
  • 紅葉八幡宮
  • 宮地嶽神社
    ※残り４ヶ所は選定中
    
    

素材

https://drive.google.com/drive/folders/1uKnUIysOl6SPDNup1g5nW0Wq5iYK_hY9?usp=share_link

試作

• 紅葉八幡宮
• 高祖神社
  
  

Webの内容

• メインページ
  • 各ページにリンクさせ、このページの目的と背景を記載
    
    
• 音写真
  • 各場所ごとの厳選写真を配置
  • 写真にマウスを持って行った時に音が再生
    
    
• フォトギャラリー
  • 各場所ごとの全写真を配置
    
    
• フォトスポットMAP
  • それぞれの写真にリンクさせた県内マップ
  • ピン📍をクリックするとその場所の音写真ページにジャンプするように設定する
    
    

メモ

• オーディオスペクトラムの使用
  • 画像にマウスを持って行った時に音が再生されて、それに合わせたオーディオスペクトラムを画面上に表示させる。
    
    
    
    

2026.04.25

テーマ（仮）

• FUKUOKA shrine：photo with sound
  • 福岡市内の神社を音写真で紹介するWebサイト
    
    

調査

• 音写真についてと、その実践例
  https://note.com/ysuie_o/n/ndc02a4d16a16
• 音風景(サウンドスケープ)について
  https://ja.m.wikipedia.org/wiki
• 環境音が与える効果
  https://officework-bgm.com/article/office-music-shizen2/
• 写真に適した環境音を生成するAIサービス
  https://www.imaginarysoundscape.net
  https://qosmo.jp/news/imaginary-soundscape-v2
  
  

先行事例

• 音が効果的に用いられているサイト集
  https://note.com/mefilas/n/n1fe9d4e14774
• 先輩の類似研究
  https://adamay-design.github.io/mutedscapes/
  
  
  
  

2026.04.18

テーマ

• 福岡フォトスポットMAP
  • 神社
  • 橋
  • 空
    上記の項目のどれかにピックアップして作成予定
    
    

形式(予定)

Web上で写真を掲載。
写真と付随して「映像」か「サウンド」、もしくは「360°画像」のいずれかを付随させる。
掲載した写真をMAPと連動させる。

2026.04.11

テーマ案

• 3DCGアート
  • 物理演算を使用した映像or簡単なゲームの制作
    
    
• お酒・カクテルについての何かしらの（ウイスキーetc...）
  • お酒の歴史やお酒の種類についてまとめる
    
    
• 風景写真フォトコラージュ
  • デジタルorアナログで作成
    
    
• 福岡の隠れフォトスポット
  • 現地に行って、写真と住所をまとめたmapまたは冊子の作成
  • どの位置からどういった角度で撮ったかまで細かく記載
    
    

調査

• 3DCG動画制作
  https://cad-kenkyujo.com/blender-animation-hozon/
• お酒についてのイロハ
  https://www.asahibeer.co.jp/csr/tekisei/health/history.html
• フォトコラージュアート例
  https://wasabi-nomal.com/blogs/others/collage?srsltid=AfmBOoonZ9BVsc3NYgN7Ci_1nJkJ_Y3WT_eIpn_R9w4_QVQvcW0HmYLf
• 福岡フォトスポット
  https://media.shige-pri.com/hukuoka-photo-spot/