谷口菜々子/卒業研究

Delights of Change

天神の歴史とその魅力

• 谷口菜々子
• Keywords：Tenjin, history, change, delights＿
• Webサイト

概要

これは何？

• 天神の歴史を紹介するサイト

Delights of Change … 変化をポジティブな視点で捉え楽しむ
Delights ... 「喜び」「楽しみ」「魅力」

背景と目的

• 背景
  福岡天神には福岡大空襲などの影響から歴史の長い建築物は少ないが、戦争により焼け野原となってしまった街から九州最大級の繁華街にまで発展した過程の歴史を知ることは天神を訪れる際に感慨深さなど様々なことを感じることができると考える。
  
  
• 目的
  これらの背景から天神の歴史を紹介し、天神の歴史を知ることで知る前まで感じていなかった感慨深さ、楽しさを感じられることを目的としWebサイトの制作をする。
  
  
  • 天神の歴史を知ることで分かる観光とは...
    その土地に関する新たな知識や理解を得ることで、普段歩いている風景が単なる風景ではなく、過去や文化との繋がりやより感情的な繋がりを感じることができる。
    また、昔の風景や生活様式を想像することができ、その土地の風景が物語の舞台となり、豊かな想像力や感情を広げることができる。
    そして天神は福岡大空襲などの影響から歴史の長い建築物は少ないが焼け野原となってしまった天神天神が九州最大級の繁華街にまで発展した過程を知ることは観光する際に感慨深さなど様々なことが感じ取れると考える。
    
    

コンセプト

「Time Traveler's Guide」
サイトに訪れる人々をタイムトラベラーに見立て、天神町の歴史を年代別に紹介

成果物の仕様

Webサイト

制作ツール

• Adobe illustrator
• Figma
• Figside

• Studio
• Webflow
  
  

プロジェクトの期間

4/14 ~ 7/21

サイトについて

• サイトに掲載する建物に関する調査

• なぜこの年代なのか (4月1日の風景で製作します)
  • 1964年　町名が天神となる
  • 1990年　都心機能向上と天神流通戦争により街並みが変化
  • 2015年　天神ビックバン開始
  • 2023年　現在
  • 2030年　天神ビックバン竣工

• 天神ビックバンとは
  警固断層等のリスクがあるなか、更新期を迎えたビルが耐震性の高い先進的なビルに建て替わることにより、多くの市民や、働く人・訪れる人の安全・安心に繋がるもので、都心部の機能を高め、新たな空間や雇用、税収を生み出すプロジェクト-

まとめ

実際にサイトを制作し今の天神の前の姿を知ることができるWebサイトを制作する事ができた

調査

現状調査

• 九州一の商都・天神はどうやってできたのか？
• 「よそ者」拒まず　福岡・天神、九州一繁華街への道
• 変化する「ふくおか都心」
• のったよ! ふくおかタイムスリップ号
• 画像著作権に関して
  
  

先行事例

• 可愛い！動く！見ているだけで癒されるアイソメトリックなイラストを使用したサイト5選
• ウクライナの自動車保険のサイト
• ボラギノールタウン
  
  

技法・技術情報

• Figma とは
• Figma 検索してスキルアップ
• Figmaアコーディオン作成方法
• JavaScript
• イラスト初心者がアイソメトリックイラストを描く
• 流れがわかる! アイソメトリックイラストの描き方
• ハンバーガーメニューがステキなWebサイト10選
• カラーユニバーサルデザイン推奨配色ガイドブック
  
  

プロジェクト管理

スケジュール

• スケジュール
  
  

ToDo

• テーマの決定
• スケジュール作成
• 背景の記入
• 目的の記入
• コンセプトの決定
• 現状調査
• 先行事例の調査
• 技法・技術情報の調査
• ワイヤーフレームの作成
• 今後のスケージュールの調整
• HTMLやCSS、JavaScriptでWebサイトが作れそうか確認、難しそうな場合Figmaで作れそうか確認
• 配色について調査
• 概要集制作
• イラスト下書き
• イラスト制作
• 説明制作

2023.12.22

制作

• メインページと説明ページのレスポンシブ設定
• メインページのピンの位置調節
• 2030年の画像をイラストに変換
  
  

2023.12.15

最終発表

• 概要集
  
  

2023.12.8

制作

• メインページと説明ページのレスポンシブ設定
• メインページのピンの位置調節
  
  

2023.12.1

制作

• aboutページの改善
• 説明制作
  
  

2023.11.24

制作

• 概要集制作
• aboutページの制作

• 歴史の説明ページの制作

&image(): File not found: "history2030-10.png" at page "谷口菜々子/卒業研究";　 &image(): File not found: "history-13.png" at page "谷口菜々子/卒業研究";

2023.11.17

制作

• aboutページの制作
• 概要集制作

2023.11.10

制作

• 1964年、1990年、2015年、2023年、2030年のイラスト修正

　
↑ 1964年

↑ 1990年
　
↑ 2015年

↑ 2023年

↑ 2030年

2023.11.3

制作

• 1964年イラストの制作

調査

• 載せる建物について
• studioモーダル方法
  
  

2023.10.27

制作

• 1990年イラストの制作
  
  

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

制作

• 2015年イラストの制作

2023.09.22

制作

• 試しにFigmaをサイトに変換
  
  

2023.09.15

制作

• 2023年イラストの修正

→

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年イラスト制作

2023.06.23

イラストの制作調査

• Google Earth建物の高さを調査
• パルコ外観
• アイソメトリック（角度）ショートカットキー設定
• アイソメトリックの円の書き方
• 2023年イラスト制作 参考画像

