江口依舞/情報デザイン研究II

〜川下りで巡る〜 柳川観光Webサイト

柳川市の観光Webサイト(横スクロール型)の構築

• 江口 依舞
• Keywords：Yanagawa, website, horizontal scroll, sightseeing
• https://12eve24.github.io/web-yanagawa/
• https://12eve24.github.io/web-yanagawa-Re/ ←[ブラッシュアップ版]

概要

これは何？

柳川の魅力を多角的に発信する観光促進型Webサイト(PC版)。川下りをモデルに、名所・文化・季節イベントなどを「流れに沿って体験できる」デザインを備えることで、柳川の新たな魅力発信を目指す。

背景と目的

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

コンセプト

ユーザーが楽しみながら、柳川の魅力を知ってもらうWebデザインを目指し、観光名所や行事をイラスト化し、横スクロール形式で柳川の有名な観光資源である「川下り」を体験できるような仕掛けを盛り込む。視覚的に楽しめるデザインにすることで、より多くの人々に柳川の豊かな文化や魅力を身近に感じてもらう。

【5W1Hの各要素】
Who（誰が）：老若男女問わず、柳川に興味を持った人
What（何を）：柳川市について興味を抱き情報収集する
When（いつ）：旅行前の計画立てや旅行時に
Where（どこで）：自宅での情報収集や現地（柳川）で
Why（なぜ）：より多くの人に柳川の魅力を知ってもらい観光に来てもらう
How（どのように）：柳川観光の情報収集をより楽しく便利に

成果物の仕様

• Webリンク
  https://12eve24.github.io/web-yanagawa/
  https://12eve24.github.io/web-yanagawa-Re/ ←[ブラッシュアップ版]
  
  
• 動画( 尺:35秒 / YouTube )
  
  

メンバー

• Webサイト内【使用画像提供】
  • 柳川市役所 　観光課
  • 柳川市観光協会
    
    

制作ツール

• Figma（画面設計）
  • PC版
  • Mobile版
• Visual Studio Code（Webサイト構築）
  • HTML
  • CSS
  • JavaScript

プロジェクトの期間

• 工程表
  10/13,10/20,10/27　3Q中間審査 ※遠隔（発表：3分　質疑：3分）
  12/8,12/15,12/22　4Q最終審査 ※対面（発表：3分　質疑：3分）
  
  

まとめ

本研究では、柳川市の観光課題を調査・分析し、その結果をもとに設計・制作を行った観光促進型Webサイトを制作した。柳川市が公開している観光調査資料や現地調査を通して発見した課題を解決するため、「川下りで巡る体験」をコンセプトに設定し、横スクロール型のWeb構成を設計した。川の流れに沿って情報が展開される構造とすることで、ユーザーが柳川の名所や文化を体験的に理解できる導線を意識している。制作段階ではFigmaを用いて画面設計を行い、Visual Studio CodeによりHTML・CSS・JavaScriptで実装した。実装にあたっては、Figmaの画面設計だけでは表現できなかった、Webサイト特有のインタラクションにも注力した。具体的には、要素にマウスカーソルを重ねた際（ホバー時）に色が変化する表現や、画像がわずかに拡大するズームインの動きをCSSで設計し、クリック可能であることを直感的に伝える工夫を行った。これにより、ユーザーに「触れる」「操作できる」という感覚を与え、自然な行動喚起につなげている。調査に基づいた課題設定から、体験設計、実装におけるインタラクション表現までを一貫して行った点に、本作品の特徴がある。今後の課題としては、複数の階層の構築やサイト内のなめらかな動作など、技術面がまだ未熟で実装に至らなかった部分などが挙げられる。ユーザーが不自由を感じないUI/UXを目指すために、修正するためにさらなる技術面の勉強と習得をおこない、改善していくことで、より魅力的で価値のあるサイトへと発展していきたい。

調査

現状調査

• 既存の柳川市観光HP
  • 柳川市役所 　観光課
  • 柳川市観光協会

• 柳川市に対するイメ ージアンケート
  引 用 : 「第 3 章 柳 川 市 観 光 の 現 状 と課 題 」
  

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

先行事例

