Works

個人開発した Web アプリの作品集

How I build / Rules CLAUDE.md に書いてある決めごとと、その理由

開発ルール

この作品集で決めたことと、そう決めた理由

うまくやる方法は、ほとんど決めていない。
決めたのは、迷ったときにどちらへ倒すかのほうだ。

この作品集は、手元で作った Web アプリを画面つきで並べたもの。作り方の説明はどこにも書いていない代わりに、 作るたびに決めたことが積み上がっている。決めごとのほとんどは「こうするとうまくいく」ではなく、 判断が付かないときにどちらへ倒すかを先に決めたものだ。 倒す向きさえ決まっていれば、急いでいるときでも同じ側に落ちる。

以下はその決めごとと、そう決めた理由。作り手(自分と AI)向けの手順書は別にあって、 そちらには作品を 1 件足す手順や撮影コマンドの使い方が書いてある。 ここには手順を 1 つも載せていない。 読み手にとって意味があるのは、どのコマンドを叩くかではなく、なぜその形に決めたかのほうだから。

出典
作業のたびに残している日付つきの記録。過去の記録なので、あとから変わらない
書いていないこと
作品を足す手順・撮影と公開のコマンド・触るファイルの一覧。それは作り手向けの手順書の仕事
数字について
このページには、台帳から数えられる数字を書いていない。書いてある数字は日付を添えた過去の実測だけ

ここにあるのは判断だけ。作り方の手順書は別にあり、そちらは公開していない

01

何を決める話なのか

この作品集には、手元で開く版と、いま読んでいる配布版の 2 つがある。決めごとの多くは、その差の中にある。 作品を足すたびに「同じことを 2 か所に書く」「都合の悪い空白を埋める」「うっかり第三者の情報を出す」の 3 つが必ず起きるので、 起きてから直すのではなく、どちらへ倒すかを先に決めてある。

見えるもの 手元で開く版 配っている版(このページがある側)
作品 手元全部 配布版公開すると決めたものだけ
一覧に出していない作品の説明文 手元台帳にある 配布版ファイルごと存在しない
各作品の URL 手元出る 配布版1 件も出さない
ソースコードの置き場の名前 手元出る 配布版出る(伏せたものがある)
撮影の起点・起動コマンド 手元台帳にある 配布版項目ごと持ち出していない
斜線は「配布版には存在しない」。隠しているのではなく、別のものとして書き出している。 だから件数も書けない ── 除外した数は、配布版からは原理的に数えられない。

以下は、決めごとを判断の型で 4 つに束ねたもの。

02

同じ事実を 2 か所に置かない

写しを作った瞬間に、片方だけ古くなる経路ができる。 この節の決めごとはどれも、写しを同期する仕組みを作るのではなく、写しを作らない形に倒した記録

作品のデータは 1 ファイルだけに置く

採らなかった案ページごとに必要なデータを持たせ、更新のたびに揃える

一覧に並ぶカードも、1 作品ずつの紹介ページも、同じ 1 ファイルから描いている。作品を足すときに触るのはそこと、自動で作られる薄いページだけ。

ページごとにデータを持つと、直したつもりの箇所が別のページに残る。揃える手間ではなく、揃える必要そのものを無くすほうを選んだ。

一覧のサムネイルに複製を作らない

採らなかった案一覧用に縮小した画像を別ファイルとして持つ

一覧に出るのは、その作品の 1 枚目の画面そのもの。表示だけを小さくしている。

以前は一覧用の複製を作っていたが、画面を手で差し替えたときに一覧だけ古い画像のままになった。複製をやめたら、同期という問題自体が消えた。

その代わりに1 枚目に何を置くかが効くようになった。ある作品では、本体ではなく案内ページを 1 枚目にしてある。

画面に出る数字は、その場で数える

採らなかった案本文にも図にも、そのとき数えた数字をそのまま書く

件数を本文に書くと、データを 1 件足した瞬間に、同じ画面で違う数字が並ぶ。だから数えられるものは全部その場で数える。

これは机上の心配ではない。実際に、図の見出しに書いた数と本文の数が噛み合わなくなっていた。書いた本人が気づかなかったのは、どちらも間違って見えなかったからだ。

このページだけは逆。数字を書かないと決めてある(書いてあるのは日付つきの過去の実測だけ)。だからこのページは動く仕掛けを 1 つも持っていない。

書き手の癖に、機械のほうを合わせる

採らなかった案データに紛れ込んだ印を見つけて手で消す

作品の説明を書くとき、強調したい語に印を付けるのは自然な手つきだ。ところが表示側がその印を知らなかったので、記号がそのまま画面に出ていた。

