#author("2023-04-13T09:45:00+09:00;2022-12-20T12:26:05+09:00","default:inoue.ko","inoue.ko") #author("2023-04-13T09:48:41+09:00;2022-12-20T12:26:05+09:00","default:inoue.ko","inoue.ko") *都市高散歩 WordPressを使用した都市高散歩のフォトギャラリーサイト #image(toshikosampo-header1.jpg) //#image(mainvisual2.jpg) -''Kota Yamada'' -'''Keywords:Fukuoka Urban Expressway, Photo, Gallery, Wordpress''' -http://greenbird.wp.xdomain.jp/ // 井上(貢)です。https:// になっていて正常に閲覧できなかったので、http:// に書き換えています。s がつくのはセキュアな・・という意味で、これを有効にしようとすると多分有料になります。 -[[情報デザイン研究I>山田洸太/情報デザイン研究I]] ~ **Overview ***What is this? 都市高速の魅力と現状を伝えるフォトギャラリーサイト //&color(red){これは何か・・を簡潔に}; ~ ***背景と目的 //&color(red){プロジェクトの背景と目的}; //無機物であるのにどこか有機的な印象を受ける都市高速の構造に魅力を発見した。しかし、福岡都市高速には様々な課題も存在する。その中でも目立つのが老朽化問題である。そこで撮影した写真でフォトブックを制作し、多くの人に見てもらうことで都市高速の抱える問題の解決に繋がるのではないかと考えた。タイトルにもあるように歩行者視点にこだわった理由は、都市高速を下から見上げた時に見える高架の裏側に老朽化が現れやすいためである。 //前期の情報デザイン研究Iでは、都市高速の構造的な魅力と都市高速の抱える問題の提起を目的としたフォトブックを制作した。しかし、フォトブックだけでは、多くの人に見てもらうという点では不十分であった。そこで不特定多数の人が閲覧可能なWebサイト上にフォトギャラリーを制作することが、そこの課題の解決に繋がるのではないかと考えた。 無機物であるのにどこか有機的な印象を受ける都市高速の構造に魅力を発見した。その一方で福岡都市高速には様々な課題も存在する。その中でも目立つのが老朽化問題である。しかし、こういった社会問題と聞くと、__少しとっつきにくい印象を持っている人も多い__と感じた。そこで社会問題に触れるきっかけ作りとして、前期の[[情報デザイン研究I>山田洸太/情報デザイン研究I]]では撮影した写真をまとめたフォトブックを制作。そして今回、さらに多くの方に閲覧してもらうことを可能にするためフォトギャラリーサイトを開設した。 ~ ***コンセプト [[情報デザイン研究I>山田洸太/情報デザイン研究I]]でフォトブックを制作したが、多くの人に見てもらうという点では不十分であった。その反省点を踏まえ、今回の情報デザイン研究IIでは、Web上にフォトギャラリーサイトを開設し、閲覧者数の向上とプロジェクトの認知拡大を目指す。 //&color(red){基本的な考え方、枠組み、視点など}; ~ //***基本情報 //「高架橋」地上に連続して架けられた橋のことである。 //「桁式高架橋」 ***成果物の仕様 -Webサイト ~ ***サイトマップ・投稿形式 |#image(sitemap2.png)|#image(wp-post.png)| //&color(red){&small(成果物の形式・サイズ・時間尺等);}; ~ ***サイトの詳細 -翻訳プラグインの導入 国内だけでなく海外の人たちにも見やすいサイトづくり。 英語、中国語、韓国語、ドイツ語、スペイン語に対応。 --[[Google Language Translator>https://ja.wordpress.org/plugins/google-language-translator/]] |#image(translate.png)|#image(translate3.png)|#image(translate2.png)| ~ -写真と音楽の融合 情報デザイン研究Iで写真集を制作して、写真だけでは情景が浮かびづらいように感じた。そこで写真の世界観に合った音楽を添えることで、自分が写真に込めた思いや情景が伝わりやすくなるのではないかと考えた。音楽はSpotifyの楽曲埋め込み機能を利用する。 --[[Spotify プレーヤーとフォローボタンの埋め込み>https://artists.spotify.com/ja/help/article/embedded-players?category=promos-and-playlists]] |#image(spotify.png)|#image(spotify2.png)| ~ -タイトルの意味 タイトルに辞書サイトのリンクを貼ることで、分かりづらい単語でも読者がタイトルの意味をすぐに調べられるように配慮した。 --[[goo辞書>https://dictionary.goo.ne.jp/]] ~ -各投稿にSNSシェアボタンの設置 FacebookとTwitterのシェアボタンを設置することで拡散効果を期待。 ~ ***制作ツール -WordPress -Lightroom -Illustrator //&color(red){使用するツール|ハードウエア・ソフトウエア}; ~ ***プロジェクトの期間 2022.09.15 - 2022.12.22 //&color(red){プロジェクトの期間|20XX.XX.XX - 20XX.XX.XX }; ~ ***中間報告 ここまでは大まかな枠組み作りを進めてきた。今後は残りの写真を速やかに投稿しつつ、まだ完成していない固定ページを制作を進めていく。 //***Conclusion //&color(red){プロジェクトが完結したら「まとめ」を記載して下さい。}; ~ ***プレゼン -アナリティクスの活用 //-フォトギャラリー上での写真の系統 ~ ***まとめ 前期に製作した写真集に比べ、フォトギャラリーサイトにしたことでよりオープンで見やすいものとなった。今後はサイトの更新を継続しつつ、撮影場所の拡大とコンテンツの充実化を目指す。 ~ ~ **Research ***Current Situation -高架の基本情報 --橋梁の構造と種類について https://www.naganogiken.co.jp/knowledge00/knowledge1/ ~ -参考ギャラリーサイト --蜷川実花 ポートフォリオサイト https://mikaninagawa.com/ --[[PERIMETRON>https://ja.wikipedia.org/wiki/PERIMETRON]](クリエイティブレーベル)作品一覧 https://www.perimetron.jp/blog //&color(red){プロジェクトのテーマに関わる社会の現状と問題の洗い出し}; ~ ***Precedent -Pichit Phan フォトギャラリーサイト https://www.vicepichitphan.com/ //&color(red){プロジェクトのテーマに該当する先行事例の紹介、傾向分析など}; ~ ***Technology -WordPress 追加CSSについて https://kinsta.com/jp/blog/wordpress-css/ -音楽の埋め込み方法について https://ayatolog.com/wordpress/apple-music -住所の英語表記について https://english-club.jp/blog/english-address/ //&color(red){プロジェクトの遂行に必要な技法・技術に関する調査}; ~ ~ **Project Management ***Schedule [[スケジュール表>https://docs.google.com/spreadsheets/d/1YSu-r4QL6KWQpp0oqjhPppjUYzFN05VFFsnpS24DPv0/edit?usp=sharing]] //&color(red){計画的な遂行のために、進行管理表を作成してリンクして下さい。}; ~ ***ToDo //&color(red){やるべきこと(タスク)を箇条書きにします。}; //&color(red){完了後は「%%取り消し線%%」あるいは「// コメントアウト」」}; -%%Webサイトの開設%% -全ての写真を投稿する -スライダーページの作成 -概要ページ等の制作 -フォトブック掲載の写真全て投稿 -スケジュール表の作成 ~ ~ ~ #hr CENTER:''WORK LOG'' //&color(red){List the most recent information at the top.}; #hr ~ ~ **2022.12.14 ***写真の色味について 有機的なイメージはカラー、 無機的なイメージはモノクロ、セピアで表現。 ~ **2022.12.07 -本当にこれで都市高速の老朽化問題を理解してもらえるのか →どういった活動なのかを詳細に記載したページを作る →さらにそのページへどう誘導するかを考える //-真似することから始める ~ **2022.11.09 ***中間報告まとめ -背景とサイドメニューの統一する -サイトの概要に音楽についての説明も追記する -クリックで次の画像に変わるようにする -写真集の写真素材とともに撮影機材の情報を記載する -なぜ写真をカラー、セピア、モノクロと分けているのか? -音楽とともに伝える役割はInstagramでいいのではないか? ~ ~ **2022.11.09 ***投稿形式図の作成 #image(wp-post.png) ~ ***写真と音楽の融合 情報デザイン研究Iで写真集を制作して、写真だけでは情景が浮かびづらいように感じた。そこで写真の世界観に合った音楽を添えることで、自分が写真に込めた思いや情景が伝わりやすくなるのではないかと考えた。音楽はSpotifyの楽曲埋め込み機能を利用する。 -[[Spotify プレーヤーとフォローボタンの埋め込み>https://artists.spotify.com/ja/help/article/embedded-players?category=promos-and-playlists]] ~ ***タイトルの意味 タイトルに[[goo辞書>https://dictionary.goo.ne.jp/]]のリンクを貼ることで、読者がタイトルの言葉の意味をすぐに調べられるようにした。 ~ ~ **2022.11.02 ***サイトマップの作成 #image(sitemap2.png) ~ ~ **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 ~