やることを3つの列で動かす
カードを作って、3つの列で動かす
押した結果が、ここに出ます。
これから
2枚・まだ手をつけていないもの
図書館の本を返す
うわばきを洗う
やっている
1枚・いま手をつけているもの
自由研究のテーマを決める
おわった
1枚・終わったもの
夏休みの計画を紙に書く
消えたときのための、書き出しと読み込み
カードはこの機械の中に保存していますが、消えることがあります（下の説明を読んでください）。大事なものは、この文をコピーして自分の手元に残してください。貼りなおせば元に戻ります。
いま出ているカードは、読み込んだもので置きかわります。先に上の「書き出し」をコピーしておくと安全です。 読めない文を貼ったときは、何が違うのかを上の欄に出します（勝手に読み替えません）。
よくある質問
カードを引きずらないと動かせませんか？
引きずる操作は1つも使っていません。カードの下にある矢印のボタンを押すと、1つ隣の列へ移ります。これは好みの問題ではなく、WCAG 2.2 の達成基準 2.5.7「Dragging Movements」が、引きずる操作には引きずらずにできる代わりの手段を求めているからです。しかも W3C の解説は、キーボードで同じことができるようにしただけでは足りず、押したり触れたりできる部品が要ると書いています。だから矢印は目に見えるボタンとして置いてあります。
書いたことは、どこかに送られますか？
送りません。このページは書いた文をサーバーへ送る仕組みを持っていません。計算も保存も、あなたが見ているこの機械の中だけで終わります。ですから、ほかの人のカードが見えることもありませんし、こちらから中身を見ることもできません。そのかわり、機械が変わればカードも一緒には移りません。持ち出したいときは「書き出し」の文をコピーしてください。
書いたカードは、ずっと残りますか？
残るとは限りません。ブラウザの中に置いているだけなので、消えることがあります。とくに Safari は、そのサイトを触らないまま Safari を7日ぶん使うと、そのサイトが書いたものをまとめて消します。ほかにも、閲覧履歴の削除やプライベートな表示で消えます。だからこのページは「保存しました」とは言い切りません。大事な予定は、書き出しをコピーして手元に残してください。
スマホと家のパソコンで、同じカードを見られますか？
そのままでは見られません。保存する場所はブラウザごと、サイトごとに分かれているので、機械が違えば別の場所になります。同じ機械でも、ブラウザを変えると別です。移したいときは、片方で「書き出し」の文をコピーし、もう片方の「読み込み」に貼ってください。同じカードがそのまま出てきます。
端の列で、さらに外へ押すとどうなりますか？
何も起きません。カードはその場に残り、「その先に列はありません」と文字で出ます。ここは道具として壊れやすいところで、行き先を計算し損ねると、押した人から見ればカードが消えたようにしか見えません。ですから、動かせなかったときも一覧をそのまま返す形にして、そのことを単体テストで固定してあります。
「かんばん」という名前は、どこから来たのですか？
トヨタ自動車の工場で使われていた紙の札の名前です。同社の75年史は「かんばん」を、ジャスト・イン・タイムを実現し、後の工程が必要とする部品の名称や数量などを指示する道具だと説明しています。1963年に全工場で採用され、1965年にかけては協力会社から部品を引き取るときにも使われるようになりました。いまパソコンやスマホで使われている「カンバンボード」は、この札の考え方を画面の上に移したものです。
「これから」「やっている」「おわった」の3つの列に、やることを並べます。引きずらなくても、矢印のボタンで動かせます。書いたものはどこにも送りません。
「引きずるだけ」にしないのは、そういう決まりがあるからです
カードをつまんで隣へ持っていく操作をドラッグ（引きずる）と言います。 気持ちのいい操作ですが、押さえる → 動かす → ちょうどよいところで離すの3つを、途中で手を離さずに続けなければいけません。手がふるえる人、指がすべる人、 マウスを細かく動かせない人にとっては、これがいちばん難しい操作になります。
だから WCAG 2.2（ウェブのアクセシビリティの国際的な決まり）は、 達成基準 2.5.7「Dragging Movements」（レベルAA）でこう定めています。
All functionality that uses a dragging movement for operation can be achieved by a single pointer without dragging, unless dragging is essential or the functionality is determined by the user agent and not modified by the author.「引きずる動きを使うすべての機能は、引きずらずに、1つのポインターで行えるようにすること。 ただし引きずることが欠かせない場合と、その動きをブラウザ側が決めていて作り手が変えていない場合を除く」。ポインターは、マウスの先や、画面に触れた指のことです。
この決まりは2023年10月5日に勧告になりました。いまW3C の本文（新しいタブで開きます）を開くと見出しの日付が2024年12月12日になっていますが、 どちらも本当です。前者が最初の勧告、後者がいまの版で、 片方だけ覚えていると食い違って見えます。
⭐ 「キーボードでもできます」では足りません
ここがいちばん間違えやすいところです。W3C の解説（Understanding）（新しいタブで開きます）は、 キーボードで同じことができるようにしても、それだけではこの基準を満たさないと書いています。
achieving keyboard equivalence for a dragging operation does not automatically meet this success criterion, unless that equivalent keyboard operation also provides controls that can be clicked or tapped with a pointer「引きずる操作にキーボードでの同等の操作を用意しても、その操作がポインターで押したり触れたりできる部品を伴っていないかぎり、自動的にこの基準を満たしたことにはならない」。
タッチの画面を使っている人は、そもそもキーボードを持っていないかもしれません。 画面に指で触るしかない人に「キーボードで動かせます」と言っても、届かないわけです。 だからこのページの矢印は、目に見えて、指で押せるボタンにしてあります。
ボタンの大きさにも下限があります
押せる部品が小さすぎると、あるのと同じことになりません。達成基準2.5.8「Target Size (Minimum)」（レベルAA）は、 押せるところの大きさを24×24 CSS ピクセル以上と定めています（間隔が十分にあるなど、5つの例外があります）。 このサイトはボタンの当たり判定を44ピクセルで揃えているので、ここはその倍近くあります。
「かんばん」は、もともと工場で使う紙の札でした
カンバンボードという言い方は、英語でも kanban と日本語の音のまま使われています。もとはトヨタ自動車の工場で使われていた紙の札の名前です。同社の75年史には、 こう書かれています。
「かんばん」はジャスト・イン・タイムを実現し、後工程が必要とする部品の名称や数量等を指示する道具である。
つまり「何を」「いくつ」と書いた札で、後の工程が前の工程へ渡す指示でした。 同じ社史によると、1963年に全工場で採用され、1965年にかけては協力会社から部品を引き取るときにも使われるようになります。 紙の札が工場の外まで出ていったわけです。
⭐ 「前から押し出す」の逆向きです
面白いのは向きです。トヨタの説明では、ジャスト・イン・タイムとは「必要なものを、必要な時に、必要なだけつくったり運んだりする」ことで、その形はこう書かれています。
前工程は完成品のストアを持っており、後工程は、そこから必要な部品を引き取ります。
前の工程が「できたぞ」と押し出すのではなく、 後の工程が要るぶんだけ取りに行く。 だから、取りに来られていない物は作らないことになり、作りすぎが起きにくくなります。 いま画面の上で動かしているカードは、この札を写したものにあたります。
保存はしますが、「消えません」とは言えません
カードはこの機械のブラウザの中（ローカルストレージ）に置いています。どこにも送っていません。ただし、そこに置いたものが必ず残るとは限りません。 とくに Safari は、WebKit の公式ブログ（2020年3月24日）（新しいタブで開きます）で、こう書いています。
deleting all of a website's script-writable storage after seven days of Safari use without user interaction on the site「そのサイトで利用者の操作がないまま Safari を7日ぶん使ったら、そのサイトがスクリプトから書いた保存領域を全部消す」。
数えているのは「7日たったら」ではありません。数えるのは「Safari を使った日」で、そのあいだにこのサイトを触っていなければ消える、という数え方です。 Safari を開かなかった日は数に入りません。 消える対象にはIndexed DB・LocalStorage・Media keys・SessionStorage・Service Worker の登録とキャッシュが入ります。 保存の仕組みそのものはローカルストレージの中身のページで、自分の目で確かめられます。
だからこのページには書き出しと読み込みがあります。 書き出した文 （JSON）は人が読める形なので、そのままメモ帳に貼っておけます。 貼りなおせば、カードは60枚まで元どおりに並びます。読めない文を貼ったときは、勝手に読み替えずに、どこが違うのかを出します。「知らない列の名前があるから、いちばん左に入れておこう」と気を利かせると、 間違いに気づけなくなるからです。
出どころ: 引きずる操作の決まりはW3C「Understanding SC 2.5.7: Dragging Movements」（新しいタブで開きます）、ボタンの大きさは同「Understanding SC 2.5.8: Target Size (Minimum)」（新しいタブで開きます）、7日で消える話はWebKit Blog「Full Third-Party Cookie Blocking and More」（新しいタブで開きます）、かんばんの生まれはトヨタ自動車 75年史（新しいタブで開きます）と同社のトヨタ生産方式のページ（新しいタブで開きます）から取っています。英語の引用は、訳す前の原文も並べてあります。 なお「アメリカのスーパーマーケットを見て思いついた」という話をよく見かけますが、開いた公式の文書では確かめられなかったので、ここには書いていません。