宮崎あゆ/卒業研究

純喫茶キタキュウ

純喫茶の魅力･北九州の純喫茶を発信するWEBサイト

宮﨑　あゆ
Keywords：純喫茶, 北九州, WEBサイト,
純喫茶キタキュウ

↑

概要

↑

これは何？

古き良き喫茶店文化の魅力を伝えると共に、北九州市の純喫茶を紹介するWEBサイト

↑

背景と目的

年々古き良き喫茶店文化が少なくなっている。特に、人口減少が進む地域では、経営者や後継者がいないため、純喫茶減少が目立つ。今回は、純喫茶の楽しみ方や魅力、メリット等を紹介すると共に、人口減少数全国ワースト1位の北九州市の純喫茶を紹介するWEBサイトを制作し、純喫茶･北九州市に行ってみようのきっかけをつくる💡

↑

コンセプト

まるで喫茶店にいるような気分になるWEBサイト

↑

成果物の仕様

WEBサイト

PC version.
①

②

①の扉をクリックしたら②のサイトに飛ぶ仕様。
②では、喫茶店のメニューを眺めているかのようなデザインにする。
左にメニュー項目。クリックすると右に映し出される仕様。
…
スマホ version.
①

②

pcと同様扉を押したら①のサイトに飛ぶ。
右上のメニューを押すと②のように項目が映し出される。
…
メニュー項目
●MORNING

INFORMATION
→記事の進捗情報
ABOUT
→サイトについての説明
→補足

●LUNCH

純喫茶について
純喫茶の魅力
北九州市の純喫茶紹介
→北九州市の問題と共に、北九州市の喫茶店を10店舗ほどご紹介（随時追加）

●DESERT

参考
→参考サイト等のURL

↑

制作ツール

Html
Css
Atom
Illustrator
Photoshop
Ibis paint
iPhone カメラ

↑

プロジェクトの期間

2023.04.14〜2023.12.22

↑

まとめ

喫茶店の雰囲気を感じさせるWebデザインができたと思う。また、イラストを使用して前期よりより一層純喫茶の魅力を伝える工夫ができた。
紹介する純喫茶に関しては、随時追加し展示会の時にはよりボリュームを増やせるようブラッシュアップする予定だ。

↑

調査

↑

現状調査

純喫茶とは

純喫茶ではお酒の提供がなく、純粋にコーヒーを楽しむための喫茶店のことを言い、昭和の始め頃には登場している・・・

…
純喫茶の減少…

車の普及により、移動時間短縮で休憩しなくなったため
チェーン店やカフェが普及し、安価でコーヒーを楽しめるようになったため
…

考えられる改善策💡⠜

車でもわざわざ行きたいと思える魅力を伝える
純喫茶だからこそ味わえるコーヒーの美味しさを伝える
コーヒー以外のメニューを知ってもらう
…

喫茶店が減少した理由
 純喫茶絶滅？！

北九州市人口減少問題
就職や進学により若者が流出し続けている…
⇝︎ 商店街の衰退や空き店舗増加

経営者や後継者も北九州市を離れている
‪⇝‬純喫茶も減少
…

北九州市の純喫茶を紹介する☕️
純喫茶に対する関心を抱いてもらうきっかけ作り、
多くの方に足を運んでもらうことで閉業を防ぐ。
文化を受け継がせていく。
…

↑

ToDo

調査
~~メインビジュアル制作~~
~~WEBサイトビジュアル制作~~
~~記事内容整理~~
~~ワイヤーフレーム制作~~
純喫茶巡り

進捗記録

↑

2023.12.22

↑

進捗記録

説明パネル

↑

2023.12.15

↑

改善した箇所

項目分け
記事内容

画像を2倍程度大きくしたが、レイアウトがずれキレイに収まらなくなったため
画像の大きさ変更は少しだけに留める。

↑

2023.12.08

↑

最終審査

指摘されたこと

お店ごとにページを分ける
画像の大きさ
分かりにくい部分の補足（morning等）

↑

2023.12.01

↑

最終審査

発表内容整理

↑

2023.11.24

↑

進捗記録

純喫茶紹介の記事内容整理

あまり詳しく書きすぎてしまうと、行った時の楽しみを奪ってしまうと考えた。
写真は2枚に絞る。
…
→基本情報+どういった方におすすめしたいか

↑

2023.11.17

↑

進捗記録

純喫茶巡り
WEBサイト調整
→最初のページのビジュアルを、伝わりにくかった看板から扉に変更した。

↑

2023.1110

↑

進捗記録

純喫茶の魅力を紹介するページが文字だけだと伝わりにくいと
考えたので、ビジュアルを追加し見やすくした。

↑

2023.10.27

↑

中間発表

意見を頂いたうえで改善すること

ページを分けて見やすくする
記事内容に個性を出す
→自撮り・・・？
→店主の理念・・・？
→どんな珈琲が飲めるのか

要検討していく・・・

↑

2023.10.20

↑

中間発表

発表内容まとめる

↑

メモ

音
 web

↑

2023.10.13

↑

WEBサイト調整

PCver.

スマホver.

↑

記事内容整理

他の紹介サイトと個性出すためには…
基本情報＋ α

α
→おすすめメニュー
→1人で入れるか

お店を選ぶ時に重要視するもの

味
見た目(雰囲気)
コスパ

お店選びデータ

誰と食事するかで変わってくる…
→誰と行くことを推奨するか(もしくはおひとり様か)

お店にキャッチフレーズをつける

要検討

↑

2023.10.06

↑

WEBサイト調整

PC画面からスマホ画面に変わるときの調整
枠の調整
余白調整
読みやすくなった

↑

2023.09.29

↑

WEBサイト調整

スマホver

背景タイル
無地より雰囲気が近づいた

PCver

メニュー表デザイン変更

↑

メモ

フォント変更

↑

2023.09,22

↑

WEBサイト調整

枠組み理解

↑

純喫茶メニュー表調査

↑

2023.09.15

↑

WEBサイト見直し

スマホver

背景変更
→紙っぽく・・・

PCver

デザインの見直し
→調査した結果、喫茶店全体的に
本というよりかは薄いメニュー表の印象・・・

全体的に・・・

フォント変更
手書きっぽい・・・温かみのある・・・

記事
見やすい余白

↑

2023.07.21

↑

WEBサイト見直し・・・

↑

純喫茶メニュー表

メニュー表　デザイン例
→紙のメニューが多い
→全体的に薄い印象
→手書きが多い

↑

2023.07.14

↑

中間審査

いただいた意見

他のサイトと比べた時に個性をもっと出すべき
メニュー表のデザイン研究する
スマホ用ページを重点的に
ページを捲るように・・・

↑

2023.07.07

↑

WEBサイト調整

→喫茶店とカフェの違いを補足項目で伝える
→クリックで飛べるようにする

↑

2023.06.30

↑

進捗

純喫茶調査
記事内容まとめ
WEBサイト調整

↑

2023.06.23

↑

WEBサイト調整

記事内容整理・・・

↑

2023.06.16

↑

北九州市の純喫茶を巡る中で・・・

事前に調べて純喫茶だと思って伺ったとしても、意外とアルコール提供をしていて
純喫茶と呼べない喫茶店が増えてきている・・・
↓
純粋な喫茶店がすくなくなってきている現状として、除外せずに
アルコールを提供している喫茶店であっても古き良き喫茶店として紹介することで皆に、
純喫茶文化が減少してきていることを伝えていく形にする。

↑