Mutedscapes
ビルの窓ガラスに映る時間軸と空間を記録するタイムラプスと写真による研究
概要
これは何？
タイムラプスと写真でガラスに反射する世界の魅力を伝えるWebサイト
背景
近年、福岡市は天神ビッグバンや福岡コネクティッドなどの都市開発によって、街の様相が大きく変化している。新たなビルが続々と建設される中で、特に目を引くのがガラス張りのビルである。反射によって福岡の街が映し出される窓ガラスからは、額に入れて飾られた絵画作品のような印象を受ける。私はそこに着目し、窓ガラスに映り込む世界をタイムラプスと写真で記録することにした。
目的
このプロジェクトは、情報が溢れる現代社会において、私たちが見逃している街の魅力を伝えることが目的である。具体的には、全面ガラス張りのビルやガラスを基調とした建物を対象にタイムラプスと写真を撮影し、Webサイトに掲載。最終的にWebサイトの閲覧者の感想をまとめるアンケート調査を実施する。さらにガラスを基調としたデザインが増加したことの要因や、それによる影響を考察する。このプロジェクトを通じて、新たな視点を提供することを目指す。
コンセプト
- タイトル
「Mutedscapes」は、英語で無音や抑制されたを意味する「muted」と、景色を意味する「scape」を組み合わせた造語である。このタイトルをつけた理由は、情報に溢れる現代社会において、敢えて情報の制限された景色に浸ることで、新たな発見があるというメッセージが込められている。
- 制作におけるテーマ
- 「窓ガラスの内側に存在するもう一つの世界」
タイムラプスの撮影間隔を短く設定することで、時間経過を感じつつも、ゆったりとした印象を受ける映像に仕上げる。映像にBGMなどは付けず、視覚情報のみで構成することで、窓ガラスに反射する世界の静けさを表現する。
- 「街に隠れる新たな一面の発見」
写真を撮る際、情報量を減らすために人が映り込まないことを意識する。さらに企業ロゴや標識など反射を通じて反転した様子が伝わる被写体の撮影を行う。
成果物の仕様
- Webサイト
形式：マルチページ
- タイムラプス
比率：16:9
長さ：1分程度
本数：8本程度
- 写真
枚数：50枚程度
制作ツール
- ハードウェア
- ソフトウェア
- Lightroom
- Illustrator
- After Effect
- Visual Studio Code
プロジェクトの期間
プロジェクトの期間｜2023.04.14 - 2023.12.22
サイトマップ
#image(): File not found: "RF-sitemap.png" at page "山田洸太/卒業研究"
Webサイト進捗
- 概要ページの制作
- タイムラプス掲載ページの制作
- サイトのテーマカラーを黒から白に変更
タイムラプス
場所：アクロス福岡
場所：ソラリアターミナルビル
場所：天神ビジネスセンタービル
場所：九州産業大学 2号館
写真の歪み調整
調整前 調整後
今後の流れ
Webサイトに掲載済みの動画が5本と少ないため、今後も撮影を続ける必要がある。あと3本制作を11月中旬までに制作し、最終的にWebサイトに8本の動画を掲載する。最終発表に向けて、マップの掲載を含め、Webサイトのブラッシュアップを行なっていく。
調査
現状調査
- ガラス張りのビルの増加した要因
- 電気代の削減
自然光を取り込めるため電気の使用を軽減でき、結果として省エネ効果が期待できる。
- ビルの軽量化
コンクリート外壁は重量があるため、ビルを支えるのに膨大なコストを要する。外壁に軽量なガラスを使用することでコスト削減になる。
- カーテンウォールの採用
構造上の荷重を負担しない間仕切り壁と同様の非耐力壁であるカーテンウォールの採用によって、ガラスを外壁に使用したデザインのビルを建設しやすくなった。
【参考】
先行事例
技法・技術情報
プロジェクト管理
スケジュール
スプレッドシート
ToDo
タイムラプス制作方法調査試作の制作サイトマップの制作Webサイトの大まかな枠組みの作成フォトギャラリーページの制作Instagramの開設Youtubeチャンネルの開設- Webサイトの動画の埋め込み
- Webサイトの概要ページの更新
- ロゴマークの制作
進捗記録
2023.11.10
Webサイト
- トップページ背景に流れる映像の画質を向上
これまで圧縮の際にフルHDに縮小していたところを映像サイズを落とさずに4K のまま書き出しを行なった。ページの読み込み時間もこれまで変わらず問題なく表示された。
- ヘッダー等にグラスモーフィズムを採用
ヘッダーやセクション部分の背景にブラーや影をつけることでガラスのような質感を再現した。メインの題材でもある「窓ガラス」を意識したサイトにしていく。
2023.10.27
Webサイト
- タイムラプスページのタイトルのサイズ変更
文字要素を小さくし、映像以外の要素は控えめに表示する。
2023.10.20
中間審査
- タイムラプス掲載ページの調整
- 各動画ごとに1ページ
- YouTubeの動画タイトルの検討
- サイト上でのタイトルのサイズ感
- 動画タイトルとサイト上での文字サイズや文字情報のメリハリ
- 大画面で楽しめるように幅いっぱいで表示する
- 動画埋め込みの方法の研究
- 4Kでの掲載
- ヘッダーの文字サイズの縮小
2023.10.13
2023.10.06
2023.09.29
2023.09.22
Webサイト
誘目性の向上を目的としたスライドショーを設置。
タイムラプス
西鉄福岡駅で撮影を実施。
2023.09.15
Webサイト
パララックスを活用し、トップページ下部に概説の配置を実施。
2023.07.21
Webデザイン案
- 概要ページをトップページ下部に配置
パララックスを用いて、トップページより手前に概要ページを置く。
2023.07.14
各種アカウントの登録・開設
- YouTube
動画を高画質で視聴してもらうために使用する。当初は、Webサイトへの埋め込みを目的としていたが、アイコン等が表示されるため、Webサイトの世界観を崩してしまう懸念がある。埋め込みのカスタマイズ等の調査を行う。
- Instagram
写真は通常投稿、タイムラプスはリールで投稿を行う。ただし、リールは縦画面表示なので、3つの動画を縦に並べる形式でリール用の動画を制作する。(YoutubeのShortsへの転用も可能)
- Vimeo
Youtubeに比べ、動画埋め込みの際の自由度が高い。しかし、フリープランでは動画を2つまでしかアップロードできないため、他の高画質での埋め込みが可能な方法を検討する必要がある。
メモ
- サイトの世界観の妨げになる埋め込み機能の再検討
- バグの原因になるためフォルダ名にスペースを使用しない
「Time Lapse」▶「TimeLapse」
- タイムラプスと写真の役割の明確化
- GIFやシネマグラフの検討
- 長時間撮影や日没の撮影で時間の変化を強調
- タイムラプスと写真の同一項目で表示
- キャプションに撮影場所時間の明記
- ビルの歪みをPhotoshopで修正
- 映像の自動再生
- 受動的なサイトづくり
2023.07.07
Webサイト進捗
タイムラプス試作
場所：九州産業大学2号館
撮影間隔：2秒
場所：福岡ダイヤモンドビル
撮影間隔：3秒
写真試作
メモ
2023.06.30
メインタイトル案
- Muted Realities（静かな現実）
- Muted Existences （静かな存在）
- Muted Realms（静かな領域）
- Alternate Realities（別の現実）
- Mutedscape（静かな景色）※造語
Webデザイン案
2023.06.23
撮影のアイデア
- 構図
上を見上げるような構図
- 撮影詳細
間隔：2秒
撮影枚数：1800枚程度
撮影時間：1時間
映像時間：1分程度
背景と目的の修正
- 背景
近年、福岡市では都市開発が進み、天神ビッグバンや福岡コネクティッドなどが街の様相を大きく変化している。その中で、ガラス張りのビルやガラスを前面に押し出したデザインの建物が増加していることに気づいた。これらの建物は、窓ガラスのフレームが額縁のように見え、反射した空や木々などが額に入れて飾られたアート作品のような印象を受けた。私はそこに着目し、窓ガラスに反射した世界をタイムラプスと写真で記録することにした。
- 目的
情報量が多く騒がしい世の中、私たちは気付かぬうちに数多くのものを見逃してしまう。窓ガラスの内側に広がる世界もその一つである。そこで私は、タイムラプスによる時間のゆったりとした経過を通じて、普段気づかない街の魅力を提供する。具体的には、全面ガラス張りのビルや窓ガラスの比較的大きい建物を対象に、タイムラプスと写真を撮影。ガラス張りこれらの映像と写真を考察しつつ、視聴者の感じたことをアンケートでまとめる。さらにガラスを用いたデザインが増加したことの要因や、増加したことによる影響を考察する。
2023.06.16
Webデザインのコンセプト
ビルのイメージとして直線や直角など無機質な雰囲気を基調にしつつ、反射する雲や木々などをイメージして曲線などを取り入れ得る。
2023.06.09
中間報告メモ
- 試作
- 写真の試作掲載
- 窓ガラスの狭いビルを撮影した試作動画の掲載
- 背景・目的
- ガラスの多いビルが増えること＝景観向上にはならない
- 地震などのリスク面も最終レポートでは記載
- 撮影・編集
- 時間経過を遅くすることで見る人に気づきを与える
- 窓ガラスを切り取り撮影すると比較にならないため全体像として撮影
- 枚数を多く撮影し、心地よい部分を切り取る
- 雨上がりや雨の降り始めは雲の動きがあるためその時間を狙って撮影
- 北に背を向けて撮るなど方角を意識して撮影
- エリア別に撮影
ガラス張りのビルの増加した要因
- 電気代削減
自然光を取り込めるため人工光の使用を減らせる。
省エネ効果が期待できる。
- ビルの軽量化
コンクリートの外壁は重く膨大なコストを要する。
ガラスを使用することでコスト削減になる。
- 安全性
地震や台風の影響を受けにくいカーテンウォール*¹の採用。
ガラス張りのビルを建設しやすくなった。
*¹カーテンウォール
建物において構造上の荷重を負担しない、間仕切り壁などと同様の非耐力壁のことで、建築基準法では帳壁（ちょうへき）とも呼ばれる。建物が高層化すればするほど、外壁が重くなること、そして地震に耐える柔構造建築の場合、建物がしなることで外壁のガラスが割れることなどの問題が出てくる。カーテンウォール工法ならば、外壁は構造物に貼り付けるだけで、荷重を負担しないため軽量化が可能に。建物がしなっても外壁のゆがみは小さくなるため、ガラスが割れて飛散するような事態は減る。よく見られるガラス張りの高層建築では、多くが「カーテンウォール」を採用。防火に関しては、部位別に、外壁と開口部の規定が適用される。
引用元：東建コーポレーション"カーテンウォール - 建築用語"
https://www.token.co.jp/estate/useful/archipedia/word.php?
ガラス張りのビルの増加による弊害
2023.06.02
試作
- 撮影設定
撮影間隔：10秒
撮影枚数：600枚
動画秒数：20秒
2023.05.26
試作
- 撮影設定
F値：F/9
ISO：500
露出プログラム：絞り優先
撮影間隔：15秒
撮影枚数：600枚
動画秒数：20秒
- 撮影設定
F値：F/10
ISO：500
露出プログラム：絞り優先
撮影間隔：7秒
撮影枚数：500枚
動画秒数：17秒
2023.05.19
コンセプト
アイデア案
試作
- 撮影情報
F値：F/8
ISO：400
露出プログラム：絞り優先
撮影間隔：20秒
撮影枚数：150枚
動画秒数：6秒
- 撮影機材
本体：Sony α7 III
レンズ：SAMYANG AF 75mm F1.8 FE
- メモ
少し移り変わりが速く感じたため、一枚あたりの秒数を長くする。
動画の時間が10秒以下だと物足りないため、20秒から30秒は欲しい。
600枚から900枚撮影する必要がある。
技法・技術情報
- 絞り優先モードの使用
画角に入る建物のどこまでピントを合わせるのか調整するため
- Lightroomでレタッチの同期
まとめて同じ設定で現像が可能になる
2023.05.12
アイデア案
- Webサイト上でビル巡りマップを制作
- タイムラプスで雲の動きを撮影
- ビルに映る月や雨の水滴の撮影
2023.04.29
試作
（05.11更新）
アイデア案
- ビルの窓ガラスに反射を生かした写真
- なぜビルなのか？
→格子状、垂直、窓の面積が広い
- 何が反射している様子を撮るのか？
→日常、天候、時間、色相、明暗
- なぜ福岡で撮るのか？
全国の都市で撮影するうちの一つとして、今回は福岡を取り上げる。福岡は空港が市街地に近いため、航空法が厳しく他の都市に比べ低いビルが多く、街自体にあまり派手さがない。それもあってか、福岡のビルを特集した写真集やWebギャラリーが少ないと感じる。しかし、低いビルは比較的に角度をつけなくても撮影ができ、被写体全体を映しやすい利点もある。さらに福岡は全国的に見ても数少ない人口が増加している都市で、現在も天神ビッグバンや博多コネクティッドなどの大規模の開発が進んでいる最中である。その「今」の福岡を撮影することに意義があると考えた。
（05.10更新）
メモ
- 写真
- 3DCG
- 日常品に芝生を
便利な世の中になる一方で、緑を見る機会が減っている。
緑はストレスを緩和したり、目の疲れを和らげる効果もあるとされる。
3DCGであればBlender。写真合成ならPhotoshop使用。
2023.04.21
アイデア案
- 都市高散歩ブラッシュアップ案
- 撮影機材をiPhoneから一眼レフカメラに変更
- ロゴやフォントのリデザイン
- 写真集の文字情報等の拡充
- Webサイトの再構築
- Googleアナリティクスの活用
- 写真の世界観の統一
- 老朽化をより感じ取れる写真集
→老朽化を強調したい写真はモノクロで表現
→新しい建物等との対比
- 緑だけを集めた図鑑 or 写真集
- 緑には目の緊張を緩和させたり、心を穏やかにする効果がある
- 写真として取り上げることで日常に隠れる緑を意識するようになる
現状調査
先行事例
2023.04.14
アイデア案
- 写真
- 環境に配慮された建築の図鑑制作
→フォトギャラリーサイト、図鑑（写真集）、マップ
- 落とし物をひたすら撮る
- 自動販売機・バリアフリー・踏切・廃墟
→写真集、マップ（例）自動販売機でいうとどこに何が売っているのか等
- グラフィックデザイン
- 福岡都市高速 インター出入り口等のシンボルマーク制作
→パンフレット等
（04.14更新）
- メモ
工事現場、鉄骨、足場
看板、標識、ピクトグラム、ロゴ、タイポグラフィ
福岡っぽい
色別やジャンルで分類
色で見る福岡「福岡×色」
サイトは白を基調とする
→写真の色彩を引き立たせる
（04.18更新）
現状調査
参考
Google:html5 semantic template
