山田洸太/情報デザイン研究II

都市高散歩

WordPressを使用した都市高散歩のフォトギャラリーサイト

• Kota Yamada
• Keywords：Fukuoka Urban Expressway, Photo, Gallery, Wordpress
• http://greenbird.wp.xdomain.jp/
• 情報デザイン研究I
  
  

Overview

What is this?

都市高速の魅力と現状を伝えるフォトギャラリーサイト

背景と目的

無機物であるのにどこか有機的な印象を受ける都市高速の構造に魅力を発見した。その一方で福岡都市高速には様々な課題も存在する。その中でも目立つのが老朽化問題である。しかし、こういった社会問題と聞くと、少しとっつきにくい印象を持っている人も多いと感じた。そこで社会問題に触れるきっかけ作りとして、前期の情報デザイン研究Iでは撮影した写真をまとめたフォトブックを制作。そして今回、さらに多くの方に閲覧してもらうことを可能にするためフォトギャラリーサイトを開設した。

コンセプト

情報デザイン研究Iでフォトブックを制作したが、多くの人に見てもらうという点では不十分であった。その反省点を踏まえ、今回の情報デザイン研究IIでは、Web上にフォトギャラリーサイトを開設し、閲覧者数の向上とプロジェクトの認知拡大を目指す。

成果物の仕様

• Webサイト
  
  

サイトマップ・投稿形式

サイトの詳細

• 翻訳プラグインの導入
  国内だけでなく海外の人たちにも見やすいサイトづくり。
  英語、中国語、韓国語、ドイツ語、スペイン語に対応。
  • Google Language Translator

• 写真と音楽の融合
  情報デザイン研究Iで写真集を制作して、写真だけでは情景が浮かびづらいように感じた。そこで写真の世界観に合った音楽を添えることで、自分が写真に込めた思いや情景が伝わりやすくなるのではないかと考えた。音楽はSpotifyの楽曲埋め込み機能を利用する。
  • Spotify プレーヤーとフォローボタンの埋め込み

• タイトルの意味
  タイトルに辞書サイトのリンクを貼ることで、分かりづらい単語でも読者がタイトルの意味をすぐに調べられるように配慮した。
  • goo辞書
    
    

• 各投稿にSNSシェアボタンの設置
  FacebookとTwitterのシェアボタンを設置することで拡散効果を期待。
  
  

制作ツール

• WordPress
• Lightroom
• Illustrator
  
  

プロジェクトの期間

2022.09.15 - 2022.12.22

中間報告

ここまでは大まかな枠組み作りを進めてきた。今後は残りの写真を速やかに投稿しつつ、まだ完成していない固定ページを制作を進めていく。

プレゼン

• アナリティクスの活用
  
  

まとめ

前期に製作した写真集に比べ、フォトギャラリーサイトにしたことでよりオープンで見やすいものとなった。今後はサイトの更新を継続しつつ、撮影場所の拡大とコンテンツの充実化を目指す。

Research

Current Situation

• 高架の基本情報
  • 橋梁の構造と種類について
    https://www.naganogiken.co.jp/knowledge00/knowledge1/

• 参考ギャラリーサイト
  • 蜷川実花 ポートフォリオサイト
    https://mikaninagawa.com/
  • PERIMETRON（クリエイティブレーベル）作品一覧
    https://www.perimetron.jp/blog
    
    

Precedent

• Pichit Phan フォトギャラリーサイト
  https://www.vicepichitphan.com/
  
  

Technology

• WordPress 追加CSSについて
  https://kinsta.com/jp/blog/wordpress-css/
• 音楽の埋め込み方法について
  https://ayatolog.com/wordpress/apple-music
• 住所の英語表記について
  https://english-club.jp/blog/english-address/

Project Management

Schedule

スケジュール表

ToDo

• Webサイトの開設
• 全ての写真を投稿する
• スライダーページの作成
• 概要ページ等の制作
• フォトブック掲載の写真全て投稿
• スケジュール表の作成
  
  
  
  
  
  

2022.12.14

写真の色味について

有機的なイメージはカラー、
無機的なイメージはモノクロ、セピアで表現。

2022.12.07

• 本当にこれで都市高速の老朽化問題を理解してもらえるのか
  →どういった活動なのかを詳細に記載したページを作る
  →さらにそのページへどう誘導するかを考える
  
  

2022.11.09

中間報告まとめ

• 背景とサイドメニューの統一する
• サイトの概要に音楽についての説明も追記する
• クリックで次の画像に変わるようにする
• 写真集の写真素材とともに撮影機材の情報を記載する
• なぜ写真をカラー、セピア、モノクロと分けているのか？
• 音楽とともに伝える役割はInstagramでいいのではないか？
  
  
  
  

2022.11.09

投稿形式図の作成

写真と音楽の融合

情報デザイン研究Iで写真集を制作して、写真だけでは情景が浮かびづらいように感じた。そこで写真の世界観に合った音楽を添えることで、自分が写真に込めた思いや情景が伝わりやすくなるのではないかと考えた。音楽はSpotifyの楽曲埋め込み機能を利用する。

• Spotify プレーヤーとフォローボタンの埋め込み
  
  

タイトルの意味

タイトルにgoo辞書のリンクを貼ることで、読者がタイトルの言葉の意味をすぐに調べられるようにした。

2022.11.02

サイトマップの作成

2022.10.24

研究テーマ

• WordPressを使用したフォトギャラリー制作
  • 都市高速の写真とともに写真にあった音楽を紹介。
    
    
    
    

2022.10.12

研究テーマ

• Blenderを使用した都市高速の模型制作
  • 3DCGにすることで、写真（平面）では伝えきれない構造的な魅力を表現する。
    
    
    
    

2022.09.28

研究の課題

• 使用する写真について
  Webサイト制作と学内展示の両方を行う場合、新規の写真を用意するのはスケジュール的に厳しい為、既存の写真を利用しながら研究を進めていくなどの検討をする必要性がある。
  
  
• 展示の場所や日程について
  展示をする場合、準備や申請など時間を要する為、場所や日程等の調整を早い段階で行わなければならない。
  
  
• 写真の印刷について
  写真は全てiPhoneで撮影している為、展示の際に拡大すると画質が荒くなってしまう可能性がある。印刷するサイズや印刷方法などの検討が必要。
  
  

Webサイトの構成

• 地図をわかりやすくまとめる
• 大画面で写真を見せる
• 文字情報で写真を引き立てる
• 今後も写真を更新していけるような枠組み作りを行う
  
  
  
  

2022.09.21

研究テーマ

• 都市高散歩（前期でのテーマを継続）
  • ブラッシュアップ
  • 学内での展示
  • Web制作
    
    

情報デザイン研究Ⅱでも引き続き都市高散歩を継続。より洗練されたものを目指すため、前期制作した写真集のブラッシュアップを軸に制作を行う。さらにワードプレスを使ったWebサイトの開設、学内での展示を目標に研究を進める。






http://greenbird.wp.xdomain.jp//wp-admin