{"id":587,"date":"2026-01-08T23:13:55","date_gmt":"2026-01-08T14:13:55","guid":{"rendered":"https:\/\/ueno-kankan.jp\/?page_id=587"},"modified":"2026-01-08T23:15:58","modified_gmt":"2026-01-08T14:15:58","slug":"%e3%81%b5%e3%81%9f%e3%82%8a%e3%81%ae%e8%a8%98%e5%bf%b5%e6%97%a5","status":"publish","type":"page","link":"https:\/\/ueno-kankan.jp\/?page_id=587","title":{"rendered":"\u3075\u305f\u308a\u306e\u8a18\u5ff5\u65e5"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n xTool AI Creative Lab UENO - \u4e8b\u696d\u8a08\u753b\u30a4\u30f3\u30bf\u30e9\u30af\u30c6\u30a3\u30d6\u4f53\u9a13<\/title>\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+JP:wght@300;400;500;700&display=swap\" rel=\"stylesheet\">\r\n <style>\r\n body {\r\n font-family: 'Noto Sans JP', sans-serif;\r\n background-color: #fafaf9; \/* stone-50 *\/\r\n color: #44403c; \/* stone-700 *\/\r\n }\r\n .chart-container {\r\n position: relative;\r\n width: 100%;\r\n max-width: 500px;\r\n height: 300px;\r\n max-height: 350px;\r\n margin: 0 auto;\r\n }\r\n .step-active {\r\n background-color: #f43f5e; \/* rose-500 *\/\r\n color: white;\r\n border-color: #f43f5e;\r\n }\r\n .step-inactive {\r\n background-color: white;\r\n color: #78716c; \/* stone-500 *\/\r\n border-color: #d6d3d1; \/* stone-300 *\/\r\n }\r\n \/* Custom scrollbar for cleaner look *\/\r\n ::-webkit-scrollbar {\r\n width: 8px;\r\n }\r\n ::-webkit-scrollbar-track {\r\n background: #f1f1f1;\r\n }\r\n ::-webkit-scrollbar-thumb {\r\n background: #d6d3d1;\r\n border-radius: 4px;\r\n }\r\n ::-webkit-scrollbar-thumb:hover {\r\n background: #a8a29e;\r\n }\r\n <\/style>\r\n <!-- Chosen Palette: Warm Neutrals (Stone\/Orange) with Rose Accents for \"Anniversary\" and Indigo for \"Tech\" -->\r\n <!-- Application Structure Plan: \r\n 1. Hero Section: Immediate concept validation (\"Thoughts to Form\").\r\n 2. Value Proposition Grid: Quick scan of key benefits (Speed, AI, No Skill).\r\n 3. Interactive Customer Journey: The core narrative. Users click through the 5 steps to understand the flow deeply.\r\n 4. Time & Resource Analysis: A data view using charts to show the 60-minute breakdown and material options.\r\n 5. Experience Simulator: A hands-on module allowing users to type \"inputs\" and see a mock AI response, reinforcing ease of use.\r\n -->\r\n <!-- Visualization & Content Choices:\r\n 1. Journey Map (Interactive List): Goal -> Explain the process. Method -> Clickable stepper with dynamic content update. Interaction -> Click to reveal details. Justification -> Step-by-step clarity is crucial for this service model.\r\n 2. Time Breakdown (Doughnut Chart): Goal -> Visualise the \"60-min complete\" claim. Method -> Chart.js. Interaction -> Hover for exact times. Justification -> Proves the speed claim with data.\r\n 3. Material Selector (Tabbed Interface): Goal -> Show versatility. Method -> JS Tabs. Interaction -> Click to switch content. Justification -> Users need to know what they can make.\r\n 4. Mock Input Form (Simulator): Goal -> Demonstrate \"No Skill Needed\". Method -> HTML Form + JS Logic. Interaction -> Type and \"Submit\". Justification -> \"Show, don't just tell\" the simplicity.\r\n CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. -->\r\n<\/head>\r\n<body class=\"antialiased\">\r\n\r\n <!-- Navigation \/ Header -->\r\n <header class=\"w-full bg-white shadow-sm sticky top-0 z-50\">\r\n <div class=\"max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between\">\r\n <div class=\"flex items-center gap-2\">\r\n <span class=\"text-2xl text-rose-500\">\u2756<\/span>\r\n <h1 class=\"text-xl font-bold tracking-tight text-stone-800\">xTool AI Creative Lab <span class=\"text-rose-500\">UENO<\/span><\/h1>\r\n <\/div>\r\n <nav class=\"hidden md:flex space-x-8 text-sm font-medium text-stone-600\">\r\n <a href=\"#concept\" class=\"hover:text-rose-500 transition\">\u30b3\u30f3\u30bb\u30d7\u30c8<\/a>\r\n <a href=\"#journey\" class=\"hover:text-rose-500 transition\">\u4f53\u9a13\u306e\u6d41\u308c<\/a>\r\n <a href=\"#tech\" class=\"hover:text-rose-500 transition\">\u6280\u8853\u3068\u7d20\u6750<\/a>\r\n <a href=\"#simulation\" class=\"bg-rose-500 text-white px-4 py-2 rounded-full hover:bg-rose-600 transition\">\u5165\u529b\u4f53\u9a13<\/a>\r\n <\/nav>\r\n <\/div>\r\n <\/header>\r\n\r\n <!-- Main Content -->\r\n <main class=\"max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-10 space-y-20\">\r\n\r\n <!-- Section 1: Hero & Concept -->\r\n <section id=\"concept\" class=\"text-center space-y-8\">\r\n <div class=\"bg-gradient-to-br from-rose-50 to-orange-50 rounded-3xl p-10 md:p-16 shadow-inner border border-stone-100\">\r\n <p class=\"text-rose-500 font-semibold tracking-wider mb-2\">BUSINESS PLAN SUMMARY<\/p>\r\n <h2 class=\"text-4xl md:text-5xl font-extrabold text-stone-800 leading-tight mb-6\">\r\n \u300c\u4e8c\u4eba\u306e\u60f3\u3044\u300d\u3092\u3001<br class=\"md:hidden\">AI\u3068\u30ec\u30fc\u30b6\u30fc\u3067\u305d\u306e\u5834\u3067\u5f62\u306b\u3059\u308b\u3002\r\n <\/h2>\r\n <p class=\"text-lg md:text-xl text-stone-600 max-w-3xl mx-auto leading-relaxed\">\r\n \u6771\u4eac\u30fb\u4e0a\u91ce\u306b\u8a95\u751f\u3059\u308b\u65e5\u672c\u521d\u306e\u4f53\u9a13\u578b\u30af\u30ea\u30a8\u30a4\u30c6\u30a3\u30d6\u62e0\u70b9\u3002<br>\r\n \u30c7\u30b6\u30a4\u30f3\u306e\u77e5\u8b58\u304c\u306a\u304f\u3066\u3082\u3001AI\u3068\u306e\u5bfe\u8a71\u3092\u901a\u3058\u3066\u3001\u4e16\u754c\u306b\u4e00\u3064\u3060\u3051\u306e\u8a18\u5ff5\u54c1\u3092\u308f\u305a\u304b<span class=\"font-bold text-rose-600\">60\u5206<\/span>\u3067\u4f5c\u6210\u3067\u304d\u308b\u30b5\u30fc\u30d3\u30b9\u3067\u3059\u3002\r\n <\/p>\r\n \r\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-6 mt-12 text-left\">\r\n <div class=\"bg-white p-6 rounded-xl shadow-sm border-l-4 border-indigo-500 hover:shadow-md transition\">\r\n <div class=\"text-3xl mb-3\">\ud83c\udfa8<\/div>\r\n <h3 class=\"font-bold text-lg mb-2\">\u30c7\u30b6\u30a4\u30f3\u30b9\u30ad\u30eb\u4e0d\u8981<\/h3>\r\n <p class=\"text-stone-500 text-sm\">\u6f20\u7136\u3068\u3057\u305f\u30ad\u30fc\u30ef\u30fc\u30c9\u3092\u4f1d\u3048\u308b\u3060\u3051\u3002\u751f\u6210AI\u304c\u3042\u306a\u305f\u306e\u4ee3\u308f\u308a\u306b\u30c7\u30b6\u30a4\u30f3\u3092\u5373\u5ea7\u306b\u63d0\u6848\u3057\u307e\u3059\u3002<\/p>\r\n <\/div>\r\n <div class=\"bg-white p-6 rounded-xl shadow-sm border-l-4 border-rose-500 hover:shadow-md transition\">\r\n <div class=\"text-3xl mb-3\">\u26a1<\/div>\r\n <h3 class=\"font-bold text-lg mb-2\">60\u5206\u3067\u5b8c\u7d50<\/h3>\r\n <p class=\"text-stone-500 text-sm\">\u69cb\u60f3\u304b\u3089\u5b8c\u6210\u307e\u3067\u308f\u305a\u304b1\u6642\u9593\u3002\u30c7\u30fc\u30c8\u306e\u5408\u9593\u306b\u7acb\u3061\u5bc4\u308c\u308b\u6c17\u8efd\u3055\u3068\u30b9\u30d4\u30fc\u30c9\u611f\u3002<\/p>\r\n <\/div>\r\n <div class=\"bg-white p-6 rounded-xl shadow-sm border-l-4 border-amber-500 hover:shadow-md transition\">\r\n <div class=\"text-3xl mb-3\">\ud83d\udc41\ufe0f<\/div>\r\n <h3 class=\"font-bold text-lg mb-2\">\u30e9\u30a4\u30d6\u52a0\u5de5\u4f53\u9a13<\/h3>\r\n <p class=\"text-stone-500 text-sm\">\u6700\u65b0\u306exTool\u30ec\u30fc\u30b6\u30fc\u52a0\u5de5\u6a5f\u304c\u3001\u76ee\u306e\u524d\u3067\u601d\u3044\u51fa\u3092\u523b\u3080\u69d8\u5b50\u3092\u898b\u5b66\u30fb\u64ae\u5f71\u3067\u304d\u307e\u3059\u3002<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- Section 2: Interactive Customer Journey -->\r\n <section id=\"journey\" class=\"scroll-mt-20\">\r\n <div class=\"mb-8 border-b pb-4\">\r\n <h2 class=\"text-2xl font-bold text-stone-800 flex items-center gap-2\">\r\n <span class=\"bg-rose-100 text-rose-600 p-1 rounded text-lg\">\ud83c\udfc3<\/span> \u9867\u5ba2\u4f53\u9a13\uff08\u30ab\u30b9\u30bf\u30de\u30fc\u30b8\u30e3\u30fc\u30cb\u30fc\uff09\r\n <\/h2>\r\n <p class=\"mt-2 text-stone-600\">\r\n \u304a\u5ba2\u69d8\u304c\u6765\u5e97\u3057\u3066\u304b\u3089\u5546\u54c1\u3092\u6301\u3061\u5e30\u308b\u307e\u3067\u306e5\u3064\u306e\u30b9\u30c6\u30c3\u30d7\u3067\u3059\u3002\u4e0b\u306e\u756a\u53f7\u3092\u30af\u30ea\u30c3\u30af\u3057\u3066\u8a73\u7d30\u3092\u78ba\u8a8d\u3057\u3066\u304f\u3060\u3055\u3044\u3002\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"flex flex-col md:flex-row gap-8\">\r\n <!-- Stepper Navigation -->\r\n <div class=\"md:w-1\/3 flex flex-col gap-4\">\r\n <button onclick=\"updateJourney(1)\" id=\"step-btn-1\" class=\"step-active text-left p-4 rounded-lg border-2 font-bold transition flex items-center justify-between group\">\r\n <span>01. \u3054\u6765\u5e97<\/span>\r\n <span class=\"text-xl\">\ud83d\udeaa<\/span>\r\n <\/button>\r\n <button onclick=\"updateJourney(2)\" id=\"step-btn-2\" class=\"step-inactive text-left p-4 rounded-lg border-2 font-bold transition flex items-center justify-between group hover:border-rose-300\">\r\n <span>02. \u69cb\u60f3\u5165\u529b<\/span>\r\n <span class=\"text-xl\">\u2328\ufe0f<\/span>\r\n <\/button>\r\n <button onclick=\"updateJourney(3)\" id=\"step-btn-3\" class=\"step-inactive text-left p-4 rounded-lg border-2 font-bold transition flex items-center justify-between group hover:border-rose-300\">\r\n <span>03. AI\u30c7\u30b6\u30a4\u30f3\u751f\u6210<\/span>\r\n <span class=\"text-xl\">\ud83e\udd16<\/span>\r\n <\/button>\r\n <button onclick=\"updateJourney(4)\" id=\"step-btn-4\" class=\"step-inactive text-left p-4 rounded-lg border-2 font-bold transition flex items-center justify-between group hover:border-rose-300\">\r\n <span>04. \u7d20\u6750\u9078\u629e\u30fb\u52a0\u5de5<\/span>\r\n <span class=\"text-xl\">\u2699\ufe0f<\/span>\r\n <\/button>\r\n <button onclick=\"updateJourney(5)\" id=\"step-btn-5\" class=\"step-inactive text-left p-4 rounded-lg border-2 font-bold transition flex items-center justify-between group hover:border-rose-300\">\r\n <span>05. \u5b8c\u6210\u30fb\u304a\u6e21\u3057<\/span>\r\n <span class=\"text-xl\">\ud83c\udf81<\/span>\r\n <\/button>\r\n <\/div>\r\n\r\n <!-- Dynamic Content Area -->\r\n <div class=\"md:w-2\/3 bg-white p-8 rounded-2xl shadow-lg border border-stone-200 relative overflow-hidden\">\r\n <div class=\"absolute top-0 right-0 p-4 opacity-10 text-9xl pointer-events-none select-none\" id=\"journey-bg-icon\">\ud83d\udeaa<\/div>\r\n \r\n <div id=\"journey-content\" class=\"relative z-10 h-full flex flex-col justify-between\">\r\n <!-- Content injected via JS -->\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- Section 3: Time & Technology Analysis -->\r\n <section id=\"tech\" class=\"scroll-mt-20\">\r\n <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-12\">\r\n \r\n <!-- Time Breakdown Chart -->\r\n <div class=\"space-y-6\">\r\n <div class=\"border-b pb-4\">\r\n <h2 class=\"text-2xl font-bold text-stone-800 flex items-center gap-2\">\r\n <span class=\"bg-indigo-100 text-indigo-600 p-1 rounded text-lg\">\u23f1\ufe0f<\/span> 60\u5206\u5b8c\u7d50\u306e\u30bf\u30a4\u30e0\u30b9\u30b1\u30b8\u30e5\u30fc\u30eb\r\n <\/h2>\r\n <p class=\"mt-2 text-stone-600\">\r\n \u30c7\u30fc\u30c8\u306e\u5408\u9593\u306b\u6c17\u8efd\u306b\u7acb\u3061\u5bc4\u308c\u308b\u3088\u3046\u3001\u5168\u3066\u306e\u5de5\u7a0b\u3092\u6700\u9069\u5316\u3057\u3066\u3044\u307e\u3059\u3002\r\n <\/p>\r\n <\/div>\r\n <div class=\"bg-white p-6 rounded-xl shadow-sm border border-stone-200\">\r\n <div class=\"chart-container\">\r\n <canvas id=\"timeChart\"><\/canvas>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Material & Tech Details -->\r\n <div class=\"space-y-6\">\r\n <div class=\"border-b pb-4\">\r\n <h2 class=\"text-2xl font-bold text-stone-800 flex items-center gap-2\">\r\n <span class=\"bg-amber-100 text-amber-600 p-1 rounded text-lg\">\ud83d\udee0\ufe0f<\/span> \u6280\u8853\u3068\u7d20\u6750\r\n <\/h2>\r\n <p class=\"mt-2 text-stone-600\">\r\n \u6700\u65b0\u30c6\u30af\u30ce\u30ed\u30b8\u30fc\u3068\u3001\u6e29\u304b\u307f\u306e\u3042\u308b\u7d20\u6750\u306e\u878d\u5408\u3002\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"bg-white rounded-xl shadow-sm border border-stone-200 overflow-hidden\">\r\n <div class=\"flex border-b border-stone-200\">\r\n <button onclick=\"switchTab('machine')\" id=\"tab-machine\" class=\"flex-1 py-3 text-sm font-bold text-indigo-600 border-b-2 border-indigo-600 bg-indigo-50\">\u4f7f\u7528\u6a5f\u6750<\/button>\r\n <button onclick=\"switchTab('materials')\" id=\"tab-materials\" class=\"flex-1 py-3 text-sm font-bold text-stone-500 hover:text-stone-700\">\u53d6\u308a\u6271\u3044\u7d20\u6750<\/button>\r\n <\/div>\r\n <div class=\"p-6 min-h-[300px]\">\r\n <div id=\"content-machine\" class=\"block space-y-4 animate-fade-in\">\r\n <h3 class=\"text-xl font-bold text-stone-800\">xTool \u30ec\u30fc\u30b6\u30fc\u52a0\u5de5\u6a5f<\/h3>\r\n <div class=\"p-4 bg-stone-50 rounded-lg border border-stone-200\">\r\n <ul class=\"space-y-3 text-sm text-stone-600\">\r\n <li class=\"flex items-start gap-2\">\r\n <span class=\"text-indigo-500\">\u2713<\/span>\r\n <span><strong>\u7cbe\u5bc6\u5f6b\u523b\uff1a<\/strong> 0.01mm\u5358\u4f4d\u306e\u7cbe\u5ea6\u3067\u3001\u5199\u771f\u3084\u7d30\u304b\u3044\u6587\u5b57\u3082\u9bae\u660e\u306b\u518d\u73fe\u3002<\/span>\r\n <\/li>\r\n <li class=\"flex items-start gap-2\">\r\n <span class=\"text-indigo-500\">\u2713<\/span>\r\n <span><strong>\u9ad8\u901f\u52a0\u5de5\uff1a<\/strong> \u5f93\u6765\u6a5f\u306e\u6570\u500d\u306e\u30b9\u30d4\u30fc\u30c9\u3067\u3001\u5f85\u3061\u6642\u9593\u3092\u6700\u5c0f\u9650\u306b\u77ed\u7e2e\u3002<\/span>\r\n <\/li>\r\n <li class=\"flex items-start gap-2\">\r\n <span class=\"text-indigo-500\">\u2713<\/span>\r\n <span><strong>\u5b89\u5168\u6027\uff1a<\/strong> \u5bc6\u9589\u578b\u8a2d\u8a08\u306b\u3088\u308a\u3001\u5e97\u5185\u3067\u5b89\u5168\u306b\u898b\u5b66\u53ef\u80fd\u3002<\/span>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"mt-4 p-4 bg-indigo-50 rounded-lg\">\r\n <h4 class=\"font-bold text-indigo-800 mb-1\">Generative AI (\u751f\u6210AI)<\/h4>\r\n <p class=\"text-xs text-indigo-700\">\r\n \u9867\u5ba2\u306e\u62bd\u8c61\u7684\u306a\u8981\u671b\uff08\u300c\u53ef\u611b\u3044\u300d\u300c2\u670814\u65e5\u300d\u306a\u3069\uff09\u3092\u89e3\u6790\u3057\u3001\u5373\u5ea7\u306b\u8907\u6570\u306e\u30b0\u30e9\u30d5\u30a3\u30c3\u30af\u30c7\u30b6\u30a4\u30f3\u6848\u3078\u6607\u83ef\u3055\u305b\u307e\u3059\u3002\u30c7\u30b6\u30a4\u30f3\u77e5\u8b58\u30bc\u30ed\u3067\u3082\u30d7\u30ed\u7d1a\u306e\u4ed5\u4e0a\u304c\u308a\u3092\u5b9f\u73fe\u3057\u307e\u3059\u3002\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n \r\n <div id=\"content-materials\" class=\"hidden space-y-4 animate-fade-in\">\r\n <h3 class=\"text-xl font-bold text-stone-800\">\u9078\u3079\u308b\u8c4a\u5bcc\u306a\u7d20\u6750<\/h3>\r\n <div class=\"grid grid-cols-1 gap-3\">\r\n <div class=\"flex items-center gap-4 p-3 border rounded-lg hover:bg-stone-50 transition\">\r\n <div class=\"w-12 h-12 bg-amber-800 rounded flex items-center justify-center text-white text-xl shadow-sm\">\ud83c\udf33<\/div>\r\n <div>\r\n <h4 class=\"font-bold text-sm\">\u30a6\u30a9\u30fc\u30eb\u30ca\u30c3\u30c8\u30fb\u685c\uff08\u6728\u6750\uff09<\/h4>\r\n <p class=\"text-xs text-stone-500\">\u6e29\u304b\u307f\u304c\u3042\u308a\u3001\u8a18\u5ff5\u65e5\u30ae\u30d5\u30c8\u306b\u6700\u9069\u3002\u5f6b\u523b\u306e\u6fc3\u6de1\u304c\u7f8e\u3057\u304f\u51fa\u307e\u3059\u3002<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"flex items-center gap-4 p-3 border rounded-lg hover:bg-stone-50 transition\">\r\n <div class=\"w-12 h-12 bg-gray-200 rounded flex items-center justify-center text-gray-600 text-xl shadow-sm\">\ud83d\udc8e<\/div>\r\n <div>\r\n <h4 class=\"font-bold text-sm\">\u30a2\u30af\u30ea\u30eb<\/h4>\r\n <p class=\"text-xs text-stone-500\">\u900f\u660e\u611f\u304c\u3042\u308a\u30e2\u30c0\u30f3\u306a\u5370\u8c61\u3002LED\u30e9\u30a4\u30c8\u30b9\u30bf\u30f3\u30c9\u306a\u3069\u306b\u52a0\u5de5\u53ef\u80fd\u3002<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"flex items-center gap-4 p-3 border rounded-lg hover:bg-stone-50 transition\">\r\n <div class=\"w-12 h-12 bg-orange-900 rounded flex items-center justify-center text-white text-xl shadow-sm\">\ud83d\udc5c<\/div>\r\n <div>\r\n <h4 class=\"font-bold text-sm\">\u30ec\u30b6\u30fc\uff08\u672c\u9769\uff09<\/h4>\r\n <p class=\"text-xs text-stone-500\">\u30ad\u30fc\u30db\u30eb\u30c0\u30fc\u3084\u30bf\u30b0\u306b\u3002\u4f7f\u3044\u8fbc\u3080\u307b\u3069\u306b\u5473\u304c\u51fa\u308b\u9ad8\u7d1a\u611f\u306e\u3042\u308b\u7d20\u6750\u3002<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- Section 4: Input Simulation (Interactive Demo) -->\r\n <section id=\"simulation\" class=\"scroll-mt-20 py-10\">\r\n <div class=\"bg-white rounded-3xl shadow-xl border border-stone-200 overflow-hidden\">\r\n <div class=\"bg-stone-800 p-8 text-white text-center\">\r\n <h2 class=\"text-3xl font-bold mb-2\">\u4f53\u9a13\u30b7\u30df\u30e5\u30ec\u30fc\u30b7\u30e7\u30f3<\/h2>\r\n <p class=\"text-stone-300\">\r\n \u300c\u672c\u5f53\u306b\u7c21\u5358\u306a\u306e\uff1f\u300d<br>\u5b9f\u969b\u306e\u5165\u529b\u30d7\u30ed\u30bb\u30b9\u3092\u3053\u3053\u3067\u4f53\u9a13\u3057\u3066\u307f\u3066\u304f\u3060\u3055\u3044\u3002\r\n <\/p>\r\n <\/div>\r\n \r\n <div class=\"p-8 md:p-12\">\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-12\">\r\n <!-- Input Form Side -->\r\n <div class=\"space-y-6\">\r\n <h3 class=\"font-bold text-stone-800 border-l-4 border-rose-500 pl-3\">\u69cb\u60f3\u5165\u529b\u30b7\u30fc\u30c8 (\u6a21\u64ec)<\/h3>\r\n <div class=\"space-y-4\">\r\n <div>\r\n <label class=\"block text-xs font-bold text-stone-500 uppercase mb-1\">\u8a18\u5ff5\u65e5 \/ \u65e5\u4ed8<\/label>\r\n <input type=\"text\" id=\"sim-date\" value=\"2026.2.14\" class=\"w-full bg-stone-50 border border-stone-300 rounded-md p-3 focus:ring-2 focus:ring-rose-500 outline-none text-stone-800\" placeholder=\"\u4f8b: 2026.2.14\">\r\n <\/div>\r\n <div>\r\n <label class=\"block text-xs font-bold text-stone-500 uppercase mb-1\">\u30e2\u30c1\u30fc\u30d5 (\u597d\u304d\u306a\u3082\u306e)<\/label>\r\n <input type=\"text\" id=\"sim-motif\" value=\"\u732b\u30fb\u661f\" class=\"w-full bg-stone-50 border border-stone-300 rounded-md p-3 focus:ring-2 focus:ring-rose-500 outline-none text-stone-800\" placeholder=\"\u4f8b: \u732b, \u661f, \u30ae\u30bf\u30fc\">\r\n <\/div>\r\n <div>\r\n <label class=\"block text-xs font-bold text-stone-500 uppercase mb-1\">\u96f0\u56f2\u6c17\u30fb\u30a4\u30e1\u30fc\u30b8<\/label>\r\n <select id=\"sim-mood\" class=\"w-full bg-stone-50 border border-stone-300 rounded-md p-3 focus:ring-2 focus:ring-rose-500 outline-none text-stone-800\">\r\n <option value=\"\u53ef\u611b\u3044\u30fb\u67d4\u3089\u304b\u3044\">\u53ef\u611b\u3044\u30fb\u67d4\u3089\u304b\u3044<\/option>\r\n <option value=\"\u30af\u30fc\u30eb\u30fb\u30b7\u30f3\u30d7\u30eb\">\u30af\u30fc\u30eb\u30fb\u30b7\u30f3\u30d7\u30eb<\/option>\r\n <option value=\"\u30a2\u30f3\u30c6\u30a3\u30fc\u30af\u30fb\u30ec\u30c8\u30ed\">\u30a2\u30f3\u30c6\u30a3\u30fc\u30af\u30fb\u30ec\u30c8\u30ed<\/option>\r\n <option value=\"\u548c\u98a8\u30fb\u30e2\u30c0\u30f3\">\u548c\u98a8\u30fb\u30e2\u30c0\u30f3<\/option>\r\n <\/select>\r\n <\/div>\r\n <div>\r\n <label class=\"block text-xs font-bold text-stone-500 uppercase mb-1\">\u5165\u308c\u305f\u3044\u8a00\u8449<\/label>\r\n <input type=\"text\" id=\"sim-text\" value=\"\u305a\u3063\u3068\u4e00\u7dd2\u306b\" class=\"w-full bg-stone-50 border border-stone-300 rounded-md p-3 focus:ring-2 focus:ring-rose-500 outline-none text-stone-800\" placeholder=\"\u4f8b: Forever, Thank you\">\r\n <\/div>\r\n \r\n <button onclick=\"runSimulation()\" class=\"w-full bg-stone-800 text-white font-bold py-4 rounded-lg hover:bg-stone-900 transition flex items-center justify-center gap-2 mt-4 shadow-lg transform active:scale-95\">\r\n <span>AI\u30c7\u30b6\u30a4\u30f3\u751f\u6210<\/span>\r\n <span>\u2728<\/span>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Result Side -->\r\n <div class=\"bg-stone-100 rounded-xl p-6 flex flex-col items-center justify-center min-h-[300px] border-2 border-dashed border-stone-300 relative\" id=\"sim-result-area\">\r\n \r\n <!-- State: Initial -->\r\n <div id=\"sim-state-initial\" class=\"text-center text-stone-400\">\r\n <div class=\"text-5xl mb-3 opacity-30\">\ud83d\uddbc\ufe0f<\/div>\r\n <p>\u5de6\u306e\u30d5\u30a9\u30fc\u30e0\u306b\u5165\u529b\u3057\u3066<br>\u30dc\u30bf\u30f3\u3092\u62bc\u3057\u3066\u304f\u3060\u3055\u3044<\/p>\r\n <\/div>\r\n\r\n <!-- State: Loading -->\r\n <div id=\"sim-state-loading\" class=\"hidden text-center\">\r\n <div class=\"inline-block w-12 h-12 border-4 border-rose-200 border-t-rose-500 rounded-full animate-spin mb-4\"><\/div>\r\n <p class=\"text-stone-600 font-bold animate-pulse\">AI\u304c\u30c7\u30b6\u30a4\u30f3\u3092\u8003\u6848\u4e2d...<\/p>\r\n <p class=\"text-xs text-stone-500 mt-2\">\u30ad\u30fc\u30ef\u30fc\u30c9\u3092\u89e3\u6790\u3057\u3066\u3044\u307e\u3059<\/p>\r\n <\/div>\r\n\r\n <!-- State: Success -->\r\n <div id=\"sim-state-success\" class=\"hidden w-full h-full flex-col animate-fade-in\">\r\n <div class=\"bg-white p-4 rounded-lg shadow-md mb-4 w-full text-center border border-rose-100\">\r\n <p class=\"text-xs text-stone-400 mb-1\">Generated Design Idea<\/p>\r\n <div class=\"h-32 bg-orange-50 rounded flex items-center justify-center mb-2 relative overflow-hidden\">\r\n <!-- Mock Visual generated with CSS\/Unicode -->\r\n <div class=\"text-6xl text-stone-800 opacity-80 z-10\">\ud83d\udc31\u2b50<\/div>\r\n <div class=\"absolute bottom-2 text-sm font-serif italic text-rose-800 z-10\" id=\"result-text-display\">\u305a\u3063\u3068\u4e00\u7dd2\u306b<\/div>\r\n <div class=\"absolute top-2 right-2 text-xs text-stone-400 border border-stone-300 px-1 rounded\">2026.2.14<\/div>\r\n <!-- Decorative circles -->\r\n <div class=\"absolute -top-4 -left-4 w-16 h-16 bg-rose-100 rounded-full opacity-50\"><\/div>\r\n <div class=\"absolute bottom-4 right-4 w-10 h-10 bg-amber-100 rounded-full opacity-50\"><\/div>\r\n <\/div>\r\n <p class=\"text-xs text-rose-500 font-bold\">\u30d1\u30bf\u30fc\u30f3A: \u30bd\u30d5\u30c8\u30bf\u30c3\u30c1<\/p>\r\n <\/div>\r\n <div class=\"text-left bg-white p-4 rounded-lg border border-stone-200 shadow-sm w-full\">\r\n <p class=\"text-xs font-bold text-stone-500 mb-1\">AI\u304b\u3089\u306e\u63d0\u6848\u30b3\u30e1\u30f3\u30c8:<\/p>\r\n <p class=\"text-sm text-stone-700 leading-snug\">\r\n \u300c<span id=\"result-mood-display\" class=\"font-bold\">\u53ef\u611b\u3044\u30fb\u67d4\u3089\u304b\u3044<\/span>\u300d\u96f0\u56f2\u6c17\u306b\u5408\u308f\u305b\u3001\r\n <span id=\"result-motif-display\" class=\"font-bold\">\u732b\u30fb\u661f<\/span>\u3092\u4e38\u307f\u306e\u3042\u308b\u30e9\u30a4\u30f3\u3067\u63cf\u304d\u307e\u3057\u305f\u3002\r\n \u6728\u6750\u306b\u523b\u5370\u3059\u308b\u3068\u6e29\u304b\u307f\u304c\u5897\u3057\u307e\u3059\u3002\r\n <\/p>\r\n <\/div>\r\n <div class=\"mt-4 text-center\">\r\n <button class=\"text-xs text-stone-500 underline hover:text-rose-500\">\u4ed6\u306e\u6848\u3092\u898b\u308b (\u5b9f\u969b\u306f6\u301c12\u6848)<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <\/main>\r\n\r\n <!-- Footer -->\r\n <footer class=\"bg-stone-900 text-stone-400 py-12\">\r\n <div class=\"max-w-6xl mx-auto px-4 text-center space-y-4\">\r\n <h2 class=\"text-2xl text-white font-bold tracking-wider\">xTool AI Creative Lab UENO<\/h2>\r\n <p class=\"text-sm\">\u4e8b\u696d\u8a08\u753b\u66f8\u306b\u57fa\u3065\u304f\u30b3\u30f3\u30bb\u30d7\u30c8\u30e2\u30c7\u30eb<\/p>\r\n <div class=\"pt-8 border-t border-stone-800 text-xs\">\r\n <p>© 2026 Project Concept. Based on provided source report.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/footer>\r\n\r\n <!-- JavaScript Logic -->\r\n <script>\r\n \/\/ --- Data & State ---\r\n const journeySteps = {\r\n 1: {\r\n title: \"\u3054\u6765\u5e97\",\r\n icon: \"\ud83d\udeaa\",\r\n desc: \"\u300c\u3053\u3093\u306a\u611f\u3058\u306e\u3082\u306e\u304c\u6b32\u3057\u3044\u300d\u3068\u3044\u3046\u6f20\u7136\u3068\u3057\u305f\u69cb\u60f3\uff08\u8a18\u5ff5\u65e5\u3001\u51fa\u4f1a\u3063\u305f\u5834\u6240\u3001\u597d\u304d\u306a\u30e2\u30c1\u30fc\u30d5\u306a\u3069\uff09\u3060\u3051\u3092\u6301\u3063\u3066\u3054\u6765\u5e97\u304f\u3060\u3055\u3044\u3002\u6e96\u5099\u306f\u4e00\u5207\u4e0d\u8981\u3067\u3059\u3002\",\r\n highlight: \"\u624b\u3076\u3089\u3067OK\",\r\n color: \"text-rose-500\"\r\n },\r\n 2: {\r\n title: \"\u69cb\u60f3\u5165\u529b\",\r\n icon: \"\u2328\ufe0f\",\r\n desc: \"\u5e97\u5185\u306e\u5c02\u7528PC\u306b\u3066\u3001\u7c21\u5358\u306a\u30ad\u30fc\u30ef\u30fc\u30c9\u3092\u7b87\u6761\u66f8\u304d\u3067\u5165\u529b\u3057\u307e\u3059\u3002\uff08\u4f8b\uff1a2026.2.14\u3001\u732b\u3068\u661f\u3001\u53ef\u611b\u3044\u3001\u6728\u88fd\u30ad\u30fc\u30db\u30eb\u30c0\u30fc\uff09\",\r\n highlight: \"\u5165\u529b\u6642\u9593\uff1a\u7d045\u5206\",\r\n color: \"text-rose-500\"\r\n },\r\n 3: {\r\n title: \"AI\u30c7\u30b6\u30a4\u30f3\u751f\u6210\u30fb\u9078\u629e\",\r\n icon: \"\ud83e\udd16\",\r\n desc: \"AI\u304c\u3042\u306a\u305f\u306e\u30ad\u30fc\u30ef\u30fc\u30c9\u304b\u30896\u301c12\u6848\u306e\u30aa\u30ea\u30b8\u30ca\u30eb\u30c7\u30b6\u30a4\u30f3\u3092\u5373\u6642\u63d0\u6848\u3057\u307e\u3059\u3002\u4e8c\u4eba\u3067\u76f8\u8ac7\u3057\u306a\u304c\u3089\u3001\u6700\u3082\u5fc3\u306b\u97ff\u304f\u3082\u306e\u3092\u9078\u3073\u307e\u3059\u3002\u5fae\u8abf\u6574\u3082\u53ef\u80fd\u3067\u3059\u3002\",\r\n highlight: \"\u9078\u629e\u80a2\uff1a6\u301c12\u6848\",\r\n color: \"text-indigo-500\"\r\n },\r\n 4: {\r\n title: \"\u7d20\u6750\u9078\u629e\u3068\u52a0\u5de5\",\r\n icon: \"\u2699\ufe0f\",\r\n desc: \"\u30a6\u30a9\u30fc\u30eb\u30ca\u30c3\u30c8\u3001\u685c\u3001\u30a2\u30af\u30ea\u30eb\u3001\u30ec\u30b6\u30fc\u306a\u3069\u306e\u7d20\u6750\u304b\u3089\u9078\u629e\u3002xTool\u30ec\u30fc\u30b6\u30fc\u52a0\u5de5\u6a5f\u304c\u7cbe\u5bc6\u306b\u523b\u307f\u8fbc\u3080\u69d8\u5b50\u3092\u3001\u76ee\u306e\u524d\u3067\u52d5\u753b\u306b\u53ce\u3081\u306a\u304c\u3089\u5f85\u3061\u307e\u3059\u3002\",\r\n highlight: \"\u52a0\u5de5\u6642\u9593\uff1a10\u301c20\u5206\",\r\n color: \"text-amber-500\"\r\n },\r\n 5: {\r\n title: \"\u5b8c\u6210\u30fb\u304a\u6e21\u3057\",\r\n icon: \"\ud83c\udf81\",\r\n desc: \"\u4e8c\u4eba\u3067\u5275\u308a\u4e0a\u3052\u305f\u300c\u4f53\u9a13\u300d\u304c\u5bbf\u308b\u3001\u4e16\u754c\u306b\u3072\u3068\u3064\u306e\u5b9d\u7269\u304c\u5b8c\u6210\u300260\u5206\u306e\u4f53\u9a13\u306e\u601d\u3044\u51fa\u3068\u3068\u3082\u306b\u304a\u6301\u3061\u5e30\u308a\u3044\u305f\u3060\u3051\u307e\u3059\u3002\",\r\n highlight: \"\u5f53\u65e5\u304a\u6301\u3061\u5e30\u308a\",\r\n color: \"text-rose-500\"\r\n }\r\n };\r\n\r\n \/\/ --- Core Interaction Handling ---\r\n\r\n \/\/ 1. Journey Map Logic\r\n function updateJourney(stepId) {\r\n \/\/ Update buttons\r\n for (let i = 1; i <= 5; i++) {\r\n const btn = document.getElementById(`step-btn-${i}`);\r\n if (i === stepId) {\r\n btn.className = \"step-active text-left p-4 rounded-lg border-2 font-bold transition flex items-center justify-between group shadow-md transform scale-[1.02]\";\r\n } else {\r\n btn.className = \"step-inactive text-left p-4 rounded-lg border-2 font-bold transition flex items-center justify-between group hover:border-rose-300\";\r\n }\r\n }\r\n\r\n \/\/ Update Content\r\n const contentDiv = document.getElementById('journey-content');\r\n const data = journeySteps[stepId];\r\n \r\n \/\/ Background Icon\r\n document.getElementById('journey-bg-icon').textContent = data.icon;\r\n\r\n contentDiv.innerHTML = `\r\n <div class=\"animate-fade-in\">\r\n <div class=\"flex items-center gap-3 mb-4\">\r\n <span class=\"text-4xl shadow-sm bg-white rounded-full p-2 border border-stone-100\">${data.icon}<\/span>\r\n <h3 class=\"text-3xl font-bold text-stone-800\">Step 0${stepId}: ${data.title}<\/h3>\r\n <\/div>\r\n <div class=\"h-1 w-20 bg-stone-200 rounded mb-6 overflow-hidden\">\r\n <div class=\"h-full bg-rose-500\" style=\"width: ${(stepId\/5)*100}%\"><\/div>\r\n <\/div>\r\n <p class=\"text-lg text-stone-600 leading-relaxed mb-8\">\r\n ${data.desc}\r\n <\/p>\r\n <div class=\"mt-auto\">\r\n <span class=\"inline-block px-4 py-2 bg-stone-100 rounded-full text-sm font-bold ${data.color} border border-stone-200 shadow-sm\">\r\n \ud83d\udca1 Point: ${data.highlight}\r\n <\/span>\r\n <\/div>\r\n <\/div>\r\n `;\r\n }\r\n\r\n \/\/ 2. Tab Switching Logic\r\n function switchTab(tabName) {\r\n const tabs = ['machine', 'materials'];\r\n \r\n tabs.forEach(t => {\r\n const btn = document.getElementById(`tab-${t}`);\r\n const content = document.getElementById(`content-${t}`);\r\n \r\n if (t === tabName) {\r\n btn.className = \"flex-1 py-3 text-sm font-bold text-indigo-600 border-b-2 border-indigo-600 bg-indigo-50\";\r\n content.classList.remove('hidden');\r\n } else {\r\n btn.className = \"flex-1 py-3 text-sm font-bold text-stone-500 hover:text-stone-700 hover:bg-stone-50\";\r\n content.classList.add('hidden');\r\n }\r\n });\r\n }\r\n\r\n \/\/ 3. Simulation Logic\r\n function runSimulation() {\r\n const date = document.getElementById('sim-date').value;\r\n const motif = document.getElementById('sim-motif').value;\r\n const mood = document.getElementById('sim-mood').value;\r\n const text = document.getElementById('sim-text').value;\r\n\r\n \/\/ UI State: Loading\r\n document.getElementById('sim-state-initial').classList.add('hidden');\r\n document.getElementById('sim-state-success').classList.add('hidden');\r\n document.getElementById('sim-state-loading').classList.remove('hidden');\r\n\r\n \/\/ Simulate Delay\r\n setTimeout(() => {\r\n \/\/ UI State: Success\r\n document.getElementById('sim-state-loading').classList.add('hidden');\r\n document.getElementById('sim-state-success').classList.remove('hidden');\r\n\r\n \/\/ Update Result Text\r\n document.getElementById('result-text-display').innerText = text || \"Memorial\";\r\n document.getElementById('result-motif-display').innerText = motif || \"\u6307\u5b9a\u306a\u3057\";\r\n document.getElementById('result-mood-display').innerText = mood;\r\n }, 1500);\r\n }\r\n\r\n \/\/ --- Chart Initialization ---\r\n document.addEventListener('DOMContentLoaded', function() {\r\n \/\/ Initialize Journey to Step 1\r\n updateJourney(1);\r\n\r\n \/\/ Initialize Time Breakdown Chart\r\n const ctx = document.getElementById('timeChart').getContext('2d');\r\n new Chart(ctx, {\r\n type: 'doughnut',\r\n data: {\r\n labels: ['\u69cb\u60f3\u5165\u529b (5-10\u5206)', 'AI\u30c7\u30b6\u30a4\u30f3\u751f\u6210\u30fb\u9078\u629e (10-15\u5206)', '\u52a0\u5de5\u6e96\u5099\u30fb\u8a2d\u5b9a (5-10\u5206)', '\u30ec\u30fc\u30b6\u30fc\u52a0\u5de5 (10-20\u5206)', '\u4ed5\u4e0a\u3052\u30fb\u304a\u6e21\u3057 (5\u5206)'],\r\n datasets: [{\r\n data: [10, 15, 10, 20, 5],\r\n backgroundColor: [\r\n '#fca5a5', \/\/ Input: rose-300\r\n '#818cf8', \/\/ AI: indigo-400\r\n '#fbbf24', \/\/ Setup: amber-400\r\n '#f43f5e', \/\/ Laser: rose-500 (Main event)\r\n '#a8a29e' \/\/ Finish: stone-400\r\n ],\r\n borderWidth: 0,\r\n hoverOffset: 10\r\n }]\r\n },\r\n options: {\r\n responsive: true,\r\n maintainAspectRatio: false,\r\n plugins: {\r\n legend: {\r\n position: 'bottom',\r\n labels: {\r\n font: {\r\n family: \"'Noto Sans JP', sans-serif\",\r\n size: 11\r\n },\r\n usePointStyle: true,\r\n boxWidth: 8\r\n }\r\n },\r\n tooltip: {\r\n callbacks: {\r\n label: function(context) {\r\n return ' ' + context.label + ': ' + context.raw + '\u5206';\r\n }\r\n }\r\n },\r\n title: {\r\n display: true,\r\n text: '\u6240\u8981\u6642\u9593\uff1a\u7d0460\u5206',\r\n font: {\r\n size: 16,\r\n family: \"'Noto Sans JP', sans-serif\"\r\n },\r\n padding: {\r\n bottom: 20\r\n }\r\n }\r\n },\r\n cutout: '60%'\r\n }\r\n });\r\n });\r\n\r\n \/\/ Add CSS Animation via JS injection for simplicity\r\n const styleSheet = document.createElement(\"style\");\r\n styleSheet.innerText = `\r\n @keyframes fadeIn {\r\n from { opacity: 0; transform: translateY(10px); }\r\n to { opacity: 1; transform: translateY(0); }\r\n }\r\n .animate-fade-in {\r\n animation: fadeIn 0.5s ease-out forwards;\r\n }\r\n `;\r\n document.head.appendChild(styleSheet);\r\n\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>xTool AI Creative Lab UENO – \u4e8b\u696d\u8a08\u753b\u30a4\u30f3\u30bf\u30e9\u30af\u30c6\u30a3\u30d6\u4f53\u9a13 \u2756 xTool AI Creative Lab UENO \u30b3\u30f3\u30bb\u30d7\u30c8 \u4f53\u9a13\u306e\u6d41\u308c \u6280\u8853\u3068\u7d20\u6750 \u5165\u529b\u4f53\u9a13 BUSINESS […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"saved_in_kubio":false,"footnotes":""},"class_list":["post-587","page","type-page","status-publish","hentry"],"kubio_ai_page_context":{"short_desc":"","purpose":"general"},"_links":{"self":[{"href":"https:\/\/ueno-kankan.jp\/index.php?rest_route=\/wp\/v2\/pages\/587","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ueno-kankan.jp\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ueno-kankan.jp\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ueno-kankan.jp\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ueno-kankan.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=587"}],"version-history":[{"count":4,"href":"https:\/\/ueno-kankan.jp\/index.php?rest_route=\/wp\/v2\/pages\/587\/revisions"}],"predecessor-version":[{"id":591,"href":"https:\/\/ueno-kankan.jp\/index.php?rest_route=\/wp\/v2\/pages\/587\/revisions\/591"}],"wp:attachment":[{"href":"https:\/\/ueno-kankan.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=587"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}