monokara. - あなたの思い出、修復します -
白黒写真のカラー化によるソーシャルデザイニング
Keywords:Photo, Web Design, Video, SNS, Back in time
↓本企画について簡潔にまとめたページです。
伊藤晃生/前期プレゼン
プロジェクトの概要
本研究の目的
私たちの思い出を記録してくれる物、「写真」。今では、電子技術が発達して写真その物を見なくなり、スマートフォンで画像を保管・共有する時代になってきている。誕生当初の写真は、白と黒の濃淡でしか描写できなかったことからカラフルな表現が不可能だった。しかし、現代の技術が進歩し、デジタル・AI 技術によって一般人で簡単に着彩できるようになってきた。だが、現時点でのAI の処理では、着色の再現度が低く、人間の目には、まだ違和感が残る状況だ。当時を生きた方々に話を聞き、手動で着彩した物と比べても一目瞭然だ。
また、時代が進むに連れ、地域の歴史を記録してきた白黒写真は、実際に何色だったか記載された文書があまり無いことを知った。記録を維持する者がこの世から去り始め、後継人がいないことから誰にも知られることはなく、場合によっては、文化・歴史その物自体が消失してしまう可能性が非常に高いと感じた。
研究目的
パソコンと液晶ペンタブレットを併用して、白黒写真カラー化というツールを使用し、デジタル技術や地域の特色を知って学べる環境造りを確立する。それにより、地域住人でさえ知られていなかった地域の文化・歴史の魅力に関する情報を発信することで記憶の風化を防ぐ。そのためにも幅広い年齢層に周知することが必要だ。より効果的に本研究を行うには、年齢層に沿って現実・仮想の2 つの空間で情報を発信しなければならないと気付いた。
コンセプト
「各年齢層に合った情報の発信」
情報を発信する上で年齢層に合わせた発信方法が必要だと考えた。まず、インターネットが使えない高齢層は、実際に対象地域でイベントを開催する。来場することにより、当時の記憶を蘇らせながら互いにイメージしやすいようにライブビューイング型の着彩パフォーマンスも同時に行う。逆にインターネット環境に慣れた若年層は、WEB という仮想空間でイベントを実施する。その場に居ながら瞬時にSNS で情報を拡散することが可能であるため、気軽に参加しやすい環境が実現できる。これらの点を踏まえて、「各年齢層に合った情報の発信」を注意しながら進めていく。
また、各人の忘れられた記憶を白黒写真カラー化によって思い出すという意味を込めて本研究の名称を「 monokara. あなたの思い出、修復します」と表記した。白黒を意味する「 ”モノ”クローム”カラ”ー」と「数々の思い出”から”あなたへ捧ぐ」の文字を取って覚えやすくシンプルにした。
実験
- AIの場合
近年、話題となったAI でも着彩を試みた。4 つの研究所が開発したAI を使用してみたがテスト段階で時代にそぐわない色を表現してしまったり、色の境目が認識できないという結果に陥ってしまった。実際に当時を生きた方の話を参考に手動で着彩した画像と比べるとその差は一目歴然だ。しかし、一部のAI を見ると実際の雰囲気に近い色が検出されてることから色のヒントとして役立ちそうだ。よって、今後の着彩作業は、証言や資料を基に手動で行うことに決めた。
- 手動の場合
まず、写真をデジタル化しなければならない。方法としては、タブレット端末で撮影し、一枚づつ読み取る。複数枚一括して取り込めるスキャナーでは、光が強すぎて原本のインクが劣化してしまう恐れがあることから使用を禁じた。
元写真は、劣化が進んでいることから一旦編集しやすいように白黒に置き換える。色あせ・千切れた部分等を修復した後に着彩。依頼者の記憶が主な色のヒントになるが思い出せないことも考えられるため、当時を記録したカラーの写真や生活背景が分かる雑誌の情報を元に着彩する。
AI と比較すると手動の方が色合いも良く、自然な描写に近づいたと感じた。また、話し合いながら着彩することでAIでは感じられない時代背景を把握できることが分かった。
制作
- イベント
上川端商店街振興組合と連携して、新型コロナウイルス感染症拡大の影響で中止になった博多祇園山笠の白黒の記録写真をカラー化し、川端通商店街の一角で着彩前後の比較写真展と着彩ライブビューイングを行う。期間は、コロナウイルスが落ち着いたであろう2020 年10 月中旬~ 11 月下旬の2日間の予定だ。
- ロゴ
依頼者の話に寄り添い、正確な色を聞き出す温かい雰囲気を表現するために丸ゴシック体を使用した。また、「ono」とアーチを組み合わせることで依頼者が懐かしんで笑顔になる顔を視覚的に表している。ロゴの最後に終止符のピリオドを配置することで元写真をデジタルで修復するため、二度と劣化しないことも表した。
フォントについては、愛着ある福岡から本企画が誕生したことを意味し、日本語フォントを「筑紫A丸ゴシック」。英語フォントは、幅広い世代に情報を広げていきたい気持ちを子供向けパッケージデザインや食品で使われている「Linotte」を使用した。
- WEBサイト
対象地域で開催するイベントの当日情報や着彩ライブビューイングも現地とWEB で連動して見れる仕組みを取り入れる。また、WEB 業界では、モバイルファーストの制作が主流なことからタブレット端末の操作性を優先した、レスポンシブデザインに全デバイス統一。PC ユーザーでも分かりやすいように「menu」も表記することで混乱を避ける。全体的に余白を生かしたシンプルな構造により、情報を捉えやすい印象を感じ取れるよう工夫した。
まとめ
テスト段階として本学学外連携課の方から自身の幼少期の白黒写真を修復・着彩した。完成品をお渡しするとカラー化されていることに驚かれた。後日、ご家族に見せたところ非常に感謝され、昔の思い出を思い出されたようでたくさん話されたとのことだった。この研究は、文化・歴史の周知・維持の目的以上のことが期待できるだろう。
機材・ツール
機材
- パソコン
- スマートフォン
- カメラ(SONY DSC-RX100)
- ビデオカメラ(SONY HDR-CX680)
使用する予定のツール
- Adobe Photoshop
- Adobe Illustrator
- Adobe After Effects
- Adobe Premiere Pro
- Atom
- Filezilla
- Clip Studio Paint
- 1940~1980年代の風景図鑑
- CamScanner
プロジェクト管理
スケジュール
旧前期合同審査用データ
中間報告用データ
ToDo
商店街連合の方々に連絡(説明・空き店舗の確認・実施許可の確認)- 白黒写真の資料収集(卒研に関することも説明)
- サーバー、ドメインの使用確認
テスト制作プロジェクトの流れを確認スケジュール表の作成
2020.07.25
ロゴ
さすがに日本語フォントで英語を定義すると見た目がが不自然になる為、英語フォントに置き換えた。
日本語フォントは、変わらず「筑紫A丸ゴシック」にして、英語フォントを「Linotte」と呼ばれる子供向けパッケージデザインや食品で使われている物にした。
2020.07.16
ロゴ&タイトル
ずっと悩んでいたロゴ・タイトルの最終的な形がある程度決まった。
「モノクロームカラー」と「思い出からあなたへ」のキャッチフレーズを含んだロゴ「monokara.」。日常生活でよく見かけるゴシック体を使用し、角を丸くすることで依頼者にに寄り添う温かみを狙っている。「ono」とウェーブを組み合わせることで白黒写真着彩後、依頼者が懐かしんで笑顔になる雰囲気を表現している。ロゴの最後に終止符のピリオドを配置することで劣化した写真をデジタルで修復するため、二度と劣化しないことを表している。愛着あるこの街、福岡でこの企画が始まったことをアピールするため、福岡の縁ある地名が入った筑紫A丸ゴシックを選んで制作した。
WEBデザイン
ロゴができた為、前回制作したワイヤーフレームを元にWEBデザインを制作した。
近年、WEB業界では、モバイルファーストの制作が主流なことからタブレット端末の操作性を優先して制作するおとにした。その為、PCで一般的に使われるメニューバーを無くし、ハンバーガーメニューを全デバイスに表示するように仕掛けた。PCユーザーでも分かりやすいように「manu」も表記する。全体的に余白を生かしたシンプルな構造により、情報を捉えやすくし、スッキリした印象を感じ取れるよう工夫した
卒業研究前期報告書準備
2020.07.06
作業台
商店街内で作業する机を業者さんに作っていただけるよう相談中。
相談用に使う仮アイデア図を提示。
LIVEビューイングも同時に行う為、モニターを通路側に見せる予定。
2020.07.04
ロゴ仮制作
イメージノートに書き出したロゴのアイデアをデータ化・改善し、仮のロゴスタイルを制作した。
今のところ3枚目にある上右端のロゴをベースにより装飾を増やす予定。
ロゴを制作する上で幾つか注意することにした。
2020.07.03
中間報告
中間報告用のPDFデータをgoogledriveで共有開始。
発表データ
報告後の気付き・アドバイス
- WEBのオンラインを利用して、複数人が1枚の写真を同時に着彩する機能を使うこともあり。
- 映像のカラー化も視野に入れることをオススメ
- サイト・ロゴも同時に制作することをオススメ
- 町の人と話し合いながらカラー化することで人と人との繋がりができたり、過去と今の比較で懐かしむことや気付くことができる。
2020.06.26
会談
中洲にある松月堂ビル2F中洲町連合会にて会長の南原茂議員と渡辺慶次郎事務局長と挨拶並びに新企画の紹介をした。
その後、場所をずらし、木下和道事務長にも挨拶・企画の説明をした。
その後も場所をずらし、副事務長の正木研次様とも挨拶・企画の説明。
会談後、7月4日に行われる役員会議で本企画の紹介を今回お会いした皆様自らが紹介していただけることになった。
2020.06.19
変更
最終的な本研究のタイトルを以下のようにしようと思う。
「PhotoRerise in 博多祇園山笠」
2020.06.18
気付き
現時点で私:伊藤が白黒写真を着彩、書き出しするまでの速さについて気付いた。
1枚に対して最短30分、最高2~3時間。
1日最大で2~3枚の作業が可能だと分かった。
2020.06.17
予定
前プロジェクト「福岡県アニメ聖地巡礼」でご協力してくださった福岡市議会議員自由民主党:南原茂議員と再びお会いできることになった。
企画変更や新企画の取り組み等についての説明をする予定だ。
時間・場所は、6月26日金曜日午前11時から中洲にある松月堂ビル2F。
2020.06.16
制作
- WEBデザイン
WEBサイトの骨組みを制作中。
同時進行でビジュアルも思考中。
- ロゴ
タイトルが大幅に変わる為、視覚的な形の案のみの制作中。
タイトルは、「フォトリライズ in 博多祇園山笠」等のフォトリライズ をメインタイトルにして、inの後をサブタイトルにすることで今後も各地でイヴェントがあるかもしれないという継続性を感じられるようにしようと考えている。
- チラシ
現時点では、視覚的な雛形を複数制作中。
(編集中)
2020.06.15
連絡
着彩完了した2つのカラー化画像をL判写真光沢紙で印刷し、データを提供してくださった学外連携課山崎様にお渡しした。
大変感激していただいたようで私:伊藤は、嬉しい気持ちでいっぱいだった。
その後、山崎様は、カラー化写真に写っていた当時の男性に連絡し、データをお渡ししたそうだ。その時に喜んでくださったことを後日教えてくださった。
2020.06.13
着彩後
頂いたデータの着彩をphotoshopとClip Studio Paintを使用して完了。
作業中、着彩方法を大きく変更した。
まず、今までレイヤーに直接着彩しており、乗算モードを使用していた。
だが、作業の効率化を図る為、今回からクリッピングマスクを使用した上でソフトライト・オーバーレイモードを活かすことで自然な表現になり、色を写真の雰囲気に馴染んだ。
また、空気遠近法を活用し、遠いものは薄く青みがかった色にするアレンジを加えることで本当の色というより全体の雰囲気に非常に馴染んだ。
2020.06.11
進展
学外連携課の方から貴重な博多祇園山笠の写真データを頂いた。
まずテスト段階としてこの画像を修正・着彩していこうと思う。
2020.06.09
行動
WEBサイトのワイヤーフレームを考えてみた。
先日書いたメモ書きをヒントにモバイルファースト(スマホサイズ優先)の考えでワイヤーフレームを書き起こした。
PC・モバイル共にメニューバーを表示させず、スマホ独特のメニューマーク(ハンバーガーマーク)を両画面でも表示させるようにするか考え中。
現在考えている事
- 作品紹介
作品紹介については、ランディングページ(ホーム)に代表的なカラー化画像3枚を表示させ、ボタン「他の作品について」を押すと別ページに飛ぶという手法を用いろうと考えている。
これは、パターンC(バーチャル上での展示会)も想定してのやり方だ。
- SNS・ニュース
他サイトのランディングページを参考にしたところ、ニュース(作業・近況報告)は、ブログ形式で投稿されていた。
しかし、ブログ機能を開設した所で特に報告することもないのでSNSを使用して、イベントの作業進行や当日の来客者の入り具合・カラー化作業のプリ映像等を紹介する広告的役割にしようと考えている。
多分、ブログを使うよりこの使い方の方が一番良いと考えられる。
2020.06.08
思考
WEBサイトの構成について考えてみた。
2020.06.04
状況
商店街連合との連絡をする前に元々前研究の日程・役割調整等をして頂いていた橋渡し役の市議会議員様に現状況を説明した上で、一緒に商店街連合の皆様と話し合いに行く予定だ。
その報告書を制作し、添削中。
2020.06.03
ランディングページ参考
モノカラー誕生50周年記念
ラムネ
KINOTOYA THE CAKE
個人的になるべく視覚的動きが感じられ、面白味があるサイトを制作したいと考えた。
2020.06.02
変更
現時点の研究タイトル「過去の世界へ入れるタイムスリップ体験会」を変えようと考えている。場合によっては、イベント実施中に「本当にタイムスリップできる」といった誤った情報に捉え混乱させてしまう恐れがある為、研究タイトルを「モノクロ→カラー in 博多祇園山笠」にしようと思う。
博多祇園山笠を主体にすることでインパクトを増す。
「過去の世界へ入れるタイムスリップ体験会」
↓
「モノクロ→カラー in 博多祇園山笠」
2020.06.01
WEBデザイン
本研究の取り組みや告知を兼ねたWEBサイトも制作する予定だ。
今日に至るまでWordPress・Pukiwiki等のCMS媒体を活用したWEBサイトを制作しようと試みたがこれらの取り組みは、不要であることに考え着き、シンプルなHTML・CSSのWEBサイトを制作することにした。
なぜなら、本研究の一時的な広告的運用でしかWEBサイトを使用しない為、第三者が情報を書き込んだり訂正することは、一切ないため不必要と考えた為である。
WEBサイトのレイアウトや方向性
- レイアウト
WEBサイトのレイアウトをランディングページにすることを検討している。
ランディングページにすることで通常の複数ページ型サイトよりサイトのデザイン(外観・操作・レスポンシブ)性が抜群に向上すると考えた。
また、本研究のサイトを見る方々は、スマートフォン所持者が多いと考えられる為だ。
というのも、告知ポスターや商店街のSNSアカウントの協力で本研究のサイトへ誘導していただく予定な為、モバイルファーストのデザインにした方が良いと推測される。
- 方向性
ここで再確認だがWEBサイトを創る目的は、本研究のイベントに関する紹介・一時的な広報的役割を第三者に知ってもらう為だ。
2020.05.30
追加
テーマの変更を記述し忘れていた為、ここで紹介する。
5月上旬に考え着いたことだが、テーマを「博多祇園山笠」に固めることにした。
その為、カラー化作業の対象を歴代の博多祇園山笠に関連する写真にすること検討している状況だ。
- なぜ博多祇園山笠なのか?
今回、協力していただく予定の上川端商店街は、戦後初めて統一した山笠が行われた伝統ある商店街です。今回の新型コロナウイルス感染拡大による影響で博多祇園山笠が中止になり悲しい状況に陥っていると推測された。
そこで、以前私が行っていた研究「福岡県アニメ聖地巡礼プロジェクト」で貴重な時間を割いて説明を聞いて頂いたり、協力を考えくださった商店街の方々にとりわけ当時の山笠の記念写真(白黒)をカラー化し、喜んでいただきたいと思った為だ。
2020.05.28
相談
学校法人中村産業学園総務部学外連携課の山崎龍太郎様と対面で今後の方向性についての相談と博多祇園山笠についての歴史を井上友子研究室で教えて頂いた。
飾り山の高さ・山笠手拭文化の発祥及び色分け理由・胡瓜断ちの真相等非常に興味深い山笠の歴史を紹介してくださった。
その際に西日本新聞社発行本「博多祇園山笠大全」を貸してくださった。
2020.05.25
調査
本研究は、なぜワークショップ型が良いか再び考察した。
- ワークショップとセミナーの違い
ワークショップとは、ファシリテーター(進行役)に助けを借り、参加者自らが自発的にモノ・コトを考え、学習・問題解決等をする参加型グループ学習の一環である。その逆ともいえるセミナーは、参加者が指導者の指示によって非自発的に行動することだと分かった。つまり、元となるモノ・コトを真似てスキルを高める一種の行動だともいえる。
- 結論
こうしたことから私が本研究でワークショップ型イヴェントにした訳は、「文化×創造×学習」を実現したいと思ったからだ。
つまり、博多祇園山笠の歴史を来場者自身がデザイン技術を用いて自分なりに楽しみながら知って行き、当時の山笠や時代背景を感じるイヴェントを目指したいと考えワークショップ型にすることを再確認した。
2020.05.22
追加
白黒写真をデータ化する方法をいくつか考えた。
- スキャナー
大切な写真を一時的に預かり、所属しているゼミ室のスキャナーを使用してデータ化する。スキャナーを使用することで1回に複数枚スキャンすることが可能で時間の効率が良く作業できる。しかし、預かることで写真が劣化・紛失する恐れがあるので個人的には怖い作業だ。 - 画像取り込みアプリ「CamScanner」
このアプリは、取り込んだ画像データを自動的に歪み調整・彩度調整をしてくれる優れ物。彩度調整は最終的に手動で再度するが歪み調整は、手動ですると大分時間がかかる為、ありがたい。また、写真を預からずともその場で撮影できるため紛失・劣化の心配がない。その代わり、1枚づつでしかスキャンできない為、スキャナーと比べると時間がかかる。
結果として本研究では、安全性と効率を重視した場合、CamScannerを使用した方が好ましいと考えた。
2020.05.20
変更
top画像の白黒とカラーの境界線を変更。
状況
提案書を作成し、完成次第、組合の方々と再度連絡・確認してから総会等の先方の集まりに参加して自ら説明する予定。
現段階で組合の方々は、本企画の存在をまだ知らない。
2020.05.18
追加
プロジェクト概要に活動内容・期間・場所の情報を追加。
新たにリンク内に現在モノクロ写真カラー化の業務を行っている企業を掲載。
2020.05.14
変更
提案書の文章構成を変更。
簡潔で分かりやすく書き換えた。
今後この提案書を元に商店街の方々と話し合いを進めていく予定だ。
今のうちに中間発表に備える。
2020.05.13
状況
関係者とデータのやり取りをする為にGoogle Driveを活用し、リンク限定で編集できるようにした。
書類関係の訂正も編集中同時にデータを扱うことができる為、大変便利だ。
2020.05.11
状況
上川端商店街振興組合様に送る提案書の作成に着手。
内容は、「目的、コンテンツ、活動内容、なぜ商店街なのか?、なぜ川端商店街なのか?、期間、効果、必要なコト・モノ、最後に、制作例」の10項目に分け、提案書を制作した。
PDF形式
2020.05.09
変更
・タイトルを変更
「過去の世界へ入れるタイムスリップ展」
↓
「過去の世界へ入れるタイムスリップ体験会」
・内容
展示か着色体験を主体とするか悩んだ結果、両方を主体とするワークショップ形式にすることを決断した。
その為、写真展の「展」ではなく、展示と体験を融合させた「体験会」に変更する。
2020.05.07
現時点での最終形態について
現時点では、商店街の空き店舗を活用したイベント:パターンAが良いと推測される。
なぜなら、以前行っていたプロジェクト「福岡県アニメ聖地巡礼プロジェクト」でお世話になった商店街連合の方々と連絡が取りやすく、前向きに検討して頂ける可能性が高いためだ。
また、確定ではないが本学芸術学部ビジュアルデザイン学科馬場琳太氏の卒業研究と共同で空き店舗を使用する可能性が出てきたからでもある。
その為、以前行っていたプロジェクトの前任担当者:井上友子教授と今回共同で行うかもしれないビジュアルデザイン学科馬場琳太と彼の担当者:真島猛教授との合同で本研究を進めていくかもしれない。
現状
現在、上川端商店街振興組合(中洲川端商店街)関係者と連絡中。
中洲川端商店街は、戦後初めて山笠が行われた伝統ある商店街です。今回のコロナウイルス騒動で博多祇園山笠が中止になり悲しい状況に陥っていると推測される。
その為、当時行われた山笠の白黒の記録写真をカラー化し、コロナ騒動明けに商店街の皆さん・山笠関係者・福岡市民に元気を出してもらうイベントに変形する可能性も出ている。
2020.05.06
トップ画像変更。
2020.05.03
本研究の最終形態について
様々な問題が発生しても柔軟に対応ができるよう、幾つかのパターンを前もって定めることにした。
パターンA
- 商店街の空き店舗を利用して、白黒カラー化写真の展示会・カラー化体験教室(液タブを用いた)の2つのイベントを行う。
- なぜ商店街?
元々この研究は、「福岡県アニメ聖地巡礼プロジェクト」がコロナウイルスの影響で研究内容を変えて実行している。その為、以前協力してくださった法人様との連絡が着きやすい為。
また、商店街だとより一層「喜び度」を強く感じることができる為。
法人様・・・上川端商店街振興組合、福岡観光促進協議会、大刀洗町役場
パターンB
- 九州産業大学芸術学部アートギャラリーにて白黒カラー化写真の展示会・カラー化体験教室(液タブを用いた)の2つのイベントを行う。
- なぜアートギャラリー?
もし商店街の許可が下りなかった場合、大学内でイベントを実施するが可能だからだ。
対象を一般人から学生に範囲を変えることにより、若年層に対する「白黒写真」の見え方を変えたり・技術の面白さについて感じさせることができる為。
パターンC
- パターンA、B共に不可能な場合、最終的にバーチャル上でのイベントを実施する。
- もしも、コロナウイルスによる緊急事態宣言及び自粛要請が長引いた場合は、youtube生配信とWEBサイト等をで活用し、イベントを企てる予定だ。
ただしこれは、最悪の場合に実施するパターンだ。
2020.04.30
【調査】白黒写真のAI化による比較
※写真の男性:私の曾祖父(大日本帝国軍時代に出兵先で撮られた戦時中の写真)
- 解説
ORIGINAL:比較元の白黒写真
MANUAL:自分で着彩した画像
waseda uni.:早稲田大学が公開しているAIで処理した画像
Algorithmia:AIの研究団体が公開しているAIで処理した画像
siggraph2016:筑波大学が公開しているAIで処理した画像
colouriseSG:シンガポールの研究所が公開しているAIで処理した画像
- 比較
AIで処理した4枚と私自身が着彩した画像を比べると一目瞭然全く違う処理のされ方が分かる。
この中でも比較的に上手に処理されている画像は、colouriseSGと感じた。
背景の日本国旗以外は、全体的の雰囲気を上手く掴んでおり、色合いももしかしたら実際の色に近いと考えられる。
だが、やはりAIよりも手動で着彩した画像の方が正確な色がとらえられていると感じられる。
なぜなら、実際に自分自身が着彩した時に祖父と祖母から当時の状況を聞いたり、日本軍の制服等を調べるなどの聞き取り・調査をした為正確に色を表現していると考えられる。
空間の立ち位置の把握や服装によってのレイヤー分け等をしている為、後から色を置き換えるなどの変更が利きやす事に比べて、現代のAIでは、1枚の画像全体を同じレイヤーで自動着彩する為、変更が利きにくいことが分かった。
- 結果
本研究では、色のヒントとしてAI技術を活用し、手動によるグラフィックソフトを用いた白黒写真カラー化の最新技術を今後一つのツールとして使用することを決断した。
2020.04.28
【調査】白黒写真のAI化について
- 現状
現在のAI技術を用いて白黒写真をカラー化するとそこまでの違和感は無いがはっきりと色が載っていない印象が多かった。
人物より自然風景の写真は高確率でカラー化が成功している。
そもそも白黒をカラー化することが目的でAIが動いている為、破損個所の修正はしない。
しかし、AIにはある一定のパターンがあるようでわからない白黒部分をディープラーニングによって学習したのか迷わずすぐに着色してくれる。
正確な色かは分からないが色を仮置きしてくれるので手動で補正する時に作業効率が良い。