博多KOSOサロン
博多KOSOサロンのプロモーションを目的としたWebサイト作成の研究
- Kousei Hirashima
- Keywords:Webdesign,HTML,CSS,JavaScript
概要
これは何?
博多KOSOサロン に興味を持っている方利用したいと思っている方向けに店舗の情報や米ぬか酵素風呂に関しての情報を分かりやすく提供するWebサイト
米ぬか酵素風呂とは
米ぬか酵素風呂とは米ぬかを有機微生物の力で発酵させ、その発酵熱を利用して温浴するものです。体感温度は40度ほどでふかふかの砂風呂になっており、入ることで免疫力を高める効果やリフレッシュ効果などが見込めるものになっています。
背景
米ぬかを使用した温浴サロンはとてもマイナーで興味を持ってくれる方や利用したいと感じている方はとても貴重な存在である。その方々に向けて米ぬか酵素風呂の情報やお店の雰囲気、特徴を分かりやすく掲載する必要がある。しかし現状のWebページでは文字量が多い点や、メインメニューが分類されていない点など見やすいWebページではないという課題がある。
目的
上記の課題を解決していき博多KOSOサロンに興味を持った方、利用したいと考えている方に分かりやすく店舗情報や米ぬかに関する情報を提供し、お客様が利用したいと感じるWebサイトを作成を行う。
コンセプト
客層が20代から60代の女性が多く、年齢層が幅広いためシンプルで分かりやすいWebページの作成、運用を行う。米ぬかの色が茶色なので茶色ベースでWebサイト作成を行う。
成果物の仕様
Webサイト
制作ツール
Adobe Xd
Visual Studio Code
HTML
CSS
PHP
プロジェクトの期間
2023.4.14 - 2023.12.22
まとめ
卒業研究後期の中間までにプロトタイプに沿ったコーディングを行ってきた。コーディングを行う中で課題として、インスタグラム、ブログを掲載するためにAPIを取得しwebサイトに反映させる必要がある点や、ロゴが完成していない点、写真の枚数が少ないため写真を撮影する必要がある点など課題があるためこれらの課題を11月末までに解決し、12月にWEBサイトをサーバーにアップロードしたいと考えている。
今後のスケジュールとして第1週にレスポンシブ、第2週に写真、第3週にロゴ完成、第4週にAPI取得、第5週にサイト全体を調整、第6週にサーバーにアップロード
調査
現状調査
博多KOSOサロン米ぬか酵素風呂
- お店の場所が分かりづらい
- 文字量が多い
- 米ぬか酵素風呂がどのような施設でどのようなサービスを受けれるのか分かりにくい
- デスクトップ用にレスポンシブされていない点
20代〜60代の男女来店の9割が女性。美容、健康に興味がある人。病気治療中で体質改善したい人。健康だけど、今後に備えて体質改善したい人。
60代、70代のお客様。年齢層の高いお客様。健康寿命を延ばしたい人。
理由→高齢化社会になり、高齢になっても元気に働いている人が増えてきた。そういった方々のお役に立ちたい。
米ぬかを100%使った酵素風呂。水と空気と米ぬかだけで発酵させているので、添加であり、身体に優しい酵素風呂。米ぬか酵素風呂は裸で入れるので、身体中から酵素の効果を得る事が出来る。米ぬかは、ビタミン、ミネラルなど美肌にも効果ある成分が多く含まれており、肌の調子も整えてくれる。また、程よい油分で保湿効果もあり、乾燥肌の人にもオススメ。
博多KOSOサロンは、九州でNo.1の人気店でクチコミ件数もNo.1。
人気の理由は、完全個室でプライバシーが守れること。清潔であること。接客が良いこと。があげられる。
他店の多くは、木のクズ(おがくず、ひのき)を使った酵素風呂。理由は、独特の発酵臭が少ないため。木のクズの酵素風呂の多くは、裸で入れず、酵素着を着用しなければならず、発汗は期待できるが、酵素吸収の効果は少ない。木のクズだけは、発酵しないため、発酵を促す何かしらの材料をプラスしているお店が多い。清潔ではなく、個室になっていないお店もある。
先行事例
米ぬかを使用した温浴サロンのサイト
参考になりそうなサイト
シンプルで分かりやすいサイト
技法・技術情報
プロジェクト管理
スケジュール
ToDo
テーマ決め
スケジュール
調査
アイディア出し
試作
サイトマップ
ワイヤーフレーム
プロトタイプ
- ロゴ制作
- コーディング
- アクセス部分に使用する動画撮影
- レスポンシブデザイン
進捗記録
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
作業内容
- 概要集の作成
- 「お客様の声」ページのプロトタイプ作成
2023.07.7
作業内容
- 概要集の作成
- 「ご利用の流れ」ページのプロトタイプ作成
このページも文章と画像だけで説明し、シンプルなページ作りを心がけました。
2023.06.30
作業内容
- 概要集の作成
- 「料金」ページのプロトタイプ作成
料金ページもシンプルにしたいと考えたため料金と予約項目の二つを掲載しました。
2023.06.23
作業内容
- 概要集の作成
- サイトマップの変更
- 「米ぬかについて」ページのプロトタイプを作成
見やすくするために見出しのフォントサイズは100px,テキストのフォントサイズは25pxに設定。米ぬかが何かを最初に知ってもらいたいと考え最初に米ぬかについてを配置し、それ以降は伝えたい重要度によって順番を定めました。
2023.06.16
作業内容
- ワイヤーフレームを元にトップページのプロトタイプを作成
2023.06.09
作業内容
2023.06.02
作業内容
2023.05.26
作業内容
2023.05.19
作業内容
- 調査の更新、背景、目的の更新、メインビジュアルの更新
2023.05.12
作業内容
- 米ぬか温浴サロンのWebサイト作成
現状の課題や加えたい点をヒアリング
2023.04.28
暫定テーマ
追加テーマ案
- 米ぬか温浴サロンをBlenderで表現する
- 映画館でおしりや腰が痛くならない施策の動画
- シャープペンシルの消しゴムの代替案
- 日吉神社について紹介
- 映画の半券を保存したくなるデザインに
- 芸術学部生の将来の夢をまとめたWebサイト作成
2023.04.21
作業内容
2023.04.14
テーマ案
- Python
- 色々な人の将来の夢を聞きまとめたWebサイトを作成
- モーショングラフィックスを活用し表情の可視化
- 交差点のタイムラプス