Black And White
カフェスイーツ紹介サイト
- Chihiro Nakai
- Keywords：Sweets, Web, Black, White, 商品ページ
- 公開Webサイト
概要
これは何？
福岡県にあるモノトーン基調のカフェを紹介するWebサイト
背景と目的
- 背景
近年のカフェの特徴は内装やレイアウトにこだわり、コンセプトに沿ったものが多くある。その中でも"カラー"や”インテリア”、とある”モチーフ”をコンセプトにしているカフェが増えてきている
- 目的
カフェ好き、SNSを使っている若年層に向けて、カフェの情報が一貫して見ることができ、ビジュアルを見て楽しめるようなWebサイトを作ること
コンセプト
- より商品を魅力的にするビジュアルデザイン（シックな色調に）
- カフェの情報を一貫して見ることができる（店名、住所、価格など）
成果物の仕様
- 3年前期：Webサイト ( サイト構成 / 宣材写真 / HTML / CSS )
- 3年後期：Webサイト ( CSS / Javascript / 改善)
メンバー
中井千尋
制作ツール
- ソフトウエア
Visual Studio Code
Photoshop
Illustrator
Figma
プロジェクトの期間
プロジェクトの期間｜2024.04.09 - 2024.07.09
まとめ
- 商品の写真など情報をひとつの枠に収めて一貫した情報の掲載はできたが、デザイン的にコードを組み立てることが難しかった
→後期に向けて統一感のあるデザインに変更する
調査
現状調査
問題の洗い出し
インターン先で商品ページに関わる機会があったが、技術的に力不足なところがあった
→参考資料、サイトやコードを調べる
デザインに凝りすぎると何が目的かわからなくなる
→視覚的に読みやすい構成を調べる（ Z字、コの字 ）
先行事例
技法・技術情報
- Photoshop、Illustratorによる素材作り
- Webコード例 ( css )
プロジェクト管理
スケジュール
タスク管理
ToDo
サイトマップワイヤーフレームサイト構成資料集め現地調査HTML- CSS
進捗記録
2024.07.09
作業(作成)
- Visual Studio Code ( HTML CSS )
- レイアウト修正
2024.07.02
最終発表( プレゼンテーション )
- 洗い出し（評価を受けて、改善すべきこと、新たに考えること）
作業(作成)
- Visual Studio Code ( HTML CSS )
- レイアウト修正
2024.06.25
作業(作成)
- Visual Studio Code ( HTML CSS )
報告
- 調査アンケート結果
回答：15人
1,性別 男性 1人 女性 14人
2,年齢層 10代〜20代 15人
3,役職 学生 14人 社会人 1人
4,モノトーン（白、黒、灰色）は好き？
評価の平均 4.53
5,モノトーンにどんなイメージ・印象を持っている？
"まとまってる印象、無難""かっこいい、締まって見える""かっこいい、かわいい、合わせやすい"
6,どんな時に使う？
"投稿や洋服などをおしゃれに見せたい時""気分"
7,モノトーンといえば何を思い浮かべる？
"カメラ。ファッション""カフェ、服のコーデ""しまうま"
2024.06.18
作業(作成)
- プレゼン前の全体見直し
- Visual Studio Codeに変更 ( HTML CSS )
- Photoshopにて商品画像加工 / 素材制作 (SP)
2024.06.11
作業(作成)
- 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サイトなのか？
- ”無機質”がコンセプトだと今のワイヤーフレームではコントラストが強すぎる
- ワイヤーフレーム完成
- 調査アンケート
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 イラスト制作
- 商品ページ（スイーツ・ごはん）
→自身での商品撮影など
- マンガ紹介
→著作権などに引っかからない引用の仕方をする
