柳川市の観光Webサイト(横スクロール型)の構築
柳川の魅力を多角的に発信する観光促進型Webサイト(PC版)。川下りをモデルに、名所・文化・季節イベントなどを「流れに沿って体験できる」デザインを備えることで、柳川の新たな魅力発信を目指す。
従来、柳川観光のイメージは“川下り”と“うなぎ”に偏っており、その他の観光資源の認知度は低い。柳川と聞いて多くの人が連想するのは「川下り」と「うなぎ」であり、他の観光資源の認知度は一割未満と低い結果となっている。特に10代・20代では「うなぎを食べに行く」目的が多いが、価格の高さから満足度が相対的に低い傾向にあり柳川の魅力を十分に体感できずに帰る観光客も多い。柳川市の観光に関する調査では、インターネット利用者の訪問率が高く、情報発信手段としてWebの有効性が確認された。このことから、川下りやうなぎ以外の地域資源やイベントの魅力を発信するWebサイトづくりが今後の課題とされている。
ユーザーが楽しみながら、柳川の魅力を知ってもらうWebデザインを目指し、観光名所や行事をイラスト化し、横スクロール形式で柳川の有名な観光資源である「川下り」を体験できるような仕掛けを盛り込む。視覚的に楽しめるデザインにすることで、より多くの人々に柳川の豊かな文化や魅力を身近に感じてもらう。
【5W1Hの各要素】
Who（誰が）：老若男女問わず、柳川に興味を持った人
What（何を）：柳川市について興味を抱き情報収集する
When（いつ）：旅行前の計画立てや旅行時に
Where（どこで）：自宅での情報収集や現地（柳川）で
Why（なぜ）：より多くの人に柳川の魅力を知ってもらい観光に来てもらう
How（どのように）：柳川観光の情報収集をより楽しく便利に
本研究では、柳川市の観光課題を調査・分析し、その結果をもとに設計・制作を行った観光促進型Webサイトを制作した。柳川市が公開している観光調査資料や現地調査を通して発見した課題を解決するため、「川下りで巡る体験」をコンセプトに設定し、横スクロール型のWeb構成を設計した。川の流れに沿って情報が展開される構造とすることで、ユーザーが柳川の名所や文化を体験的に理解できる導線を意識している。制作段階ではFigmaを用いて画面設計を行い、Visual Studio CodeによりHTML・CSS・JavaScriptで実装した。実装にあたっては、Figmaの画面設計だけでは表現できなかった、Webサイト特有のインタラクションにも注力した。具体的には、要素にマウスカーソルを重ねた際（ホバー時）に色が変化する表現や、画像がわずかに拡大するズームインの動きをCSSで設計し、クリック可能であることを直感的に伝える工夫を行った。これにより、ユーザーに「触れる」「操作できる」という感覚を与え、自然な行動喚起につなげている。調査に基づいた課題設定から、体験設計、実装におけるインタラクション表現までを一貫して行った点に、本作品の特徴がある。今後の課題としては、複数の階層の構築やサイト内のなめらかな動作など、技術面がまだ未熟で実装に至らなかった部分などが挙げられる。ユーザーが不自由を感じないUI/UXを目指すために、修正するためにさらなる技術面の勉強と習得をおこない、改善していくことで、より魅力的で価値のあるサイトへと発展していきたい。
審査準備（最終）
Webサイトの構築 〜最終調節〜
Webサイトの構築 〜ホバーアクションなど〜
Webサイトの構築 〜画像配置〜
Webサイトの構築（試作）〜画像配置〜
Webサイトの構築〜画像処理〜
Webサイトの構築（試作）〜背景色〜
Webサイトの構築（試作）〜横スクロール〜
現場調査，先行事例の調査
企画
振り返り
<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>
.gradation {background-image: linear-gradient(0deg, #2b4671, #2b4671 27%, #eeeeee 27% 37%, #d1ab68 37% 100%);
}