#author("2024-06-18T14:44:53+09:00","default:member","member") *Black And White カフェスイーツ紹介サイト #image(mv.png) -''Chihiro Nakai'' -'''Keywords:Sweets, Web, Black, White, 商品ページ''' //__[[Webサイト>file:///Users/chihiro/Desktop/%E6%83%85%E5%A0%B1%E3%83%86%E3%82%99%E3%82%B5%E3%82%99%E3%82%A4%E3%83%B3%E7%A0%94%E7%A9%B6%E2%85%A0/index.html]]__ -__[[試作Webサイト>https://www.figma.com/design/FA4LQtBd26nipHdvAbjRNt/%E3%83%AF%E3%82%A4%E3%83%A4%E3%83%BC%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0(%E7%A0%94%E7%A9%B6%E2%85%A0)?node-id=0%3A1&t=RnJTPRTXXmAO3A0Q-1]]__ -__[[調査アンケート>https://forms.office.com/r/Q4Mjdw2HCw]]__ ← ご協力お願いします‼︎ ~ ~ **概要 ***これは何? 福岡県にあるカフェスイーツを紹介するWebサイト ~ ***背景と目的 -背景 近年のカフェの特徴は内装やレイアウトにこだわり、コンセプトに沿ったものが多くある。その中でも"無機質"や”モノトーン”をコンセプトにしているカフェが増えてきており、これは若年層のSNSによる”自分映え”することが大きく関係している ~ -目的 カフェ好き、SNSを使っている若年層に向けて、カフェの情報が一貫して見れるWebサイトを作ること ~ ***コンセプト //基本的な考え方、枠組み、視点など -より商品を魅力的にするビジュアルデザイン(紹介するカフェの雰囲気を考えて シックな色調に) -カフェの情報を一貫して見ることができる(店名、住所、価格など) ~ ***成果物の仕様 -3年前期:Webサイト ( サイト構成 / 素材集め / HTML / CSS ) -3年後期:Webサイト ( CSS / Javascript ) ~ ***メンバー 中井千尋 ~ ***制作ツール -ハードウエア MacBook Pro -ソフトウエア Visual Studio Code Photoshop Illustrator Figma ~ ***プロジェクトの期間 プロジェクトの期間|2024.04.09 - 2024.07.09 ~ ***まとめ プロジェクトが完結したら「まとめ」を記載 ~ **調査 ***現状調査 //プロジェクトのテーマに関わる社会の現状 -Z世代に人気の”無機質カフェ”(モノクロカフェ)について __[[記事①>https://xtrend.nikkei.com/atcl/contents/18/00627/00002/]]__ __[[記事②>https://jocr.jp/raditopi/2023/05/04/501143/]]__ __[[記事③>https://logocompe.jp/manual/column/%E3%83%A2%E3%83%8E%E3%83%88%E3%83%BC%E3%83%B3%E3%81%AE%E7%A8%AE%E9%A1%9E%E3%81%A8%E4%B8%8E%E3%81%88%E3%82%8B%E5%8D%B0%E8%B1%A1/]]__ -夜カフェについて __[[記事>https://liber-inc.co.jp/wakashiru/2402/]]__ ~ 問題の洗い出し インターン先で商品ページに関わる機会があったが、技術的に力不足なところがあった →参考資料、サイトやコードを調べる デザインに凝りすぎると何が目的かわからなくなる →視覚的に読みやすい構成を調べる( Z字、コの字 ) ~ ***先行事例 -Webサイト __[[株式会社BAKE>https://cheesetart.com/]]__ __[[allée>https://alleeomotesando.jp/]]__ __[[cobuke coffee>http://cobukecoffee.com/]]__ -ランディングページ __[[landing page>https://pin.it/3IP0q3Rlg]]__ ~ ***技法・技術情報 -Photoshop、Illustratorによる素材作り -Webコード ( css ) ~ **プロジェクト管理 ***スケジュール __[[タスク管理>https://ksumail-my.sharepoint.com/:x:/g/personal/k22as022_st_kyusan-u_ac_jp/EcTKFciqucpLofoO0c9XOCEBZhztlkGQQ8e6fF2bi9MNoQ?e=7bdaE5]]__ ~ ***ToDo -%%サイトマップ%% -%%ワイヤーフレーム%% -%%サイト構成%% -資料集め -%%現地調査%% -HTML -CSS ~ #hr CENTER:''進捗記録'' #hr ~ ~ **2024.07.09 ***XXXX -◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯ ~ **2024.07.02 ***XXXX -◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯ ~ **2024.06.25 ***XXXX -◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯ ~ **2024.06.18 ***作業(作成) -プレゼン前の全体見直し -DreamWeaver ( HTML CSS )~ -Photoshopにて商品画像加工 / 素材制作 (SP) ~ **2024.06.11 ***XXXX ***作業(作成) -DreamWeaver ( HTML CSS ) -Photoshopにて商品画像加工 / 素材制作 ( PC / SP ) ~ **2024.06.04 ***作業(記入) -背景、目的、コンセプトの見直し ***作業(作成) -ワイヤーフレーム作成 ( PC / SP ) -DreamWeaver ( HTML ) -Photoshopにて商品画像加工 / 素材制作 ~ **2024.05.28 ***作業(記入) -背景、目的、コンセプトの見直し ***作業(作成) -ワイヤーフレーム作成 ( PC / SP ) -DreamWeaver ( HTML ) ~ **2024.05.21 ***中間発表 -問題洗い出し(中間評価を受けて、明確にすべきこと) --カフェスイーツを紹介する”無機質”なWebサイトを作るのか?or無機質カフェを紹介するWebサイトなのか? --”無機質”がコンセプトだと今のワイヤーフレームではコントラストが強すぎる -- -__[[ワイヤーフレーム完成>https://www.figma.com/design/FA4LQtBd26nipHdvAbjRNt/%E3%83%AF%E3%82%A4%E3%83%A4%E3%83%BC%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0(%E7%A0%94%E7%A9%B6%E2%85%A0)?node-id=0%3A1&t=RnJTPRTXXmAO3A0Q-1]]__ -__[[調査アンケート>https://forms.office.com/r/Q4Mjdw2HCw]]__ ~ **2024.05.14 ***作業(記入) -成果物の仕様 ***作業(作成) -ワイヤーフレーム作成 ( PC ) ~ **2024.05.07 ***作業(作成) -ワイヤーフレーム作成 ( PC ) ~ **2024.04.30 ***作業(記入) -現状調査 ~ ***作業(作成) -ワイヤーフレーム作成 ( SP , PC ) ~ **2024.04.23 ***作業(記入) -背景と目的、コンセプト -タスク管理シート作成 -モノトーンに関するアンケート作成 -現状調査 -問題の洗い出し ~ ***Webサイズ -スマートフォンサイズ(400px以下) -パソコンサイズ(〜1800) ※余裕があれば、タブレットサイズ(850px以下) ~ **2024.04.16 ***テーマの決定と深掘り(商品ページ) -白と黒を基調としたWebページ -スイーツを主軸に掲載 ※余裕があれば、リール動画も作成する ~ ***作業(作成) -サイトマップ完成 #image(sitemap.png,50%) ~ ***調査 -各ページのサイズ(スマホ、パソコン、タブレット) -__[[商品ページ参考>https://pin.it/5PHopce7g]]__ -__[[ランディングページ>https://pin.it/3IP0q3Rlg]]__ ~ ***先行事例 -参考サイト __[[株式会社BAKE>https://cheesetart.com/]]__ __[[cobuke coffee>http://cobukecoffee.com/]]__ __[[allée>https://alleeomotesando.jp/]]__ __[[どんどん亭>https://www.dondontei.com/campaign/umakarakankokucheesefair2024/]]__ ~ **2024.04.09 ***テーマ案(作りたいもの) -MV制作 or イラスト制作 -商品ページ(スイーツ・ごはん) →自身での商品撮影など -マンガ紹介 →著作権などに引っかからない引用の仕方をする ~