Monotone Cafe's
モノトーン基調のカフェ紹介サイト ・・・・・・・・・・・・・・・・
- Chihiro Nakai
- Keywords:Sweets, Web, Black, White, 商品ページ
- 仮Webサイト
概要
これは何?
福岡県にあるモノトーン基調のカフェを紹介するWebサイト
背景と目的
背景
近年のカフェの特徴は内装やレイアウトにこだわり、コンセプトに沿ったものが多くある。その中でも"カラー"や”インテリア”、とある”モチーフ”をコンセプトにしているカフェが増えてきている
目的
カフェ好き、SNSを使っている若年層に向けて、カフェの情報が一貫して見ることができ、ビジュアルを見て楽しめるようなWebサイトを作ること
コンセプト
より商品を魅力的にするビジュアルデザイン
カフェの情報を一貫して見ることができる(店名、住所、価格など)
成果物の仕様
- Webサイト (CSS / Javascript / 改善)
制作ツール
- ハードウエア
MacBook Pro
- ソフトウエア
Visual Studio Code
Photoshop
プロジェクトの期間
プロジェクトの期間|2024.09.16 - 2024.12.23
まとめ
調査
現状調査
問題の洗い出し
先行事例
- Webサイト
株式会社BAKE - ランディングページ
landing page
技法・技術情報
- Photoshop、Illustratorによる素材作り
- Webコード例 ( css )
- 現地調査
プロジェクト管理
スケジュール
ToDo
- サイト再構成
- +αで現地調査
- HTML再コーディング
- CSS再構成コーディング
進捗記録
2024.12.23
XXXX
- ◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯
- ◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯
2024.12.16
最終発表
- ◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯
- ◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯
2024.12.09
最終発表
- ◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯
- ◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯
2024.12.02
XXXX
- ◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯
- ◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯
2024.11.25
相談
- 背景・目的・コンセプトの添削
- 問題定義が明確じゃないから深掘りできていない
作業
- コーディング(レイアウト再構成)
- 概要集の記入
2024.11.18
作業
- 全体の趣旨を再確認・修正
- 文章の修正(もっと簡潔に)
- コーディング
- 画像の下に店名を入れるのが難しい
- 画像の下に店名を入れるのが難しい
2024.11.11
作業
- コーディング
- 構成の練り直し
- スケジュール作成
2024.10.28
作業
- コーディング
- 構成の練り直し
- スケジュール作成
2024.10.21
中間発表
- 講評
- Aboutに第3者が見て”どのような趣旨”のサイトなのかがわかるようにした方が良い
- モノトーンじゃなく二階調。
2024.10.14
作業
- コーディング
- 構成の練り直し
小分けするページの統一感をどうするか?
どういった構成なのかサンプルがいる
何のビジュアルなのかが明確にわかるように
※firefoxはソースコードが間違っていないか確認できるから入れておく
- 構成の練り直し
- スケジュール作成
2024.10.07
作業
- コーディング
- 構成の練り直し
- Web再作成
- スケジュール作成
2024.09.30
研究調査
- Web構造
- 基本のシングルページに『黒』『白』の店ごとの小分けページを作成する
→中間報告までに1店舗は必ず!!
- 基本のシングルページに『黒』『白』の店ごとの小分けページを作成する
2024.09.23
作業
- コーディング
研究調査
- テーマの再確認
- 対比ということは大々的には考えず2パターン作る
- 問題点を見つけ、解決させる
→作業がスムーズになる
2024.09.16
研究調査
- テーマの再確認
- 白と黒のページを作る
→対比するため - 情報デザインとしてWebの可読性を高めたい?
- ダークモードで反転するようにしてもいいのでは?
- 白と黒のページを作る