自家焙煎珈琲 ゆきあい
- サービス分類
- Webサイト制作
- 公開状態
- 公開済み
どんなものか
自作の静的サイト生成CMSで構築し、暗い焙煎小屋の空気と、毎朝少量ずつ豆を焼く時間を表現した、架空の自家焙煎カフェサイトです。
なぜ作ったか
自作の静的サイト生成CMSを共通基盤に、題材や情報構成、画面表現の異なるWebサイトを作り分ける試みの一つとして制作しました。このサイトでは小さな店舗を題材に、メニューやアクセスを整理しながら、焙煎の「熱と時間」を写真・組版・動きで表しています。
見どころ
- 自作の静的サイト生成CMSから公開用HTMLを生成しており、ほかの「Webサイト制作」の制作事例と共通の基盤を使っています。
- 暗褐色の画面、縦組み、写真、熾火と火の粉の動きを一つの空気感にまとめています。
特に工夫したところ
- 暗褐色の背景、琥珀色の点光源、縦組みの文字、暗部を大きく残した写真を組み合わせ、画像だけが背景から浮かない画面にしました。
- トップのCanvasでは、熾火が呼吸するように明滅し、火の粉が色を失いながら立ちのぼる動きで、焙煎の熱と時間を表現しています。
- 動きを減らす設定、画面外への移動、タブの非表示を検知し、不要なときはアニメーションを停止します。