Roam Research TIPS: チェックボックスのデザインを変えてもっと使いやすくしてみる

Roam Researchを使い始めて2カ月。どんどん依存度が高くなっていますヤバイです。料金プランが発表されたことで、他サービスと比較したコスト面やサービスの継続性について、慎重に検討している人も多いようですが、私はひとまず月額プランで続けてみようかなと考えています。いや偉そうに言ってすいません続けさせてくださいもうRoamなしでは考えられないです。流石に5年分一括払いのBelieverプランにベットする男気はないですが。とりあえず近日リリース予定というアプリ版が楽しみです。

さて今回は、私が実際に使っているカスタムCSSの設定を紹介します。チェックボックスのカスタムです。カスタムCSSの設定の仕方は、前回の記事をご参照ください。

Roam Researchのチェックボックスは、サイズが小さく、未チェックの状態だと視認性が悪いため、私の場合チェック漏れが多々発生していました。そこで、チェックボックスの大きさや色を変更して視認性を上げてみました。下記がコードになります。

.check-container {
 padding-left: 18px;
 top: -9px;
}

.check-container .checkmark {
 width: 18px;
 height: 18px;
 border-radius: 3px;
 background-color: yellow;
}

.check-container .checkmark:after {
 top: 2px;
 left: 6px;
 transform: rotate(40deg) scale(1.2);
}

実際にRoam Researchの[[roam/css]]に設定している様子は下記のような感じです。

さて、このカスタムCSSを適用するとどう変わるでしょう。まず適用前です。

次に適用後です。

- チェックボックス自体が大きくなり、目立つようになりました。マウスでクリックしやすくもなっています。
- 未チェックの項目は背景色が黄色になっています。1日のログをざっと見返した際、未完了の項目が分かりやすくなっています。

個人的には後者の効能が大きいですね。