2026年1月9日

今日、** 英語学習ページをSpotify風にリデザイン ** した。

最初は「色がヘン」「ループとランダムの作り込みが甘い」という自分へのダメ出しから始まった。

---

Before: バラバラなボタン

    緑のPlayボタン、紫のLoop、白のRandom、青のDownload。

** 統一感ゼロ。**

機能はあるけど、見た目が素人丸出し。

    ![旧フレーズページ](https://imagedelivery.net/k1Zw56y2FNiZaFcOP7Rs2Q/47f03dd5-69ea-46b1-fd58-bcb877b23100/public)

        ![旧フレーズ詳細](https://imagedelivery.net/k1Zw56y2FNiZaFcOP7Rs2Q/02ccd0ff-7c6b-488b-3ccc-9a251f88ce00/public)

            ---

After: Spotify風ダークUI

Claude Codeに「普通の音楽サイトの構成にしてよ」と伝えた。

** 1時間後——**

        ![After: Spotify風ジャーナルプレイヤー](https://imagedelivery.net/k1Zw56y2FNiZaFcOP7Rs2Q/9c161c9b-c98d-4b6f-9823-e6123116f600/public)

            ![After: Spotify風フレーズページ](https://imagedelivery.net/k1Zw56y2FNiZaFcOP7Rs2Q/7a2ad245-1ff2-4236-b5f9-e96ff1269a00/public)

                - ダーク背景（#0a0a0a）
                - ゴールドアクセント（#D4AF37）
                - シャッフル・前後送り・再生・リピート
                - プログレスバー
                - トラックリスト

                **「大手が作ってるサービスと遜色ないじゃんｗｗｗ」**

            自分で言うのもアレだけど、マジでそう思った。

                ---

追加した機能

1曲リピート

最初は「全曲リピート」しかなかった。

「1曲リピートがないね」

3段階に拡張：

オフ（グレー）
全曲リピート（ゴールド）
1曲リピート（ゴールド + "1"）

速度スライダー

「速度をもっと自由に操作できない？」

0.8x / 0.9x / 1.0x のボタン3つから、** 0.5x〜1.5x のスライダー ** に変更。

ボイス選択

「声がおとことおんなはどうわけてんの？」

ブラウザに搭載されている英語音声をドロップダウンで選択可能に。

AIとの共作

今日のやり取りを振り返ると——

「普通の音楽サイトにして」→ Spotify風UIが出てくる
「1曲リピートがない」→ 3段階リピートが実装される
「速度をもっと自由に」→ スライダーになる
「男女の声は？」→ ボイスセレクターが追加される

** 俺がやったのは「ダメ出し」だけ。**
```
 実装はClaude Code。
```

でも、このダメ出しこそが「人間の仕事」なのかもしれない。

技術メモ

// リピートモード（3段階）
const [repeatMode, setRepeatMode] = useState(0); // 0: off, 1: all, 2: one
const repeatModeRef = useRef(0);

const getNextIndex = (cur: number): number => {
    if (repeatModeRef.current === 2) return cur; // repeat one
    // ...
};

const toggleRepeat = () => {
    const next = (repeatMode + 1) % 3;
    repeatModeRef.current = next;
    setRepeatMode(next);
};

// ボイス選択
const loadVoices = () => {
    const allVoices = window.speechSynthesis.getVoices();
    const enVoices = allVoices.filter(v => v.lang.startsWith('en'));
    setVoices(enVoices);
};

結論

AIに実装を任せて、人間はダメ出しに専念する。

これが2026年の開発スタイルかもしれない。

「もう大手がつくってるサービスと遜色ないじゃん」

——これが今日の成果。

Spotify風英語学習プレイヤーを作った——AIと一緒に「大手と遜色ない」UIを1時間で