リード
こんにちは、ぽまらのです。
Cloud Gazing（日本語名: くもながめ）という小さな Web サイトを作り、公開しました。
やることはひとつだけ、ぼんやりした雲が流れる空を眺める ことです。スコアもなく、クリア条件もなく、何もしなくていい。
「暇じゃないほうがいい」とブログに書いている自分が、わざわざ 何もしない体験 を作るのは矛盾しているようにも思えます。
でも、画面を開いて雲を見ていると、頭が少し静かになる。そんな感覚をそのまま形にしたかったのが、このサイトです。
この記事では、なぜ作ったか、中身の作り方、公開までの流れをまとめます。
Cloud Gazing とは
URL: https://cloud-gazing.com/
タグラインは英語で “A sky where soft clouds drift by — nothing to do.”（ぼんやりとした雲が流れる、何もしない空）。
| 項目 | 内容 |
|---|---|
| 操作 | ほぼ不要（雲の速さ・時間帯・言語は設定から変更可） |
| 雲の枚数 | 132枚 の透過 PNG（プレーン雲 + 形のある雲） |
| 言語 | 英語 / 日本語（デフォルトは英語） |
| 料金 | 無料（Ko-fi でサポートリンクあり） |
スマホでも PC でも、ブラウザを開くだけで動きます。アプリのインストールは不要です。
なぜ作ったか
きっかけはシンプルで、眺めるだけの画面が欲しかった からです。
- 作業の合間に、何も考えなくていい場所がほしい
- SNS のタイムラインではなく、流れていくだけの雲がほしい
- ゲームでもツールでもなく、「ただそこにある空」がほしい
以前書いた 執着の記事 でも「気づいて距離を置く」話をしましたが、Cloud Gazing はその延長で、画面ごと距離を置く場所 だと思っています。
雲の作り方 — 132枚のアセット
雲は AI 画像生成 で作り、仕様書で品質を縛りました。大きく2種類です。
形のある雲（shaped / cloud-vague）
動物や乗り物に ぼんやり見える 雲。ただし輪郭の読み取りやすさは 約40% に抑え、ふと見はただの雲に見える程度にしています。
- 淡いピーチ・アプリコット・クリーム色の cumulus 調
- 顔・目などのディテールは禁止
- ファイル名:
cloud-vague-{subject}.png
プレーン雲（plain / cloud-fluffy）
認識できる物体の形は 禁止。自然な雲だけ。
- 30枚追加し、shaped と 50:50 でランダム出現
- ファイル名:
cloud-fluffy-*.png
生成後は Python で後処理（透過・サイズ調整）し、manifest.json に登録してサイトから読み込みます。
合計 132枚。AI ハーネス記事で書いたように、「いい感じで」ではなく仕様 JSON で縛る と、バラつきが減りました。
技術的な中身
フレームワークは使わず、HTML + CSS + Canvas API のみです。
| 要素 | 選んだもの | 理由 |
|---|---|---|
| 描画 | Canvas 2D | 雲のレイヤー合成と空のグラデーション |
| 雲の管理 | manifest.json + 遅延ロード + LRU キャッシュ | 132枚全部を一度に読まない |
| 同時表示 | 最大 10枚 | 軽さと「空っぽさ」のバランス |
| 時間帯 | 朝 / 昼 / 夕方 / たそがれ / 夜 + 自動 | 実時間に合わせて空の色が変わる |
| 言語 | i18n.js + localStorage | 設定を記憶 |
| アクセシビリティ | prefers-reduced-motion 対応 | 動きを減らす設定を尊重 |
大きい雲ほど ゆっくり 動くようにして、遠近感を出しています。
設定パネルは右上の ☁ ボタン。外をタップすると閉じます。
公開まで
ドメインとホスティング
本番 URL は cloud-gazing.com です。
静的ファイルのみなので、GitHub Pages / Cloudflare Pages / Netlify などどれでも配信できます。
公開前にやったこと
- OGP（SNS シェア用画像 1200×630）
- ファビコン（SVG）
site.config.jsonで本番 URL を一元管理 →apply-site-config.mjsで HTML に反映- スマホ実機での表示確認
雲アセットは合計で数十〜百 MB 級になりうるので、デプロイ前に容量を確認しました。初回アクセス時は manifest から必要な枚数だけ読み込む設計なので、表示自体は軽いです。
つまずいた点
雲の「形」が強すぎる
最初は動物に見えすぎる雲が多かった。→ シルエット40%ルールとプレーン雲50%ミックスで落ち着いた。
132枚を一度に読むと重い
→ manifest + 遅延ロード + LRU キャッシュ（最大30枚）に変更。画面上は常に10枚以下。
英語デフォルトにするか
グローバルに届けたい気持ちと、日本語名「くもながめ」の温度感のバランス。→ UI デフォルトは英語、日本語は設定から切り替え。
これから
- 雲をもう少し増やすかは様子見（転送量との兼ね合い）
- ブログや X からリンクして「何もしない空」を知ってもらう
- 英語版ブログ記事（必要なら）
まずは、空を見るだけでいいサイトとして育てていきたいです。
まとめ
- Cloud Gazing は、雲が流れるだけの「何もしない」Web 体験
- 132枚 の AI 生成雲を仕様書で管理し、Canvas で軽く表示
- フレームワークなし・静的ホスティングで公開
- 「暇じゃないほうがいい」ブログの裏側で、わざわざ 暇を作る サイトもできた
よかったらブラウザで開いて、1分だけ雲を見てみてください。
コメント