気づいた時点で、印を消して回るのではなく表示側が印を読むようにした。消す側に倒すと、書き手が自然にやることなので必ず再発する。

実測(2026-08-30)公開中の 3 作品・18 か所で記号が見えていた。直したのは表示側の 1 か所。

2 つの仕組みに、別々の一覧を持たせない

採らなかった案点検と配布の処理が、それぞれ対象の一覧を持つ

作品ではないページ(このページのような読み物)は、作品のデータからは組み立てられないので、名前で登録するしかない。

はじめは点検と配布に別々の一覧を書いていた。片方だけ直して片方を忘れる形の事故がそのまま残るので、1 か所にまとめて、もう片方はそこから導くようにした。上のタブも同じで、一覧は 1 つだけ持ち、各ページの書き写しがずれていないかを点検が突き合わせる。

忘れると静かに壊れる登録し忘れたページは、手元では見えるのに配布版から消える。しかも検査も走らないので「不備なし」と出る。

このページに数字がほとんど無いのも、この節の決めごとのため。 数えられるものを書き写した時点で、そこが第 2 の真実源になる。

03

既定を「出さない」側に置く

配布版に何を載せるかは、載せるものを 1 つずつ選ぶ形にしてある。 落とすものを選ぶ形にすると、あとから足した項目が黙って出荷される。 1 度でも出てしまったものは取り戻せないので、判断が付かないものは全部「出さない」に倒す。

配布版は「隠す」のではなく、別物として書き出す

採らなかった案1 つのファイルを配り、一覧に出さない作品はページ側で隠す

画面に出さないだけでは、説明文はデータの中に残る。開けば読める場所に置いたまま「見えないから大丈夫」と言うことになる。

だから配布版は、載せると決めた作品だけを含む別のファイルとして作り直す。出さない作品は、画像もページも物理的に存在しない。

配布版に、作品の URL を 1 件も載せない

採らなかった案作品ごとに「ログインの壁があるか」を判定して、あるものだけ URL を出す

配布版は、URL を渡した相手だけが見る前提で配っている。そこに各作品の URL を並べると、ログインの壁を入れていないサイトへ誰でも飛べる。開けば中身がそのまま見えるものが混ざっている以上、一覧に URL がある状態は「作品集を見せた」ではなく鍵をまとめて渡したに近い。

作品ごとに判定する案は、試してから捨てた。説明文から自動で読み取らせたところ、ある作品の「ログイン不要」を「認証あり」と逆に読んだ。機械が 1 件でも逆に読むなら、全部に付ける以外に安全な使い方が無い。

おまけ一律に外したことで、手元で起動して使う作品の待ち受けアドレスが配布物に載る経路も同時に塞げた。手元で開く版では、今までどおり URL が出る。

本文を伏せても、項目 1 つで台無しになる

採らなかった案本文で伏せてあれば、他の項目はそのままでよい

ある作品は、第三者の著作物を扱うので本文では発行者を伏せている。ところがソースコードの置き場の名前に、その人の実名が入っていた。その項目は配布版の紹介ページに出る。

URL は同じ理由で先に外してあったのに、こちらは見落としていた。台帳からその項目を外し、同じ名前が戻ってきたら公開が止まるように、出してはいけない語の一覧へ登録した。

実測(2026-08-31)見つけた時点で本番に公開済みだった。詳しくは第 07 節。他の作品の置き場の名前も全部確かめた。

持ち出すものを列挙する(落とすものではなく)

採らなかった案データを丸ごと書き出して、出したくない項目だけ落とす

丸ごと書き出すと、表示に使っていない項目まで一緒に出る。この作品集の場合、撮影の起点として書いてある作者の PC のフォルダ構成や、起動コマンドがそれに当たった。

落とす側を書く形だと、新しい項目を足したときに何も書かなくても出荷される。足した人が黙っていれば出るのが、いちばん危ない既定値だ。

同じ形を画像にもフォルダごとコピーせず、台帳に載っている画像だけを持ち出す。丸ごとだと、撮り直す前の古い画像や、意図して外した画面まで出荷される。

迷ったら、損の小さい側へ倒す

採らなかった案どちらとも言えるものは、都合のよい側に数える

載せるかどうか迷った作品は、載せない側に置く。顧客が特定できる・第三者の著作物を扱う・実際のデータが映る・特定の 1 人のために作った、のどれかに当たるものが対象。

同じ形の判断がもう 1 つある。AI に持たせている手順書のうちどれを「自作」と数えるかで、決め手が無いものは取り込み側に数えている。自作だと誤って言うほうが、控えめに言うより害が大きい。

検査に落ちた成果物は、配れる場所に置かない

