〜川下りで巡る〜 柳川観光Webサイト
柳川市の観光Webサイト(横スクロール型)の構築
概要
これは何？
柳川の魅力を多角的に発信する観光促進型Webサイト。川下りをモデルに、名所・文化・季節イベントなどを「流れに沿って体験できる」デザインを備えることで、柳川の新たな魅力発信を目指す。
背景と目的
従来、柳川観光のイメージは“川下り”と“うなぎ”に偏っており、その他の観光資源の認知度は低い。柳川と聞いて多くの人が連想するのは「川下り」と「うなぎ」であり、他の観光資源の認知度は一割未満と低い結果となっている。特に10代・20代では「うなぎを食べに行く」目的が多いが、価格の高さから満足度が相対的に低い傾向にあり柳川の魅力を十分に体感できずに帰る観光客も多い。柳川市の観光に関する調査では、インターネット利用者の訪問率が高く、情報発信手段としてWebの有効性が確認された。このことから、川下りやうなぎ以外の地域資源やイベントの魅力を発信するWebサイトづくりが今後の課題とされている。
コンセプト
ユーザーが楽しみながら、柳川の魅力を知ってもらうWebデザインを目指し、観光名所や行事をイラスト化し、横スクロール形式で柳川の有名な観光資源である「川下り」を体験できるような仕掛けを盛り込む。視覚的に楽しめるデザインにすることで、より多くの人々に柳川の豊かな文化や魅力を身近に感じてもらう。
【5W1Hの各要素】
Who（誰が）：老若男女問わず、柳川に興味を持った人
What（何を）：柳川市について興味を抱き情報収集する
When（いつ）：旅行前の計画立てや旅行時に
Where（どこで）：自宅での情報収集や現地（柳川）で
Why（なぜ）：より多くの人に柳川の魅力を知ってもらい観光に来てもらう
How（どのように）：柳川観光の情報収集をより楽しく便利に
成果物の仕様
メンバー
制作ツール
プロジェクトの期間
まとめ
調査
現状調査
- インタ ーネット利用者の訪問率が高く、柳川観光に関する情報はインタ ーネットが有効 →柳川市の魅力が伝わるWeb サイトの制作
- 柳川に対するイメージは、全国的に”川下り”、”うなぎ”が強く、逆にそのほかの観光資源の認知度は 一割を切るなど、これらに比 べ非常に乏しい
- “うなぎを食べに” の目的が多い10代、20 代の観光満足度が相対的に低い →うなぎの価格の高騰(若い世 代が手を出しずらい)
柳川のその他の観光スポットやイベントなどの情報が乏しい状態で観光に行くと、柳川の魅力を十分に満喫できない
先行事例
技法・技術情報
プロジェクト管理
スケジュール
- 工程表
- 10/13,10/20,10/27 3Q中間審査 ※遠隔（発表：3分 質疑：3分）
- 12/8,12/15,12/22 4Q最終審査 ※対面（発表：3分 質疑：3分）
ToDo
Webサイトの構築（試作）〜画像配置〜
Webサイトの構築〜画像処理〜
Webサイトの構築（試作）〜背景色〜
Webサイトの構築（試作）〜横スクロール〜
現場調査，先行事例の調査
企画
進捗記録
2025.12.08
柳川市観光Webサイトの構築
PC版
Mobile版
- 使用画像
- Web用に透過・トリミング等の加工済（使用ソフト；Photoshop）
2025.12.01
柳川市観光Webサイトの構築
PC版
Mobile版
- 使用画像
- Web用に透過・トリミング等の加工済（使用ソフト；Photoshop）
2025.11.24
柳川市観光Webサイトの構築
PC版
Mobile版
- 使用画像
- Web用に透過・トリミング等の加工済（使用ソフト；Photoshop）
2025.10.27
柳川市観光Webサイトの構築
PC版
Mobile版
- 使用画像
- Web用に透過・トリミング等の加工済（使用ソフト；Photoshop）
2025.10.20
柳川市観光Webサイトの構築
PC版
Mobile版
- 使用画像
- Web用に透過・トリミング等の加工済（使用ソフト；Photoshop）
2025.10.13
柳川市観光Webサイトの構築
PC版
Mobile版
- 使用画像
- Web用に透過・トリミング等の加工済（使用ソフト；Photoshop）
2025.10.06
柳川市観光Webサイトの構築
PC版
Mobile版
- 実装_技術
- 【HTML/CSS】 画像を簡単に横並びする方法を実際のコード例で解説！ | WP-LOAD
▼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版
Mobile版
- 実装_技術
- CSSグラデーション背景ジェネレーター
▼style.css
.gradation {background-image: linear-gradient(0deg, #2b4671, #2b4671 27%, #eeeeee 27% 37%, #d1ab68 37% 100%);
}
2025.09.22
柳川市観光Webサイトの構築
PC版
Mobile版
- 先行事例の調査
- 5W1Hの各要素
Who（誰が）：老若男女問わず、柳川に興味を持った人
What（何を）：柳川市について興味を抱き情報収集する
When（いつ）：旅行前の計画立てや旅行時に
Where（どこで）：自宅での情報収集や現地（柳川）で
Why（なぜ）：より多くの人に柳川の魅力を知ってもらい観光に来てもらう
How（どのように）：柳川観光の情報収集をより楽しく便利に
- 技法・技術情報
HTML,CSS,JavaScript
2025.09.15
全体説明
テーマ案の入力シート
