URL：https://www.otomoko.shop/cafe

制作概要

制作内容
架空のブックカフェ「Cafe Noir」のWebサイト（トップ／メニュー／店舗情報）

メインターゲット
20代後半～40代前半の社会人（男女）

想定人物像（ペルソナ）
平日は仕事帰りに立ち寄る
休日は一人でゆっくり過ごしたい
コーヒーや空間の「質」を重視
SNSは見るが、騒がしい店は苦手

サイトの目的
初めて店を知った人に
「行ってみたい」と思ってもらうこと

制作時間
約12時間

使用技術
HTML / CSS / JavaScript（Template-Party様作成のテンプレートをベースに改変しました）

制作の目的・想定

落ち着いた雰囲気のブックカフェを想定し、
「静かに過ごせる空間」「大人向け」「世界観を重視したデザイン」を意識して制作しました。

PC・スマートフォン両方での閲覧を想定し、レスポンシブ対応を行っています。

工夫した点

  • トップページでは情報を詰め込みすぎず、写真とコピーで世界観を伝える構成にしました
  • スマートフォン表示では、文字量や配置を調整し、視認性を優先しています
  • 電話番号は「Shop Info」ページのみに掲載し、必要な方が探しに行ける設計にしています
  • 架空店舗のデモサイトのため、検索結果に表示されないよう meta タグで noindex を設定しています。本番環境を想定し、公開時の配慮も意識しました。

制作を通して意識したこと

限られた制作時間の中で、「優先順位を決めて取捨選択する」ことを意識しました。

スマートフォン表示