採らなかった案エラーだけ出して、書き出したものはそのまま残す

検査に落ちた配布物をそのまま置いておくと、終了コードを見落とした人がそれを配れてしまう。落ちたときは別の名前へ退かして、配れる場所には残さない。中身は原因を調べられるよう捨てずに取ってある。

検索避けのために、クローラを閉め出さない

採らなかった案クローラの巡回そのものを禁止する

直感に反するが、巡回を禁止するとページ本体を取りに来ないので「載せないでください」という指定も読まれない。外部からリンクされているだけで検索結果に出ることがある。

だから巡回は許可して、ページごとに「検索結果に載せない」という指定を読ませるほうを選んだ。確実に載せたくないなら、こちらのほうが強い。

例外 ── この読み物だけ、書体を外から読んでいる

この節で唯一、外へ出す側に倒した判断

作品の一覧と紹介ページは、外部から何も読み込まない。読み込むと、閲覧のたびに閲覧者の所在・使っている環境・見ているページの住所が配信元へ渡る。「URL を渡した相手だけが見る」という運用と噛み合わない。

ところが、いま読んでいる読み物のページだけは書体とアイコンを外から読んでいる。見た目を優先する判断で、そのつど確認したうえで受け入れたもの。一度は自前で配る形に切り替えたのに、あとから戻した。

受け入れた条件「どのページから来たか」までは渡さない指定を付けてある。日本語の書体を自前で配ると数 MB になるので、塞ぐなら「和文は環境の既定の書体に戻す」判断とセットになる。

04

機械にどこまで任せるかの線

公開の前に通す検査は 4 つある。それでも、機械に任せていないものが同じくらいある。 境目は「取りこぼしたときに、人が見なくなるかどうか」で引いた。

誤検出の多い検査は、あえて入れない

採らなかった案怪しいものを幅広く拾って、あとから人が振り分ける

たとえば桁数だけでカード番号らしきものを拾わせると、日付やコミット数を片端から捕まえて毎回赤くなる。

赤が当たり前になった検査は、そのうち検査ごと無視される。入れてあるのは、見つかったら「直す」か「載せてよいと書き足す」かの二択で済むものだけ。

消すのではなく、載せると決めたものを書き足す

採らなかった案検査に引っかかった箇所を、そのつど消して通す

引っかかったものを消していく運用だと、なぜ消したのかがどこにも残らない。逆向きにして、載せると決めたものを一覧へ書き足す形にしてある。

書き足した記録が残るので、あとから「なぜこれは許されているのか」を追える。

画像の中身は機械に読ませない。人が 1 枚ずつ見る

採らなかった案画像から文字を読み取る仕組みで、実データや個人名の映り込みを自動で調べる

日本語の読み取りは取りこぼす。取りこぼすこと自体は仕方がない。問題は、残るものが「機械が見た」という安心感だけになることだ。人は 1 度でも自動で通ったものを、次から自分では見なくなる。

だから仕組みが引き受けているのは、判断ではなく手前の 1 つだけ。新しく撮った画像・中身が変わった画像・公開の対象に変わった画像を、必ず人の前に出す。全部を毎回見直す運用は続かないので、変わった分だけを出す。

残っているもの人が承認を誤れば通る。仕組みが保証しているのは「変わったものを必ず人の前に出す」ところまでで、中身の判断はしていない。

実測した数字で、説明文を自動で上書きしない

採らなかった案実測と食い違ったら、機械がそのまま書き換える

各作品の開発量は、手元の作業コピーではなく公開されている履歴から数えている。手元は平気で古くなるからで、生成の仕組みをクラウドへ移した作品は手元だけ 4 か月止まって見えていた

ただし数字を機械が合わせにいくのは止めてある。増えた理由によって、本文の直し方が変わるからだ。ある作品の増加分はほとんどが毎日の自動データ更新で、数字だけ合わせると「活発に開発している」と読み違える。

機械がやるのはここまでずれを見つけて名指しする。増えた理由を調べて本文をどう直すかは、人が決める。

近道は塞ぐ。ただし門番の誤爆も同じくらい避ける

採らなかった案公開に関わる語を含むコマンドを、まとめて止める

急いでいるとき、人も AI も検査を飛ばす近道を使いたくなる。検査を通さずに直接公開する手順と、「人が目で見た」という記録だけを作る手順の 2 つを、機械が止めるようにしてある。

ただし止めすぎも同じくらい悪い。はじめは書かれた文章全体から語を探していたので、この門番そのものを説明する記録が、自分自身に弾かれた。邪魔なだけの門番は外される方向に働くので、誤爆は穴と同じくらい避ける。いまは実行されるコマンドの先頭だけを見ている。

