LogoMark.png

中井千尋/情報デザイン研究I のバックアップの現在との差分(No.4)

#author("2024-04-12T09:45:28+09:00","default:member","member")
*MainTitle
SubTitle ・・・・・・・・・・・・・・・・ 
#author("2024-06-11T15:48:36+09:00","default:member","member")
*Black And White
カフェスイーツ紹介サイト
#image(mv.png)

  
 
             メインビジュアル、あるいは
             プロジェクトの最新の状態を視覚的に掲載
 
   

-''Chihiro Nakai''
-'''Keywords：Sweets, Web, ・・・, ・・・'''
-https://www.example.com
//-__[[相互評価シート>https://www.example.com]]__  ← ここからコメントをお願いします。

-'''Keywords：Sweets, Web, Black, White, 商品ページ'''
-__[[試作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

-ソフトウエア
Dreamweaver
Photoshop
Illustrator
~

***プロジェクトの期間
&color(red){プロジェクトの期間｜2024.04.09 - 20XX.XX.XX };
プロジェクトの期間｜2024.04.09 - 2024.07.09
~

***まとめ
&color(red){プロジェクトが完結したら「まとめ」を記載して下さい。};
プロジェクトが完結したら「まとめ」を記載
~
~


**調査

***現状調査
&color(red){プロジェクトのテーマに関わる社会の現状と問題の洗い出し};
//プロジェクトのテーマに関わる社会の現状
-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/]]__
__[[どんどん亭>https://www.dondontei.com/campaign/umakarakankokucheesefair2024/]]__
__[[Pinterest>https://pin.it/6XzXuo6Go]]__
__[[allée>https://alleeomotesando.jp/]]__
__[[cobuke coffee>http://cobukecoffee.com/]]__
-ランディングページ
__[[landing page>https://pin.it/3IP0q3Rlg]]__
~

***技法・技術情報
&color(red){プロジェクトの遂行に必要な技法・技術に関する調査};

-Photoshop、Illustratorによる素材作り
-Webコード ( css )
~
~

**プロジェクト管理
***スケジュール
&color(red){計画的な遂行のために、進行管理表を作成してリンクして下さい。};
__[[タスク管理>https://ksumail-my.sharepoint.com/:x:/g/personal/k22as022_st_kyusan-u_ac_jp/EcTKFciqucpLofoO0c9XOCEBZhztlkGQQ8e6fF2bi9MNoQ?e=7bdaE5]]__
~

***ToDo
&color(red){やるべきこと（タスク）を箇条書きにします。};
&color(red){完了後は「%%取り消し線%%」あるいは「// コメントアウト」」};

-%%サイトマップ%%
-%%ワイヤーフレーム%%
-%%サイト構成%%
-資料集め
-%%現地調査%%
-HTML
-CSS
~
~

#hr
CENTER:''進捗記録''
&color(red){最新の情報を一番上に記載して下さい（古い記事が下へ沈む）。};
#hr
~
~
**2024.04.
**2024.07.09
***XXXX
-◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯
-◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯
~
***XXXXXXX
-◯◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯
-◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯

**2024.07.02
***XXXX
-◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯
~

**2024.06.25
***XXXX
-◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯
~

**2024..
**2024.06.18
***XXXX
-◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯
-◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯
~
***XXXXXXX
-◯◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯
-◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯

**2024.06.11
***XXXX
***作業(作成)
-DreamWeaver ( HTML CSS )
-Photoshopにて商品画像加工 / 素材制作
~

**2024.06.04
***作業(記入)
-背景、目的、コンセプトの見直し
***作業(作成)
-ワイヤーフレーム作成 ( PC / SP )
-DreamWeaver ( HTML )
-Photoshopにて商品画像加工 / 素材制作
~

**2024..
***XXXX
-◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯
-◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯
**2024.05.28
***作業(記入)
-背景、目的、コンセプトの見直し
***作業(作成)
-ワイヤーフレーム作成 ( PC / SP )
-DreamWeaver ( HTML )
~
***XXXXXXX
-◯◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯
-◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯

**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.04.
***XXXX
-◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯
-◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯
**2024.05.07
***作業(作成)
-ワイヤーフレーム作成 ( PC )
~
***XXXXXXX
-◯◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯
-◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯

**2024.04.30
***作業(記入)
-現状調査
~
***作業(作成)
-ワイヤーフレーム作成 ( SP , PC )
~

**2024.04.
***XXXX
-◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯
-◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯
**2024.04.23
***作業(記入)
-背景と目的、コンセプト
-タスク管理シート作成
-モノトーンに関するアンケート作成
-現状調査
-問題の洗い出し
~
***XXXXXXX
-◯◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯
-◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯
***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 イラスト制作
-商品ページ（スイーツ・ごはん）
→自身での商品撮影など
-マンガ紹介
→著作権などに引っかからない引用の仕方をする
~