• 横スクロール形式のWebサイト
  • 学校法人近畿大学創立100周年記念サイト
  • BREAKING STREET
  • 書き初め2025
    
    

技法・技術情報

• HTML,CSS,JavaScript
  • JavaScriptで縦スクロールを横スクロールに変換する
  • 【HTML/CSS】横スクロールできる表（テーブル）の作り方
  • ページを横にスクロールさせる（HTML、JavaScript）
  • CSSグラデーション背景ジェネレーター
  • 【HTML/CSS】 画像を簡単に横並びする方法を実際のコード例で解説！ | WP-LOAD
  • 【HTML/CSS】マウスホバーアニメーション16選 | メタップスワン
  • クリックしたくなる！ボタンのホバーアニメーション20選 | Adlab
  • HTMLページの「トップに戻る」ボタンの作り方、おすすめデザイン5選 - WEBCAMP MEDIA
    
    
    
    

プロジェクト管理

スケジュール

• 工程表
• 10/13,10/20,10/27　3Q中間審査 ※遠隔（発表：3分　質疑：3分）プレゼン資料
• 12/8,12/15,12/22　4Q最終審査 ※対面（発表：3分　質疑：3分）作品の完成
  
  

ToDo

ブラッシュアップ
審査準備（最終）
Webサイトの構築 〜最終調節〜
Webサイトの構築 〜ホバーアクションなど〜
Webサイトの構築 〜画像配置〜
Webサイトの構築（試作）〜画像配置〜
Webサイトの構築〜画像処理〜
Webサイトの構築（試作）〜背景色〜
Webサイトの構築（試作）〜横スクロール〜
現場調査，先行事例の調査
企画

ブラッシュアップ期間

改良点

• 変化する可能性のあるもの(料金など)の掲載情報の編集
• ホバー時の四角い外枠→ホバー時に、拡大率,持ち上げ,発光(ドロップシャドウに段重ねの白い光彩)に変更
• スクロール動作のなめらかさを改良(※下部スクロールバー使用推奨)
• 階層構造を増やす(背景,中景,前景の三階層)
  
  

成果物の仕様

• Webリンク( 完成 )
  https://12eve24.github.io/web-yanagawa/
  https://12eve24.github.io/web-yanagawa-Re/ ←[ブラッシュアップ版]
  
  
• 動画( 尺:35秒 / YouTube )
  
  

2025.12.22

プレゼン(12.22発表)

振り返り

• プレゼン時間 [04:05]　 → もっと伝えたいことを簡潔に。
• 講評
  • 作品の試み（サイト構築に取り入れたギミックなど）は高評価
  • 変化する可能性のある情報(料金)の掲載の是非
  • 閲覧するデバイス環境によってサイトのデザインに差異が出る
  • ホバー時の四角い外枠
  • スクロールの動きのなめらかさが不十分
  • 階層構造を増やす(技術的にバグが起きないよう)
    
    

成果物の仕様

• Webリンク( 完成 )
  https://12eve24.github.io/web-yanagawa/
  
  
• 動画( 尺:35秒 / YouTube )
  
  

2025.12.15

成果物の仕様

• Webリンク( 完成 )
  https://12eve24.github.io/web-yanagawa/
  
  
• 動画( 尺:35秒 / YouTube )
  
  

2025.12.08

成果物の仕様

• Webリンク( 完成 )
  https://12eve24.github.io/web-yanagawa/
  
  
• 動画( 尺:35秒 / YouTube )
  
  

2025.12.01

柳川市観光Webサイトの構築　〜最終調節〜

• Webリンク
  https://12eve24.github.io/web-yanagawa/
  • 空の装飾（雲や菊の花の画像）のホバーアクション解除
  • 空の装飾（雲や菊の花の画像）の背景との境目を薄くする
  • 陸地と川のスクロールバーの動きを同期
  • すべての画像の位置サイズの最終調整
  • バックボタンの位置サイズの最終調整
  • Youtube動画リンクの挿入
    
    
• 実装_技術
  • 【HTML】ホームページに動画を埋め込む方法
    
    

2025.11.24

柳川市観光Webサイトの構築　〜ホバーアクションなど〜

