疲れた日の「30分集中CSS修正」を成立させる技術〜短時間で確実にUI改善するワークフロー〜

プログラミング

Posted at 2026-06-02

環境情報

OS: macOS Sonoma 14.5 / Windows 11
Node.js: v20.11.0
パッケージマネージャ: pnpm 8.15.4
フレームワーク: Next.js 14.2 (App Router) / React 18
スタイリング: Tailwind CSS 3.4 + CSS Modules
ブラウザ: Chrome 124 (DevTools)
エディタ: VS Code 1.89 + Tailwind CSS IntelliSense

はじめに：休養日の「30分作業」は悪なのか

エンジニアの中には「休みなら一切コードに触れない」「触るなら腰を据えて数時間やる」という二択で考えている方が多いと思います。しかし実体験として、疲労困憊の日に30分だけCSSの違和感を潰した結果、翌日のレビューが一発OKで通ったことがありました。

ポイントは「短時間 × 限定スコープ × 即座にロールバック可能」という条件を満たすタスクに絞ることです。本記事では、休養日や残業後でも安全に進められる 30分タイムボックス型のフロントエンド修正ワークフロー を、コード例と共に共有します。

「30分で終わるタスク」と「終わらないタスク」の見分け方

短時間作業で最も危険なのは「30分で終わると思ったら3時間かかった」パターンです。以下の比較表で判別してください。

タスク種別	30分で安全	30分は危険
CSSの余白/色/フォント調整	◎	-
既存コンポーネントのprops追加	○	-
レスポンシブブレークポイント微調整	○	-
状態管理の修正 (Redux/Zustand)	-	✗
API契約の変更	-	✗
ライブラリのメジャーアップデート	-	✗
新規ページ追加	-	✗

判断基準は 「ロールバックが git revert 一発で済むか」 です。スキーマや状態管理に手を入れる作業は、たとえ差分が小さく見えても波及範囲が読めないため、休養日には避けます。

ワークフロー：30分でCSS修正を完了させる7ステップ

Step 1: ブランチを切る（1分）

必ず作業ブランチを切ります。疲れている時ほど main への直接コミットは事故のもとです。

git checkout -b fix/header-padding-mobile

Step 2: DevToolsで「あたり」をつける（5分）

エディタを開く前に、Chrome DevToolsで対象要素を特定し、その場で値を変えて確認します。コードを書く前に「正解の値」を確定させるのがコツです。

/* DevToolsのStylesパネルで直接編集して試す */
.header {
  padding: 12px 16px; /* before: 8px 12px */
}

Step 3: 影響範囲をgrepで確認（3分）

該当クラスや変数が他で使われていないか、必ず確認します。

# Tailwind使用時：該当ユーティリティの利用箇所を探す
rg "px-3 py-2" --type tsx -l

# CSS変数の場合
rg "var\(--header-padding\)" --type css

Step 4: 最小差分で修正（10分）

DevToolsで確定した値を、コードに反映します。この時、リファクタや「ついでに」の修正は絶対にやらないのがルールです。

// components/Header.tsx
- <header className="px-3 py-2 flex items-center">
+ <header className="px-4 py-3 flex items-center">
    <Logo />
    <Nav />
  </header>

Step 5: 視覚的リグレッションを目視確認（5分）

最低でも以下の3パターンをローカルで確認します。

pnpm dev

デスクトップ表示 (1440px)
タブレット表示 (768px)
モバイル表示 (375px)

Step 6: コミットとプッシュ（3分）

Conventional Commits形式で、レビュアーが30秒で理解できるメッセージを書きます。

git add components/Header.tsx
git commit -m "fix(header): adjust mobile padding for better tap area"
git push origin fix/header-padding-mobile

Step 7: PR作成して即終了（3分）

PRのDescriptionにbefore/afterスクリーンショットを貼って終了。「もう少し直せそう」と思っても触らない。

ハマりポイント集

1. Tailwindのpurgeで意図せずクラスが消える