見ていないものを、黙って飛ばさない

採らなかった案検査できない対象は、静かに対象から外す

照合できない作品は毎回名指しで出す。短すぎて誤検出になる語を検査から外したときも、外したことをその場に出す。

「不備なし」とだけ出る検査は、何を見ていないかが読めない。見ていない範囲が見えていれば、そこは人が見ればいい。

実測(2026-09-01)この決めごとを自分で破っていた箇所が 1 つ見つかった。仕分けの条件を並べて書いていたため、どの条件にも当てはまらない作品が 1 件、どこにも入らず黙って消えていた。並べる書き方をやめ、必ずどれか 1 つに入る形へ直した。

05

空白を埋めない、記号の意味を増やさない

この作品集の値打ちは、実際に動いている証拠が並んでいることにある。 見た目を揃えるために 1 枚でも作った画像を混ぜると、残り全部について読み手が確かめられなくなる。 記号も同じで、1 つの形に 2 つ目の意味を持たせた時点で、どちらの意味も読めなくなる。

撮れなかった画面を、それらしい画像で埋めない

採らなかった案実際には動いていない見本の画面や、生成した画像で穴を埋める

1 枚でも作った画像を混ぜると、残り全部について「これは本物か」を読み手が確かめられなくなる。埋めて得られるのは見た目の揃いだけで、失うのは作品集全体の信用なので、割に合わない。

撮れなかったものは「撮影できていません」と出したうえで、なぜ撮れないかを作品ごとに書く。理由は作品ごとに違う(ログインの壁の内側にある、無料枠のデータベースが休んでいる、など)。読み手にとっては、穴が空いていることよりも穴の理由が書いていないことのほうが読めない。

その後(2026-08-31)ログインの壁の内側は「自分で撮って手で置く」形にして片付き、休んでいたデータベースも戻って、最後まで残っていた 1 件が撮れた。いま撮れていない画面は無い。ただし穴が埋まっただけで、決めごとのほうは変えていない。次に撮れないものが出たら、また空のまま出す。

1 つの記号に、2 つ目の意味を持たせない

採らなかった案図ごとに、そのとき都合のよい見た目を選ぶ

読み物のページで使う記号は 2 つに固定してある。破線は「未完成・意図的に空・繋がっていない」、斜線は「量が読めない・実測ではない」。

読み手が記号を 2 つ覚えれば、どのページも同じように読める。逆に、1 つの形に別の意味を足した時点で、どちらの意味も読めなくなる。

色の濃さで量を表さない

採らなかった案件数が多いところを濃く塗る

隣に数字が書いてあれば二重になるし、読み手は数字より先に「濃い=多い」を信じる。濃さと数字が食い違ったとき、目のほうが勝つ。

濃さは「同じ色をどこに置くか」の段としてだけ使う。量が読めないことを言いたいときは、濃さではなく斜線を使う。

図を描くための道具を、外から持ち込まない

採らなかった案図の描画に、出来合いの部品を読み込む

図はすべて素の HTML と CSS で描いている。書体は外から読むようになったが、ここは変えていない。書体が落ちても中身は読めるが、描画の道具が落ちると図そのものが消える。

並べ方も常に HTML 側でやっている。図の中で日本語のラベルを折り返す必要があり、描画命令の側では折り返せないため。

数えられなかったものを、画面から消さない

採らなかった案集計に使えなかった値は、黙って落とす

技術スタックのページは、説明文の中から技術の名前を拾って数えている。当然、拾えないものが残る。

その残りをそのまま全部、画面に出してある。新しい技術を使った作品を足せば、その値は拾われずにここが伸びる。黙って消えるのではなく数字として出るので、検査を 1 つ増やさずに済んでいる。

  • 破線未完成・意図的に空・繋がっていない
  • 斜線量が読めない・実測ではない
  • 差し色の面いま話している 1 か所(1 つの図につき 1 か所まで)
  • 現在地
読み物のページを貫く記号はこれで全部。濃さの段はここに入れていない ── 濃さは「どこに置くか」であって量ではないので、凡例に並べると量の意味を持ってしまう。
06

決めきれていないところ

良い面だけ書かないための欄。仕組みが見ていないものが 3 つある。

このページと、作り手向けの手順書がずれても機械は気づかない

点検が見ているのは画面の崩れと画像だけで、文章が同じことを言っているかは見ていない。

文章の整合を機械に見せる案は採らなかった。捕まえられるのは節を丸ごと消したことだけで、中身を書き換えたことは捕まらない。事故の本体は後者のほうだ。そして通ったときに「揃っている」という誤った安心が残る。これは上の「機械が見たという安心感を作らない」と同じ形の話なので、同じ理由で採らない。