2023.06.16

調査

• イラストの雰囲気 Pinterest
• カラー配色
• カラーユニバーサルデザイン推奨配色セット
• カラーユニバーサルデザイン推奨配色セットガイドブック
• カラーユニバーサルデザイン推奨配色セットver.4
• FigmaをWebサイトにする方法
  • framer = レスポンシブができない
• Webflow
  
  

2023.06.09

調査

• Figmaからコーディング！書き出し・CSSの各プロパティの値やアニメーション情報の取得法まで
• App Builder を使って、FigmaのデザインをHTMLコードへ変換する
• Figmaからコーディングする具体的な方法
• FigmaのデザインをそのままWebサイトに変換＆公開できる「Figside」を使ってみた！
• デザインがほぼそのままWebサイトになる時代が来てるぞ...！
  
  

2023.06.02

中間発表フィードバック

• 今サンプルとしてfigmaで作成しているがしっかり動けているのでHTMLやCSSを使うのも良いが、無料で取り組んでみやすいFigmaでここまでサイトを制作できることを紹介するサイトとしてFigmaだけでWebサイトを作ってみるのも良いかもしれない。
• 1番過去で1964年とあるがイラストを描くときに参考になる写真はあるのか
  　→一部写真がないものがあるため想像上でイラストを描く建物も出てきてしまうが、写真がないからこそイラストに描き起こして紹介していきたい。
• Webサンプルとして作成したものの中にアコーディオンメニューがあるが実際にHTMLやCSSで作ることはできるのか ↓
• アコーディオンを作成しようとした先輩は挫折した方も多く難しい。Webサンプルとして作成したものをHTMLやCSS、JavaScriptで制作しようとするとイラストを描くのも大変だがWebサイトを作るだけで結構大掛かりで大変な作業になる。このWebサイトのサンプルをHTMLやCSSで実際に作れそうか、確認が必要
• スケジュールについて、1ヶ月に1つの年代を制作すると言っていたが、作成するにつれイラスト調など変更したくなってきてしまうため、年代別に作業を進めるのではなく、すべての年代のイラストの下書きを書いて、すべての年代のイラストを書き起こすなど、同時進行で進めていく方がいい。
  
  

学科サイトの更新

• Todoリストの変更
  
  

制作

• イラストの角度調査
• 2023年ラフ制作
  
  

2023.05.26

技法・技術情報集め

• Figma とは
• Figma 検索してスキルアップ
• Figma アコーディオン作成方法
• イラスト初心者がアイソメトリックイラストを描く
• 流れがわかる! アイソメトリックイラストの描き方
  
  

Webサイト制作

• ワークフレーム制作
• Webサイトイメージ
• 2023年天神地図まとめ
  
  

2023.05.19

資料集め

• 天神の歴史リストの更新
• 天神外観変化調査
  
  

天神についての調査

• 「福岡に観光地が無い」と言われる本当の理由を考えてみた！
• 福岡人が「福岡っていいところやろ？」と言ってしまう深い理由！？
• 観光スポットを聞かれるとちょっと戸惑ってしまう・・・福岡の「観光」あるある３
• 天神ビックバンで、まちはどう変わる？ユーザー意識調査
• 九州一の衝突事故・天神はどうやってできたのか？
  
  

その他

• ターゲットの絞り込み
  • 地域の住民
  • 天神町に訪れる人⚪︎
  • 歴史や文化に興味のある人々
  • 学生や研究者
  • 地域への関心を持つ人々
  • 観光客
• 背景である天神の歴史の認知度の調査
  • 市民アンケート・ワークショップ
    • 住んでる街の歴史を知ろう
    • Webサイトでのイラストの使用の効果
      
      

2023.05.12

資料集め

• 天神の歴史リストの更新
• これからの天神
  
  

2023.05.05

資料集め

• 天神の歴史リスト
• JavaScriptについて
• エリアマネジメントから見た天神史
  
  

2023.04.28

研究テーマの深堀り

• アイソメトリックの描き方2
  
  

2023.04.21

研究テーマの深堀り

• アイソメトリックイラストの描き方1
  
  

天神についての歴史、調査

• ダイエーショッパーズ福岡　(1971年6月~2015年9月)
  →イオンショッパーズ福岡　(2015年9月~2019年4月)
  →天神ショッパーズ福岡　(2019年4月25日~)
• ノース天神　(2012年6月28日~2022年8月)
• 福岡中央郵便局
• 日本銀行福岡支店
• 福岡パルコ
• 天神コア
• 天神ビブレ
• 警固公園
• 福岡三越
• 大丸福岡天神店
• エルガーラ
• 福岡市市役所
• 福岡市市役所
• 天神中央公園
• アクロス福岡
• 福岡市赤煉瓦文化館
• 水鏡天満宮
• SHIP’S GARDEN
  
  

2023.04.14

卒業研究テーマ候補

• 福岡(天神?)の歴史についてのWebサイトの作成。アイソメトリックやスライドさせ下に行くにつれ近代へ近づくような構成など、分かりやすく親しみやすいデザインを目指す
• 日常の起源の紹介。花やプラスチックやPC、道路に学校など普段何気に使ってる、見ているものの起源や制作方法などを紹介
  
  

現状調査

• のったよ！福岡タイムスリップ号
• アイソメトリック Webサイト10選
• 今昔福岡市
• 天神地区
• 身近にあるものの意外な起源
• 子供の「なぜなぜ期」について