はじめに

2025年6月ごろ、Trello の UI が刷新されました。しかし、「使いづらくなった」 と感じている方も多いのではないでしょうか。

特に、カードに詳細な仕様を記載したり、コメントで議論を行うような使い方をしている方にとっては、今回の変更は少し辛いものがあります。

▼ 現在の Trello の UI（Before） 画面中央に狭く表示され、左右に分割された窮屈なレイアウト

そこで本記事では、Tampermonkey を使って Trello の UI をカスタマイズし、画面幅いっぱいに表示 しながら 説明とコメントを自由に切り替えられる スクリプトをご紹介します。

▼ スクリプト適用後（After） 画面幅をフルに使い、説明とコメントを見やすく左右均等に配置、それぞれを独立して表示も可能

Trello の新しい UI のここが辛い

今回のアップデートで、カードを開いたときのレイアウトが大きく変更されました。私が特に不便に感じたのは以下の 2 点です。

1. カードの横幅が狭いまま固定された

画面の左右に広い余白が残ったまま、カードが中央に狭く表示されます。せっかくの画面領域を活かしきれていない印象です。

2. 「説明」と「コメント」が左右分割（2 カラム）になった

以前は縦に並んでいた「カードの説明」と「アクティビティ（コメント）」が、左右に並ぶ 2 カラム構成になりました。

一見すると説明を見ながらコメントも確認できて便利そうですが、実際に使ってみるといくつかの問題があります。

• テキストの折り返しが頻発する：幅が狭いまま左右分割されるため、文章が細切れになって読みづらくなります
• コードの可読性が低下する：エラーログやコードブロックが頻繁に折り返され、内容の把握に時間がかかります（※現在は折り返しの挙動をユーザーが制御できるようになりましたが、幅が狭い点は変わりません）
• 片方に集中できない：「説明だけをじっくり読みたい」「コメントの流れだけを追いたい」という場面でも、常に両方が狭く表示され続けます

長文の仕様書やコードを多用するカードでは、この狭さがストレスの原因になっていました。

解決策：自作スクリプトで UI を改造する

Trello の設定だけでは元に戻せないため、ブラウザ拡張機能の Tampermonkey を使ってスタイルを強制的に変更するスクリプトを作成しました。

ヘッダーに追加される表示切り替えスイッチ

なお、本スクリプトはページ内の CSS を上書きし、表示モードを切り替える機能を追加するだけのものです。 外部サーバーへのデータ送信や、カード内容の書き換えといった操作は一切行いませんので、安心してご利用いただけます。

このスクリプトを導入すると、以下のことができるようになります。

• カード幅の拡大: カードのモーダルウィンドウを画面幅の 98% まで広げます。
• 表示モードの切り替え: 以下の 3 つのモードをボタン一つで切り替えられます。
  • MAIN: 説明（左カラム）のみを全幅で表示
  • SPLIT: 説明とコメントを左右均等（50:50） で表示
  • COMMENTS: コメント（右カラム）のみを全幅で表示
• ショートカットキー対応: マウスを使わずにキーボードだけでビューを切り替えられます（u / i / o）。

導入方法

手順 1: Tampermonkey をインストール

まず、ブラウザにユーザースクリプトを実行するための拡張機能 Tampermonkey をインストールします。

• Chrome / Edge 版
• Firefox 版

手順 2: スクリプトを登録

以下のページにアクセスし、「スクリプトをインストール」をクリックしてユーザースクリプトを登録してください。

https://greasyfork.org/ja/scripts/557617-trello-card-ui-customizer

使い方

Trello のボードをリロードしてカードを開くと、カード上部（閉じるボタンの左側）に新しいスイッチが表示されます。

• MAIN: 左側の説明・詳細エリアを全画面（幅 100%）で表示します。仕様書を読むときに最適です。
• SPLIT: 左側に説明、右側にコメントを 50% ずつの幅で表示します。画面幅いっぱいに広がるので、以前より格段に見やすくなります。
• COMMENTS: 右側のコメント・アクティビティエリアを全画面（幅 100%）で表示します。議論の流れを追うのに便利です。

ショートカットキー

マウス操作だけでなく、以下のキーボードショートカットでも切り替えが可能です（入力フォーム選択時を除く）。 ボタンにマウスを乗せると、ツールチップでショートカットキーを確認できます。

• u: MAIN（説明）を表示
• i: SPLIT（両方）を表示
• o: COMMENTS（コメント）を表示

---

これで、Trello が快適に使えるようになります。新しい UI に不便を感じている方は、ぜひお試しください。

注意点：Trello のアップデートについて

本スクリプトは記事執筆時点（2026年1月31日）の Trello の仕様に合わせて作成しています。 Trello は定期的に UI のアップデートを行っているため、将来的に HTML 構造やクラス名が変更され、スクリプトが正常に機能しなくなる可能性 があります。あらかじめご了承ください。

おわりに

Tampermonkey の魅力は、その高いカスタマイズ性にあります。

今回ご紹介したスクリプトはあくまで一例です。コード内の値を少し書き換えるだけで「ショートカットキーを別のキーに割り当てる」「画面分割の比率を 7:3 にする」といった調整も可能です。

「もっとこうしたい」という部分があれば、ぜひご自身の使いやすいようにカスタマイズしてみてください。

株式会社ルーター　長戸