LogoMark.png

江口依舞/情報デザイン研究II の変更点

#author("2025-10-14T20:20:15+09:00","default:member","member")
#author("2025-10-22T17:30:38+09:00","default:member","member")
*〜川下りで巡る〜 柳川観光Webサイト
柳川市の観光Webサイト(横スクロール型)の構築
 
#image(main.gif)  

-''江口 依舞''
-'''Keywords：Yanagawa, website, horizontal scroll, sightseeing'''
-https://12eve24.github.io/web-yanagawa/
//-__[[相互評価シート>https://www.example.com]]__  ← ここからコメントをお願いします。

~

//***CONTENTS
//#contents2_1
//~


**概要
***これは何？
柳川の魅力を多角的に発信する観光促進型Webサイト。川下りをモデルに、名所・文化・季節イベントなどを「流れに沿って体験できる」デザインを備えることで、柳川の新たな魅力発信を目指す。
//&color(red){これは何か・・を簡潔に};
~

***背景と目的
従来、柳川観光のイメージは“川下り”と“うなぎ”に偏っており、その他の観光資源の認知度は低い。柳川と聞いて多くの人が連想するのは「川下り」と「うなぎ」であり、他の観光資源の認知度は一割未満と低い結果となっている。特に10代・20代では「うなぎを食べに行く」目的が多いが、価格の高さから満足度が相対的に低い傾向にあり柳川の魅力を十分に体感できずに帰る観光客も多い。柳川市の観光に関する調査では、インターネット利用者の訪問率が高く、情報発信手段としてWebの有効性が確認された。このことから、川下りやうなぎ以外の地域資源やイベントの魅力を発信するWebサイトづくりが今後の課題とされている。
//&color(red){プロジェクトの背景と目的};
~

***コンセプト
ユーザーが楽しみながら、柳川の魅力を知ってもらうWebデザインを目指し、観光名所や行事をイラスト化し、横スクロール形式で柳川の有名な観光資源である「川下り」を体験できるような仕掛けを盛り込む。視覚的に楽しめるデザインにすることで、より多くの人々に柳川の豊かな文化や魅力を身近に感じてもらう。
~ 
【5W1Hの各要素】
Who（誰が）：老若男女問わず、柳川に興味を持った人
//主語となる人物や対象について。
What（何を）：柳川市について興味を抱き情報収集する
//具体的な行動や物事、内容について。
When（いつ）：旅行前の計画立てや旅行時に
//出来事が起きた日時や時期、時間について。
Where（どこで）：自宅での情報収集や現地（柳川）で
//出来事が起きた場所、場所の詳細について。
Why（なぜ）：より多くの人に柳川の魅力を知ってもらい観光に来てもらう
//その出来事が起きた理由、原因について。
How（どのように）：柳川観光の情報収集をより楽しく便利に
//出来事が起きた経緯、方法、手段について。
//&color(red){基本的な考え方、枠組み、視点など};
~

