Zenn
✨

Claude Code Maxで“静けさ”を作る──6つの窓と12時間の開発ログ「Quiet View」

に公開
Next.js
MVP
ai開発
Claude Code
idea

「広告もレコメンドもない“静けさ”を、Webで眺めたくなった」
そんな違和感から生まれたのがこの「Quiet View」というプロダクトです。
Claude Code Max を使って、環境構築からわずか 12 時間で完成しました。

image.png

本業はフルタイムで手一杯。アイデアは山ほどあるのに、実装時間を思うと腰が重い
そんな停滞を、Claude Code Max が一瞬で動かしてくれました。

「ライブ映像を眺めたい。でも YouTube では広告とおすすめがうるさすぎる」
その違和感を、Claude Code Max と 12 時間でプロダクトにしました。

なぜ作ったか

1. “静けさ” がどこにもない

SNS、動画、ニュース――すべてが

「もっと見て」「もっと滞在して」「もっと消費して」
と叫んでくる。
それに疲れたとき、本当に欲しかったのは「動かない UI」 でした。

2. YouTube のライブカメラは最高なのに、周辺がノイズ

各都市のライブカメラは美しい。
でもページを開いた瞬間に広告・コメント・レコメンドの嵐。

コンテンツそのものは静かなのに、器がうるさい。
この“静と騒”のギャップを埋めたかった。

3. 「体験」だけを先に決める開発を試したい

  • 機能は最小、コンセプトは最大
  • AI（Claude Code Max）と 会話だけ で設計を固める
  • 実装は AI に寄せ、人間は体験のディレクション に集中

Claude Code Max との 12 時間

時間帯 会話ログ (要約) 出来たもの
0 – 4h “静けさを Web 上に置きたい”
→ UI モック案		 コンセプト定義 + モック
4 – 6h 技術選定（Next.js / Tailwind） スタック決定
6 – 12h Claude に実装指示 → コード生成 MVP 完成＆デプロイ

🧠 補足：この記事も Claude による自動生成です。人間は方向を決めただけ。

Quiet View が守った 3 つのルール

  1. UI は動かさない
    • ボタンは Lo-Fi 切替だけ。タイムラプスもオフ
  2. 文字は都市名と時刻だけ
    • 情報を足すより、そぎ落とす
  3. 音はデフォルト無音
    • “静けさ” が主役。Lo-Fi はあくまでオプション
    • 必要なときだけ、そっと流せるようにしています

使ってみてほしい 3 つのシーン

🕰️ シーン 体験
朝のコーヒー 他都市の夜明けを BGM 代わりに
作業 BGM タブを横に置くだけで集中空間
就寝前 世界の静けさでスクロール欲をリセット

🧠 実際のところ、ほとんどコードを書いていません

書いたのは背景色のクラス名を変えたくらい。あとは Claude に「こういう体験がいい」と伝えただけです。

MCP (Model Context Protocol) で複数のツールを連携：

{
  "mcpServers": {
    "github": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-github"],
      "env": {
        "GITHUB_PERSONAL_ACCESS_TOKEN": "your_token",
        "GITHUB_OWNER": "your_username", 
        "GITHUB_REPOSITORY": "your_repo"
      }
    },
    "Framelink Figma MCP": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--figma-api-key=your_key", "--stdio"]
    }
  }
}

結果: 「Figmaのこのデザインを実装して」→30秒で完成

すぐ試せる設定

  1. プロジェクトルートに .claude/mcp.json 作成
  2. GitHub Token: Settings > Developer settings > Personal access tokens
  3. Figma API Key: Figma Settings > Personal access tokens
  4. Claude Code Max再起動 → 自動連携開始

まとめ

これまで、アイデアは浮かんでも「実装の壁」で諦めてきたものがたくさんありました。
でも今回、Claude Code Max のおかげで、“やりたいこと”がそのまま形になる感覚を初めて味わいました。

思いついた瞬間に手を動かせる。
エディターと自分の意思が直結したような体験でした。

体験を作る → AI が実装 → すぐ試す → また体験を磨く
このループこそが、最速のものづくりだと確信しました。

🌍 Quiet View
Six windows. One quiet world.
https://quietview.app

👋 読んでくれてありがとうございます！
もし Quiet View が気に入ったら、SNS で #QuietView をそっと付けてシェアしてもらえると嬉しいです。

Discussion