出光美心/情報デザイン研究II

柳川うなぎめしマップ

subtitlle・・・・・・・・・・・・・・・・

• Idemitsu Miko
• Keywords：地域活性化, 柳川市, Webプラットフォーム
  webサイト

CONTENTS

概要

これは何？

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

背景と目的

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

コンセプト

• 柳川市とWebサイトの持続的な活性化を促すために、写真を多くしてお店の魅力を発信する
• 持続的活性化に繋げる
  
  

成果物の仕様

webサイト

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

メンバー

• 濱有希子　コンテンツ（リーダー）
• 岩崎貴生　コンテンツ（発表代表）
• 亀田日向　コンテンツ
• 川村洸太　コンテンツ
• 田籠祐貴　コンテンツ
• 伊藤みらの　コンテンツ

• 西山実伶　開発（リーダー）
• 出光美心　開発（発表代表）
• 内藤彩乃　開発
• 中西華子　開発

制作ツール

HTML
CSS
Javascript
Pukiwiki

プロジェクトの期間

プロジェクトの期間｜2023.09.20 - 20XX.XX.XX

中間まとめ

まだ本格的に活動ができない状態で、主に情報を集めることに専念しました。
簡単な動作を確認して実際に実装できそうなアニメーション機能など調べて絞りました。
コンテンツ班からの素材の提供があり次第、頑張って作っていきたいと思います。

まとめ

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

調査

現状調査

• うなぎめしマップ
  現在の柳川うなぎめしマップ
  ダウンロードして自分で印刷するようになっている
• 柳川市のうなぎについて
  柳川市はうなぎがとても美味しく特産品として有名
  柳川市のうなぎは炭火で直焼きするのが特徴
• その他柳川市について
  蒲池焼、有明福ちょうちんなどが特産品になっている
  主な観光地：川下り、柳川城、柳川 御花、高橋總本舗など
  
  

先行事例

• Pukiwikiを使ったサイトの前例
  • PukiWikiを使ったサイト一覧
  • 生命科学部2019
  • 情報科学研究科
    
    

技法・技術情報

• PukiWikiについて
• カスタマイズ方法
• 動くWebデザインアイデア帖
• UIデザイン参考
  
  
  
  

プロジェクト管理

スケジュール

ToDo

• PukiWikiの設定を変更
• メニューバー、フッターの作成
• 記事ページのレイアウトの崩れを修正
• アドレスの固定
• フォントの変更

2023.12.20

• Github
• webサイト動作確認
  
  
• 今後行わなければいけないこと
  • ロゴがトップページに戻るようにする
  • ID,PWの変更
  • アドレスの固定
  • アイコンの追加方法

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

2023.12.13

• Github
• webサイト動作確認
  
  
• 変更点
  • システムガイドページの制作
  • 文字を入力したときのレイアウトの調整
  • サイトの最大幅の設定
    
    
    
    

2023.12.06

最終発表メモ

• 編集、システムページを作る
• メニューバーのアイコンの変更
• サイトの最大幅の設定
• サイトを作る際の行なったことを分かりやすくまとめる(どういう作業をして、記事を見やすくするためにどういう設定を行なったのか)
• 世界観の設定(メニューのアイコンにカーソルを置いたときに赤色になるのを変えるなど)
• フォントを変える
  
  
• Github
• webサイト動作確認
  
  
  
  

2023.11.29

• Github
• webサイト動作確認
• ハンバーガーメニューの制作。アイコンから任意のページに飛べるようになった
• PC版は横からメニューが出て、スマホ版は上からメニューが出る
• フッターはアイコン画像の変更と不要な機能は削除
• うなぎめしマップ　完成版
  
  

2023.11.22

• Github
• webサイト動作確認
  
  

• サイトの作り直し
• メニューページの作り方を聞いて作り直し
• PukiWiki内で画像をあげたり、検索ページを作ることはできるようになった
  
  
  
  

2023.11.15

• サイトマップ
• Github
• webサイト動作確認
  
  

• WEBサイトに取り入れた要素
  • ハンバーガーメニュー
  • ナビゲーションメニュー
    
    
    
    

2023.11.08

• Github
• webサイト動作確認

• マップ表示のコード(Github)
  
  
  
  

2023.11.01

• webサイト動作確認
  
  

• webサイトに取り入れたいアニメーションリスト
  • スライドショー
  • ハンバーガーメニュー
  • ドロップダウンメニューバー

• その他取り入れたい要素
  • SNSアイコンをWebサイトに表示させる

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

2023.10.25

• Github
  PukiWikiを自分でレイアウトを変えた
  画像の追加とメニューバーの場所の移動
  
  
  
  

2023.10.18

決まったこと

• リーダー、グループ分け
• スケージュール(コンテンツ班からワイヤーフレームが届き次第作業に移行)
• レンタルサーバー
  
  
  
  

2023.10.11

Pukiwikiを使ったサイトの前例

• 生命科学部2019
• 情報科学研究科
  以前の生徒が作ったPukiwikiを使ったサイト
  
  
• XAMPPのダウンロード方法・使い方
  PukiWikiのHTMLとCSSを触ってみる
  XAMPPのサーバーを自分で確認できるようにする
  
  
  
  

2023.10.04

• シンクラウド
• PukiWiki
  
  
  参考になりそうなWebサイト
• SANCOU!
• https://tomarino.jp/
• https://lifelabel.jp/
• https://sauna-ikitai.com/sameshi
  色合いフォントのデザインが良かった
• https://www.nippon-dept.jp/shop/default.aspx
  アイコンが可愛くて参考になりそう
  
  
  
  

2023.09.27

• Xfree
  サーバーを立てる
• FileZilla
  大学内のサーバーを使用するため
• サンプルのサイトを編集してみる
• お試しでコードを少し書き換えたもの
  
  
  
  

2023.09.20

先行研究・調査したこと

• CMSについて
  ユーザーがサイトに投稿できる機能を作ることができる。現状自分で一から作るのは難しい
• PukiWikiについて
  一番とっかかりやすいもの
• カスタマイズ方法
  
  
• 柳川うなぎめしマップ
• うなぎめしマップ
  うなぎめしマップとは？
  柳川市内のうなぎのせいろ蒸しを提供する24店舗を紹介するマップ
• 柳川市のうなぎについて
  柳川市はうなぎがとても美味しく特産品として有名
  柳川市のうなぎは炭火で直焼きするのが特徴
• その他柳川市について
  蒲池焼、有明福ちょうちんなどが特産品になっている
  主な観光地：川下り、柳川城、柳川 御花、高橋總本舗など
  
  

やりたいこと

• Webサイトを作りたい
• オープンチャット
• CMSについて学びたい