中井千尋/情報デザイン研究II

Monotone Cafe's

モノトーン基調のカフェ紹介サイト ・・・・・・・・・・・・・・・・

• Chihiro Nakai
• Keywords：Sweets, Web, Black, White, 商品ページ
• Webサイト

概要

これは何？

福岡県にあるモノトーン基調のカフェを紹介するWebサイト

背景と目的

背景
韓国での流行を発端に近年のカフェの特徴は内装やレイアウトにこだわり、コンセプトに沿ったものが多くある。その中でも"カラー"や”インテリア”、とある”モチーフ”をコンセプトにしているカフェが増えてきており、モノトーン基調のカフェについて一貫した情報が掲載されたWebサイトを作成したいと思った。

目的
カフェ好き、SNSを使っている若年層に向けて、カフェの情報が一貫して見ることができ、ビジュアルを見て楽しめるようなWebサイトを作ること

コンセプト

より商品を魅力的にするビジュアルデザイン
カフェの情報を一貫して見ることができる（店名、住所、価格など）

成果物の仕様

• Webサイト (HTML / CSS / Javascript )
  
  

制作ツール

• ハードウエア
  MacBook Pro

• ソフトウエア
  Visual Studio Code
  Photoshop
  
  

プロジェクトの期間

プロジェクトの期間｜2024.09.16 - 2024.12.23

まとめ

• 当初は、黒白の2階調でシンプルなデザインで進めていましたが、掲載するカフェは2階調というよりモノトーンのものが多くグレースケールも取り入れたデザインに落ち着きました。この変更により、より幅の広い表現ができるようになったと考えています。全ての情報をどのように配置するか、何度もレイアウトを調整し、最終的に現在の形に落ち着きました。
• このWebサイトを制作してサイトを訪れた人に印象に残るためにはもっと改善しなければいけませんが、１からコーディングすることでいかに少ない情報量で必要なものを載せるかということが重要だとわかりました。
  また、動的な要素が増えることでWebサイトの閲覧が楽しめると感じたため、もっと動的要素を増やしていこうと思いました。
  
  
  

調査

現状調査

• Z世代に人気の”無機質カフェ”（モノクロカフェ）について
  記事①
  記事②
  記事③
  
  

問題の洗い出し

• 記事としての構成に問題はないか？
• ビジュアル的に印象が残るか？
  
  

先行事例

• Webサイト
  株式会社BAKE
• ランディングページ
  landing page
  
  

技法・技術情報

• Photoshop、Illustratorによる素材作り
• Webコード例 ( css )
• 現地調査
  
  
  
  

プロジェクト管理

スケジュール

タスク管理

ToDo

• サイト再構成
• ＋αで現地調査
• HTML再コーディング
• CSS再構成コーディング

2025.01.09

ブラッシュアップ

• 画像のリサイズ
• 店ごとの子ページレイアウトの改善・調整
  
  
  
  

2024.12.23

最終発表

• ブラッシュアップWebサイト
  
  
  
  

2024.12.16

最終発表

• Webサイト
• ブラッシュアップ
  
  
  
  

2024.12.09

最終発表

• 講評
  画像のリサイズ
  
  
  
  

2024.12.02

作業

• コーディング（レイアウト再構成）
• 概要集の記入
  
  
  
  

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

作業

• コーディング

研究調査

• テーマの再確認
  • 対比ということは大々的には考えず２パターン作る
  • 問題点を見つけ、解決させる
    →作業がスムーズになる
    
    
    
    

2024.09.16

研究調査

• テーマの再確認
  • 白と黒のページを作る
    →対比するため
  • 情報デザインとしてWebの可読性を高めたい?
  • ダークモードで反転するようにしてもいいのでは？