架空 カフェサイト

制作日:

2025年8月

使用ツール

  • Bootstrap

  • HTML/CSS

  • JavaScript

制作時間

1週間


担当領域

コーディング

実装ページ

http://toto-design.jellybean.jp/osaji_books_coffee/

サイト目的

「osaji books & coffee」の世界観をオンラインで表現し、本と食事とコーヒーを楽しみたい人に向けて、店舗の魅力と最新情報を発信することで来店につなげる。

ターゲット

・日常の忙しさや情報過多で心身が疲れている人
・読書をゆったり楽しみたい人
・健康志向で、地元食材によるヘルシーな食事と良質なコーヒーを求める人
・隠れ家的な静かで落ち着いた雰囲気の空間を求める人
・書店も併設されたカフェに興味がある、読書と食が好きな人

制作への想い

  • デザインの世界観を忠実に再現
    → 「osaji books & coffee」の落ち着いた雰囲気や隠れ家感を壊さないよう、余白やタイポグラフィを丁寧に調整しました。

  • Bootstrapを活用した効率的な実装
    → レスポンシブ対応や基本的なレイアウト部分には Bootstrap を用い、スムーズかつ安定したコーディングを実現しました。

  • 独自調整とのバランス
    → Bootstrapの標準スタイルに頼りすぎず、デザインの意図を正しく反映するためにカスタマイズを加えています。

  • 読みやすさと視認性を重視
    → 写真とテキストが引き立つよう、配色やコントラストを調整しました。

  • 軽量で快適な閲覧体験
    → 画像の最適化やコード整理を行い、表示速度を損なわないよう配慮しました。

  • 保守性を意識したコーディング
    → 更新や修正がしやすいよう、Bootstrapのグリッドシステムを活用しつつ、シンプルで読みやすいコードを心がけました。