#author("2024-01-24T17:28:14+09:00;2023-12-01T15:27:22+09:00","default:member","member") #author("2024-01-24T17:29:01+09:00;2023-12-01T15:27:22+09:00","default:member","member") *博多KOSOサロン 博多KOSOサロンのプロモーションを目的としたWebサイト作成の研究 #image(main-v.jpg ) -''Kousei Hirashima'' -'''Keywords：Webdesign,HTML,CSS,JavaScript''' -https://kousei5819.github.io/koso/ //-__[[相互評価シート>https://www.example.com]]__ ← ここからコメントをお願いします。 ~ **概要 ***これは何？ [[博多KOSOサロン >https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=&cad=rja&uact=8&ved=2ahUKEwj9iKiy5YD_AhUFgFYBHTe1CgcQFnoECAgQAQ&url=https%3A%2F%2Fwww.komenukakoso-hakata.com%2F&usg=AOvVaw27JFd29UHtXBxquqU5Zck6//]]に興味を持っている方利用したいと思っている方向けに店舗の情報や米ぬか酵素風呂に関しての情報を分かりやすく提供するWebサイト //&color(red){これは何か・・を簡潔に}; ~ ***米ぬか酵素風呂とは 米ぬか酵素風呂とは米ぬかを有機微生物の力で発酵させ、その発酵熱を利用して温浴するものである。体感温度は40度ほどでふかふかの砂風呂になっており、入ることで免疫力を高める効果やリフレッシュ効果などが見込めるものになっている。 ~ ***背景 米ぬかを使用した温浴サロンはとてもマイナーで興味を持ってくれる方や利用したいと感じている方はとても貴重な存在である。その方々に向けて米ぬか酵素風呂の情報やお店の雰囲気、特徴を分かりやすく掲載する必要がある。しかし現状のWebページでは文字量が多い点や、メインメニューが分類されていない点など見やすいWebページではないという課題がある。 ~ ***目的 上記の課題を解決していき博多KOSOサロンに興味を持った方、利用したいと考えている方に分かりやすく店舗情報や米ぬかに関する情報を提供し、お客様が利用したいと感じるWebサイトを作成を行う。 //&color(red){プロジェクトの背景と目的}; ~ ***コンセプト //&color(red){基本的な考え方、枠組み、視点など}; 客層が20代から60代の女性が多く、年齢層が幅広いためシンプルで分かりやすいWebページの作成、運用を行う。米ぬかの色が茶色なので茶色ベースでWebサイト作成を行う。 ~ ***成果物の仕様 Webサイト ~ -サイトマップ #image(sitemap_n1.jpg ) ~ -トップページ #image(top_page01.jpg) #image(top_page02.jpg) //&color(red){&small(成果物の形式・サイズ・時間尺等);}; ~ //***メンバー //&color(red){共同プロジェクトの場合のみ｜メンバーと役割分担を明記}; ***制作ツール Adobe Xd Visual Studio Code HTML CSS JavaScript //&color(red){使用するツール｜ハードウエア・ソフトウエア}; ~ ***プロジェクトの期間 //&color(red){プロジェクトの期間｜20XX.XX.XX - 20XX.XX.XX }; 2023.4.14 - 2023.12.22 ~ ***まとめ //&color(red){プロジェクトが完結したら「まとめ」を記載して下さい。}; コンセプト通り現在使用しているwebサイトより大幅に情報をカットし、必要な情報を整理し、カテゴライズすることでシンプルで見やすいwebサイトを構築することができたと感じている。しかし、サイトの構築を重視し、写真にバリエーションや統一感がない点や、ロゴデザインなど細部によりこだわることができなかった。また、ドメインの移管も行う必要がある。今後はそのような点を改善していきながら今後のwebサイト運用を行っていきたいと考えている。 //最終審査後→お客様の声の部分で現状の口コミのほうがよりリアリティがあり、行きたいと感じるので、その部分でよりお客様が来たいと思えるような要素にしていく必要がある。headのタイトルを日本語にする、各ページにもページ名と店名を入れる必要がある。公式ラインを公式LINEに変更する。お店の中で使用しているフォントやインスタのフォント、webサイトのフォントを統一する必要がある。きれいに作りすぎている。写真を現在の店内の写真やもっと人が写っている写真を使用して親しみやすさを出す必要がある。外部のサイトに誘導するときは新しいタブに飛ばす必要がある。 //卒業研究の前期ではサイトマップ、ワイヤーフレーム、プロトタイプの作成まで終了した。課題としてはお店の雰囲気に合わせた、Webサイト制作ができていない点や、見やすく分かりやすいWebサイトとはどのようなWebサイトか確立できていない点が挙げられる。後期ではこのような点を明確化させコーディングの作業に移っていきたいと考えている。 //現状のWebサイトとの比較や差別した点、工夫した点を明確にわかるようにサイトを作る必要がある、説明する必要がある。情報の位置（予約や営業時間の位置が低い）、利用する人がどこを一番見ているか、どこを重点的に見ているのかを検証する必要がある。メインビジュアルの画像にしか店名が入っていないためロゴの下に店名を入れるかどうするか対応が必要。スマホ用のレイアウトをどうするのか。お客様の声→書き込める要素を加える。自分なりの視点で説明する、先行事例を活用し独自性を言う必要がある。博多KOSOサロンのプロモーションを目的としたWebサイト作成の研究、（2）プロトタイプの部分の上1行を削除、プロトタイプの画像をキャプション1,2,3に分ける。中間後→お客様の声の部分に写真を掲載するなどし、どのような施設なのかわかりやすくする必要がある、他のページに飛んだ際にお店の名前や情報がわかるようなサイトにする必要がある。ボタンの統一や、カタカナなのかひらがななのか、アルファベットなのか統一する必要がある。ロゴ案を３つほど出してお客様に決めてもらう仕様にする。 ~ ~ **調査 ***現状調査 [[博多KOSOサロン米ぬか酵素風呂 >https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=&cad=rja&uact=8&ved=2ahUKEwj9iKiy5YD_AhUFgFYBHTe1CgcQFnoECAgQAQ&url=https%3A%2F%2Fwww.komenukakoso-hakata.com%2F&usg=AOvVaw27JFd29UHtXBxquqU5Zck6//]] -現状のWebサイトの課題 --お店の場所が分かりづらい --文字量が多い --米ぬか酵素風呂がどのような施設でどのようなサービスを受けれるのか分かりにくい --デスクトップ用にレスポンシブされていない点 ~ -客層 20代〜60代の男女来店の9割が女性。美容、健康に興味がある人。病気治療中で体質改善したい人。健康だけど、今後に備えて体質改善したい人。 ~ -これから呼びたい客層 60代、70代のお客様。年齢層の高いお客様。健康寿命を延ばしたい人。 理由→高齢化社会になり、高齢になっても元気に働いている人が増えてきた。そういった方々のお役に立ちたい。 ~ -他のお店との違い 米ぬかを100%使った酵素風呂。水と空気と米ぬかだけで発酵させているので、添加であり、身体に優しい酵素風呂。米ぬか酵素風呂は裸で入れるので、身体中から酵素の効果を得る事が出来る。米ぬかは、ビタミン、ミネラルなど美肌にも効果ある成分が多く含まれており、肌の調子も整えてくれる。また、程よい油分で保湿効果もあり、乾燥肌の人にもオススメ。 博多KOSOサロンは、九州でNo.1の人気店でクチコミ件数もNo.1。 人気の理由は、完全個室でプライバシーが守れること。清潔であること。接客が良いこと。があげられる。 他店の多くは、木のクズ（おがくず、ひのき）を使った酵素風呂。理由は、独特の発酵臭が少ないため。木のクズの酵素風呂の多くは、裸で入れず、酵素着を着用しなければならず、発汗は期待できるが、酵素吸収の効果は少ない。木のクズだけは、発酵しないため、発酵を促す何かしらの材料をプラスしているお店が多い。清潔ではなく、個室になっていないお店もある。 //&color(red){プロジェクトのテーマに関わる社会の現状と問題の洗い出し}; ~ ***先行事例 米ぬかを使用した温浴サロンのサイト -[[KOYO BASE>https://www.branroom.jp/]] -[[haccola>https://haccola-spa.jp/price//]] -[[博多のしずく>https://hakatanoshizuku.jp/]] -[[青のしずく>http://www.aonoshizuku.com/about-2//]] -[[米ぬか発酵温浴 -ほのか->hhttps://www.ashitanota.net/]] 現状の米ぬか酵素風呂のWebサイトの特徴として、米ぬかについての説明が難しく文字情報が多くなっているWebサイトが多く見受けられる。また、写真を多く活用し、米ぬか酵素風呂の雰囲気を伝えている。色としては米ぬか酵素風呂を連想してもらいやすい、茶色を使用しているWebサイトが多い。 参考になりそうなサイト -[[KOYO BASE>https://koyobase.com/floor//]] -[[みかんなずかん>https://www.ito-noen.com/dictionary//]] -[[はたけワーク>https://hatakework.com/#mission//]] シンプルで分かりやすいサイト -[[伊坂美術印刷株式会社>http://www.isaka.co.jp/]] -[[株式会社はりま家>https://www.harimaya-co.com/]] -[[太宰府天満宮>https://www.dazaifutenmangu.or.jp/]] //-[[ > //]] //&color(red){プロジェクトのテーマに該当する先行事例の紹介、傾向分析など}; ~ ***技法・技術情報 //&color(red){プロジェクトの遂行に必要な技法・技術に関する調査}; ~ ~ **プロジェクト管理 ***スケジュール -[[スケジュール>https://docs.google.com/spreadsheets/d/1Jd3uIgz4_aw0L3Go0M5yB6ieZUQ4ArcsIUS09m3SPwk/edit?usp=sharing//]] //&color(red){計画的な遂行のために、進行管理表を作成してリンクして下さい。}; ~ ***ToDo -%%テーマ決め%% -%%スケジュール%% -%%調査%% -%%アイディア出し%% -%%試作%% -%%サイトマップ%% -%%ワイヤーフレーム%% -%%プロトタイプ%% -%%ロゴ制作%% -%%ハンバーガーメニュー%% -%%コーディング%% -%%レスポンシブデザイン%% //&color(red){やるべきこと（タスク）を箇条書きにします。}; //&color(red){完了後は「%%取り消し線%%」あるいは「// コメントアウト」」}; //***NotToDo //&color(red){やらないこと：何をするかではなく「何をしないか」を考える}; //&color(red){例：10人以上の会議には出ない。苦手なことは誰かに頼む・・}; ~ ~ #hr CENTER:''進捗記録'' //&color(red){最新の情報を一番上に記載して下さい（古い記事が下へ沈む）。}; #hr ~ ~ **2023.12.15 ***作業内容 -fire foxで予約ボタンが正しく表示されない不具合を修正した。 //2024.1.24 平島 #YouTube(7xx66mR_HeE) 櫻坂46『何歳の頃に戻りたいのか？』 ~ ~ **2023.12.08 ***作業内容 -head内のtitleを変更した。 ~ ~ **2023.12.01 ***作業内容 -最終プレゼンで指摘された内容をまとめ、to doリストを作成した。 ~ ~ **2023.11.24 ***作業内容 -Instagramのアクセストークンを取得 -お問い合わせの項目を追加 ~ ~ **2023.11.17 ***作業内容 -アクセス部分をレスポンシブ対応 -米ぬかとはの部分に効果、効能を追加 ~ ~ **2023.11.10 ***作業内容 -ご利用の流れで使用する写真の試し撮り - ~ ~ **2023.11.03 ***作業内容 -フォントの変更 -全てのボタンを統一化 ~ ~ **2023.10.27 ***作業内容 -メインビジュアルの画像を変更 -新しいロゴの作成、掲載 ~ ~ **2023.10.20 ***作業内容 -ハンバーガーメニューの作成 -レスポンシブデザインのコーディング作業 ~ ~ **2023.10.13 ***作業内容 -アクセス部分の作成 -フォントや文字の色を調整 ~ ~ **2023.10.06 ***作業内容 -ご利用の流れのページを作成 -トップページに使用するインスタ部分の作成 ~ ~ **2023.09.29 ***作業内容 -ヘッダー画像の修正 -料金ページの作成 ~ ~ **2023.09.22 ***作業内容 -lead部分に使用するボタンの作成 -予約部分のアイディア出し ~ ~ **2023.09.15 ***作業内容 -トップページのレイアウトを修正 -トップページのコーディング -スケジュールの更新 -ロゴのアイディア出し ~ ~ **2023.07.21 ***作業内容 -現状課題の洗い出し -概要集の修正 -後期のスケジュール作成 ~ ~ **2023.07.14 ***作業内容 -概要集の作成 -「お客様の声」ページのプロトタイプ作成 #image(o_page.jpg ) ~ ~ **2023.07.7 ***作業内容 -概要集の作成 -「ご利用の流れ」ページのプロトタイプ作成 このページも文章と画像だけで説明し、シンプルなページ作りを心がけました。 ~ #image(r_page.jpg ) ~ ~ **2023.06.30 ***作業内容 -概要集の作成 -「料金」ページのプロトタイプ作成 料金ページもシンプルにしたいと考えたため料金と予約項目の二つを掲載しました。 ~ #image(book_page.jpg ) ~ ~ **2023.06.23 ***作業内容 -概要集の作成 -サイトマップの変更 #image(sitemap.jpg ) -「米ぬかについて」ページのプロトタイプを作成 見やすくするために見出しのフォントサイズは100px,テキストのフォントサイズは25pxに設定。米ぬかが何かを最初に知ってもらいたいと考え最初に米ぬかについてを配置し、それ以降は伝えたい重要度によって順番を定めました。 ~ #image(about_page.jpg ) ~ ~ **2023.06.16 ***作業内容 -ワイヤーフレームを元にトップページのプロトタイプを作成 ~ #image(top_page.jpg ) ~ ~ **2023.06.09 ***作業内容 -ワイヤーフレーム制作、中間報告プレゼン準備 ~ ~ **2023.06.02 ***作業内容 -ワイヤーフレーム制作、中間報告プレゼン準備 ~ ~ **2023.05.26 ***作業内容 -概要の内容を更新、サイトマップ制作 ~ ~ **2023.05.19 ***作業内容 -調査の更新、背景、目的の更新、メインビジュアルの更新 ~ **2023.05.12 ***作業内容 -米ぬか温浴サロンのWebサイト作成 現状の課題や加えたい点をヒアリング ~ **2023.04.28 ***暫定テーマ -米ぬか温浴サロンをBlenderで表現する ~ ***追加テーマ案 -米ぬか温浴サロンをBlenderで表現する -映画館でおしりや腰が痛くならない施策の動画 -シャープペンシルの消しゴムの代替案 -日吉神社について紹介 -映画の半券を保存したくなるデザインに -芸術学部生の将来の夢をまとめたWebサイト作成 ~ ~ **2023.04.21 ***作業内容 -新たなテーマ案を練る ~ ~ **2023.04.14 ***テーマ案 -Python -色々な人の将来の夢を聞きまとめたWebサイトを作成 -モーショングラフィックスを活用し表情の可視化 -交差点のタイムラプス //**2023.0. //***XXXXXXX - ~ ~ ~ ~ ~