動的にクラス名を生成していると、本番ビルドで該当クラスが削除されることがあります。

// NG: purgeで削除される
const padding = isMobile ? 'p-2' : 'p-4';
const className = `p-${size}`;

// OK: safelist使用か、フルクラス名を書く
const className = isMobile ? 'p-2' : 'p-4';

tailwind.config.jsにsafelistを書く方法もあります。

module.exports = {
  safelist: [
    'p-2', 'p-4', 'p-6',
    { pattern: /bg-(red|green|blue)-(100|500|900)/ },
  ],
}

2. CSS Modulesでクラス名がハッシュ化されて検索できない

Header.module.css の .container は Header_container__abc123 に変換されます。grepする時は元のクラス名で検索しましょう。

3. 既存の `!important` に気づかず2時間溶かす

DevToolsで打ち消し線（取り消し線）が表示されているプロパティは、より優先度の高いセレクタに上書きされています。短時間作業中にこれに遭遇したら潔く中断して翌日に回します。

4. ブラウザキャッシュで「直したのに反映されない」

# Next.jsの開発サーバーのキャッシュクリア
rm -rf .next
pnpm dev

それでもダメな時は、Chromeでハードリロード（Cmd+Shift+R / Ctrl+Shift+R）またはシークレットウィンドウで確認します。

30分タイムボックスを成功させる小技

Pomodoroタイマーをコマンドで起動

# macOS
osascript -e 'display notification "30分経過。コミットして終了せよ" with title "Pomodoro"' &
sleep 1800 && osascript -e 'display notification "終了！" with title "Pomodoro"'

「触らないファイル」を明示する

VS Codeの設定で、休養日モードとして編集禁止ファイルを設定しておくと、ついでの修正を物理的に防げます。

// .vscode/settings.json
{
  "files.readonlyInclude": {
    "**/migrations/**": true,
    "**/api/**": true
  }
}

FAQ

Q1. 30分以内に終わらなかった場合は？
A. git stash して翌日に回します。中途半端なコミットは残しません。

git stash push -m "WIP: header padding fix"

Q2. レビューが翌日朝になる場合、それまでに別の修正をしたい時は？
A. PRを分ければOKです。1PR1論点を徹底すれば、レビュアーの負担も減ります。

Q3. CSS-in-JS（styled-components等）でも同じワークフローでいける？
A. いけます。ただしランタイム生成のため、DevToolsで生成後のクラス名と元のコンポーネント名のマッピングを意識する必要があります。displayNameを必ず設定しておくと検索が楽になります。

Q4. デザイナーのFigmaと値がズレている場合は？
A. 30分タイムボックス内では「Figma準拠で直す」だけにとどめます。デザイン仕様の議論は別タスクに切り出します。

まとめ

「長時間 = 高生産性」という思い込みを捨て、疲労状態に応じてタスクの粒度を選ぶことで、休養日でも罪悪感なく軽い貢献ができます。

休養日向けタスクは 「ロールバック可能・スコープ限定」 の2条件で選定する
DevToolsで先に正解値を出してから、コードを最小差分で書き換える
「ついで修正」を物理的に防ぐ仕組みを用意する
30分で終わらないなら潔く git stash する

休めるときは休み、できるときは集中する。このメリハリこそが、長期的な生産性とコード品質を守る鍵だと感じています。

皆さんも、休養日の「30分タスク」運用、試してみてはいかがでしょうか。

この記事を書いた人

BENTEN Web Works — 業務自動化・システム開発のフリーランスエンジニアです。

GAS / Python / RPA を使った業務自動化や、Web制作・システム開発のご相談を承っています。
「こんなこと自動化できる？」というご質問だけでもお気軽にどうぞ。

👉 BENTEN Web Works — 詳細・お問い合わせはこちら
🐦 X（旧Twitter） — 日々の知見を発信中

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

疲れた日の「30分集中CSS修正」を成立させる技術 〜短時間で確実にUI改善するワークフロー〜