江口依舞/情報デザイン研究II をテンプレートにして作成

開始行:
*〜川下りで巡る〜 柳川観光Webサイト 柳川市の観光Webサイト(横スクロール型)の構築 #image(main.gif) -''江口 依舞'' -'''Keywords：Yanagawa, website, horizontal scroll, sight... -https://12eve24.github.io/web-yanagawa/ //-__[[相互評価シート>https://www.example.com]]__ ← ここ... ~ //***CONTENTS //#contents2_1 //~ **概要 ***これは何？ 柳川の魅力を多角的に発信する観光促進型Webサイト。川下りを... //&color(red){これは何か・・を簡潔に}; ~ ***背景と目的 従来、柳川観光のイメージは“川下り”と“うなぎ”に偏っており... //&color(red){プロジェクトの背景と目的}; ~ ***コンセプト ユーザーが楽しみながら、柳川の魅力を知ってもらうWebデザイ... ~ 【5W1Hの各要素】 Who（誰が）：老若男女問わず、柳川に興味を持った人 //主語となる人物や対象について。 What（何を）：柳川市について興味を抱き情報収集する //具体的な行動や物事、内容について。 When（いつ）：旅行前の計画立てや旅行時に //出来事が起きた日時や時期、時間について。 Where（どこで）：自宅での情報収集や現地（柳川）で //出来事が起きた場所、場所の詳細について。 Why（なぜ）：より多くの人に柳川の魅力を知ってもらい観光に... //その出来事が起きた理由、原因について。 How（どのように）：柳川観光の情報収集をより楽しく便利に //出来事が起きた経緯、方法、手段について。 //&color(red){基本的な考え方、枠組み、視点など}; ~ ***成果物の仕様 Web //&color(red){&small(成果物の形式・サイズ・時間尺等);}; ~ ***メンバー -Webサイト内【使用画像提供】 --[[柳川市役所 　観光課>https://www.city.yanagawa.fukuoka... --[[柳川市観光協会>https://www.yanagawa-net.com/]] //&color(red){共同プロジェクトの場合のみ｜メンバーと役割... ~ ***制作ツール -Figma --[[PC版>https://www.figma.com/proto/glJ8nN5XnuQ7EXHQBuPg... --[[Mobile版>https://www.figma.com/proto/Y3ePQrnApgstx4Lj... -Visual Studio Code --HTML --CSS --JavaScript //&color(red){使用するツール｜ハードウエア・ソフトウエア}; ~ ***プロジェクトの期間 //&color(red){プロジェクトの期間｜2025.09.15 - 2026.01.07... -[[工程表>https://ksumail-my.sharepoint.com/:x:/g/persona... #image(schedule.jpeg) ~ //***まとめ //&color(red){プロジェクトが完結したら「まとめ」を記載し... ~ ~ **調査 ***現状調査 -既存の柳川市観光HP --[[柳川市役所 　観光課>https://www.city.yanagawa.fukuoka... --[[柳川市観光協会>https://www.yanagawa-net.com/]] -柳川市に対するイメ ージアンケート [[引 用 : 「第 3 章 柳 川 市 観 光 の 現 状 と課 題 」>ht... #image(source.jpeg) --インタ ーネット利用者の訪問率が高く、柳川観光に関する情... --柳川に対するイメージは、全国的に”川下り”、”うなぎ”が強... --“うなぎを食べに” の目的が多い10代、20 代の観光満足度が... &color(red){柳川のその他の観光スポットやイベントなどの情... //&color(red){プロジェクトのテーマに関わる社会の現状と問... ~ ***先行事例 //&color(red){プロジェクトのテーマに該当する先行事例の紹... -横スクロール形式のWebサイト --[[学校法人近畿大学創立100周年記念サイト>https://100th.k... --[[BREAKING STREET>https://breakingstreet.kose.co.jp]] --[[書き初め2025>https://spicato.com/kakizome2025/]] ~ ***技法・技術情報 //&color(red){プロジェクトの遂行に必要な技法・技術に関す... -HTML,CSS,JavaScript --[[JavaScriptで縦スクロールを横スクロールに変換する>http... --[[【HTML/CSS】横スクロールできる表（テーブル）の作り方>... --[[ページを横にスクロールさせる（HTML、JavaScript）>http... --[[CSSグラデーション背景ジェネレーター>https://webspe.ne... --[[【HTML/CSS】 画像を簡単に横並びする方法を実際のコード... ~ ~ **プロジェクト管理 ***スケジュール //&color(red){計画的な遂行のために、進行管理表を作成して... -[[工程表>https://ksumail-my.sharepoint.com/:x:/g/persona... -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... [[Mobile版>https://www.figma.com/proto/Y3ePQrnApgstx4Lj01... -[[使用画像>https://ksumail-my.sharepoint.com/:f:/g/perso... --Web用に透過・トリミング等の加工済（使用ソフト；Photosho... ~ **2025.10.13 ***柳川市観光Webサイトの構築 [[PC版>https://www.figma.com/proto/glJ8nN5XnuQ7EXHQBuPgG1... [[Mobile版>https://www.figma.com/proto/Y3ePQrnApgstx4Lj01... -[[使用画像>https://ksumail-my.sharepoint.com/:f:/g/perso... --Web用に透過・トリミング等の加工済（使用ソフト；Photosho... ~ **2025.10.06 ***柳川市観光Webサイトの構築 [[PC版>https://www.figma.com/proto/glJ8nN5XnuQ7EXHQBuPgG1... [[Mobile版>https://www.figma.com/proto/Y3ePQrnApgstx4Lj01... -実装_技術 --[[【HTML/CSS】 画像を簡単に横並びする方法を実際のコード... //#image(.jpeg) ▼index.html <ul> <li><img src="image1.jpg" width="300" height="200" alt=... <li><img src="image2.jpg" width="300" height="200" alt=... <li><img src="image3.jpg" width="300" height="200" alt=... </ul> ▼style.css <style> ul { display: flex; } li { list-style: none; } </style> ~ **2025.09.29 ***柳川市観光Webサイトの構築 [[PC版>https://www.figma.com/proto/glJ8nN5XnuQ7EXHQBuPgG1... [[Mobile版>https://www.figma.com/proto/Y3ePQrnApgstx4Lj01... -実装_技術 --[[CSSグラデーション背景ジェネレーター>https://webspe.ne... #image(css_color.jpeg) ▼style.css .gradation {background-image: linear-gradient(0deg, #2b4... } ~ **2025.09.22 ***柳川市観光Webサイトの構築 [[PC版>https://www.figma.com/proto/glJ8nN5XnuQ7EXHQBuPgG1... [[Mobile版>https://www.figma.com/proto/Y3ePQrnApgstx4Lj01... -先行事例の調査 --[[学校法人近畿大学創立100周年記念サイト>https://100th.k... --[[BREAKING STREET>https://breakingstreet.kose.co.jp]] --[[書き初め2025>https://spicato.com/kakizome2025/]] -5W1Hの各要素 Who（誰が）：老若男女問わず、柳川に興味を持った人 //主語となる人物や対象について。 What（何を）：柳川市について興味を抱き情報収集する //具体的な行動や物事、内容について。 When（いつ）：旅行前の計画立てや旅行時に //出来事が起きた日時や時期、時間について。 Where（どこで）：自宅での情報収集や現地（柳川）で //出来事が起きた場所、場所の詳細について。 Why（なぜ）：より多くの人に柳川の魅力を知ってもらい観光に... //その出来事が起きた理由、原因について。 How（どのように）：柳川観光の情報収集をより楽しく便利に //出来事が起きた経緯、方法、手段について。 -技法・技術情報 HTML,CSS,JavaScript --[[JavaScriptで縦スクロールを横スクロールに変換する>http... --[[【HTML/CSS】横スクロールできる表（テーブル）の作り方>... --[[ページを横にスクロールさせる（HTML、JavaScript）>http... ~ **2025.09.15 ***全体説明 -授業の進め方、研究調査について ~ ***テーマ案の入力シート -柳川市観光Webサイトの構築 [[PC版>https://www.figma.com/proto/glJ8nN5XnuQ7EXHQBuPgG1... [[Mobile版>https://www.figma.com/proto/Y3ePQrnApgstx4Lj01... --先行事例の調査 [[学校法人近畿大学創立100周年記念サイト>https://100th.kin... [[BREAKING STREET>https://breakingstreet.kose.co.jp]] [[書き初め2025>https://spicato.com/kakizome2025/]] -モーショングラフィックス ~ ~ ~

