日程調整を「コマ」で見せる理由

KOMARO は、空いている時間を表の「コマ」で集める日程調整のサービスです。2026年5月に作り始め、いまは Web（komaro.app）と iPhone で公開しています。この記事では、答え方をコマにした理由と、色と「登録なし」をどう決めたかを、作り直しの記録とあわせて書きます。

日程調整で手間がかかる所

日程調整には、集める人と答える人がいます。手間はどちらにもかかります。

集める人の手間は、答えの形がそろわないことです。チャットで聞くと、「火曜の午後なら」「水曜は11時まで」のように文章で返ってきます。それを読んで、表にまとめ直すのは集める人です。

答える人の手間は、答えるまでの入口です。会員登録やアプリのインストールが要ると、その時点で後回しにされます。

KOMARO では、この2つを同時に減らす形を探しました。

答えを「コマ」にした

答える人がすることは、名前を入れて、空いているコマを押すことだけです。押したコマは黒くなり、もう一度押すと戻ります。答えは「押した・押していない」の2つしかありません。○と×の間の「△」は作っていません。

答えが2つしかないので、集める側の表は数を足すだけで出来上がります。まとめ直す作業がなくなります。

表の形は3つ用意しました。

• 時間割形式：日付か曜日 × 時限
• カレンダー形式：日付か曜日 × 時間帯
• 日付形式：日付だけ

コマは1つずつ押すほかに、指でなぞってまとめて選べます。ここは最初につまずいた所です。iPhone の Safari では、表の上で指を動かすと、選ぶより先に画面のスクロール（画面を動かすこと）が始まってしまいました。5月2日から3日にかけて、やり方を4回変えています。最後は、指がコマの上にあるときだけスクロールを止め、日付や時間の見出しの上ではいつも通り動かせる形に落ち着きました。

色は灰色の濃さと、赤ひとつ

集計の画面では、各コマに「そのコマが空いている人数」を数字と色で出します。色の決め方は短い関数1つです。

export function getHeatmapColor(count: number, maxCount: number): string {
  if (maxCount === 0 || count === 0) return "bg-white";
  const ratio = count / maxCount;
  if (ratio <= 0.25) return "bg-gray-100";
  if (ratio <= 0.5) return "bg-gray-200";
  if (ratio <= 0.75) return "bg-gray-400";
  if (ratio < 1) return "bg-gray-600";
  return "bg-red-600";
}

要点は2つです。

1つ目は、基準が「参加者の数」ではなく「いちばん多いコマの人数」であることです。10人が答えて、最も多いコマが6人なら、その6人のコマが赤になります。全員がそろうコマが無くても、「ここがいちばん集まれる」が必ず1色で見えます。

2つ目は、色を灰色の濃さ4段階と赤1つに絞ったことです。KOMARO の画面はほぼ白と黒でできています。赤を使うのは最多のコマだけです。5月11日にトップの見本の表で最多のコマを赤にし、7月2日には日付形式の集計カレンダーも同じ赤にそろえました。どの形式でも「赤＝いちばん集まれる」と読めるようにするためです。

数字の色も背景に合わせて変えています。薄い灰色の上では濃い灰色の文字、濃い色の上では白い文字です。

一度、色とは別に「ベストな時間帯」を示す表示を足したことがあります。5月5日に入れて、5月9日に外しました。

見え方では、広告の置き場所も決めました。回答中のコマの表のまわりには広告を置いていません。コマを押すつもりで広告を押してしまうと、利用者は意図しないページに飛ばされます。広告主から見ても無効なクリックになります。

登録をなくすために足したもの

KOMARO にはアカウントがありません。予定を作るとURLができ、それを LINE やチャットで送れば答えてもらえます。共有の手段は、LINE とリンクのコピーの2つに絞りました。

登録が無いと、アカウントが代わりにしてくれていたことを、別の形で用意する必要があります。足したのは次の4つです。

• 短いURL：最初は予定のURLに36文字の識別子を使っていました。5月4日に8文字のランダムな文字列へ変えました。チャットに貼っても読める長さで、推測されにくい形です。
• 作った人の鍵：作った人には、編集用のURLが別に渡ります。なくすと編集も削除もできなくなるので、作成直後の画面で保存を促しています。任意で編集用のパスワードも付けられます。5回間違えると15分は試せなくなります。
• 答えの直し方：答えた人は、集計画面で自分の名前を長押しすると答えを直せます。同じ名前で答え直そうとしたときは、上書きするか、別の名前にするかを選べます。
• 片付け：最後の更新から90日たつと新しい回答の受付を止め、さらに30日後に自動で消します。持ち主のいないデータを残し続けないためです。

iPhone 版でも登録はありません。そのため「自分の予定の一覧」がありません。代わりに、作った予定や答えた予定を端末の中に覚えておき、ホーム画面に「最近のイベント」として出しています。この一覧はアプリだけの機能です。中身は komaro.app をアプリの中で開く作りなので、Web を直すとアプリにもそのまま反映されます。

作り直してわかったこと

公開した後も、コマの表は何度か作り直しています。

1つは横スクロールです。候補が多いと、スマホでは表が画面からはみ出します。ところが、コマの上ではスクロールを止めているので、表を横に動かそうとすると日程が選ばれてしまいました。なぞって選ぶ操作と、なぞって動かす操作がぶつかっていたのです。5月28日に、表の下に専用のスクロールバーを置きました。バーで動かし、表で選ぶ、と操作を分けています。バーは表がはみ出すときだけ出ます。同じ日に、指で掴みやすいよう触れられる範囲を広げました。

もう1つは日付形式です。最初は「始まりの日と日数」を入れると、日付が縦に並ぶ1列の表になる作りでした。7月2日に、作成・回答・集計のすべてを月のカレンダーに置き換えました。日付をなぞってまとめて選べ、「この月を全選択」もできます。選べる日数の上限は、30日から31日、さらに62日（約2か月）へ広げました。日付だけを決めるなら、表よりも見慣れたカレンダーのほうが迷いません。

削ったものもあります。5月4日に、カレンダーの画像や話した声から答えを自動で入れる機能を作りました。5月7日に、精度が低いため画面から外しました。予定のファイルを読み込む機能は、入れた日のうちに外しています。

足してから外したものを並べると、残ったのはコマを押す・なぞるという操作です。答え方の入口を増やすより、押すだけで終わる形を崩さないことを優先しました。

まとめ

答えを「押す・押さない」の2つにして、集める人のまとめ直しをなくしました。 色は最多のコマを基準にし、赤を1つだけ使って「いちばん集まれる」を示しています。 登録をなくした分は、短いURL・編集用URL・名前の長押し・端末の履歴で補っています。