AIと一緒に休日プログラミング！Claudeとペアプロで作る「日曜ポモドーロタイマー」30分チャレンジ

YaroTech｜生成AIの傾奇者

2025年7月20日 15:14

こんにちは！YaroTechです。

日曜日の午後、コーヒーを片手にプログラミング。最高の休日じゃないですか？※プログラミングするのはいつも通りClaudeDesktopです！

今日はClaudeとペアプログラミングで、実用的なWebアプリをたった30分で作ってみました！

題材は「ポモドーロタイマー」。作業効率化の定番ツールですね。

でも今回は、ただのタイマーじゃありません。日曜日らしい、ちょっとオシャレで気分が上がるデザインにこだわりました✨

🖥️ 動作確認環境

PC: Microsoft Surface Laptop 7th（Snapdragon X Elite / ARM64）
OS: Windows 11 Pro 24H2（ARM64版）
ブラウザ: Chrome、Safari、Edge
Claude Desktop: v0.7.2以降
必要な知識: HTMLの基礎（なくても大丈夫！）

🎯 この記事で得られること

Claudeとのペアプログラミングのコツ
30分でWebアプリを作る方法
コピペで動くポモドーロタイマー
休日プログラミングの楽しみ方
初心者でも始められるWeb開発

🍅 完成品をチラ見せ

こんなポモドーロタイマーができました！

特徴：

🌈 グラデーション背景でモチベーションUP
🎨 グラスモーフィズムでオシャレに
⏰ 作業25分→休憩5分の自動切り替え
🔔 完了時の通知音
📊 セッション数の可視化

🚀 Claudeとペアプロ開始！

Step 1: まずは要件を伝える（3分）

私：「日曜日の午後に使いたくなるような、
    オシャレなポモドーロタイマーを作って！
    グラデーション背景で、気分が上がるデザインで」

Claude：「いいですね！日曜日らしいリラックスした
      雰囲気のデザインにしましょう。
      グラスモーフィズムを使った
      モダンなUIはどうでしょうか？」

ポイント：具体的なイメージを伝えると、Claudeが素敵な提案をしてくれます！

Step 2: 基本構造を作る（5分）

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sunday Pomodoro Timer 🍅</title>
</head>
<body>
    <div class="container">
        <h1>🍅 Pomodoro Timer</h1>
        <div class="timer-display">25:00</div>
        <button onclick="toggleTimer()">スタート</button>
    </div>
</body>
</html>

Claudeのアドバイス：

「まずはシンプルな構造から始めましょう。
あとで機能を追加していくのが効率的です」

Step 3: オシャレなデザインを追加（10分）

body {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 30px;
    padding: 50px;
    box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
}

デザインのポイント：

紫系のグラデーション→リラックス効果
グラスモーフィズム→今っぽさ
大きめの角丸→優しい印象

Step 4: タイマー機能を実装（10分）

let timer = null;
let timeLeft = 25 * 60; // 25分を秒で
let isRunning = false;

function toggleTimer() {
    if (isRunning) {
        pauseTimer();
    } else {
        startTimer();
    }
}

function startTimer() {
    isRunning = true;
    timer = setInterval(() => {
        timeLeft--;
        updateDisplay();
        
        if (timeLeft <= 0) {
            completeSession();
        }
    }, 1000);
}

見た目はStep3と変わらずですが、「スタート」を押すとカウントダウンが始まるようになりました。

Claudeとの会話：

私：「タイマーが0になったら音を鳴らしたい」

Claude：「Web Audio APIを使って
      シンプルな通知音を実装しましょう。
      Base64エンコードした短い音源を
      埋め込む方法はどうですか？」

私：「それいいね！」

Step 5: 便利機能を追加（2分）

最後の仕上げで追加した機能：

⚙️ 作業/休憩時間のカスタマイズ
🔴 セッション数の表示（4つで1サイクル）
✨ タイマー動作中のパルスアニメーション

💡 ペアプロで学んだこと

1. Claudeは優秀な相棒

良かった点：
- コードの提案が的確
- エラーの原因をすぐ特定
- デザインセンスが良い
- 初心者にも分かりやすく説明

2. 会話のコツ

具体的に伝える：
❌「タイマーを作って」
⭕「ポモドーロタイマーで、25分作業→5分休憩、オシャレなデザインで」

段階的に進める：

基本機能
デザイン
追加機能
微調整

3. 時間配分の黄金比

要件定義：10%（3分）
基本実装：50%（15分）
デザイン：30%（9分）
調整：10%（3分）

🎨 完成コード（コピペで動く！）

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sunday Pomodoro Timer 🍅</title>
    <style>
        /* 上記のCSSコードをここに */
    </style>
</head>
<body>
    <!-- 上記のHTMLコードをここに -->
    <script>
        // 上記のJavaScriptコードをここに
    </script>
</body>
</html>

🚀 カスタマイズアイデア

Claudeと一緒に追加できる機能：

1. BGM機能

// Claudeに聞いてみよう！
「作業中に流れる環境音を追加したい」

2. タスクリスト連携

// ローカルストレージでタスク管理
「今日のタスクを表示する機能を追加して」

3. 統計機能

// 今週の作業時間をグラフ化
「週間レポート機能を作りたい」

📱 スマホ対応も簡単！

Claudeに一言：

「スマホでも使いやすくしたい」

すぐにレスポンシブ対応のCSSを提案してくれます！

🎯 初心者の方へ

プログラミング未経験でも大丈夫！

HTMLファイルを作る
- メモ帳を開く
- コードをコピペ
- `timer.html`で保存
ブラウザで開く
- ファイルをダブルクリック
- 完成！
カスタマイズ
- 色を変えたい→Claudeに聞く
- 機能追加したい→Claudeに聞く

💬 まとめ

30分あれば、Claudeと一緒に実用的なWebアプリが作れます！

今回のポモドーロタイマーは、私も実際に使っています。自分で作ったツールって、愛着が湧くんですよね。

休日プログラミングの醍醐味は、楽しみながら学べること。失敗しても大丈夫。Claudeが優しくサポートしてくれます。

皆さんも、日曜日の午後はClaudeとペアプロしてみませんか？

🎁 読者特典

💝 いいね30を超えたら: ポモドーロタイマーのファイルを完全公開！
🎉 いいね50を超えたら: 「Claudeペアプロ虎の巻」PDF配布！

シェアの際は #休日プログラミング #Claudeペアプロ #ポモドーロタイマー #YaroTech をつけていただけると嬉しいです。

💬 あなたの作品も見せてください！

「こんな機能追加した！」
「色を変えてみた！」
「別のアプリ作った！」

コメント欄やXで教えてください。日曜日なので、ゆっくりお返事します😊

🔗 関連記事

Day1: Claude×MCPで変わる日常

Day9: Marpスライド作成術

📚 参考リソース

🏷️ タグ
#休日プログラミング #Claudeペアプロ #ポモドーロタイマー #Webアプリ開発 #YaroTech #日曜日 #プログラミング初心者 #30分チャレンジ #生成AI #ClaudeDesktop

いいなと思ったら応援しよう！

記事がお役に立てたなら嬉しいです！いただいたチップは、新しいMCPツールの検証や、より深い実践実験の資金として大切に使わせていただきます。あなたの応援が次の「AI活用の感動」を生み出す原動力になります✨ 一緒に羽ばたき続けましょう！