終了行:
*〜川下りで巡る〜 柳川観光Webサイト 柳川市の観光Webサイト(横スクロール型)の構築 #image(main.gif) -''江口 依舞'' -'''Keywords：Yanagawa, website, horizontal scroll, sight... -https://12eve24.github.io/web-yanagawa/ //-__[[相互評価シート>https://www.example.com]]__ ← ここ... ~ //***CONTENTS //#contents2_1 //~ **概要 ***これは何？ 柳川の魅力を多角的に発信する観光促進型Webサイト。川下りを... //&color(red){これは何か・・を簡潔に}; ~ ***背景と目的 従来、柳川観光のイメージは“川下り”と“うなぎ”に偏っており... //&color(red){プロジェクトの背景と目的}; ~ ***コンセプト ユーザーが楽しみながら、柳川の魅力を知ってもらうWebデザイ... ~ 【5W1Hの各要素】 Who（誰が）：老若男女問わず、柳川に興味を持った人 //主語となる人物や対象について。 What（何を）：柳川市について興味を抱き情報収集する //具体的な行動や物事、内容について。 When（いつ）：旅行前の計画立てや旅行時に //出来事が起きた日時や時期、時間について。 Where（どこで）：自宅での情報収集や現地（柳川）で //出来事が起きた場所、場所の詳細について。 Why（なぜ）：より多くの人に柳川の魅力を知ってもらい観光に... //その出来事が起きた理由、原因について。 How（どのように）：柳川観光の情報収集をより楽しく便利に //出来事が起きた経緯、方法、手段について。 //&color(red){基本的な考え方、枠組み、視点など}; ~ ***成果物の仕様 Web //&color(red){&small(成果物の形式・サイズ・時間尺等);}; ~ ***メンバー -Webサイト内【使用画像提供】 --[[柳川市役所 　観光課>https://www.city.yanagawa.fukuoka... --[[柳川市観光協会>https://www.yanagawa-net.com/]] //&color(red){共同プロジェクトの場合のみ｜メンバーと役割... ~ ***制作ツール -Figma --[[PC版>https://www.figma.com/proto/glJ8nN5XnuQ7EXHQBuPg... --[[Mobile版>https://www.figma.com/proto/Y3ePQrnApgstx4Lj... -Visual Studio Code --HTML --CSS --JavaScript //&color(red){使用するツール｜ハードウエア・ソフトウエア}; ~ ***プロジェクトの期間 //&color(red){プロジェクトの期間｜2025.09.15 - 2026.01.07... -[[工程表>https://ksumail-my.sharepoint.com/:x:/g/persona... #image(schedule.jpeg) ~ //***まとめ //&color(red){プロジェクトが完結したら「まとめ」を記載し... ~ ~ **調査 ***現状調査 -既存の柳川市観光HP --[[柳川市役所 　観光課>https://www.city.yanagawa.fukuoka... --[[柳川市観光協会>https://www.yanagawa-net.com/]] -柳川市に対するイメ ージアンケート [[引 用 : 「第 3 章 柳 川 市 観 光 の 現 状 と課 題 」>ht... #image(source.jpeg) --インタ ーネット利用者の訪問率が高く、柳川観光に関する情... --柳川に対するイメージは、全国的に”川下り”、”うなぎ”が強... --“うなぎを食べに” の目的が多い10代、20 代の観光満足度が... &color(red){柳川のその他の観光スポットやイベントなどの情... //&color(red){プロジェクトのテーマに関わる社会の現状と問... ~ ***先行事例 //&color(red){プロジェクトのテーマに該当する先行事例の紹... -横スクロール形式のWebサイト --[[学校法人近畿大学創立100周年記念サイト>https://100th.k... --[[BREAKING STREET>https://breakingstreet.kose.co.jp]] --[[書き初め2025>https://spicato.com/kakizome2025/]] ~ ***技法・技術情報 //&color(red){プロジェクトの遂行に必要な技法・技術に関す... -HTML,CSS,JavaScript --[[JavaScriptで縦スクロールを横スクロールに変換する>http... --[[【HTML/CSS】横スクロールできる表（テーブル）の作り方>... --[[ページを横にスクロールさせる（HTML、JavaScript）>http... --[[CSSグラデーション背景ジェネレーター>https://webspe.ne... --[[【HTML/CSS】 画像を簡単に横並びする方法を実際のコード... ~ ~ **プロジェクト管理 ***スケジュール //&color(red){計画的な遂行のために、進行管理表を作成して... -[[工程表>https://ksumail-my.sharepoint.com/:x:/g/persona... -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... [[Mobile版>https://www.figma.com/proto/Y3ePQrnApgstx4Lj01... -[[使用画像>https://ksumail-my.sharepoint.com/:f:/g/perso... --Web用に透過・トリミング等の加工済（使用ソフト；Photosho... ~ **2025.10.13 ***柳川市観光Webサイトの構築 [[PC版>https://www.figma.com/proto/glJ8nN5XnuQ7EXHQBuPgG1... [[Mobile版>https://www.figma.com/proto/Y3ePQrnApgstx4Lj01... -[[使用画像>https://ksumail-my.sharepoint.com/:f:/g/perso... --Web用に透過・トリミング等の加工済（使用ソフト；Photosho... ~ **2025.10.06 ***柳川市観光Webサイトの構築 [[PC版>https://www.figma.com/proto/glJ8nN5XnuQ7EXHQBuPgG1... [[Mobile版>https://www.figma.com/proto/Y3ePQrnApgstx4Lj01... -実装_技術 --[[【HTML/CSS】 画像を簡単に横並びする方法を実際のコード... //#image(.jpeg) ▼index.html <ul> <li><img src="image1.jpg" width="300" height="200" alt=... <li><img src="image2.jpg" width="300" height="200" alt=... <li><img src="image3.jpg" width="300" height="200" alt=... </ul> ▼style.css <style> ul { display: flex; } li { list-style: none; } </style> ~ **2025.09.29 ***柳川市観光Webサイトの構築 [[PC版>https://www.figma.com/proto/glJ8nN5XnuQ7EXHQBuPgG1... [[Mobile版>https://www.figma.com/proto/Y3ePQrnApgstx4Lj01... -実装_技術 --[[CSSグラデーション背景ジェネレーター>https://webspe.ne... #image(css_color.jpeg) ▼style.css .gradation {background-image: linear-gradient(0deg, #2b4... } ~ **2025.09.22 ***柳川市観光Webサイトの構築 [[PC版>https://www.figma.com/proto/glJ8nN5XnuQ7EXHQBuPgG1... [[Mobile版>https://www.figma.com/proto/Y3ePQrnApgstx4Lj01... -先行事例の調査 --[[学校法人近畿大学創立100周年記念サイト>https://100th.k... --[[BREAKING STREET>https://breakingstreet.kose.co.jp]] --[[書き初め2025>https://spicato.com/kakizome2025/]] -5W1Hの各要素 Who（誰が）：老若男女問わず、柳川に興味を持った人 //主語となる人物や対象について。 What（何を）：柳川市について興味を抱き情報収集する //具体的な行動や物事、内容について。 When（いつ）：旅行前の計画立てや旅行時に //出来事が起きた日時や時期、時間について。 Where（どこで）：自宅での情報収集や現地（柳川）で //出来事が起きた場所、場所の詳細について。 Why（なぜ）：より多くの人に柳川の魅力を知ってもらい観光に... //その出来事が起きた理由、原因について。 How（どのように）：柳川観光の情報収集をより楽しく便利に //出来事が起きた経緯、方法、手段について。 -技法・技術情報 HTML,CSS,JavaScript --[[JavaScriptで縦スクロールを横スクロールに変換する>http... --[[【HTML/CSS】横スクロールできる表（テーブル）の作り方>... --[[ページを横にスクロールさせる（HTML、JavaScript）>http... ~ **2025.09.15 ***全体説明 -授業の進め方、研究調査について ~ ***テーマ案の入力シート -柳川市観光Webサイトの構築 [[PC版>https://www.figma.com/proto/glJ8nN5XnuQ7EXHQBuPgG1... [[Mobile版>https://www.figma.com/proto/Y3ePQrnApgstx4Lj01... --先行事例の調査 [[学校法人近畿大学創立100周年記念サイト>https://100th.kin... [[BREAKING STREET>https://breakingstreet.kose.co.jp]] [[書き初め2025>https://spicato.com/kakizome2025/]] -モーショングラフィックス ~ ~ ~

ページ名: