平島功晴/卒業研究

博多KOSOサロン

博多KOSOサロンのプロモーションを目的としたWebサイト作成の研究

• Kousei Hirashima
• Keywords：Webdesign,HTML,CSS,JavaScript
• https://kousei5819.github.io/koso/

概要

これは何？

博多KOSOサロン に興味を持っている方利用したいと思っている方向けに店舗の情報や米ぬか酵素風呂に関しての情報を分かりやすく提供するWebサイト

米ぬか酵素風呂とは

米ぬか酵素風呂とは米ぬかを有機微生物の力で発酵させ、その発酵熱を利用して温浴するものである。体感温度は40度ほどでふかふかの砂風呂になっており、入ることで免疫力を高める効果やリフレッシュ効果などが見込めるものになっている。

背景

米ぬかを使用した温浴サロンはとてもマイナーで興味を持ってくれる方や利用したいと感じている方はとても貴重な存在である。その方々に向けて米ぬか酵素風呂の情報やお店の雰囲気、特徴を分かりやすく掲載する必要がある。しかし現状のWebページでは文字量が多い点や、メインメニューが分類されていない点など見やすいWebページではないという課題がある。

目的

上記の課題を解決していき博多KOSOサロンに興味を持った方、利用したいと考えている方に分かりやすく店舗情報や米ぬかに関する情報を提供し、お客様が利用したいと感じるWebサイトを作成を行う。

コンセプト

客層が20代から60代の女性が多く、年齢層が幅広いためシンプルで分かりやすいWebページの作成、運用を行う。米ぬかの色が茶色なので茶色ベースでWebサイト作成を行う。

成果物の仕様

Webサイト

• サイトマップ
  
  
  

• トップページ
  
  
  
  

制作ツール

Adobe Xd
Visual Studio Code
HTML
CSS
JavaScript

プロジェクトの期間

2023.4.14 - 2023.12.22

まとめ

コンセプト通り現在使用しているwebサイトより大幅に情報をカットし、必要な情報を整理し、カテゴライズすることでシンプルで見やすいwebサイトを構築することができたと感じている。しかし、サイトの構築を重視し、写真にバリエーションや統一感がない点や、ロゴデザインなど細部によりこだわることができなかった。また、ドメインの移管も行う必要がある。今後はそのような点を改善していきながら今後のwebサイト運用を行っていきたいと考えている。

調査

現状調査

博多KOSOサロン米ぬか酵素風呂

• 現状のWebサイトの課題

• お店の場所が分かりづらい
• 文字量が多い
• 米ぬか酵素風呂がどのような施設でどのようなサービスを受けれるのか分かりにくい
• デスクトップ用にレスポンシブされていない点
  
  

• 客層

20代〜60代の男女来店の9割が女性。美容、健康に興味がある人。病気治療中で体質改善したい人。健康だけど、今後に備えて体質改善したい人。

• これから呼びたい客層

60代、70代のお客様。年齢層の高いお客様。健康寿命を延ばしたい人。
理由→高齢化社会になり、高齢になっても元気に働いている人が増えてきた。そういった方々のお役に立ちたい。

• 他のお店との違い

米ぬかを100%使った酵素風呂。水と空気と米ぬかだけで発酵させているので、添加であり、身体に優しい酵素風呂。米ぬか酵素風呂は裸で入れるので、身体中から酵素の効果を得る事が出来る。米ぬかは、ビタミン、ミネラルなど美肌にも効果ある成分が多く含まれており、肌の調子も整えてくれる。また、程よい油分で保湿効果もあり、乾燥肌の人にもオススメ。

博多KOSOサロンは、九州でNo.1の人気店でクチコミ件数もNo.1。

人気の理由は、完全個室でプライバシーが守れること。清潔であること。接客が良いこと。があげられる。

他店の多くは、木のクズ（おがくず、ひのき）を使った酵素風呂。理由は、独特の発酵臭が少ないため。木のクズの酵素風呂の多くは、裸で入れず、酵素着を着用しなければならず、発汗は期待できるが、酵素吸収の効果は少ない。木のクズだけは、発酵しないため、発酵を促す何かしらの材料をプラスしているお店が多い。清潔ではなく、個室になっていないお店もある。

先行事例

米ぬかを使用した温浴サロンのサイト

• KOYO BASE
• haccola
• 博多のしずく
• 青のしずく
• 米ぬか発酵温浴 -ほのか-
  現状の米ぬか酵素風呂のWebサイトの特徴として、米ぬかについての説明が難しく文字情報が多くなっているWebサイトが多く見受けられる。また、写真を多く活用し、米ぬか酵素風呂の雰囲気を伝えている。色としては米ぬか酵素風呂を連想してもらいやすい、茶色を使用しているWebサイトが多い。

参考になりそうなサイト

• KOYO BASE
• みかんなずかん
• はたけワーク

シンプルで分かりやすいサイト

• 伊坂美術印刷株式会社
• 株式会社はりま家
• 太宰府天満宮

技法・技術情報

プロジェクト管理

スケジュール

• スケジュール

ToDo

• テーマ決め
• スケジュール
• 調査
• アイディア出し
• 試作
• サイトマップ
• ワイヤーフレーム
• プロトタイプ
• ロゴ制作
• ハンバーガーメニュー
• コーディング
• レスポンシブデザイン

2023.12.15

作業内容

• fire foxで予約ボタンが正しく表示されない不具合を修正した。

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

作業内容

• 概要集の作成
• 「お客様の声」ページのプロトタイプ作成

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で表現する

追加テーマ案

• 米ぬか温浴サロンをBlenderで表現する
• 映画館でおしりや腰が痛くならない施策の動画
• シャープペンシルの消しゴムの代替案
• 日吉神社について紹介
• 映画の半券を保存したくなるデザインに
• 芸術学部生の将来の夢をまとめたWebサイト作成

2023.04.21

作業内容

• 新たなテーマ案を練る
  
  
  
  

2023.04.14

テーマ案

• Python
• 色々な人の将来の夢を聞きまとめたWebサイトを作成
• モーショングラフィックスを活用し表情の可視化
• 交差点のタイムラプス