***成果物の仕様
Web
//&color(red){&small(成果物の形式・サイズ・時間尺等);};
~
***メンバー
-Webサイト内【使用画像提供】
--[[柳川市役所 　観光課>https://www.city.yanagawa.fukuoka.jp/kanko/]]
--[[柳川市観光協会>https://www.yanagawa-net.com/]]
//&color(red){共同プロジェクトの場合のみ｜メンバーと役割分担を明記};
~

***制作ツール
-Figma
--[[PC版>https://www.figma.com/proto/glJ8nN5XnuQ7EXHQBuPgG1/%E6%9F%B3%E5%B7%9D%E8%A6%B3%E5%85%89Web%E3%82%B5%E3%82%A4%E3%83%88_PC?node-id=0-4&starting-point-node-id=0%3A4&t=ko05Wu846JvAB6ei-1]]
--[[Mobile版>https://www.figma.com/proto/Y3ePQrnApgstx4Lj01hBlK/%E6%9F%B3%E5%B7%9D%E8%A6%B3%E5%85%89Web%E3%82%B5%E3%82%A4%E3%83%88_Mobile?node-id=73-4&starting-point-node-id=73%3A4&t=vS8IqF17gLHH3tZM-1]]
-Visual Studio Code
--HTML
--CSS
--JavaScript

//&color(red){使用するツール｜ハードウエア・ソフトウエア};
~

***プロジェクトの期間
//&color(red){プロジェクトの期間｜2025.09.15 - 2026.01.07 };
-[[工程表>https://ksumail-my.sharepoint.com/:x:/g/personal/k23as602_st_kyusan-u_ac_jp/EaOsyqFuRO9Mh2lVJ27K6LEBLsy78qvrCwNT89oosDOGTA?e=2IcaES]]
#image(schedule.jpeg)
~

//***まとめ
//&color(red){プロジェクトが完結したら「まとめ」を記載して下さい。};
~
~


**調査

***現状調査
-既存の柳川市観光HP
--[[柳川市役所 　観光課>https://www.city.yanagawa.fukuoka.jp/kanko/]]
--[[柳川市観光協会>https://www.yanagawa-net.com/]]

-柳川市に対するイメ ージアンケート
[[引 用 : 「第 3 章 柳 川 市 観 光 の 現 状 と課 題 」>https://www.city.yanagawa.fukuoka.jp/library/download/shisei/sannsyou.pdf]]
#image(source.jpeg)

--インタ ーネット利用者の訪問率が高く、柳川観光に関する情報はインタ ーネットが有効 →柳川市の魅力が伝わるWeb サイトの制作
--柳川に対するイメージは、全国的に”川下り”、”うなぎ”が強く、逆にそのほかの観光資源の認知度は 一割を切るなど、これらに比 べ非常に乏しい
--“うなぎを食べに” の目的が多い10代、20 代の観光満足度が相対的に低い →うなぎの価格の高騰(若い世 代が手を出しずらい)
&color(red){柳川のその他の観光スポットやイベントなどの情報が乏しい状態で観光に行くと、柳川の魅力を十分に満喫できない};
//&color(red){プロジェクトのテーマに関わる社会の現状と問題の洗い出し};
~

***先行事例
//&color(red){プロジェクトのテーマに該当する先行事例の紹介、傾向分析など};
-横スクロール形式のWebサイト
--[[学校法人近畿大学創立100周年記念サイト>https://100th.kindai.ac.jp]]
--[[BREAKING STREET>https://breakingstreet.kose.co.jp]]
--[[書き初め2025>https://spicato.com/kakizome2025/]]
~

***技法・技術情報
//&color(red){プロジェクトの遂行に必要な技法・技術に関する調査};
-HTML,CSS,JavaScript
--[[JavaScriptで縦スクロールを横スクロールに変換する>https://zenn.dev/karugamo/articles/33bf1b2595d05d]]
--[[【HTML/CSS】横スクロールできる表（テーブル）の作り方>https://tomiwa-tech.co.jp/blog/scrollable-table/#:~:text=させてください%E3%80%82-,min%2Dwidthを使う方法,スクロールするという方法です%E3%80%82&text=HTMLは先ほどと同じです%E3%80%82&text=CSSは以下のようになります%E3%80%82&text=:%204px%208px;%20%7D-,ポイントとしては、table要素を囲む%20.table%2Dwrap,て変更してください%E3%80%82]]
--[[ページを横にスクロールさせる（HTML、JavaScript）>https://img-flow.com/blog/coding/animation/yokoscroll/]]
--[[CSSグラデーション背景ジェネレーター>https://webspe.net/tools/gradation/]]
--[[【HTML/CSS】 画像を簡単に横並びする方法を実際のコード例で解説！ | WP-LOAD>https://wp-load.in/html-css/html-img-side]]
~
~

**プロジェクト管理

***スケジュール
//&color(red){計画的な遂行のために、進行管理表を作成してリンクして下さい。};
-[[工程表>https://ksumail-my.sharepoint.com/:x:/g/personal/k23as602_st_kyusan-u_ac_jp/EaOsyqFuRO9Mh2lVJ27K6LEBLsy78qvrCwNT89oosDOGTA?e=2IcaES]]
-10/13,10/20,10/27　3Q中間審査 ※遠隔（発表：3分　質疑：3分）
--プレゼン資料
-12/8,12/15,12/22　4Q最終審査 ※対面（発表：3分　質疑：3分）
--作品の完成
~

***ToDo
Webサイトの構築（試作）〜画像配置〜
Webサイトの構築〜画像処理〜
%%Webサイトの構築（試作）〜背景色〜%%
%%Webサイトの構築（試作）〜横スクロール〜%%
%%現場調査，先行事例の調査%%
%%企画%%
//&color(red){やるべきこと（タスク）を箇条書きにします。};
//&color(red){完了後は「%%取り消し線%%」あるいは「// コメントアウト」」};


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

~
~

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

**2025.10.20
***柳川市観光Webサイトの構築
[[PC版>https://www.figma.com/proto/glJ8nN5XnuQ7EXHQBuPgG1/%E6%9F%B3%E5%B7%9D%E8%A6%B3%E5%85%89Web%E3%82%B5%E3%82%A4%E3%83%88_PC?node-id=0-4&starting-point-node-id=0%3A4&t=ko05Wu846JvAB6ei-1]]
[[Mobile版>https://www.figma.com/proto/Y3ePQrnApgstx4Lj01hBlK/%E6%9F%B3%E5%B7%9D%E8%A6%B3%E5%85%89Web%E3%82%B5%E3%82%A4%E3%83%88_Mobile?node-id=73-4&starting-point-node-id=73%3A4&t=vS8IqF17gLHH3tZM-1]]
-[[使用画像>https://ksumail-my.sharepoint.com/:f:/g/personal/k23as602_st_kyusan-u_ac_jp/Eq8KBMDWnVNKl5fPL3HvGokBw0DXNJdtcUNoipOqzvZ4Lg?e=K4q18a]]
--Web用に透過・トリミング等の加工済（使用ソフト；Photoshop）
~
**2025.10.13
***柳川市観光Webサイトの構築
[[PC版>https://www.figma.com/proto/glJ8nN5XnuQ7EXHQBuPgG1/%E6%9F%B3%E5%B7%9D%E8%A6%B3%E5%85%89Web%E3%82%B5%E3%82%A4%E3%83%88_PC?node-id=0-4&starting-point-node-id=0%3A4&t=ko05Wu846JvAB6ei-1]]
[[Mobile版>https://www.figma.com/proto/Y3ePQrnApgstx4Lj01hBlK/%E6%9F%B3%E5%B7%9D%E8%A6%B3%E5%85%89Web%E3%82%B5%E3%82%A4%E3%83%88_Mobile?node-id=73-4&starting-point-node-id=73%3A4&t=vS8IqF17gLHH3tZM-1]]
-[[使用画像>https://ksumail-my.sharepoint.com/:f:/g/personal/k23as602_st_kyusan-u_ac_jp/Eq8KBMDWnVNKl5fPL3HvGokBw0DXNJdtcUNoipOqzvZ4Lg?e=K4q18a]]
--Web用に透過・トリミング等の加工済（使用ソフト；Photoshop）
~

**2025.10.06
***柳川市観光Webサイトの構築
[[PC版>https://www.figma.com/proto/glJ8nN5XnuQ7EXHQBuPgG1/%E6%9F%B3%E5%B7%9D%E8%A6%B3%E5%85%89Web%E3%82%B5%E3%82%A4%E3%83%88_PC?node-id=0-4&starting-point-node-id=0%3A4&t=ko05Wu846JvAB6ei-1]]
[[Mobile版>https://www.figma.com/proto/Y3ePQrnApgstx4Lj01hBlK/%E6%9F%B3%E5%B7%9D%E8%A6%B3%E5%85%89Web%E3%82%B5%E3%82%A4%E3%83%88_Mobile?node-id=73-4&starting-point-node-id=73%3A4&t=vS8IqF17gLHH3tZM-1]]
-実装_技術
--[[【HTML/CSS】 画像を簡単に横並びする方法を実際のコード例で解説！ | WP-LOAD>https://wp-load.in/html-css/html-img-side]]
//#image(.jpeg)
▼index.html
 <ul>
  <li><img src="image1.jpg" width="300" height="200" alt=""></li>
  <li><img src="image2.jpg" width="300" height="200" alt=""></li>
  <li><img src="image3.jpg" width="300" height="200" alt=""></li>
 </ul>
▼style.css
 <style>
 ul {
  display: flex;
 }
  li {
    list-style: none;
  }
 </style>
~

**2025.09.29
***柳川市観光Webサイトの構築
[[PC版>https://www.figma.com/proto/glJ8nN5XnuQ7EXHQBuPgG1/%E6%9F%B3%E5%B7%9D%E8%A6%B3%E5%85%89Web%E3%82%B5%E3%82%A4%E3%83%88_PC?node-id=0-4&starting-point-node-id=0%3A4&t=ko05Wu846JvAB6ei-1]]
[[Mobile版>https://www.figma.com/proto/Y3ePQrnApgstx4Lj01hBlK/%E6%9F%B3%E5%B7%9D%E8%A6%B3%E5%85%89Web%E3%82%B5%E3%82%A4%E3%83%88_Mobile?node-id=73-4&starting-point-node-id=73%3A4&t=vS8IqF17gLHH3tZM-1]]
-実装_技術
--[[CSSグラデーション背景ジェネレーター>https://webspe.net/tools/gradation/]]
#image(css_color.jpeg)
▼style.css
 .gradation {background-image: linear-gradient(0deg, #2b4671, #2b4671 27%, #eeeeee 27% 37%, #d1ab68 37% 100%);
 }
~


**2025.09.22
***柳川市観光Webサイトの構築
[[PC版>https://www.figma.com/proto/glJ8nN5XnuQ7EXHQBuPgG1/%E6%9F%B3%E5%B7%9D%E8%A6%B3%E5%85%89Web%E3%82%B5%E3%82%A4%E3%83%88_PC?node-id=0-4&starting-point-node-id=0%3A4&t=ko05Wu846JvAB6ei-1]]
[[Mobile版>https://www.figma.com/proto/Y3ePQrnApgstx4Lj01hBlK/%E6%9F%B3%E5%B7%9D%E8%A6%B3%E5%85%89Web%E3%82%B5%E3%82%A4%E3%83%88_Mobile?node-id=73-4&starting-point-node-id=73%3A4&t=vS8IqF17gLHH3tZM-1]]
-先行事例の調査
--[[学校法人近畿大学創立100周年記念サイト>https://100th.kindai.ac.jp]]
--[[BREAKING STREET>https://breakingstreet.kose.co.jp]]
--[[書き初め2025>https://spicato.com/kakizome2025/]]
-5W1Hの各要素
Who（誰が）：老若男女問わず、柳川に興味を持った人
//主語となる人物や対象について。
What（何を）：柳川市について興味を抱き情報収集する
//具体的な行動や物事、内容について。
When（いつ）：旅行前の計画立てや旅行時に
//出来事が起きた日時や時期、時間について。
Where（どこで）：自宅での情報収集や現地（柳川）で
//出来事が起きた場所、場所の詳細について。
Why（なぜ）：より多くの人に柳川の魅力を知ってもらい観光に来てもらう
//その出来事が起きた理由、原因について。
How（どのように）：柳川観光の情報収集をより楽しく便利に
//出来事が起きた経緯、方法、手段について。
-技法・技術情報
HTML,CSS,JavaScript
--[[JavaScriptで縦スクロールを横スクロールに変換する>https://zenn.dev/karugamo/articles/33bf1b2595d05d]]
--[[【HTML/CSS】横スクロールできる表（テーブル）の作り方>https://tomiwa-tech.co.jp/blog/scrollable-table/#:~:text=させてください%E3%80%82-,min%2Dwidthを使う方法,スクロールするという方法です%E3%80%82&text=HTMLは先ほどと同じです%E3%80%82&text=CSSは以下のようになります%E3%80%82&text=:%204px%208px;%20%7D-,ポイントとしては、table要素を囲む%20.table%2Dwrap,て変更してください%E3%80%82]]
--[[ページを横にスクロールさせる（HTML、JavaScript）>https://img-flow.com/blog/coding/animation/yokoscroll/]]
~

**2025.09.15
***全体説明
-授業の進め方、研究調査について
~
***テーマ案の入力シート
-柳川市観光Webサイトの構築
[[PC版>https://www.figma.com/proto/glJ8nN5XnuQ7EXHQBuPgG1/%E6%9F%B3%E5%B7%9D%E8%A6%B3%E5%85%89Web%E3%82%B5%E3%82%A4%E3%83%88_PC?node-id=0-4&starting-point-node-id=0%3A4&t=ko05Wu846JvAB6ei-1]]
[[Mobile版>https://www.figma.com/proto/Y3ePQrnApgstx4Lj01hBlK/%E6%9F%B3%E5%B7%9D%E8%A6%B3%E5%85%89Web%E3%82%B5%E3%82%A4%E3%83%88_Mobile?node-id=73-4&starting-point-node-id=73%3A4&t=vS8IqF17gLHH3tZM-1]]
--先行事例の調査
[[学校法人近畿大学創立100周年記念サイト>https://100th.kindai.ac.jp]]
[[BREAKING STREET>https://breakingstreet.kose.co.jp]]
[[書き初め2025>https://spicato.com/kakizome2025/]]
-モーショングラフィックス
~
~
~