Delights of Change
天神の歴史とその魅力
- 谷口菜々子
- Keywords:Tenjin, history, change, delights_
- Webサイト
概要
これは何?
Delights of Change … 変化をポジティブな視点で捉え楽しむ
Delights ... 「喜び」「楽しみ」「魅力」
背景と目的
- 背景
福岡天神には福岡大空襲などの影響から歴史の長い建築物は少ないが、戦争により焼け野原となってしまった街から九州最大級の繁華街にまで発展した過程の歴史を知ることは天神を訪れる際に感慨深さなど様々なことを感じることができると考える。
- 目的
これらの背景から天神の歴史を紹介し、天神の歴史を知ることで知る前まで感じていなかった感慨深さ、楽しさを感じられることを目的としWebサイトの制作をする。
- 天神の歴史を知ることで分かる観光とは...
その土地に関する新たな知識や理解を得ることで、普段歩いている風景が単なる風景ではなく、過去や文化との繋がりやより感情的な繋がりを感じることができる。
また、昔の風景や生活様式を想像することができ、その土地の風景が物語の舞台となり、豊かな想像力や感情を広げることができる。
そして天神は福岡大空襲などの影響から歴史の長い建築物は少ないが焼け野原となってしまった天神天神が九州最大級の繁華街にまで発展した過程を知ることは観光する際に感慨深さなど様々なことが感じ取れると考える。
コンセプト
「Time Traveler's Guide」
サイトに訪れる人々をタイムトラベラーに見立て、天神町の歴史を年代別に紹介
成果物の仕様
Webサイト
制作ツール
プロジェクトの期間
4/14 ~ 7/21
サイトについて
- なぜこの年代なのか (4月1日の風景で製作します)
- 天神ビックバンとは
警固断層等のリスクがあるなか、更新期を迎えたビルが耐震性の高い先進的なビルに建て替わることにより、多くの市民や、働く人・訪れる人の安全・安心に繋がるもので、都心部の機能を高め、新たな空間や雇用、税収を生み出すプロジェクト-
まとめ
前期からイラストの修正や制作を進めることができた。
しかしWebサイトの公開が今現在エラーで動かなくなってしまっている為figmaで最終的な成果物を出すか、イラストの制作を進めると同時にエラーの原因、別の方法でも公開できないか探っていきたい。
調査
現状調査
先行事例
技法・技術情報
プロジェクト管理
スケジュール
ToDo
テーマの決定
スケジュール作成
背景の記入
目的の記入
コンセプトの決定
現状調査
先行事例の調査
技法・技術情報の調査
ワイヤーフレームの作成
今後のスケージュールの調整
HTMLやCSS、JavaScriptでWebサイトが作れそうか確認、難しそうな場合Figmaで作れそうか確認
配色について調査
概要集制作
イラスト下書き
イラスト制作
- 説明制作
進捗記録
2023.12.15
最終発表
2023.12.8
制作
- メインページと説明ページのレスポンシブ設定
- メインページのピンの位置調節
2023.12.1
制作
2023.11.24
制作
&image(): File not found: "history2030-10.png" at page "谷口菜々子/卒業研究"; &image(): File not found: "history-13.png" at page "谷口菜々子/卒業研究";
2023.11.17
制作
2023.11.10
制作
- 1964年、1990年、2015年、2023年、2030年のイラスト修正
↑ 1964年
↑ 1990年
↑ 2015年
↑ 2023年
↑ 2030年
2023.11.3
制作
調査
2023.10.27
制作
2023.10.20
後期中間発表フィードバック
- どうアウトプットするか早めに確認する必要がある
- 学科サイトを見てこのサイトを見たからイラストの街が天神と分かるけれど他の人は今のWebサイトを見て福岡の天神とわからないのでWebサイトのaboutページが必要だと感じる。
- スマホだと良いがWebサイトだとイラストが拡大されて全体が一度で見えないため変化がわかりにくい。Webサイトでもイラスト全体が見えるようにし、空白部分に説明などの欄というレイアウトでも良いと思う。
2023.10.13
制作
- 2023年イラストの修正
- 2030年イラストの制作
- 説明イメージレイアウトの制作
- informationに書くこと
- 住所・施工期間・関連サイト (今も開いている建物は開館時間)
2023.10.6
- 年代別にどんなカラー配色をするか
→その年代の流行色を取り入れる
- 1964年 パープル
- 1990年 ブルー
- 2015年 レッド
- 2023年 イエロー
- 2030年 グリーン
- ピンだけ色をかえる or 建物など全体的に色を変える
2023.09.29
制作
2023.09.22
制作
2023.09.15
制作
→
2023.07.21
制作
2023.07.14
制作
2023.07.07
前期発表フィードバック
- イラストが錯覚で曲がっているように見えるため修正が必要
- figmaで最終的な成果物として出す場合今サイトを触っている人が表示されるためそれも面白いが、そういう仕組みであることを知っておく必要がある。
→最終的な成果物としてはFigmaではなくWebflowを使いFigmaで制作した Webサイトを公開する形にする。
- サイトにロゴやマークといったものを載せた方がどういったWebサイトなのかわかりやすくなる。
- ピンをクリックしたら建物の説明を表示するピンが出るなど、このWebサイトにきた人がどういったことができるのかわかりやすく伝える必要がある。
- Webflowを使って公開するとあったが Illustratorでイラストの制作、Figma Webサイトの制作、WebflowでWebサイトの公開と段階が多いので、それぞれどの役割があるのかどれをどこでやり込むのか確認が必要。
- 学科サイトの背景・目的に歴史についての記述がないため、「観光地はないと言われているけど本当はある」という伝わり方になってしまっている。
作業
2023.06.30
制作
2023.06.23
イラストの制作調査
2023.06.16
調査
2023.06.09
調査
2023.06.02
中間発表フィードバック
- 今サンプルとしてfigmaで作成しているがしっかり動けているのでHTMLやCSSを使うのも良いが、無料で取り組んでみやすいFigmaでここまでサイトを制作できることを紹介するサイトとしてFigmaだけでWebサイトを作ってみるのも良いかもしれない。
- 1番過去で1964年とあるがイラストを描くときに参考になる写真はあるのか
→一部写真がないものがあるため想像上でイラストを描く建物も出てきてしまうが、写真がないからこそイラストに描き起こして紹介していきたい。
- Webサンプルとして作成したものの中にアコーディオンメニューがあるが実際にHTMLやCSSで作ることはできるのか ↓
- アコーディオンを作成しようとした先輩は挫折した方も多く難しい。Webサンプルとして作成したものをHTMLやCSS、JavaScriptで制作しようとするとイラストを描くのも大変だがWebサイトを作るだけで結構大掛かりで大変な作業になる。このWebサイトのサンプルをHTMLやCSSで実際に作れそうか、確認が必要
- スケジュールについて、1ヶ月に1つの年代を制作すると言っていたが、作成するにつれイラスト調など変更したくなってきてしまうため、年代別に作業を進めるのではなく、すべての年代のイラストの下書きを書いて、すべての年代のイラストを書き起こすなど、同時進行で進めていく方がいい。
学科サイトの更新
制作
2023.05.26
技法・技術情報集め
Webサイト制作
2023.05.19
資料集め
天神についての調査
その他
- ターゲットの絞り込み
- 地域の住民
- 天神町に訪れる人⚪︎
- 歴史や文化に興味のある人々
- 学生や研究者
- 地域への関心を持つ人々
- 観光客
- 背景である天神の歴史の認知度の調査
2023.05.12
資料集め
2023.05.05
資料集め
2023.04.28
研究テーマの深堀り
2023.04.21
研究テーマの深堀り
天神についての歴史、調査
2023.04.14
卒業研究テーマ候補
- 福岡(天神?)の歴史についてのWebサイトの作成。アイソメトリックやスライドさせ下に行くにつれ近代へ近づくような構成など、分かりやすく親しみやすいデザインを目指す
- 日常の起源の紹介。花やプラスチックやPC、道路に学校など普段何気に使ってる、見ているものの起源や制作方法などを紹介
現状調査