代わりに、このページの出典を手順書ではなく日付つきの作業記録に置いた。過去の記録は、手順書を直しても変わらない。

検査が見ていないものが 2 つある

一覧に登録していない固有名詞は捕まらない。説明文は自由に書ける場所なので、書いた本人が気づくしかない。しかも登録できるのは、他の語の一部にならない長さの語だけだ。短い略称は、ふつうの英単語の中に紛れて毎回引っかかるので登録できない。

画像の中身は誰も読んでいない。変わった画像を人の前に出すところまでが仕組みの役目で、そこに何が映っているかの判断はしていない。

増えたものに気づく仕組みが無い

外から読み込むものが増えても、検査は素通りする。いまは読み物のページだけが書体を外から読んでいるが、それが他のページへ広がっても機械は言わない。

同じことがページの本文にも起きる。ページが増えるほど、同じ仕掛けを別の言葉で書く場所が増える。実際に、2 つのページが「強制されているのかどうか」について違うことを言っている状態がしばらく残っていた。

07

決め方を間違えた 3 件

自分で作った検査や見立てを、そのまま判定として扱うのがいちばん危ない。 実際に間違えた 3 件を、直し方と一緒に置いておく。

01

配布版に、第三者の実名が出ていた

ある作品は本文で発行者を伏せている。ところがソースコードの置き場の名前に、その人の実名が入っていた。その項目は配布版の紹介ページに出る。見つけた時点で、本番に公開済みだった。

URL は「認証のないサイトへ誰でも飛べる」という理由で先に外してあったのに、同じ経路にある項目を見落としていた。台帳からその項目を外し、同じ名前が戻ってきたら公開が止まるように登録した。他の作品の置き場の名前も全部確かめた。

学んだこと本文をいくら伏せても、項目 1 つで誰のものか分かる。伏せる判断をしたら、その作品の全部の項目を見る。

02

誤報の原因が、見立てと違った

点検が「読めない画像が 20 件ある」と言い出した。画面の外にある画像が後回しで読み込まれるせいだと考えたが、実際に測ると画面の中にある画像も読めていなかった。原因は単純で、待ち時間が足りていなかっただけだった。

ついでに、もっと悪いものが見つかった。待ち時間の指定を書いた場所が間違っていて、その指定は黙って無視されていた。正常に動いているときには絶対に表に出ない壊れ方で、たまたま原因を追いかけたから見つかった。

学んだこと思いついた原因は仮説であって、判定ではない。偽の不備は、本物の不備を見逃す原因になる。

03

点検役の結論が誤りで、指摘した事実のほうは正しかった

安全面の点検を任せたところ「実際のデータが映るので、この作品は配布版から外すべきだ」と返ってきた。結論は誤りだった。過去の記録をたどると、その作品は自分のデータなので載せると判断済みで、外す理由になっていない。

ただし指摘の元になった事実のほうは正しかった。注記に「配布版には含めない」という古い文言が残っていて、設定と食い違っていた。同時に書き換えたはずが、1 件だけ漏れていた。設定は変えず、注記を実態に合わせた。

学んだこと点検役の結論は、過去の記録で裏を取ってから採る。そして設定を変えたら、同じ場所の説明文も一緒に直す。この 1 件は 5 日のあいだ、次に読んだ人を誤らせる状態で残っていた。

08

このページの出どころ

決めごとを書いた文書は 3 つあり、役割が違う。読み手に向けて書いてあるのは、このページだけ。

作り手向けの手順書

作品を 1 件足す手順・撮影と公開のコマンド・触るファイルの一覧・踏んだ落とし穴。

読み手向けではないので公開していない

このページ

何をどちらへ倒すと決めたか、と、そう決めた理由。採らなかった案を必ず添えてある。

手順は 1 つも書かない

日付つきの作業記録

いつ何を直したか、そのとき何を測ったか。両方の出典で、過去なのであとから変わらない。

このページの数字はここから引いている

作業記録が、左右のどちらの出典にもなっている

3 つのうち、ずれても機械が気づくのは「ページが存在するか」だけ(第 06 節)。 だからこのページは、いま何件あるという書き方を避け、日付を添えた過去の実測だけを書いている。
決めごとは、正しいから守っているのではない。迷ったときに毎回考え直さずに済むから守っている。 だから、理由のほうが変わったら決めごとも変える。そのときは、このページも一緒に直す。

出典は、作業のたびに残している日付つきの記録。数字はすべてその時点の実測で、あとから測り直していない。

c:\work 作品紹介ギャラリー