山田洸太/卒業研究
をテンプレートにして作成
HOME
ABOUT
最新の更新
2021
MEMBER 2021
青木暁光
石坂大翔
出光美心
岩崎貴生
岩下雄真
内尾颯太
江川珠貴
大中啓旦
亀田日向
川村洸太
木村円香
久保絢菜
倉員優実
桑原歩未
鴻上早紀
崔昊
佐光美憂
柴田一輝
竹谷匠冬
田籠祐貴
田代爽乃
内藤彩乃
西山実伶
濱有希子
濱田侑里
藤本唯人
松岡佑樹
松藤陽
村山陽菜
山田宗周
渡邊来美
渡辺侑貴
中西華子
原田朋奈
水田修太朗
宮副咲葉
猪須大翔
川面翔太
隈翔太
柴田葉月
角祐菜
豊岡壮大朗
吉井麻吏菜
2022
MEMBER 2022
棈松智也
梅木悠民
江頭奏
大井このか
大石颯
太田糸音
太田姫奈
越智楓
鎌田真幸
楠田佑月
興梠媛愛
後藤太成
坂井彩華
指方依緒
徐泰陽
杉野市之助
堤晴司
角田雄一
中井千尋
原朋恵
平嶋明日花
増田里奈
深町彩海
藤島早希
宮路咲希
梁井英翔
山口愛麗
山本彩花
松田葉奈
松本龍太郎
熊谷涼花
近藤ひかる
善結穂
待永萌衣
三浦遥
石松匡広
上田莉帆
宇田川春稀
宇美希美
佐野美和
竹之内咲希
土斐崎種定
野村優亜
福田千紗
山川彩香
山田侑加子
重松優花
甲斐陸斗
2023
MEMBER 2023
秋月靖雅
浅田真優花
阿南慶子
荒谷唯斗
安藤貴仁
池邉成
井上大河
岩本愛結
梅﨑美和
浦朱里
江村梨里香
大場こころ
勝田喜一
亀崎瑞穂
神田舞
白井くるみ
髙市遥
竹松莉羽
寺田圭志
中村心香
原晴紀
菱谷実来
日山晃良
平崎千夏
福井涼
堀玲二
早稲田加奈恵
渡邊優希
十時明日香
石井彩晶
大神槙之介
大熊玄樹
大山花音
岡萌絵子
荻野美咲
鐘ヶ江雅
金田桜子
北村美優香
清野梨果
高庄玲衣
津覇稜也
福屋早希乃
脇山千寛
2024
MEMBER 2024
芦谷心渚
安部詩織
池田隆之介
伊藤早紀
越智花凛
金ヶ江光千瑠
佐藤澪
川村玲太
菊池真桜
後藤未羽
齊場由布
佐々木陽菜
佐藤美月
猿本大翔
竹之内優希
田尻有沙
谷口和歌子
千々岩聡真
手島凜
鳥越友菜
中尾桃瀬
野口朗央
福岡比菜
松崎菜々実
松永紗和
真子大輝
南妃香莉
宮園晴日
森山海莉
劉沢寧
渡辺颯香
足立実優
池田阜弥
井上朋美
宇野日菜
上瀧桃子
茂山和寛
髙嶋莉彩
橘彩以
田中さゆり
田村宥奈
徳永歩乃佳
轟はなの
庭瀬美来
橋本音花
若狭映那
STAFF
専任教員一覧
伊藤敬生
井上貢一
井上友子
岩田敦之
桜井祐
永嶋さゆり
北島己佐吉
OBOG
2023年度卒業生
2022年度卒業生
2021年度卒業生
2020年度卒業生
2019年度卒業生
SESSION
専門科目一覧
ソーシャルデザイン応用演習
情報デザイン演習I
地域ブランド企画演習I
情報デザイン演習IIIA
情報デザイン演習IIIB
地域ブランド企画演習IIIA
地域ブランド企画演習IIIB
情報デザイン研究II
地域ブランド企画研究II
通信ネットワーク演習
データサイエンス
3DCG演習
卒業研究
教務ガイダンス
RecommendedVideo
BasicKnowledge
PROJECT
LINKS
SEARCH
開始行:
*Mutedscapes
ビルの窓ガラスに映る時間軸と空間を記録するタイムラプスと...
#image(mockup_16-9.jpg)
//メインビジュアル、あるいは
//プロジェクトの最新の状態を視覚的に掲載
-''Kota Yamada''
-'''Keywords:Building, Reflection, Time Lapse, Photo, We...
-https://adamay-design.github.io/mutedscapes/
-https://www.youtube.com/@mutedscapes
//-__[[アンケート調査>https://forms.gle/rUDMoEjV5q68pagU9...
//-__[[相互評価シート>https://www.example.com]]__ ← ここ...
~
~
**概要
//***これは何?
//タイムラプスと写真でガラスに反射する世界の魅力を伝えるW...
//&color(red){これは何か・・を簡潔に};
***背景
近年、福岡市は大規模な再開発により、多くの主要なビルの外...
~
***目的
そこで本研究では、無機質なビルにも存在する時間の流れをタ...
//&color(red){プロジェクトの背景と目的};
~
***成果物の仕様
-タイムラプス
サイズ:3840×2160px
長さ:20秒程度(ループ再生)
本数:6本
-写真
アスペクト比:3:2
枚数:52枚
-Webサイト
形式:マルチページ
//&color(red){&small(成果物の形式・サイズ・時間尺等);};
~
***制作ツール
-ハードウェア
--一眼レフカメラ(Sony α7 III)
-ソフトウェア
--Lightroom
--Illustrator
--After Effect
--Visual Studio Code
//&color(red){使用するツール|ハードウエア・ソフトウエア};
~
***プロジェクトの期間
プロジェクトの期間|2023.04.14 - 2023.12.22
//&color(red){プロジェクトの期間|2023.04.14 - 2023.12.22...
~
***現状調査
被写体となる高層建築の現状(ガラス張りのビルの増加した要...
-電気代の削減
自然光を取り込めるため電力の使用を軽減でき、結果として省...
-ビルの軽量化
コンクリート外壁は重量があるため、ビルを支えるのに膨大な...
-カーテンウォールの採用
構造上の荷重を負担しない間仕切り壁と同様の非耐力壁である...
~
***コンセプト
-ロゴタイプ
幾何学的な窓のフレームを意識して制作。窓が反射する様子か...
|#image(mutedscapes-logo.png)|
-タイトル
『Mutedscapes』は、英語で無音や抑制されたを意味する「mute...
//&color(red){基本的な考え方、枠組み、視点など};
~
***コンテンツ制作
-タイムラプス
被写界深度を深く設定することで景色の奥行きを表現し、2秒間...
-写真
映像では見逃してしまうような微細な部分や、タイムラプスと...
#image(before-after.jpg)
~
***Webサイト
-サイトマップ
|#image(sitemap.png)|
-トップページ
サイトの閲覧者が何のサイトであるのか瞬時に分かるようにタ...
|#image(mockup-top.jpg)|
-タイムラプスページ
試作ではYouTubeのiframeでの埋め込みを試したが、コントロー...
|#image(mockup-timelapse1.png)|#image(mockup-timelapse2.j...
-マップページ
作品に関心を持った方が、実際にビルに映る景色を現地で観察...
|#image(mockup-map.png)|
-フォトギャラリーページ
撮影場所ごとに写真をカテゴリ分けできるボタンを導入するこ...
|#image(mockup-photo.jpg)|#image(iphone-mockup.png)|
~
***YouTube
#youtube(Zs8Gb-7_q4g)
-動画内容
YouTube内でループ再生の設定しなくてもゆったりと映像を観る...
-投稿テンプレート
--サムネイル
#image(ksubldg2-thumbnail.jpg)
--タイトル
Mutedscapes #1 - Kyushu Sangyo University Bldg.2 (4K Time...
--説明
Equipment:Sony ILCE-7M3, FE 24-70mm F4 ZA OSS
Settings:ISO 100, 40mm, f/22
DateTime:6 July, 2023 - 16:29-17:36
Address:2-3-1, Matsukadai, Fukuoka-Shi Higashi-Ku, Fukuo...
Website:https://adamay-design.github.io/mutedscapes/
~
***まとめ
本研究及び制作を通じて、「人工物であるビルと自然物である...
//&color(red){プロジェクトが完結したら「まとめ」を記載し...
~
~
**調査
***先行事例
-[[光のパブリックポリシー4 夜間景観照明1>https://alg.jp/b...
ALG‐建築照明計画株式会社による建築照明デザインによって景...
-[[Moraine Lake Sunrise Timelapse - 4K>https://youtu.be/d...
カナダ・アルバータ州にあるモレーン湖をタイムラプスで記録し...
-[[神戸港クルーズ船ポータルサイト>https://cruise-kobe.com...
Webサイトのトップページに映像を配置することで、訪問者が短...
~
***被写体となる高層建築の現状(ガラス張りの増加)
-ガラス張りのビルの増加した要因
--電気代の削減
自然光を取り込めるため電気の使用を軽減でき、結果として省...
--ビルの軽量化
コンクリート外壁は重量があるため、ビルを支えるのに膨大な...
--カーテンウォールの採用
構造上の荷重を負担しない間仕切り壁と同様の非耐力壁である...
~
***技法・技術情報
-タイムラプス|用語集|細胞×画像ラボ
https://www.healthcare.nikon.com/ja/ss/cell-image-lab/glo...
-タイムラプス動画を作成する| 使いかた | Imaging Edge Desk...
https://support.d-imaging.sony.co.jp/app/imagingedge/ja/i...
-構図で写真が見違える!カメラ初心者が本当に使える6つの基...
https://camera-web.jp/beginner/kouzu/kouzu-basic
-Lesson20:高層ビル群 - レンズレッスン
https://www.nikon-image.com/enjoy/phototech/lenslesson/le...
//&color(red){プロジェクトの遂行に必要な技法・技術に関す...
~
【参考】
-高層ビルがガラス張りな理由
https://www.takabonblog.com/entry/building
-1970年代に総ガラス張りの建物を建てるのがいかに大変だったか
https://www.gizmodo.jp/2011/03/1976.html
-東建コーポレーション"カーテンウォール - 建築用語"
https://www.token.co.jp/estate/useful/archipedia/word.php...
-都市景観と巨大建築
https://www.10plus1.jp/monthly/2013/12/issue02.php
-高層建築物が景観価値に与える影響に関する研究
https://tsukuba.repo.nii.ac.jp
//&color(red){プロジェクトのテーマに関わる社会の現状と問...
~
~
~
**プロジェクト管理
***スケジュール
[[__スプレッドシート__>https://docs.google.com/spreadshee...
//&color(red){計画的な遂行のために、進行管理表を作成して...
~
//***ToDo
//-%%タイムラプス制作方法調査%%
//-%%試作の制作%%
//-%%サイトマップの制作%%
//-%%Webサイトの大まかな枠組みの作成%%
//-%%フォトギャラリーページの制作%%
//-%%Instagramの開設%%
//-%%Youtubeチャンネルの開設%%
//-Webサイトの動画の埋め込み
//-Webサイトの概要ページの更新
//-ロゴマークの制作
//&color(red){やるべきこと(タスク)を箇条書きにします。};
//&color(red){完了後は「%%取り消し線%%」あるいは「// コメ...
//***NotToDo
//&color(red){やらないこと:何をするかではなく「何をしな...
//&color(red){例:10人以上の会議には出ない。苦手なことは...
~
~
#hr
CENTER:''進捗記録''
//&color(red){最新の情報を一番上に記載して下さい(古い記...
#hr
~
~
**2023.12.22
***説明パネル
-2枚目のパネルは一枚ではなく複数枚の写真を組み合わせる形...
-背景は画像でも可
-数字の下の余白が1マスになっているため2マスに修正
***卒展日程
期間:2月16日〜2月23日
搬入:2月14日, 15日
撤収:2月23日
***ブラッシュアップ
締切:1月15日までに学科サイト更新
~
~
**2023.12.15
***Webサイト
-Aboutページに制作者情報を記載
-タイムラプスの詳細に建築物の高さ・竣工日・デザイナー等を...
-PhotoページとTimeLapseページのコンテンツ同士のmarginを合...
-トップページの縦スクロールを誘導する工夫
https://www.leadplus.co.jp/blog/design-pattern-for-user-e...
-トップページレイアウトの改善
-https://www.webcreatorbox.com/tech/video-background
***YouTube掲載する際のテキスト例
-タイトル
Mutedscapes - Solaria Terminal Building (4K TimeLapse)
-説明欄
[Equipment]
Sony ILCE-7M3, FE 24-70mm F4 ZA OSS
[Settings]
ISO 640, 52mm, f/20
[DateTime]
12 September, 2023 - 8:52-10:12
[Address]
2-1-1, Tenjin, Fukuoka-Shi Chuo-Ku, Fukuoka, 810-0001, Ja...
~
~
**2023.12.8
***最終審査
-トップページのバグ
-英語表記に統一
-ページごとの世界観の統一(TimeLapseページとPhotoページ)
-サイトの情報やコンテンツの拡充
-マップページのブラッシュアップ(レスポンシブ対応、ピンの...
-タイムラプスの奥行きを意識した撮影をより強く
***フォントの再調整
-Afacad(Regular 400)
-Roboto Condensed(Regular 400)
-Teko(Light 300)
-Rajdhani(Regular 400)
~
~
**2023.12.1
***Webサイト
-マップページ
作品に関心を持った方が、実際にビルに映る景色を現地で観察...
|#image(imac-mockup-map.jpg)|
~
~
**2023.11.24
***Webサイト
-タイムラプスページ
試作ではYouTubeのiframeでの埋め込みを試したが、コントロー...
|#image(imac-mockup-timelapse2.jpg)|#image(imac-mockup-ti...
-フォトギャラリーページ
撮影場所ごとに写真をカテゴリ分けできるボタンを導入するこ...
|#image(imac-mockup-photo.jpg)|#image(iphone-mockup.png)|
~
~
**2023.11.17
***YouTube掲載する際のテキスト例
-タイトル
Mutedscapes - No.001 (4K TimeLapse)
-説明欄
『九州産業大学』
[場所]〒813-0004 福岡県福岡市東区松香台2丁目3−1
[日時]2023年9月24日 16:29-17:36
[機材]Sony ILCE-7M3, FE24-70mm F4 ZA OSS (LENS)
[設定]ISO 100, 40mm, f/22
~
~
**2023.11.10
***Webサイト
-トップページ背景に流れる映像の画質を向上
これまで圧縮の際にフルHDに縮小していたところを映像サイズ...
-ヘッダー等にグラスモーフィズムを採用
ヘッダーやセクション部分の背景にブラーや影をつけることで...
~
~
**2023.10.27
***Webサイト
-タイムラプスページのタイトルのサイズ変更
文字要素を小さくし、映像以外の要素は控えめに表示する。
~
~
**2023.10.20
***中間審査
-タイムラプス掲載ページの調整
--各動画ごとに1ページ
--YouTubeの動画タイトルの検討
--サイト上でのタイトルのサイズ感
--動画タイトルとサイト上での文字サイズや文字情報のメリハリ
--大画面で楽しめるように幅いっぱいで表示する
--動画埋め込みの方法の研究
--4Kでの掲載
-ヘッダーの文字サイズの縮小
~
~
**2023.10.13
***タイムラプス
-書き出した画像素材をタイムラプスへ変換・編集
--映像のブレをワープスタビライザーを使い軽減。
--変化の心地よい部分を抜粋。
--フェードによってループ再生にしても違和感がないよう調整。
~
~
**2023.10.06
***タイムラプス
-撮影した画像素材のレタッチ・書き出し
--雲が鮮明に見えるように、コントラストやハイライト、シャ...
~
~
**2023.09.29
***Webサイト
-概要ページ等のレスポンシブ対応
--フレックスボックスを使用し、横並びのキャプションと画像...
~
~
**2023.09.22
***Webサイト
誘目性の向上を目的としたスライドショーを設置。
***タイムラプス
西鉄福岡駅で撮影を実施。
~
~
**2023.09.15
***Webサイト
パララックスを活用し、トップページ下部に概説の配置を実施。
~
~
**2023.07.21
***Webデザイン案
-概要ページをトップページ下部に配置
パララックスを用いて、トップページより手前に概要ページを...
~
~
**2023.07.14
***各種アカウントの登録・開設
-YouTube
動画を高画質で視聴してもらうために使用する。当初は、Webサ...
-Instagram
写真は通常投稿、タイムラプスはリールで投稿を行う。ただし...
-Vimeo
Youtubeに比べ、動画埋め込みの際の自由度が高い。しかし、フ...
~
~
***メモ
-サイトの世界観の妨げになる埋め込み機能の再検討
-バグの原因になるためフォルダ名にスペースを使用しない
「Time Lapse」▶「TimeLapse」
-タイムラプスと写真の役割の明確化
-GIFやシネマグラフの検討
-長時間撮影や日没の撮影で時間の変化を強調
-タイムラプスと写真の同一項目で表示
-キャプションに撮影場所時間の明記
-ビルの歪みをPhotoshopで修正
-映像の自動再生
-受動的なサイトづくり
~
~
**2023.07.07
***Webサイト進捗
-トップページ
#image(mutedscape0714.jpg)
-ハンバーガーメニューの実装
#image(web-menu.png)
-フォトギャラリー
#image(web-photo.jpg)
~
***タイムラプス試作
#Youtube(9vvYAffKw1Q)
場所:九州産業大学2号館
撮影間隔:2秒
#Youtube(w34AXRHpbIg)
場所:福岡ダイヤモンドビル
撮影間隔:3秒
~
***写真試作
|#image(DSC00810.jpg)|#image(DSC00893.jpg)|
|#image(DSC00751.jpg)|#image(DSC07239.jpg)|
~
***メモ
-最終的にプロジェクト概要のスライドを制作
~
~
**2023.06.30
***メインタイトル案
-Muted Realities(静かな現実)
-Muted Existences (静かな存在)
-Muted Realms(静かな領域)
-Alternate Realities(別の現実)
-Mutedscape(静かな景色)※造語
~
~
***Webデザイン案
-ヘッダーを黒・透明度50%に設定
~
~
**2023.06.23
***撮影のアイデア
-構図
上を見上げるような構図
#image(DSC00901.jpg)
-撮影詳細
間隔:2秒
撮影枚数:1800枚程度
撮影時間:1時間
映像時間:1分程度
~
***背景と目的の修正
-背景
近年、福岡市では都市開発が進み、天神ビッグバンや福岡コネ...
-目的
情報量が多く騒がしい世の中、私たちは気付かぬうちに数多く...
~
~
**2023.06.16
***Webデザインのコンセプト
ビルのイメージとして直線や直角など無機質な雰囲気を基調に...
~
~
**2023.06.09
***中間報告メモ
-試作
--写真の試作掲載
--窓ガラスの狭いビルを撮影した試作動画の掲載
-Webサイト
--撮影場所をマップにまとめる
--方角を記載
-背景・目的
--ガラスの多いビルが増えること=景観向上にはならない
--地震などのリスク面も最終レポートでは記載
-撮影・編集
--時間経過を遅くすることで見る人に気づきを与える
--窓ガラスを切り取り撮影すると比較にならないため全体像と...
--枚数を多く撮影し、心地よい部分を切り取る
--雨上がりや雨の降り始めは雲の動きがあるためその時間を狙...
--北に背を向けて撮るなど方角を意識して撮影
--エリア別に撮影
~
***ガラス張りのビルの増加した要因
-電気代削減
自然光を取り込めるため人工光の使用を減らせる。
省エネ効果が期待できる。
-ビルの軽量化
コンクリートの外壁は重く膨大なコストを要する。
ガラスを使用することでコスト削減になる。
-安全性
地震や台風の影響を受けにくいカーテンウォール*¹の採用。
ガラス張りのビルを建設しやすくなった。
~
*** *¹カーテンウォール
建物において構造上の荷重を負担しない、間仕切り壁などと同...
引用元:東建コーポレーション"カーテンウォール - 建築用語"
https://www.token.co.jp/estate/useful/archipedia/word.php?
~
***ガラス張りのビルの増加による弊害
-反射光によるトラブル
https://www.nikkei.com/article/DGXNASFK2801Q_Y0A720C10000...
-防音性の低下
視界が遮られるタイプの壁と比較してガラス壁は50~100%も音...
https://www.estie.jp/products/finder/magazine/article/gla...
-プライバシー面での懸念
~
~
**2023.06.02
***試作
#Youtube(slGUC4uGmaw)
-撮影設定
撮影間隔:10秒
撮影枚数:600枚
動画秒数:20秒
~
**2023.05.26
***試作
#Youtube(WVrbd3NVYko)
-撮影設定
F値:F/9
ISO:500
露出プログラム:絞り優先
撮影間隔:15秒
撮影枚数:600枚
動画秒数:20秒
~
#Youtube(ebfYH1IycC4)
-撮影設定
F値:F/10
ISO:500
露出プログラム:絞り優先
撮影間隔:7秒
撮影枚数:500枚
動画秒数:17秒
~
~
**2023.05.19
***コンセプト
//ここ数年で福岡は、航空規制の緩和などもあり都市開発が加...
//そこで景観保全
//ビルが増えることは果たして、景観の向上なのか。それとも...
//一面ガラス張りなど、窓の面積が比較的広いビルが増えてい...
~
***アイデア案
-都市高速をタイムラプスで撮影
~
***試作
#Youtube(3IhFJA01lhg)
-撮影情報
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サイト上でビル巡りマップを制作
-タイムラプスで雲の動きを撮影
--30分程度、試験的に撮影
-ビルに映る月や雨の水滴の撮影
~
~
**2023.04.29
***試作
|#image(IMG_1929.jpg)|#image(IMG_1926.jpg)|#image(IMG_193...
-撮影機材:iPhone 12
-撮影場所:博多区
(05.11更新)
~
***アイデア案
-ビルの窓ガラスに反射を生かした写真
--なぜビルなのか?
→格子状、垂直、窓の面積が広い
--何が反射している様子を撮るのか?
→日常、天候、時間、色相、明暗
--なぜ福岡で撮るのか?
全国の都市で撮影するうちの一つとして、今回は福岡を取り上...
(05.10更新)
~
***メモ
-写真
--錆
--トタン
-3DCG
--日常品に芝生を
便利な世の中になる一方で、緑を見る機会が減っている。
緑はストレスを緩和したり、目の疲れを和らげる効果もあると...
3DCGであればBlender。写真合成ならPhotoshop使用。
~
**2023.04.21
***アイデア案
-都市高散歩ブラッシュアップ案
--撮影機材をiPhoneから一眼レフカメラに変更
--ロゴやフォントのリデザイン
--写真集の文字情報等の拡充
--Webサイトの再構築
--Googleアナリティクスの活用
--写真の世界観の統一
--老朽化をより感じ取れる写真集
→老朽化を強調したい写真はモノクロで表現
→新しい建物等との対比
~
-緑だけを集めた図鑑 or 写真集
--緑には目の緊張を緩和させたり、心を穏やかにする効果がある
--写真として取り上げることで日常に隠れる緑を意識するよう...
~
***現状調査
-新緑の季節 緑色を見るとどんな効果がある?
https://weathernews.jp/s/topics/202104/270295/
-「緑を見ると目にいい」って本当?
https://weathernews.jp/s/topics/201905/200125/
~
***先行事例
-青い生きもの図鑑
→色を統一する面白さ
https://amzn.asia/d/fopU4pu
~
**2023.04.14
***アイデア案
-写真
--環境に配慮された建築の図鑑制作
→フォトギャラリーサイト、図鑑(写真集)、マップ
--落とし物をひたすら撮る
//--都市開発で変わりゆく福岡を記録
--自動販売機・バリアフリー・踏切・廃墟
→写真集、マップ(例)自動販売機でいうとどこに何が売ってい...
-グラフィックデザイン
--福岡都市高速 インター出入り口等のシンボルマーク制作
→パンフレット等
(04.14更新)
~
-メモ
工事現場、鉄骨、足場
看板、標識、ピクトグラム、ロゴ、タイポグラフィ
福岡っぽい
色別やジャンルで分類
色で見る福岡「福岡×色」
サイトは白を基調とする
→写真の色彩を引き立たせる
(04.18更新)
~
***現状調査
-海外事例に学ぶ。“色”で社会問題に光を当てた啓発動画
https://insights.amana.jp/article/24273/
-シンボルカラー…病気や障害、色で啓発
https://yomidr.yomiuri.co.jp/article/20160615-OYTET50039/
~
//***XXXXXXX
//-
//~
//~
//**20XX.XX.XX
//***XXXXXX
//-
//~
//***XXX
//-
//~
//~
参考
-https://www-w3schools-com.translate.goog/html/html_intro...
[[Google:html5 semantic template]]
~
~
~
終了行:
*Mutedscapes
ビルの窓ガラスに映る時間軸と空間を記録するタイムラプスと...
#image(mockup_16-9.jpg)
//メインビジュアル、あるいは
//プロジェクトの最新の状態を視覚的に掲載
-''Kota Yamada''
-'''Keywords:Building, Reflection, Time Lapse, Photo, We...
-https://adamay-design.github.io/mutedscapes/
-https://www.youtube.com/@mutedscapes
//-__[[アンケート調査>https://forms.gle/rUDMoEjV5q68pagU9...
//-__[[相互評価シート>https://www.example.com]]__ ← ここ...
~
~
**概要
//***これは何?
//タイムラプスと写真でガラスに反射する世界の魅力を伝えるW...
//&color(red){これは何か・・を簡潔に};
***背景
近年、福岡市は大規模な再開発により、多くの主要なビルの外...
~
***目的
そこで本研究では、無機質なビルにも存在する時間の流れをタ...
//&color(red){プロジェクトの背景と目的};
~
***成果物の仕様
-タイムラプス
サイズ:3840×2160px
長さ:20秒程度(ループ再生)
本数:6本
-写真
アスペクト比:3:2
枚数:52枚
-Webサイト
形式:マルチページ
//&color(red){&small(成果物の形式・サイズ・時間尺等);};
~
***制作ツール
-ハードウェア
--一眼レフカメラ(Sony α7 III)
-ソフトウェア
--Lightroom
--Illustrator
--After Effect
--Visual Studio Code
//&color(red){使用するツール|ハードウエア・ソフトウエア};
~
***プロジェクトの期間
プロジェクトの期間|2023.04.14 - 2023.12.22
//&color(red){プロジェクトの期間|2023.04.14 - 2023.12.22...
~
***現状調査
被写体となる高層建築の現状(ガラス張りのビルの増加した要...
-電気代の削減
自然光を取り込めるため電力の使用を軽減でき、結果として省...
-ビルの軽量化
コンクリート外壁は重量があるため、ビルを支えるのに膨大な...
-カーテンウォールの採用
構造上の荷重を負担しない間仕切り壁と同様の非耐力壁である...
~
***コンセプト
-ロゴタイプ
幾何学的な窓のフレームを意識して制作。窓が反射する様子か...
|#image(mutedscapes-logo.png)|
-タイトル
『Mutedscapes』は、英語で無音や抑制されたを意味する「mute...
//&color(red){基本的な考え方、枠組み、視点など};
~
***コンテンツ制作
-タイムラプス
被写界深度を深く設定することで景色の奥行きを表現し、2秒間...
-写真
映像では見逃してしまうような微細な部分や、タイムラプスと...
#image(before-after.jpg)
~
***Webサイト
-サイトマップ
|#image(sitemap.png)|
-トップページ
サイトの閲覧者が何のサイトであるのか瞬時に分かるようにタ...
|#image(mockup-top.jpg)|
-タイムラプスページ
試作ではYouTubeのiframeでの埋め込みを試したが、コントロー...
|#image(mockup-timelapse1.png)|#image(mockup-timelapse2.j...
-マップページ
作品に関心を持った方が、実際にビルに映る景色を現地で観察...
|#image(mockup-map.png)|
-フォトギャラリーページ
撮影場所ごとに写真をカテゴリ分けできるボタンを導入するこ...
|#image(mockup-photo.jpg)|#image(iphone-mockup.png)|
~
***YouTube
#youtube(Zs8Gb-7_q4g)
-動画内容
YouTube内でループ再生の設定しなくてもゆったりと映像を観る...
-投稿テンプレート
--サムネイル
#image(ksubldg2-thumbnail.jpg)
--タイトル
Mutedscapes #1 - Kyushu Sangyo University Bldg.2 (4K Time...
--説明
Equipment:Sony ILCE-7M3, FE 24-70mm F4 ZA OSS
Settings:ISO 100, 40mm, f/22
DateTime:6 July, 2023 - 16:29-17:36
Address:2-3-1, Matsukadai, Fukuoka-Shi Higashi-Ku, Fukuo...
Website:https://adamay-design.github.io/mutedscapes/
~
***まとめ
本研究及び制作を通じて、「人工物であるビルと自然物である...
//&color(red){プロジェクトが完結したら「まとめ」を記載し...
~
~
**調査
***先行事例
-[[光のパブリックポリシー4 夜間景観照明1>https://alg.jp/b...
ALG‐建築照明計画株式会社による建築照明デザインによって景...
-[[Moraine Lake Sunrise Timelapse - 4K>https://youtu.be/d...
カナダ・アルバータ州にあるモレーン湖をタイムラプスで記録し...
-[[神戸港クルーズ船ポータルサイト>https://cruise-kobe.com...
Webサイトのトップページに映像を配置することで、訪問者が短...
~
***被写体となる高層建築の現状(ガラス張りの増加)
-ガラス張りのビルの増加した要因
--電気代の削減
自然光を取り込めるため電気の使用を軽減でき、結果として省...
--ビルの軽量化
コンクリート外壁は重量があるため、ビルを支えるのに膨大な...
--カーテンウォールの採用
構造上の荷重を負担しない間仕切り壁と同様の非耐力壁である...
~
***技法・技術情報
-タイムラプス|用語集|細胞×画像ラボ
https://www.healthcare.nikon.com/ja/ss/cell-image-lab/glo...
-タイムラプス動画を作成する| 使いかた | Imaging Edge Desk...
https://support.d-imaging.sony.co.jp/app/imagingedge/ja/i...
-構図で写真が見違える!カメラ初心者が本当に使える6つの基...
https://camera-web.jp/beginner/kouzu/kouzu-basic
-Lesson20:高層ビル群 - レンズレッスン
https://www.nikon-image.com/enjoy/phototech/lenslesson/le...
//&color(red){プロジェクトの遂行に必要な技法・技術に関す...
~
【参考】
-高層ビルがガラス張りな理由
https://www.takabonblog.com/entry/building
-1970年代に総ガラス張りの建物を建てるのがいかに大変だったか
https://www.gizmodo.jp/2011/03/1976.html
-東建コーポレーション"カーテンウォール - 建築用語"
https://www.token.co.jp/estate/useful/archipedia/word.php...
-都市景観と巨大建築
https://www.10plus1.jp/monthly/2013/12/issue02.php
-高層建築物が景観価値に与える影響に関する研究
https://tsukuba.repo.nii.ac.jp
//&color(red){プロジェクトのテーマに関わる社会の現状と問...
~
~
~
**プロジェクト管理
***スケジュール
[[__スプレッドシート__>https://docs.google.com/spreadshee...
//&color(red){計画的な遂行のために、進行管理表を作成して...
~
//***ToDo
//-%%タイムラプス制作方法調査%%
//-%%試作の制作%%
//-%%サイトマップの制作%%
//-%%Webサイトの大まかな枠組みの作成%%
//-%%フォトギャラリーページの制作%%
//-%%Instagramの開設%%
//-%%Youtubeチャンネルの開設%%
//-Webサイトの動画の埋め込み
//-Webサイトの概要ページの更新
//-ロゴマークの制作
//&color(red){やるべきこと(タスク)を箇条書きにします。};
//&color(red){完了後は「%%取り消し線%%」あるいは「// コメ...
//***NotToDo
//&color(red){やらないこと:何をするかではなく「何をしな...
//&color(red){例:10人以上の会議には出ない。苦手なことは...
~
~
#hr
CENTER:''進捗記録''
//&color(red){最新の情報を一番上に記載して下さい(古い記...
#hr
~
~
**2023.12.22
***説明パネル
-2枚目のパネルは一枚ではなく複数枚の写真を組み合わせる形...
-背景は画像でも可
-数字の下の余白が1マスになっているため2マスに修正
***卒展日程
期間:2月16日〜2月23日
搬入:2月14日, 15日
撤収:2月23日
***ブラッシュアップ
締切:1月15日までに学科サイト更新
~
~
**2023.12.15
***Webサイト
-Aboutページに制作者情報を記載
-タイムラプスの詳細に建築物の高さ・竣工日・デザイナー等を...
-PhotoページとTimeLapseページのコンテンツ同士のmarginを合...
-トップページの縦スクロールを誘導する工夫
https://www.leadplus.co.jp/blog/design-pattern-for-user-e...
-トップページレイアウトの改善
-https://www.webcreatorbox.com/tech/video-background
***YouTube掲載する際のテキスト例
-タイトル
Mutedscapes - Solaria Terminal Building (4K TimeLapse)
-説明欄
[Equipment]
Sony ILCE-7M3, FE 24-70mm F4 ZA OSS
[Settings]
ISO 640, 52mm, f/20
[DateTime]
12 September, 2023 - 8:52-10:12
[Address]
2-1-1, Tenjin, Fukuoka-Shi Chuo-Ku, Fukuoka, 810-0001, Ja...
~
~
**2023.12.8
***最終審査
-トップページのバグ
-英語表記に統一
-ページごとの世界観の統一(TimeLapseページとPhotoページ)
-サイトの情報やコンテンツの拡充
-マップページのブラッシュアップ(レスポンシブ対応、ピンの...
-タイムラプスの奥行きを意識した撮影をより強く
***フォントの再調整
-Afacad(Regular 400)
-Roboto Condensed(Regular 400)
-Teko(Light 300)
-Rajdhani(Regular 400)
~
~
**2023.12.1
***Webサイト
-マップページ
作品に関心を持った方が、実際にビルに映る景色を現地で観察...
|#image(imac-mockup-map.jpg)|
~
~
**2023.11.24
***Webサイト
-タイムラプスページ
試作ではYouTubeのiframeでの埋め込みを試したが、コントロー...
|#image(imac-mockup-timelapse2.jpg)|#image(imac-mockup-ti...
-フォトギャラリーページ
撮影場所ごとに写真をカテゴリ分けできるボタンを導入するこ...
|#image(imac-mockup-photo.jpg)|#image(iphone-mockup.png)|
~
~
**2023.11.17
***YouTube掲載する際のテキスト例
-タイトル
Mutedscapes - No.001 (4K TimeLapse)
-説明欄
『九州産業大学』
[場所]〒813-0004 福岡県福岡市東区松香台2丁目3−1
[日時]2023年9月24日 16:29-17:36
[機材]Sony ILCE-7M3, FE24-70mm F4 ZA OSS (LENS)
[設定]ISO 100, 40mm, f/22
~
~
**2023.11.10
***Webサイト
-トップページ背景に流れる映像の画質を向上
これまで圧縮の際にフルHDに縮小していたところを映像サイズ...
-ヘッダー等にグラスモーフィズムを採用
ヘッダーやセクション部分の背景にブラーや影をつけることで...
~
~
**2023.10.27
***Webサイト
-タイムラプスページのタイトルのサイズ変更
文字要素を小さくし、映像以外の要素は控えめに表示する。
~
~
**2023.10.20
***中間審査
-タイムラプス掲載ページの調整
--各動画ごとに1ページ
--YouTubeの動画タイトルの検討
--サイト上でのタイトルのサイズ感
--動画タイトルとサイト上での文字サイズや文字情報のメリハリ
--大画面で楽しめるように幅いっぱいで表示する
--動画埋め込みの方法の研究
--4Kでの掲載
-ヘッダーの文字サイズの縮小
~
~
**2023.10.13
***タイムラプス
-書き出した画像素材をタイムラプスへ変換・編集
--映像のブレをワープスタビライザーを使い軽減。
--変化の心地よい部分を抜粋。
--フェードによってループ再生にしても違和感がないよう調整。
~
~
**2023.10.06
***タイムラプス
-撮影した画像素材のレタッチ・書き出し
--雲が鮮明に見えるように、コントラストやハイライト、シャ...
~
~
**2023.09.29
***Webサイト
-概要ページ等のレスポンシブ対応
--フレックスボックスを使用し、横並びのキャプションと画像...
~
~
**2023.09.22
***Webサイト
誘目性の向上を目的としたスライドショーを設置。
***タイムラプス
西鉄福岡駅で撮影を実施。
~
~
**2023.09.15
***Webサイト
パララックスを活用し、トップページ下部に概説の配置を実施。
~
~
**2023.07.21
***Webデザイン案
-概要ページをトップページ下部に配置
パララックスを用いて、トップページより手前に概要ページを...
~
~
**2023.07.14
***各種アカウントの登録・開設
-YouTube
動画を高画質で視聴してもらうために使用する。当初は、Webサ...
-Instagram
写真は通常投稿、タイムラプスはリールで投稿を行う。ただし...
-Vimeo
Youtubeに比べ、動画埋め込みの際の自由度が高い。しかし、フ...
~
~
***メモ
-サイトの世界観の妨げになる埋め込み機能の再検討
-バグの原因になるためフォルダ名にスペースを使用しない
「Time Lapse」▶「TimeLapse」
-タイムラプスと写真の役割の明確化
-GIFやシネマグラフの検討
-長時間撮影や日没の撮影で時間の変化を強調
-タイムラプスと写真の同一項目で表示
-キャプションに撮影場所時間の明記
-ビルの歪みをPhotoshopで修正
-映像の自動再生
-受動的なサイトづくり
~
~
**2023.07.07
***Webサイト進捗
-トップページ
#image(mutedscape0714.jpg)
-ハンバーガーメニューの実装
#image(web-menu.png)
-フォトギャラリー
#image(web-photo.jpg)
~
***タイムラプス試作
#Youtube(9vvYAffKw1Q)
場所:九州産業大学2号館
撮影間隔:2秒
#Youtube(w34AXRHpbIg)
場所:福岡ダイヤモンドビル
撮影間隔:3秒
~
***写真試作
|#image(DSC00810.jpg)|#image(DSC00893.jpg)|
|#image(DSC00751.jpg)|#image(DSC07239.jpg)|
~
***メモ
-最終的にプロジェクト概要のスライドを制作
~
~
**2023.06.30
***メインタイトル案
-Muted Realities(静かな現実)
-Muted Existences (静かな存在)
-Muted Realms(静かな領域)
-Alternate Realities(別の現実)
-Mutedscape(静かな景色)※造語
~
~
***Webデザイン案
-ヘッダーを黒・透明度50%に設定
~
~
**2023.06.23
***撮影のアイデア
-構図
上を見上げるような構図
#image(DSC00901.jpg)
-撮影詳細
間隔:2秒
撮影枚数:1800枚程度
撮影時間:1時間
映像時間:1分程度
~
***背景と目的の修正
-背景
近年、福岡市では都市開発が進み、天神ビッグバンや福岡コネ...
-目的
情報量が多く騒がしい世の中、私たちは気付かぬうちに数多く...
~
~
**2023.06.16
***Webデザインのコンセプト
ビルのイメージとして直線や直角など無機質な雰囲気を基調に...
~
~
**2023.06.09
***中間報告メモ
-試作
--写真の試作掲載
--窓ガラスの狭いビルを撮影した試作動画の掲載
-Webサイト
--撮影場所をマップにまとめる
--方角を記載
-背景・目的
--ガラスの多いビルが増えること=景観向上にはならない
--地震などのリスク面も最終レポートでは記載
-撮影・編集
--時間経過を遅くすることで見る人に気づきを与える
--窓ガラスを切り取り撮影すると比較にならないため全体像と...
--枚数を多く撮影し、心地よい部分を切り取る
--雨上がりや雨の降り始めは雲の動きがあるためその時間を狙...
--北に背を向けて撮るなど方角を意識して撮影
--エリア別に撮影
~
***ガラス張りのビルの増加した要因
-電気代削減
自然光を取り込めるため人工光の使用を減らせる。
省エネ効果が期待できる。
-ビルの軽量化
コンクリートの外壁は重く膨大なコストを要する。
ガラスを使用することでコスト削減になる。
-安全性
地震や台風の影響を受けにくいカーテンウォール*¹の採用。
ガラス張りのビルを建設しやすくなった。
~
*** *¹カーテンウォール
建物において構造上の荷重を負担しない、間仕切り壁などと同...
引用元:東建コーポレーション"カーテンウォール - 建築用語"
https://www.token.co.jp/estate/useful/archipedia/word.php?
~
***ガラス張りのビルの増加による弊害
-反射光によるトラブル
https://www.nikkei.com/article/DGXNASFK2801Q_Y0A720C10000...
-防音性の低下
視界が遮られるタイプの壁と比較してガラス壁は50~100%も音...
https://www.estie.jp/products/finder/magazine/article/gla...
-プライバシー面での懸念
~
~
**2023.06.02
***試作
#Youtube(slGUC4uGmaw)
-撮影設定
撮影間隔:10秒
撮影枚数:600枚
動画秒数:20秒
~
**2023.05.26
***試作
#Youtube(WVrbd3NVYko)
-撮影設定
F値:F/9
ISO:500
露出プログラム:絞り優先
撮影間隔:15秒
撮影枚数:600枚
動画秒数:20秒
~
#Youtube(ebfYH1IycC4)
-撮影設定
F値:F/10
ISO:500
露出プログラム:絞り優先
撮影間隔:7秒
撮影枚数:500枚
動画秒数:17秒
~
~
**2023.05.19
***コンセプト
//ここ数年で福岡は、航空規制の緩和などもあり都市開発が加...
//そこで景観保全
//ビルが増えることは果たして、景観の向上なのか。それとも...
//一面ガラス張りなど、窓の面積が比較的広いビルが増えてい...
~
***アイデア案
-都市高速をタイムラプスで撮影
~
***試作
#Youtube(3IhFJA01lhg)
-撮影情報
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サイト上でビル巡りマップを制作
-タイムラプスで雲の動きを撮影
--30分程度、試験的に撮影
-ビルに映る月や雨の水滴の撮影
~
~
**2023.04.29
***試作
|#image(IMG_1929.jpg)|#image(IMG_1926.jpg)|#image(IMG_193...
-撮影機材:iPhone 12
-撮影場所:博多区
(05.11更新)
~
***アイデア案
-ビルの窓ガラスに反射を生かした写真
--なぜビルなのか?
→格子状、垂直、窓の面積が広い
--何が反射している様子を撮るのか?
→日常、天候、時間、色相、明暗
--なぜ福岡で撮るのか?
全国の都市で撮影するうちの一つとして、今回は福岡を取り上...
(05.10更新)
~
***メモ
-写真
--錆
--トタン
-3DCG
--日常品に芝生を
便利な世の中になる一方で、緑を見る機会が減っている。
緑はストレスを緩和したり、目の疲れを和らげる効果もあると...
3DCGであればBlender。写真合成ならPhotoshop使用。
~
**2023.04.21
***アイデア案
-都市高散歩ブラッシュアップ案
--撮影機材をiPhoneから一眼レフカメラに変更
--ロゴやフォントのリデザイン
--写真集の文字情報等の拡充
--Webサイトの再構築
--Googleアナリティクスの活用
--写真の世界観の統一
--老朽化をより感じ取れる写真集
→老朽化を強調したい写真はモノクロで表現
→新しい建物等との対比
~
-緑だけを集めた図鑑 or 写真集
--緑には目の緊張を緩和させたり、心を穏やかにする効果がある
--写真として取り上げることで日常に隠れる緑を意識するよう...
~
***現状調査
-新緑の季節 緑色を見るとどんな効果がある?
https://weathernews.jp/s/topics/202104/270295/
-「緑を見ると目にいい」って本当?
https://weathernews.jp/s/topics/201905/200125/
~
***先行事例
-青い生きもの図鑑
→色を統一する面白さ
https://amzn.asia/d/fopU4pu
~
**2023.04.14
***アイデア案
-写真
--環境に配慮された建築の図鑑制作
→フォトギャラリーサイト、図鑑(写真集)、マップ
--落とし物をひたすら撮る
//--都市開発で変わりゆく福岡を記録
--自動販売機・バリアフリー・踏切・廃墟
→写真集、マップ(例)自動販売機でいうとどこに何が売ってい...
-グラフィックデザイン
--福岡都市高速 インター出入り口等のシンボルマーク制作
→パンフレット等
(04.14更新)
~
-メモ
工事現場、鉄骨、足場
看板、標識、ピクトグラム、ロゴ、タイポグラフィ
福岡っぽい
色別やジャンルで分類
色で見る福岡「福岡×色」
サイトは白を基調とする
→写真の色彩を引き立たせる
(04.18更新)
~
***現状調査
-海外事例に学ぶ。“色”で社会問題に光を当てた啓発動画
https://insights.amana.jp/article/24273/
-シンボルカラー…病気や障害、色で啓発
https://yomidr.yomiuri.co.jp/article/20160615-OYTET50039/
~
//***XXXXXXX
//-
//~
//~
//**20XX.XX.XX
//***XXXXXX
//-
//~
//***XXX
//-
//~
//~
参考
-https://www-w3schools-com.translate.goog/html/html_intro...
[[Google:html5 semantic template]]
~
~
~
ページ名: