Spaces:
Running
Running
| <html lang="ja"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>にじボイス | 再現デモ</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="style.css"> | |
| <link | |
| href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&family=Noto+Sans+JP:wght@400;500;700;900&display=swap" | |
| rel="stylesheet"> | |
| </head> | |
| <body class="bg-gray-50 font-sans text-slate-800 min-h-screen flex flex-col"> | |
| <nav class="fixed top-0 w-full bg-white/80 backdrop-blur-md border-b border-gray-200 z-50 h-16"> | |
| <div class="max-w-[1440px] mx-auto px-6 h-full flex items-center justify-between"> | |
| <div class="flex items-center gap-2 cursor-pointer"> | |
| <span class="text-xl font-bold tracking-tighter">NIJIVOICE <span | |
| class="text-xs font-normal text-gray-500 ml-1">Archive</span></span> | |
| </div> | |
| <div class="flex items-center gap-4"> | |
| <div class="hidden md:flex flex-col items-end justify-center text-right mr-2"> | |
| <div class="text-[10px] text-gray-500">ゼロ文字プラン</div> | |
| <div class="flex items-center gap-1 text-xs font-bold"> | |
| <span class="text-red-500">⚡ 0</span> / 0文字 | |
| </div> | |
| </div> | |
| <button | |
| class="hidden md:flex items-center justify-center px-4 h-10 gap-2 bg-gradient-to-r from-indigo-500 to-purple-600 text-white text-sm font-bold rounded-lg hover:opacity-90 transition shadow-sm"> | |
| <span>⚡</span> アップグレード | |
| </button> | |
| <div class="w-8 h-8 rounded-full bg-gray-200 overflow-hidden border border-gray-100"> | |
| <img src="https://www.w3schools.com/howto/img_avatar.png" alt="User" class="w-full h-full object-cover"> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <main class="flex-1 pt-28 pb-64 px-4"> | |
| <div class="max-w-[1000px] mx-auto mb-12"> | |
| <div class="text-center mb-8"> | |
| <h1 class="text-4xl md:text-5xl lg:text-6xl font-black tracking-tight text-slate-900 mb-4"> | |
| 2025 NIJIVOICE<br class="md:hidden" /> | |
| <span class="bg-clip-text text-transparent bg-gradient-to-r from-indigo-600 to-purple-600">Sample | |
| Archive</span> | |
| </h1> | |
| <p class="text-slate-500 font-medium text-sm md:text-base"> | |
| 非公式・検証用音声アーカイブプロジェクト | |
| </p> | |
| </div> | |
| <div class="flex flex-wrap justify-center gap-3 mb-10"> | |
| <a href="https://huggingface.co/spaces/litagin/nijivoice_voice_actors" target="_blank" rel="noopener noreferrer" | |
| class="inline-flex items-center gap-2 px-4 py-2.5 bg-white border border-slate-200 rounded-full text-xs sm:text-sm font-bold text-slate-600 hover:text-indigo-600 hover:border-indigo-500 hover:shadow-md transition-all duration-200 group"> | |
| <span class="text-xl leading-none">🤗</span> | |
| <span>キャラと声優さんの対応表デモ</span> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 text-slate-400 group-hover:text-indigo-500" fill="none" | |
| viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" | |
| d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" /> | |
| </svg> | |
| </a> | |
| <a href="https://huggingface.co/spaces/litagin/guess_nijivoice_aivisspeech_voice_actors" target="_blank" | |
| rel="noopener noreferrer" | |
| class="inline-flex items-center gap-2 px-4 py-2.5 bg-white border border-slate-200 rounded-full text-xs sm:text-sm font-bold text-slate-600 hover:text-indigo-600 hover:border-indigo-500 hover:shadow-md transition-all duration-200 group"> | |
| <span class="text-xl leading-none">🤗</span> | |
| <span>過去の声優特定の試み</span> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 text-slate-400 group-hover:text-indigo-500" fill="none" | |
| viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" | |
| d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" /> | |
| </svg> | |
| </a> | |
| <a href="https://note.com/litagin/n/nc5f9dd107710" target="_blank" rel="noopener noreferrer" | |
| class="inline-flex items-center gap-2 px-4 py-2.5 bg-white border border-slate-200 rounded-full text-xs sm:text-sm font-bold text-slate-600 hover:text-green-600 hover:border-green-500 hover:shadow-md transition-all duration-200 group"> | |
| <span class="text-xl leading-none">📝</span> | |
| <span>声優との対応表の所感 (note記事)</span> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 text-slate-400 group-hover:text-green-500" fill="none" | |
| viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" | |
| d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" /> | |
| </svg> | |
| </a> | |
| </div> | |
| <div class="bg-white border border-slate-200 rounded-xl p-6 md:p-8 shadow-sm relative overflow-hidden"> | |
| <div class="absolute top-0 left-0 w-1 h-full bg-slate-400"></div> | |
| <h3 class="text-lg font-bold text-slate-800 mb-4 flex items-center gap-2"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-slate-500" fill="none" viewBox="0 0 24 24" | |
| stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" | |
| d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /> | |
| </svg> | |
| 本サイトの目的と背景について | |
| </h3> | |
| <div class="text-sm text-slate-600 leading-relaxed space-y-4"> | |
| <div> | |
| <p class="mb-2"> | |
| 現在、音声合成サービス「にじボイス」において、声優の音声を許諾なく学習に使用しているのではないかという懸念が指摘されています。 | |
| 日本俳優連合の要請を受け、既に2025年10月31日を持って33キャラクターが公開停止となり、さらに2025年11月19日には20キャラクターの取り下げ要請が行われている状況です。 | |
| </p> | |
| <ul class="text-xs bg-slate-50 rounded-lg p-3 space-y-1 text-slate-500"> | |
| <li class="flex gap-2"> | |
| <span class="shrink-0">・</span> | |
| <a href="https://app.nijivoice.com/info/character-discontinuation" target="_blank" | |
| rel="noopener noreferrer" class="text-indigo-600 hover:underline break-all"> | |
| 一部キャラクターの提供終了について (にじボイス公式) | |
| </a> | |
| </li> | |
| <li class="flex gap-2"> | |
| <span class="shrink-0">・</span> | |
| <a href="https://x.com/JAU_Official/status/1986664719441404392" target="_blank" | |
| rel="noopener noreferrer" class="text-indigo-600 hover:underline break-all"> | |
| 日本俳優連合 公式X (公開停止について) | |
| </a> | |
| </li> | |
| <li class="flex gap-2"> | |
| <span class="shrink-0">・</span> | |
| <a href="https://x.com/JAU_Official/status/1990917939881783603" target="_blank" | |
| rel="noopener noreferrer" class="text-indigo-600 hover:underline break-all"> | |
| 日本俳優連合 公式X (追加の取り下げ要請について) | |
| </a> | |
| </li> | |
| </ul> | |
| </div> | |
| <p> | |
| しかしながら、同サービスは2025年10月より承認制のクローズドな運用へと移行しており、現在は会員登録および審査を通過したユーザー以外は音声サンプルを確認することが困難となっています。 | |
| これにより、一般の方や権利者が声優の声との類似性を検証する機会が失われつつあります。 | |
| </p> | |
| <p> | |
| 本デモサイトは、今後さらにキャラクターが削除されたり、サンプル音声へのアクセスが不可能になったりする可能性を鑑み、 | |
| <strong>広く一般の方々が音声を比較・検証できる環境を維持するためのアーカイブ</strong>として作成されました。 | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="max-w-[1440px] mx-auto flex gap-6 relative"> | |
| <div class="flex-1 min-w-0"> | |
| <div class="mb-8 text-center relative"> | |
| <h2 | |
| class="text-2xl font-bold inline-block pb-2 border-b-4 border-transparent bg-gradient-to-r from-indigo-500 to-purple-600 bg-clip-text text-transparent" | |
| style="border-image: linear-gradient(to right, #6366f1, #a855f7) 1;"> | |
| ボイスを探す | |
| </h2> | |
| </div> | |
| <div id="character-grid" class="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-4 lg:gap-6"> | |
| <div class="col-span-full text-center py-10 text-gray-400"> | |
| 読み込み中... | |
| </div> | |
| </div> | |
| </div> | |
| <div class="hidden lg:block w-[380px] shrink-0"> | |
| <div class="sticky top-24 h-[calc(100vh-120px)] flex flex-col"> | |
| <div class="bg-white rounded-3xl shadow-xl border border-gray-100 overflow-hidden flex flex-col h-full"> | |
| <div class="relative flex-1 w-full shrink-0 bg-gray-100 overflow-hidden"> | |
| <img id="preview-image" src="" | |
| class="w-full h-full object-cover object-top transition-opacity duration-300" alt=""> | |
| <div class="absolute inset-0 bg-gradient-to-t from-white via-transparent to-transparent opacity-80"></div> | |
| <div | |
| class="absolute bottom-4 left-4 right-4 bg-white/90 backdrop-blur-md p-4 rounded-2xl shadow-sm border border-white/50"> | |
| <p id="preview-name-reading" class="text-[10px] text-gray-500 font-bold tracking-wider">-</p> | |
| <div class="flex items-end justify-between"> | |
| <p id="preview-name" class="text-xl font-bold text-gray-800 leading-tight">-</p> | |
| <div id="preview-meta" class="text-xs font-bold text-indigo-600 bg-indigo-50 px-2 py-1 rounded-md"> | |
| -歳 | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="shrink-0 p-6 bg-white relative z-10"> | |
| <button id="main-play-btn" | |
| class="w-full py-4 bg-gray-900 hover:bg-gray-800 text-white text-sm font-bold rounded-2xl shadow-lg transition-transform active:scale-[0.98] flex justify-center items-center gap-3 mb-6 group"> | |
| <span | |
| class="w-8 h-8 rounded-full bg-white/20 flex items-center justify-center group-hover:bg-white/30 transition-colors"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor"> | |
| <path fill-rule="evenodd" | |
| d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" | |
| clip-rule="evenodd" /> | |
| </svg> | |
| </span> | |
| サンプルボイスを再生 | |
| </button> | |
| <div class="bg-gray-50 rounded-xl p-4 flex items-center gap-4 border border-gray-100"> | |
| <div class="flex-1"> | |
| <div class="h-1.5 bg-gray-200 rounded-full overflow-hidden"> | |
| <div id="progress-bar" class="h-full bg-indigo-500 w-0 transition-all duration-100 rounded-full"> | |
| </div> | |
| </div> | |
| <div class="flex justify-between text-[10px] text-gray-400 mt-2 font-mono"> | |
| <span id="current-time">0:00</span> | |
| <span id="duration">0:00</span> | |
| </div> | |
| </div> | |
| </div> | |
| <audio id="main-audio" src=""></audio> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <footer class="bg-[#18181B] text-white py-6 fixed bottom-0 w-full z-50 border-t border-gray-800"> | |
| <div class="max-w-[1440px] mx-auto px-6 flex flex-col md:flex-row justify-between items-center gap-4"> | |
| <div class="text-center md:text-left"> | |
| <p class="text-xs text-gray-400 mb-1">音声・キャラクター画像提供</p> | |
| <a href="https://nijivoice.com" target="_blank" rel="noopener noreferrer" | |
| class="text-base font-bold text-white hover:text-indigo-400 transition-colors flex items-center gap-2 justify-center md:justify-start">にじボイス | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" | |
| d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" /> | |
| </svg> | |
| </a> | |
| <p class="text-[10px] text-gray-500 mt-1"> | |
| ※本サイトはアーカイブ目的であり、商用利用・二次利用に関する規定は公式サイトの利用規約に準拠します。 | |
| </p> | |
| </div> | |
| <div class="text-xs text-gray-500 text-center md:text-right"> | |
| <p>2025 Nijivoice Sample Archive</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script src="script.js"></script> | |
| </body> | |
| </html> |