LogoMark.png

出光美心/情報デザイン研究II の変更点


#author("2023-12-22T13:06:36+09:00","default:member","member")
#author("2024-01-12T12:38:16+09:00","default:member","member")
*柳川うなぎめしマップ
subtitlle・・・・・・・・・・・・・・・・ 

#iframe(https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d16119.034785379283!2d130.39929871661644!3d33.16089712145465!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sja!2sjp!4v1695201161660!5m2!1sja!2sjp, 100%,40%)

-''Idemitsu Miko''
-'''Keywords:地域活性化, 柳川市, Webプラットフォーム'''
[[webサイト>http://cf742207.cloudfree.jp/unagimeshi5/]]
//-__[[相互評価シート>https://www.example.com]]__  ← ここからコメントをお願いします。

~

***CONTENTS
//#contents2_1
~


**概要
***これは何?
福岡県 柳川市の観光活性化を目的に、うなぎ料理を提供している店舗を紹介するマップのリニューアル及び、新たにWEBサイト版の制作を行うプロジェクト
~

***背景と目的
-背景
元は平成22年に本学の商学部観光学科と芸術学部デザイン学科が協働して行ったものだったが、昨今のインターネットの普及やコロナ後の外国人観光客の増加を受け、紙媒体だけでは更新が難しかった
-目的
そこで本プロジェクトでは、マップをリニューアルすることに加え、新たにWEBサイトを作成することで、更新頻度を上げ、様々な人が扱えるようにし、柳川市の持続的活性化に繋げる

~

***コンセプト
-柳川市とWebサイトの持続的な活性化を促すために、写真を多くしてお店の魅力を発信する
-持続的活性化に繋げる
//&color(red){基本的な考え方、枠組み、視点など};
~

***成果物の仕様
[[webサイト>http://cf742207.cloudfree.jp/unagimeshi_menu4/]]
~

-主に開発班が行ったこと
--PukiWikiの細かな設定(IDやPW、プラグインなど)
--メニューバーの作成
--記事ページ部分のレイアウトの崩れを修正
--フッター部分のアイコンやメニュー部分の変更
--トップページへ戻るボタンの作成
~

***メンバー
-濱有希子 コンテンツ(リーダー)
-[[岩崎貴生>岩崎貴生/情報デザイン研究II]] コンテンツ(発表代表)
-[[亀田日向>亀田日向/情報デザイン研究II]] コンテンツ
-[[川村洸太>川村洸太/情報デザイン研究II]] コンテンツ
-[[田籠祐貴>田籠祐貴/情報デザイン研究II]] コンテンツ
-[[伊藤みらの>伊藤みらの/情報デザイン研究II]] コンテンツ

-西山実伶 開発(リーダー)
-[[出光美心>出光美心/情報デザイン研究II]] 開発(発表代表)
-[[内藤彩乃>内藤彩乃/情報デザイン研究II]] 開発
-[[中西華子>中西華子/情報デザイン研究II]] 開発

~

***制作ツール
HTML
CSS
Javascript
Pukiwiki
~

***プロジェクトの期間
//&color(red){プロジェクトの期間|20XX.XX.XX - 20XX.XX.XX };
プロジェクトの期間|2023.09.20 - 20XX.XX.XX
~

***中間まとめ
//&color(red){プロジェクトが完結したら「まとめ」を記載して下さい。};
まだ本格的に活動ができない状態で、主に情報を集めることに専念しました。
簡単な動作を確認して実際に実装できそうなアニメーション機能など調べて絞りました。
コンテンツ班からの素材の提供があり次第、頑張って作っていきたいと思います。
~

***まとめ
Pukiwikiを扱ったサイトでメニューの作り方に苦戦しました。普通のHTMLでは動かず、PukiWikiサイト内でメニューのリストを作りHTMLに埋め込むことで解決しました。教授やWebサイトに関して知識のある方に聞いてできない部分は解決していきました。フッターやレスポンシブに関してもネットで調べたり、教授に質問したりすることで解決させていきました。
今後微調整を行なってクオリティを上げていきたいと思います。
~
~


**調査

***現状調査
-[[うなぎめしマップ>https://www.city.yanagawa.fukuoka.jp/kanko/panph/2899.html]]
現在の柳川うなぎめしマップ
ダウンロードして自分で印刷するようになっている
-[[柳川市のうなぎについて>https://hinodeya-unagi.com/about_eel.html#:~:text=%E8%BA%AB%E3%81%8C%E3%82%88%E3%81%8F%E7%B7%A0%E3%81%BE%E3%82%8A%E3%80%81%E9%A2%A8%E5%91%B3,%E3%81%82%E3%81%A3%E3%81%9F%E3%81%A8%E3%81%84%E3%82%8F%E3%82%8C%E3%81%A6%E3%81%84%E3%81%BE%E3%81%99%E3%80%82]]
柳川市はうなぎがとても美味しく特産品として有名
柳川市のうなぎは炭火で直焼きするのが特徴
-その他柳川市について
蒲池焼、有明福ちょうちんなどが特産品になっている
主な観光地:川下り、柳川城、柳川 御花、高橋總本舗など
~

***先行事例
-Pukiwikiを使ったサイトの前例
--[[PukiWikiを使ったサイト一覧>https://pukiwiki.osdn.jp/?PukiWiki/%E6%B4%BB%E7%94%A8%E4%BA%8B%E4%BE%8B/%E5%9B%A3%E4%BD%93%E3%83%BB%E6%B3%95%E4%BA%BA%E3%81%AE%E3%82%B5%E3%82%A4%E3%83%88%E3%81%82%E3%82%8B%E3%81%84%E3%81%AF%E3%81%9D%E3%81%AE%E4%B8%80%E9%83%A8%E3%81%A8%E3%81%97%E3%81%A6https://coco-factory.jp/ugokuweb/]]
--[[生命科学部2019>https://lifescience.kyusan-u.ac.jp/main/]]
--[[情報科学研究科>http://grad.is.kyusan-u.ac.jp//]]
~

***技法・技術情報
-[[PukiWikiについて>https://design.kyusan-u.ac.jp/OpenSquareJP/?PukiWiki]]
-[[カスタマイズ方法>https://design.kyusan-u.ac.jp/OpenSquareJP/?PukiWiki/Customize]]
-[[動くWebデザインアイデア帖>https://coco-factory.jp/ugokuweb/]]
-[[UIデザイン参考>https://ics.media/entry/15970/]]
~
~

**プロジェクト管理

***[[スケジュール>https://docs.google.com/spreadsheets/d/1s_DPgpcpHP09zIs9DjvtZSxHSCUn60Knd8NpspDh228/edit?usp=sharing]]
//&color(red){計画的な遂行のために、進行管理表を作成してリンクして下さい。};
~

***ToDo
//&color(red){やるべきこと(タスク)を箇条書きにします。};
//&color(red){完了後は「%%取り消し線%%」あるいは「// コメントアウト」」};
-PukiWikiの設定を変更
-メニューバー、フッターの作成
-記事ページのレイアウトの崩れを修正
-アドレスの固定
-フォントの変更


//***NotToDo
//&color(red){やらないこと:何をするかではなく「何をしないか」を考える};
//&color(red){例:10人以上の会議には出ない。苦手なことは誰かに頼む・・};

~
~

#hr
CENTER:''進捗記録''
//&color(red){最新の情報を一番上に記載して下さい(古い記事が下へ沈む)。};
#hr
~
~

**2023.12.20
-[[Github>https://github.com/IDMT-MK/unagimeshi5]]
-[[webサイト動作確認>http://cf742207.cloudfree.jp/unagimeshi5/]]
~
-今後行わなければいけないこと
--ロゴがトップページに戻るようにする
--ID,PWの変更
--アドレスの固定
--アイコンの追加方法

-変更点
--フォントの変更(使用フォント:Zen Maru Gothic)
--フォントの変更(使用フォント:Zen Maru Gothic , Kaisei Decol)
--ヘッダー、フッターの色変更
~
~

**2023.12.13
-[[Github>https://github.com/IDMT-MK/unagimeshi5]]
-[[webサイト動作確認>http://cf742207.cloudfree.jp/unagimeshi5/]]
~
-変更点
--システムガイドページの制作
--文字を入力したときのレイアウトの調整
--サイトの最大幅の設定
~
~

**2023.12.06
***最終発表メモ
-編集、システムページを作る
-メニューバーのアイコンの変更
-サイトの最大幅の設定
-サイトを作る際の行なったことを分かりやすくまとめる(どういう作業をして、記事を見やすくするためにどういう設定を行なったのか)
-世界観の設定(メニューのアイコンにカーソルを置いたときに赤色になるのを変えるなど)
-フォントを変える
~
-[[Github>https://github.com/IDMT-MK/unagimeshi5]]
-[[webサイト動作確認>http://cf742207.cloudfree.jp/unagimeshi5/]]
~
~

**2023.11.29
-[[Github>https://github.com/IDMT-MK/unagimeshi4]]
-[[webサイト動作確認>http://cf742207.cloudfree.jp/unagimeshi_menu4/]]
-ハンバーガーメニューの制作。アイコンから任意のページに飛べるようになった
-PC版は横からメニューが出て、スマホ版は上からメニューが出る
-フッターはアイコン画像の変更と不要な機能は削除
-[[うなぎめしマップ 完成版>https://drive.google.com/file/d/1VJqpempcjPyRDXJ1LHvOLHaG-WY6LfPG/view?usp=drive_link/]]
~

**2023.11.22
-[[Github>https://github.com/IDMT-MK/unagimeshi3]]
-[[webサイト動作確認>http://cf742207.cloudfree.jp/unagimeshi3]]
~

-サイトの作り直し
-メニューページの作り方を聞いて作り直し
-PukiWiki内で画像をあげたり、検索ページを作ることはできるようになった
~
~
**2023.11.15
-[[サイトマップ>伊藤みらの/情報デザイン研究II]]
-[[Github>https://github.com/IDMT-MK/unagimeshi2]]
-[[webサイト動作確認>http://cf742207.cloudfree.jp/unagimeshi_menu2/]]
~

-WEBサイトに取り入れた要素
--[[ハンバーガーメニュー>https://coco-factory.jp/ugokuweb/move01/5-2-1/]]
--[[ナビゲーションメニュー>https://coco-factory.jp/ugokuweb/move01/5-1-11/]]
~
~

**2023.11.08
-[[Github>https://github.com/IDMT-MK/unagimeshi]]
-[[webサイト動作確認>http://cf742207.cloudfree.jp/unagimeshi_slideshow/]]

-[[マップ表示のコード(Github)>https://github.com/IDMT-MK/unagimap]]
~
~
**2023.11.01
-[[webサイト動作確認>http://cf742207.cloudfree.jp/unagimeshi/]]
~

-webサイトに取り入れたいアニメーションリスト
--[[スライドショー>https://coco-factory.jp/ugokuweb/move01/6-1-1/]]
--[[ハンバーガーメニュー>https://coco-factory.jp/ugokuweb/move01/5-2-1/]]
--[[ドロップダウンメニューバー>https://coco-factory.jp/ugokuweb/move01/5-1-1/]]

-その他取り入れたい要素
--[[SNSアイコンをWebサイトに表示させる>https://web-design.camp/?p=35]]

-今出来ていること
--レイアウトの変更(サブメニューバーを移動させる、文字色の変更、フルスクリーン)

~
~

**2023.10.25
-[[Github>https://github.com/IDMT-MK/unagimeshi]]
PukiWikiを自分でレイアウトを変えた
画像の追加とメニューバーの場所の移動
~
~

**2023.10.18
決まったこと
-リーダー、グループ分け
-スケージュール(コンテンツ班からワイヤーフレームが届き次第作業に移行)
-レンタルサーバー
~
~

**2023.10.11
***Pukiwikiを使ったサイトの前例
-[[生命科学部2019>https://lifescience.kyusan-u.ac.jp/main/]]
-[[情報科学研究科>http://grad.is.kyusan-u.ac.jp//]]
以前の生徒が作ったPukiwikiを使ったサイト
~
-[[XAMPPのダウンロード方法・使い方>https://www.webdesignleaves.com/pr/plugins/xampp_01.html]]
PukiWikiのHTMLとCSSを触ってみる
XAMPPのサーバーを自分で確認できるようにする
~
~
**2023.10.04
-[[シンクラウド>https://www.xfree.ne.jp/]]
-[[PukiWiki>https://pukiwiki.osdn.jp/?PukiWiki/Download/1.5.4]]
~
参考になりそうなWebサイト
-[[SANCOU!>https://sankoudesign.com/]]
-[[https://tomarino.jp/]]
-[[https://lifelabel.jp/]]
-[[https://sauna-ikitai.com/sameshi]]
色合いフォントのデザインが良かった
-[[https://www.nippon-dept.jp/shop/default.aspx]]
アイコンが可愛くて参考になりそう
~
~
**2023.09.27
-[[Xfree>https://www.xfree.ne.jp/]]
サーバーを立てる
-[[FileZilla>https://filezilla.softonic.jp/]]
大学内のサーバーを使用するため
-サンプルのサイトを編集してみる
-[[お試しでコードを少し書き換えたもの>https://github.com/IDMT-MK/unagi-demo]]
~
~

**2023.09.20
***先行研究・調査したこと
-[[CMSについて>https://design.kyusan-u.ac.jp/OpenSquareJP/?cmd=read&page=CMS&word=cms]]
ユーザーがサイトに投稿できる機能を作ることができる。現状自分で一から作るのは難しい
-[[PukiWikiについて>https://design.kyusan-u.ac.jp/OpenSquareJP/?PukiWiki]]
一番とっかかりやすいもの
-[[カスタマイズ方法>https://design.kyusan-u.ac.jp/OpenSquareJP/?PukiWiki/Customize]]
~
-[[柳川うなぎめしマップ>https://design.kyusan-u.ac.jp/socialdesign/?cmd=read&page=Project%2F%E6%9F%B3%E5%B7%9D%E3%81%86%E3%81%AA%E3%81%8E%E3%82%81%E3%81%97%E3%83%9E%E3%83%83%E3%83%97&word=%E6%9F%B3%E5%B7%9D%E5%B8%82]]
-[[うなぎめしマップ>https://www.city.yanagawa.fukuoka.jp/kanko/panph/2899.html]]
うなぎめしマップとは?
柳川市内のうなぎのせいろ蒸しを提供する24店舗を紹介するマップ
-[[柳川市のうなぎについて>https://hinodeya-unagi.com/about_eel.html#:~:text=%E8%BA%AB%E3%81%8C%E3%82%88%E3%81%8F%E7%B7%A0%E3%81%BE%E3%82%8A%E3%80%81%E9%A2%A8%E5%91%B3,%E3%81%82%E3%81%A3%E3%81%9F%E3%81%A8%E3%81%84%E3%82%8F%E3%82%8C%E3%81%A6%E3%81%84%E3%81%BE%E3%81%99%E3%80%82]]
柳川市はうなぎがとても美味しく特産品として有名
柳川市のうなぎは炭火で直焼きするのが特徴
-その他柳川市について
蒲池焼、有明福ちょうちんなどが特産品になっている
主な観光地:川下り、柳川城、柳川 御花、高橋總本舗など
~
***やりたいこと
-Webサイトを作りたい
-オープンチャット
-CMSについて学びたい
~
~
~