• Webリンク
  https://12eve24.github.io/web-yanagawa/
  • マウスホバー時に、外枠で囲まれる
  • マウスホバー時に、大きさが変わる
  • マウスホバー時に、影が浮き出る
  • ブラウザバックボタンの制作・調節
    
    
• 実装_技術
  • 【HTML/CSS】マウスホバーアニメーション16選 | メタップスワン
  • クリックしたくなる！ボタンのホバーアニメーション20選 | Adlab
  • HTMLページの「トップに戻る」ボタンの作り方、おすすめデザイン5選 - WEBCAMP MEDIA
    
    

2025.10.27

柳川市観光Webサイトの構築　〜画像配置〜

• Webリンク
  https://12eve24.github.io/web-yanagawa-prototype2/
  • Webサイト上の画像の配置調節
  • ブラウザバックボタンの制作
    
    
• 実装_技術
  • 【HTML/CSS】 画像を簡単に横並びする方法を実際のコード例で解説！ | WP-LOAD
  • JavaScriptで縦スクロールを横スクロールに変換する
  • 【HTML/CSS】横スクロールできる表（テーブル）の作り方
  • ページを横にスクロールさせる（HTML、JavaScript）
  • HTMLページの「トップに戻る」ボタンの作り方、おすすめデザイン5選 - WEBCAMP MEDIA

2025.10.20

柳川市観光Webサイトの構築（試作）　〜画面分割と画像配置〜

• Webリンク（試作）
  https://12eve24.github.io/web-yanagawa-prototype1/
  
  
• 実装_技術
  • 【HTML/CSS】 画像を簡単に横並びする方法を実際のコード例で解説！ | WP-LOAD
  • JavaScriptで縦スクロールを横スクロールに変換する
  • 【HTML/CSS】横スクロールできる表（テーブル）の作り方
  • ページを横にスクロールさせる（HTML、JavaScript）

2025.10.13

使用する画像の処理

• 使用画像
  • Web用に透過・トリミング等の加工済（使用ソフト；Photoshop）
  • Visual Studio Codeでのコーディング用に画像の名前・ファイル名変更済
  • 計）59枚
    
    

2025.10.06

柳川市観光Webサイトの構築（試作）　〜横スクロール〜

PC版

• 実装_技術
  • 【HTML/CSS】 画像を簡単に横並びする方法を実際のコード例で解説！ | WP-LOAD
  • JavaScriptで縦スクロールを横スクロールに変換する
  • 【HTML/CSS】横スクロールできる表（テーブル）の作り方
  • ページを横にスクロールさせる（HTML、JavaScript）
    ▼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版

• 実装_技術
  • CSSグラデーション背景ジェネレーター
    
    ▼style.css

    .gradation {background-image: linear-gradient(0deg, #2b4671, #2b4671 27%, #eeeeee 27% 37%, #d1ab68 37% 100%);
    }

    
    

2025.09.22

柳川市観光Webサイトの企画

PC版
Mobile版

• 先行事例の調査
  • 学校法人近畿大学創立100周年記念サイト
  • BREAKING STREET
  • 書き初め2025
• 5W1Hの各要素
  Who（誰が）：老若男女問わず、柳川に興味を持った人
  What（何を）：柳川市について興味を抱き情報収集する
  When（いつ）：旅行前の計画立てや旅行時に
  Where（どこで）：自宅での情報収集や現地（柳川）で
  Why（なぜ）：より多くの人に柳川の魅力を知ってもらい観光に来てもらう
  How（どのように）：柳川観光の情報収集をより楽しく便利に
• 技法・技術情報
  HTML,CSS,JavaScript
  • JavaScriptで縦スクロールを横スクロールに変換する
  • 【HTML/CSS】横スクロールできる表（テーブル）の作り方
  • ページを横にスクロールさせる（HTML、JavaScript）
    
    

2025.09.15

全体説明

• 授業の進め方、研究調査について
  
  

テーマ案の入力シート

• 柳川市観光Webサイトの構築
  PC版
  Mobile版
  • 先行事例の調査
    学校法人近畿大学創立100周年記念サイト
    BREAKING STREET
    書き初め2025
• モーショングラフィックス