自分の指で動かさないと、CSSの設計までは見えなかった

自作のブックマーク管理アプリ petapeta に、セクションを並び替えたり、別のコレクションへ引っ越せる機能を追加していました。

仕様としては単純です。
セクションのタイトルが乗った横長のバーを、ドラッグして好きな位置へ持っていける。
引っ越したいなら、サイドバーのコレクション名の上にドロップすれば、中のカードと一緒に丸ごと移動する。

つかめないバー

最初に Claude に頼んだ実装は、そのバー全体を掴めるようにする方式でした。
「タイトルでも件数の上でも、どこでもいいから掴んでドラッグできるんですよ」というやつです。

私は「いいじゃないですか」と納得して、ローカルで立ち上げて自分の指で触ってみました。

つかめませんでした。

掴んだつもりが、タイトルの文字が青く反転して text selection が走るだけで、何も動かない。
下のカードの位置にぴょこっと細い線が出る。
「セクションを動かしたいのに、カードを動かそうとしている」と気付くのに少し時間がかかりました。

cursor: text が邪魔をしていた

原因はセクションタイトルの cursor: text でした。
「ここはクリックで編集できますよ」と見た目で伝えていた CSS が、ブラウザに「ここはテキスト編集領域」と認識させていて、ドラッグ起動より text selection の方が優先されていたのです。

これはコードを読んでいるだけだと気付かない種類の問題でした。
draggable="true" は付いているし、dragstart のリスナーも書いてある。
「動くはず」と論理的には言えるのに、実際の指の動きはそうならない。

⋮⋮ ハンドルに分けた

Claude に「ドラッグハンドルみたいなのにしたい」と頼み直しました。

帯の左端に、小さな ⋮⋮ アイコンを置く。
これだけが draggable。
バーの他の部分は元のまま、タイトルをクリックすれば編集モードに入るし、バー全体を押せば折りたたまれる。
役割が分かれた。

⋮⋮ を掴んだら、すっと動きました。

余白は grid gap が作っていた

そのあと、ドラッグ中に出る青い線の位置を調整しているときに、もうひとつ気付きました。

私は section-header の上下マージンを増やしたり減らしたりして、「線とセクションの間にもうちょっと余白がほしいな」と微調整していました。
何度やっても腑に落ちないので、ブラウザの開発ツールを開いて、grid のレイアウト可視化をオンにしたスクショを Claude に渡しました。
紫色の縞模様で、grid の隙間がはっきり見える画像です。

「すでに grid の余白があるからいらないのかな？」

そう聞いた時、Claude もすぐに気付いたみたいでした。
.collection-cards には gap: 15px が、.cards-container には gap: 20px が既に指定されていて、要素間の余白は grid gap で十分作られていました。
私が触っていた margin は重複していたのです。

margin を全部削って、grid gap に責務を一本化したら、線も自然な位置に収まりました。
CSS の量も減って、責任の所在もはっきりした。

自分の指でしか出てこない感覚

ここまでの作業を振り返って思うのは、Claude の最初の提案も、設計としては悪くなかったということです。
draggable="true" を付けて dragstart を書く、というのはセオリー通り。
margin と grid gap が重複している、というのも、私のアプリに固有の状態に過ぎず、Claude には見えないものです。

ただ、自分で動かさないと出てこない感覚があるのも事実でした。

「ここは text っぽく見えるからつかみにくい」「余白がふたつから来てる気がする」みたいな違和感は、画面を見て、指で触って、初めて「あれ、なんか変だな」と分かる種類のものです。
コードを書いて、テストが通って、レビューが通っても、ユーザー側で初めて見つかる。

開発というと「コードを書くこと」のイメージが強いけれど、私の最近の作業時間の半分くらいは、自分のアプリを自分のユーザーとして触って、引っかかったところを直していくことに使われています。
dogfooding という言葉でよく語られるけれど、要は「自分で使う」だけのことです。

⋮⋮ ハンドルも、grid gap の一本化も、Claude が出してきた提案の上に、私の指の感覚が乗って初めて完成した部分でした。
Claude は速いし、私が知らない設計パターンもたくさん知っていて、頼れる相棒です。
けど「ユーザーとして触った時に違和感があるか」は、私が触らないと分からない領域として残っています。

セクションをひとつ ⋮⋮ から掴んで、サイドバーの別のコレクションへドロップする。
配下のカードがまとめて引っ越して、トーストに「移動しました」と出る。

ようやく、思った通りの動きになりました。

かなえ

個人開発を応援する非エンジニア

婚約破棄をきっかけに、29歳で未婚の母になると決めました。
不安と向き合いながら、10年かけて働き方を少しずつ作り変えてきた40代です。

AppSheetやGASを独学で覚え、いまはAIを使った個人開発を毎日続けています。
個人開発を応援する非エンジニアとして、等身大の試行錯誤や、子育て・自立・副業のことを、正直に記録しています。