#author("2024-01-10T21:46:14+09:00;2024-01-10T21:41:26+09:00","default:member","member") #author("2024-01-10T21:48:22+09:00;2024-01-10T21:41:26+09:00","default:member","member") *純喫茶 キタキュウ 純喫茶の魅力･北九州の純喫茶を発信するWEBサイト #image(喫茶キタキュウ.jpg) -''宮﨑 あゆ'' -'''Keywords：純喫茶, 北九州, WEBサイト, ''' -[[純喫茶キタキュウ>https://miyazakiayu.github.io/jyunkixtusa/]] //-__[[相互評価シート>https://www.example.com]]__ ← ここからコメントをお願いします。 ~ **概要 ***これは何？ //&color(red){これは何か・・を簡潔に}; 古き良き喫茶店文化の魅力を伝えると共に、北九州市の純喫茶を紹介するWEBサイト ~ ***背景と目的 //&color(red){プロジェクトの背景と目的}; 年々古き良き喫茶店文化が少なくなっている。特に、人口減少が進む地域では、経営者や後継者がいないため、純喫茶減少が目立つ。今回は、純喫茶の楽しみ方や魅力、メリット等を紹介すると共に、人口減少数全国ワースト1位の北九州市の純喫茶を紹介するWEBサイトを制作し、純喫茶･北九州市に行ってみようのきっかけをつくる💡 ~ ***コンセプト //&color(red){基本的な考え方、枠組み、視点など}; まるで喫茶店にいるような気分になるWEBサイト ~ ***成果物の仕様 //&color(red){&small(成果物の形式・サイズ・時間尺等);}; WEBサイト PC version. ① #image(ss1.png,60%) ② #image(スクリーンショット２.jpg,60%) ①の扉をクリックしたら②のサイトに飛ぶ仕様。 ②では、喫茶店のメニューを眺めているかのようなデザインにする。 左にメニュー項目。クリックすると右に映し出される仕様。 … スマホ version. ① #image(s-1.jpg,20%) ② #image(スクリーンショット3,jpeg,20%) #image(スクリーンショット3.jpeg,20%) ~ pcと同様扉を押したら①のサイトに飛ぶ。 右上のメニューを押すと②のように項目が映し出される。 … ''メニュー項目'' ●MORNING INFORMATION →記事の進捗情報 ABOUT →サイトについての説明 →補足 ●LUNCH 純喫茶について 純喫茶の魅力 北九州市の純喫茶紹介 →北九州市の問題と共に、北九州市の喫茶店を10店舗ほどご紹介（随時追加） ●DESERT 参考 →参考サイト等のURL ~ ***制作ツール //&color(red){使用するツール｜ハードウエア・ソフトウエア}; -Html -Css -Atom -Illustrator -Photoshop -Ibis paint -iPhone カメラ ~ ***プロジェクトの期間 //&color(red){プロジェクトの期間｜20XX.XX.XX - 20XX.XX.XX }; 2023.04.14〜2023.12.22 ~ ***まとめ //&color(red){プロジェクトが完結したら「まとめ」を記載して下さい。}; 喫茶店の雰囲気を感じさせるWebデザインができたと思う。また、イラストを使用して前期よりより一層純喫茶の魅力を伝える工夫ができた。 紹介する純喫茶に関しては、随時追加し展示会の時にはよりボリュームを増やせるようブラッシュアップする予定だ。 ~ ~ **調査 ***現状調査 //&color(red){プロジェクトのテーマに関わる社会の現状と問題の洗い出し}; ''純喫茶とは'' 純喫茶ではお酒の提供がなく、純粋にコーヒーを楽しむための喫茶店のことを言い、昭和の始め頃には登場している・・・ … ''純喫茶の減少…'' -車の普及により、移動時間短縮で休憩しなくなったため -チェーン店やカフェが普及し、安価でコーヒーを楽しめるようになったため … ~ ''考えられる改善策💡⠜'' -車でもわざわざ行きたいと思える魅力を伝える -純喫茶だからこそ味わえるコーヒーの美味しさを伝える -コーヒー以外のメニューを知ってもらう … ~ [[喫茶店が減少した理由>https://president.jp/articles/amp/27411?page=1]] [[純喫茶絶滅？！>https://www.itmedia.co.jp/business/spv/2201/25/news066.html]] ~ ~ ''北九州市人口減少問題'' 就職や進学により若者が流出し続けている… ⇝︎ 商店街の衰退や空き店舗増加 ~ __経営者や後継者も北九州市を離れている__ ⇝純喫茶も 減少 … ~ ''北九州市の純喫茶を紹介する☕️'' 純喫茶に対する関心を抱いてもらうきっかけ作り、 多くの方に足を運んでもらうことで閉業を防ぐ。 文化を受け継がせていく。 … ~ -[[北九州市の人口減少数 全国ワースト1位>https://kitaq.media/22667/]] -[[中心市街地の商店街と空き店舗率>https://www.city.kitakyushu.lg.jp/files/000109759.pdf]] -[[人口減少がカフェの売上に与える影響>https://cafeouen.com/blog190819/]] ~ ~ ***先行事例 [[ふるカフェ系ハルさんの休日>https://www.nhk.jp/p/furucafe/ts/W6Z2W3826N/episode/te/ZNXRXW63G2/]] [[純喫茶目録>http://junkissa.blog.jp/archives/cat_1276356.html]] ~ ***技法・技術情報 //&color(red){プロジェクトの遂行に必要な技法・技術に関する調査}; [[空蝉テンプレート>https://hiroec.com/template/]] ~ ~ **プロジェクト管理 ***スケジュール //&color(red){計画的な遂行のために、進行管理表を作成してリンクして下さい。}; [[スケジュール>https://docs.google.com/spreadsheets/d/1kJPJLAu-dR7Ak8xH1PUwJsJ8oNox9rORwhZw6BiGQag/edit#gid=1115838130]] ~ ***ToDo //&color(red){やるべきこと（タスク）を箇条書きにします。}; //&color(red){完了後は「%%取り消し線%%」あるいは「// コメントアウト」」}; //***NotToDo //&color(red){やらないこと：何をするかではなく「何をしないか」を考える}; //&color(red){例：10人以上の会議には出ない。苦手なことは誰かに頼む・・}; -%%調査%% -%%メインビジュアル制作%% -%%WEBサイトビジュアル制作%% -%%記事内容整理%% -%%ワイヤーフレーム制作%% -純喫茶巡り ~ ~ #hr CENTER:''進捗記録'' //&color(red){最新の情報を一番上に記載して下さい（古い記事が下へ沈む）。}; #hr ~ **2023.12.22 ***進捗記録 -説明パネル ~ ~ **2023.12.15 ***改善した箇所 -項目分け -記事内容 画像を2倍程度大きくしたが、レイアウトがずれキレイに収まらなくなったため 画像の大きさ変更は少しだけに留める。 ~ ~ **2023.12.08 ***最終審査 指摘されたこと -お店ごとにページを分ける -画像の大きさ -分かりにくい部分の補足（morning等） ~ ~ **2023.12.01 ***最終審査 -発表内容整理 ~ ~ **2023.11.24 ***進捗記録 -純喫茶紹介の記事内容整理 あまり詳しく書きすぎてしまうと、行った時の楽しみを奪ってしまうと考えた。 写真は2枚に絞る。 … →基本情報+どういった方におすすめしたいか ~ ~ **2023.11.17 ***進捗記録 -純喫茶巡り -WEBサイト調整 →最初のページのビジュアルを、伝わりにくかった看板から扉に変更した。 #image(ss1.png,60%) ~ ~ **2023.1110 ***進捗記録 純喫茶の魅力を紹介するページが文字だけだと伝わりにくいと 考えたので、ビジュアルを追加し見やすくした。 #image(miryoku.jpg,60%) ~ ~ **2023.10.27 ***中間発表 意見を頂いたうえで改善すること -ページを分けて見やすくする -記事内容に個性を出す →自撮り・・・？ →店主の理念・・・？ →どんな珈琲が飲めるのか 要検討していく・・・ ~ **2023.10.20 ***中間発表 -発表内容まとめる ***メモ [[音>https://since-inc.jp/blog/2252]] [[web>https://design.kyusan-u.ac.jp/OpenSquareJP/?WebDesign/Basics]] ~ **2023.10.13 ***WEBサイト調整 PCver. #image(1-2.png,60%) #image(2-2.jpg,60%) スマホver. #image(s-1.jpg,20%) #image(s-2.PNG,20%) ~ ***記事内容整理 -他の紹介サイトと個性出すためには… 基本情報 ＋ α α →おすすめメニュー →1人で入れるか お店を選ぶ時に重要視するもの -味 -見た目(雰囲気) -コスパ [[お店選びデータ>https://www.msandc.co.jp/info/column/ms/foodservice/case261]] 誰と食事するかで変わってくる… →誰と行くことを推奨するか(もしくはおひとり様か) -お店にキャッチフレーズをつける 要検討 ~ **2023.10.06 ***WEBサイト調整 -PC画面からスマホ画面に変わるときの調整 -枠の調整 -余白調整 読みやすくなった ~ **2023.09.29 ***WEBサイト調整 スマホver -背景タイル 無地より雰囲気が近づいた PCver -メニュー表デザイン変更 ~ ***メモ -[[フォント変更>https://design.kyusan-u.ac.jp/OpenSquareJP/?cmd=read&page=WebFonts&word=webfont]] ~ **2023.09,22 ***WEBサイト調整 -枠組み理解 ~ ***純喫茶メニュー表調査 ~ **2023.09.15 ***WEBサイト見直し スマホver - 背景変更 →紙っぽく・・・ PCver -デザインの見直し →調査した結果、喫茶店全体的に 本というよりかは薄いメニュー表の印象・・・ 全体的に・・・ -フォント変更 手書きっぽい・・・温かみのある・・・ -記事 見やすい余白 ~ **2023.07.21 ***WEBサイト見直し・・・ -[[ページ捲る1>https://fliphtml5.com/learning-center/ja/how-to-make-a-page-flipping-book-in-html/]] -[[ページ捲る2>https://qiita.com/masibw/items/fbf7ab151edffe37bfca]] ***純喫茶メニュー表 -[[メニュー表 デザイン例>https://www.pinterest.jp/auch2020/webデザイン/]] →紙のメニューが多い →全体的に薄い印象 →手書きが多い ~ **2023.07.14 ***中間審査 いただいた意見 -他のサイトと比べた時に個性をもっと出すべき -メニュー表のデザイン研究する -スマホ用ページを重点的に -ページを捲るように・・・ ~ **2023.07.07 ***WEBサイト調整 →喫茶店とカフェの違いを補足項目で伝える →クリックで飛べるようにする ~ **2023.06.30 ***進捗 -純喫茶調査 -記事内容まとめ -WEBサイト調整 ~ **2023.06.23 ***WEBサイト調整 #image(1.png,60%) #image(2.png,60%) 記事内容整理・・・ ~ **2023.06.16 ***北九州市の純喫茶を巡る中で・・・ 事前に調べて純喫茶だと思って伺ったとしても、意外とアルコール提供をしていて 純喫茶と呼べない喫茶店が増えてきている・・・ ↓ 純粋な喫茶店がすくなくなってきている現状として、除外せずに アルコールを提供している喫茶店であっても古き良き喫茶店として紹介することで皆に、 純喫茶文化が減少してきていることを伝えていく形にする。 ~ ***記事項目の改正 純喫茶にまるで来店してその場でメニューを眺めている気持ちに なってもらいたいため、大まかなメニュー項目を ''MORNING''・''LUNCH''・''DESERT''とした。 ~ ●''MORNING'' -INFORMATION →記事の進捗情報 -ABOUT →サイトについての説明 ●''LUNCH'' -純喫茶について -純喫茶の魅力 -北九州市の純喫茶紹介 →北九州市の問題と共に、北九州市の喫茶店を10店舗ほどご紹介（随時追加） ●''DESERT'' -参考 →参考サイト等のURL ~ **2023.06.09 ***進捗 -北九州市の純喫茶調査 -紹介情報を絞る ~ **2023.06.02 ***中間報告 ⁻記事項目の見直し -紹介する純喫茶店舗数を増やす -資格等の説明を明確に -PCverとスマホver確認 ~ **2023.05.26 ***進捗 -ワイヤーフレーム作成 -サイトマップ整理 ~ **2023.05.19 ***テーマ 失われている純喫茶文化×人口減少し続けている北九州市 ~ ***WEBサイト項目 -北九州と純喫茶についての説明 -北九州市の現状と純喫茶の現状 -楽しみ方や与える効果（根拠も踏まえて） -北九州市の純喫茶紹介 ~ ''メイン ビジュアル '' #image(喫茶キタキュウ.jpg,60%) 純喫茶の看板風のデザインを意識しており、 前年行われた[[アンケート調査>http://prw.kyodonews.jp/prwfile/release/M100123/200610027049/_prw_open.html#:~:text=●青色が前回1,1位となった%E3%80%82]]の結果を踏まえて、青色をメインカラーとし、北九州市の[[市章>https://www.city.kitakyushu.lg.jp/kouhou/file_0010.html]]を加えました。 ~ **2023.05.12 ***北九州市の純喫茶を紹介する… 人口減少数全国ワースト1位の北九州市だからこそ経営者も減少していると考えられるため。 ~ ***メモ -プロトタイプ作る -純喫茶の線引きを自分の中で定義つける（今までの線引きを踏まえて） ~ **2023.04.28 ***純喫茶の定義 純喫茶ではお酒の提供がなく、純粋にコーヒーを楽しむための喫茶店のことを言い、昭和の始め頃には登場している・・・ ~ ***北九州問題 -[[北九州市の人口減少数 全国ワースト1位>https://kitaq.media/22667/]] 人が減る＝店舗も減少・・・ ~ ***メモ -エリアを絞る（北九州） -関連性 ~ ***調査 -[[中心市街地の商店街と空き店舗率>https://www.city.kitakyushu.lg.jp/files/000109759.pdf]] -[[人口減少がカフェの売上に与える影響>https://cafeouen.com/blog190819/]] ~ **2023.04.21 ***テーマ決定 純喫茶店へ行ってみようのきっかけをつくる☕️ -WEBサイト（前期） ✎純喫茶の歴史 醍醐味 おすすめ紹介等（現時点） ~ ***調査 -[[コーヒー染め>https://niwalab.com/how-to/coffee-dyeing/]] -[[純喫茶でもやもや解消>https://next.rikunabi.com/journal/20160129_1/]] -[[飲み物でストレス解消>https://yoga-lava.com/yogafull/4000/?amp=1]] ~ **2023.04.14 ~ ***純喫茶店を減らさないために･･･ 純喫茶店の魅力を発信し「行ってみよう」のきっかけをつくる💡⠜ ~ ***考えられる減少理由 -車が普及したため移動時の休息が少なくなった（田舎） -コンビニ等でコーヒーが安易に飲めるようになった ~ ***喫茶店の利点 -こだわりのコーヒーが飲める -落ち着いた空間 居心地が良い -喫茶店各々個性がある ~ ***テーマ設定のための調査 -[[喫茶店が減少した理由>https://president.jp/articles/amp/27411?page=1]] -[[純喫茶絶滅？！>https://www.itmedia.co.jp/business/spv/2201/25/news066.html]] -[[純喫茶文化>https://www.cookdoor.jp/cafe/dictionary/22304_cafe_004/]] ~ ***テーマのアイデア -自分時間 -コンプレックス -路地裏 -喫茶店 ~ ~ ~