Black And White
カフェスイーツ紹介サイト
- Chihiro Nakai
- Keywords:Sweets, Web, Black, White, 商品ページ
- 試作Webサイト
- 調査アンケート ← ご協力お願いします‼︎
概要
これは何?
福岡県にあるカフェスイーツを紹介するWebサイト
背景と目的
- 背景
近年、韓国などで流行しているカフェの特徴は内装やレイアウトにこだわり、コンセプトに沿ったものが多くあり、その中でも"無機質"や”モノトーン”をコンセプトにしているカフェが増えてきている
これは若年層のSNSによる”自分映え”することが大きく関係していると考える
また、カフェの場所や価格層、雰囲気などがまとまってみれるものがなく、断片的な情報しかない
(見ていたページから別のページに飛んだり、新しくリンクを開かないといけない)
- 目的
カフェ好き、SNSを使っている若年層に向けて、カフェの情報が一貫して見れるWebサイトを作ること
コンセプト
- より商品を魅力的にするビジュアルデザイン(紹介するカフェの雰囲気を考えて ”無機質” ”モノトーン” というよりシックな色調に)
- カフェの情報を一貫して見ることができる
成果物の仕様
- 3年前期:Webサイト ( サイト構成 / 素材集め / HTML / CSS )
- 3年後期:Webサイト ( CSS / Javascript )
メンバー
中井千尋
制作ツール
- ソフトウエア
Dreamweaver
Photoshop
Illustrator
プロジェクトの期間
プロジェクトの期間|2024.04.09 - 2024.07.09
まとめ
プロジェクトが完結したら「まとめ」を記載
調査
現状調査
問題の洗い出し
インターン先で商品ページに関わる機会があったが、技術的に力不足なところがあった
→参考資料、サイトやコードを調べる
デザインに凝りすぎると何が目的かわからなくなる
→視覚的に読みやすい構成を調べる( Z字、コの字 )
先行事例
技法・技術情報
- Photoshop、Illustratorによる素材作り
- Webコード ( css )
プロジェクト管理
スケジュール
タスク管理
ToDo
サイトマップ
ワイヤーフレーム
サイト構成
- 資料集め
現地調査
- HTML
- CSS
進捗記録
2024.07.09
XXXX
2024.07.02
XXXX
2024.06.25
XXXX
2024.06.18
XXXX
2024.06.11
XXXX
作業(作成)
- DreamWeaver ( HTML CSS )
- Photoshopにて商品画像加工 / 素材制作
2024.06.04
作業(記入)
作業(作成)
- ワイヤーフレーム作成 ( PC / SP )
- DreamWeaver ( HTML )
- Photoshopにて商品画像加工 / 素材制作
2024.05.28
作業(記入)
作業(作成)
- ワイヤーフレーム作成 ( PC / SP )
- DreamWeaver ( HTML )
2024.05.21
中間発表
- 問題洗い出し(中間評価を受けて、明確にすべきこと)
- カフェスイーツを紹介する”無機質”なWebサイトを作るのか?or無機質カフェを紹介するWebサイトなのか?
- ”無機質”がコンセプトだと今のワイヤーフレームではコントラストが強すぎる
- ワイヤーフレーム完成
- 調査アンケート
2024.05.14
作業(記入)
作業(作成)
2024.05.07
作業(作成)
2024.04.30
作業(記入)
作業(作成)
2024.04.23
作業(記入)
- 背景と目的、コンセプト
- タスク管理シート作成
- モノトーンに関するアンケート作成
- 現状調査
- 問題の洗い出し
Webサイズ
- スマートフォンサイズ(400px以下)
- パソコンサイズ(〜1800)
※余裕があれば、タブレットサイズ(850px以下)
2024.04.16
テーマの決定と深掘り(商品ページ)
- 白と黒を基調としたWebページ
- スイーツを主軸に掲載
※余裕があれば、リール動画も作成する
作業(作成)
調査
先行事例
2024.04.09
テーマ案(作りたいもの)
- MV制作 or イラスト制作
- 商品ページ(スイーツ・ごはん)
→自身での商品撮影など
- マンガ紹介
→著作権などに引っかからない引用の仕方をする