自家焙煎珈琲 ゆきあい
- 制作区分
- 自主制作・サンプル
- サービス分類
- Webサイト制作
- 公開状態
- 公開済み
暗い焙煎小屋の空気と、毎朝少量ずつ豆を焼く時間を表現した、架空の自家焙煎カフェの5ページサイト。
静的サイト生成CMSを用いて作成した、架空の自家焙煎カフェ「ゆきあい」のサイト。メニュー、豆と焙煎、店について、アクセスの5ページに情報を整理し、暗褐色の画面、縦組みタイポグラフィ、人物中心の写真で店の空気を設計した。トップのCanvasでは熾火の呼吸と、色を失いながら立ちのぼる火の粉を描き、焙煎にかかる熱と時間を静かな動きとして表現している。ブログ・予約・EC・問い合わせフォームは含まない。実在の店舗・人物・所在地とは無関係。
同等規模を新規制作する場合の参考価格
220,000円
「AI活用・おまかせWeb制作」の5ページ構成、情報設計、AIを活用した原稿・画像制作、レスポンシブ対応、基本公開設定を含むサンプル価格です。
掲載価格は、本事例と同等の規模・機能を新規制作する場合の目安です。ページ数、機能、素材、外部サービス連携、サーバー環境などによって変動します。
制作目的
小規模店舗サイトで、業種に合った情報設計とアートディレクション、Canvasによる固有のモーションをどう組み合わせるかの制作例。
想定利用者
地域の来店前に店の雰囲気やメニューを確認したい来店客（架空ブランドの想定読者）
担当範囲
- 企画・要件整理
- 情報設計
- UI設計
- Webデザイン
- コンテンツ設計
- AI画像制作
- フロントエンド実装
- Canvasモーション実装
- CMS設定・静的サイト生成
- レスポンシブ対応
- テスト
- サーバー設置・公開
主な機能・特徴
- 5ページ構成（トップ、メニュー、豆と焙煎、店について、アクセス）
- 暗褐色×琥珀の点光源、明朝体、縦組みによるカフェ固有のデザイン
- Canvas「火床」— 熾火の呼吸と立ちのぼる火の粉
- prefers-reduced-motion 対応、画面外・非表示タブでのアニメーション停止
- Markdown原稿をCMSから静的HTMLへ生成する軽量構成
技術スタック
制作領域
制作期間
2026年
ご相談について
制作内容や規模についてのご相談は、AK²Lab本サイトのお問い合わせ窓口からお送りください。
ご相談・お問い合わせ