メインコンテンツへスキップ
見出し画像

【ひとり企業】Vol.10 Claude Code Proプランでもここまでできた~相談→指示→実装のリレー開発術~

    📌 AXelWorksのコーポレートサイトに、noteのような目次・見出し機能、8か国語対応の完成、そしてトップページ・ニュースページ両方への読み上げ機能を追加しました。今回は、その機能紹介と合わせて、月3,000円のClaude Code Proプランでどこまでできるのか、そして今の自分に合った開発のやり方に辿り着くまでの話をまとめます。

    はじめに


    画像

    🎀 Erica「また機能が増えてる…今度は目次まで自動で出るようになったのね。しかも8か国語、読み上げまで全部乗せって、欲張りセットじゃない」

    📝 開発のやり方を、自分に合う形に変えた話

    🔹 「全部AIエージェントに任せる」は、うまくいかなかった

    正直に書きます。以前、AIエージェントにほぼ全てを任せて開発を進めようとしたことがありますが、思ったようにはできませんでした。やり方が自分に合っていなかったのか、私自身の知識が足りなかったのか、おそらく両方だったと思います。

    🔹 今のやり方:相談→指示→実装のリレー

    今回、たどり着いたのは以下の流れです。

    1. Claude(チャット)に、やりたいことを相談する

    2. Claudeと一緒に、Claude Codeに渡す指示プロンプトを練り上げる

    3. その指示プロンプトをClaude Codeに渡し、実装してもらう

    4. まずローカル環境で、自分の目と手で動作を確認する

    5. 問題なければ、本番環境にデプロイする

    このリレーのような進め方にしてから、ようやく自分がイメージしていたものに近いサイトができるようになりました。「AIに丸投げ」ではなく、「相談相手として使う工程」と「手を動かしてもらう工程」を分けたのが、自分には合っていたのだと思います。

    考えてみると、これはまさにアジャイル開発そのものです。最初から完璧な仕様を決めて一気に作るのではなく、小さく相談し、小さく実装し、その場で確認し、また次の小さな一歩に進む。この繰り返しを、AIを相手に高速で回しているだけなのだと気づきました。

    画像
    回っている地球儀をクリックしてみてください!

    📝 目次・見出し機能を追加した

    noteのように、記事の中に見出しをつけると、自動で目次ができる機能を追加しました。

    • 見出しをつけるだけで、タイトルの下に目次が自動表示される

    • 目次をクリックすると、その見出しまでジャンプする

    • 見出しが少ない短い記事では、目次は表示されない

    見出しが2〜3個以上ある記事だけ目次が出る、という細かい条件も入れています。この記事にも見出しがたくさんあるので、目次が出ているはずです。

    📝 8か国語対応が完成した

    日本語・英語・韓国語・中国語・ドイツ語・フランス語・スペイン語・ロシア語、8か国語への対応が完成しました。

    • 記事は日本語で書くだけで、他の7言語に自動で翻訳される

    • 3D地球儀のアイコンをクリックすると国旗が現れ、好きな言語を選ぶだけで表示が切り替わる

    ここまで来るのに、1言語ずつ丁寧に確認しながら進めました。国旗の位置がずれていたり、翻訳に使う音声が実は男性の声になっていたり、細かい失敗もたくさんありましたが、その分ひとつひとつ直しながら仕上げました。

    📝 読み上げ機能を、トップページとニュースページ両方に

    サイトの内容を、音声で読み上げる機能も追加しました。

    • トップページ、ニュース記事どちらでも、再生ボタンを押すだけで読み上げが始まる

    • 今読んでいる場所が、薄い青色でハイライトされる

    • 読み上げが進むと、画面も自動でスクロールしてついてくる

    途中、スマートフォンのAndroid版Chromeだけ、音声が途中で消えてしまう不具合があったのですが、読み上げの仕組みをGoogle Cloudの音声合成サービスに切り替えることで解消しました。これで、どの端末で聞いても同じ声で、安定して読み上げられるようになっています。

    🔹 スマホでの見た目

    実際にスマホで見ると、こんな感じになっています。

    画像
    スマホ縦スクショ


    画像
    スマホ横スクショ


    縦向き・横向き、どちらで見ても、地球儀や読み上げボタンが指で押しやすいサイズになるよう、細かく調整しました。

    📝 Claude Code Proプランでも、ここまでできる

    Claude Codeは、月3,000円のClaude Code Proプランで使っています。作業をしていると、利用上限に達して、3時間ほど止まってしまうことがあります。

    止まっている間は、逆に良い時間の使い方ができました。記事を書いたり、次に何をするか整理したりと、開発以外の作業に取り組めるからです。焦って高いプランに乗り換える前に、まずは今のプランでどこまでできるか、試してみる価値はあると思います。今回のような機能を、実際にClaude Code Proプランだけで作ることができました。

    おわりに

    相談しながら少しずつ形にしていく、というやり方が、今の自分には合っていたようです。これからも、無理のないペースで、サイトを育てていこうと思います。

    画像

    🎀 Erica「最後までお読みくださり、ありがとうございます! 私は京都生まれ大阪育ちなので、記事では結構ボケているつもりです。お好きな記事のコメント欄にツッコミ、お待ちしています😊」


    あなたへのおすすめ