豆から本気 - 札幌恵比寿製作所 presents
コーヒー抽出の“感覚”を、数値と技術でサポートする。
「おいしい一杯」の再現性を上げる、生活密着型Webアプリ。
はじめに
こんにちは。札幌恵比寿製作所です。
日常的にドリップコーヒーを楽しんでいますが、ある日ふと、
「この味、再現できるだろうか？」と疑問に思いました。
抽出量・濃さ・挽き方・蒸らし時間・抽出時間…
これらを全て感覚ではなく数値化して一元管理できたら、
もっと安定した一杯が淹れられるのでは？
そんな発想から生まれたのが、今回のWebアプリです。
作ったもの
☕ 豆から本気 - コーヒー抽出ガイド
- スマホでもサクッと使える軽量Webアプリ
- 完全クライアントサイド（HTML＋JS）
- OGP対応／GA4アクセス解析付き
主な機能
-
抽出量・濃さ・挽き方を入力すると、以下を自動計算：
- 必要な豆のグラム数
- 蒸らし用／本抽出用のお湯量
- 抽出時間の目安（自動調整ロジック）
-
蒸らし → 抽出 タイマーを自動接続
- 背景フラッシュ（視覚通知）
- ビープ音（聴覚通知）
- バイブレーション（触覚通知）
-
UIはシンプル／スマホ対応（片手でドリップしながらでも操作しやすい）
技術構成
| 項目 | 内容 |
|---|---|
| フロントエンド | HTML / CSS / JavaScript（バニラ） |
| タイマー処理 | setInterval ／ JSベースの連携タイマー |
| 通知機能 | navigator.vibrate / Audio API / CSSカラー変更 |
| アクセス解析 | Google Analytics 4（GA4） |
| OGP画像生成 | DALL·E + 手動調整（1200x630px） |
使用イメージ
- 出勤前に「200mlで少し濃いめの一杯を」
- お店のカウンターで「豆15gを使って最適な注湯ペースは？」
- コーヒー器具を友人にプレゼントするときに一緒に共有
今後の展望
- PWA化（ホーム追加 → オフライン対応）
- 記録機能（お気に入りの一杯のプロファイル保存）
- 英語対応（海外のコーヒー勢向け）
- フィルター選択、温度調整などの追加要素拡張
SNS告知ポスト（X）
技術検証の合間に「つい」作った感があるWebアプリですが、
技術者にも、生活者にも刺さる仕上がりになったと思います。
最後に
「豆から本気」は、“生活の中の違和感”から生まれたアプリです。
コードを書くことも、ドリップすることも、再現性が求められるもの。
技術が「おいしい一杯」の後押しになるなら、こんなに嬉しいことはありません。
日々を便利に、そしてちょっと楽しくする技術。そんな視点で今後も開発していきます。