\u30b5\u30d7\u30e9\u30a4\u30c1\u30a7\u30fc\u30f3DX\u30a4\u30f3\u30d5\u30a9\u30b0\u30e9\u30d5\u30a3\u30c3\u30af: YetiForceCRM\u306b\u3088\u308b\u8ab2\u984c\u89e3\u6c7a<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+JP:wght@400;700&display=swap\" rel=\"stylesheet\">\n <style>\n body {\n font-family: 'Noto Sans JP', sans-serif;\n background-color: #F8F9FA;\n }\n .chart-container {\n position: relative;\n width: 100%;\n max-width: 600px;\n margin-left: auto;\n margin-right: auto;\n height: 300px;\n max-height: 400px;\n }\n @media (min-width: 768px) {\n .chart-container {\n height: 350px;\n }\n }\n .flowchart-arrow {\n font-size: 2.5rem;\n line-height: 1;\n color: #FFD166;\n }\n .kpi-value {\n font-size: 4rem;\n font-weight: 700;\n line-height: 1;\n }\n .kpi-unit {\n font-size: 1.5rem;\n font-weight: 700;\n margin-left: 0.5rem;\n }\n table th, table td {\n white-space: nowrap;\n }\n <\/style>\n<\/head>\n<body class=\"text-[#073B4C]\">\n\n <div class=\"container mx-auto p-4 md:p-8 max-w-5xl\">\n\n <header class=\"text-center mb-12 md:mb-20\">\n <h1 class=\"text-3xl md:text-5xl font-bold text-[#118AB2] mb-4\">\u30b5\u30d7\u30e9\u30a4\u30c1\u30a7\u30fc\u30f3DX\u9769\u547d<\/h1>\n <p class=\"text-lg md:text-xl text-gray-600\">YetiForceCRM\u3067\u5b9f\u73fe\u3059\u308b\u3001\u52b9\u7387\u7684\u3067\u5f37\u976d\u306a\u7269\u6d41\u4f53\u5236<\/p>\n <\/header>\n\n <section id=\"challenges\" class=\"mb-12 md:mb-20\">\n <h2 class=\"text-2xl md:text-3xl font-bold text-center mb-8 text-[#073B4C]\">\u591a\u304f\u306e\u4f01\u696d\u304c\u76f4\u9762\u3059\u308b3\u3064\u306e\u58c1<\/h2>\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-8\">\n <div class=\"bg-white p-6 rounded-xl shadow-lg text-center border-t-4 border-[#FF6B6B]\">\n <div class=\"text-5xl mb-4\">\ud83d\udce6<\/div>\n <h3 class=\"text-xl font-bold mb-2\">\u5728\u5eab\u7ba1\u7406\u306e\u4e0d\u78ba\u5b9f\u6027<\/h3>\n <p class=\"text-gray-600\">\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u306a\u5728\u5eab\u72b6\u6cc1\u3092\u628a\u63e1\u3067\u304d\u305a\u3001\u6b20\u54c1\u3084\u904e\u5270\u5728\u5eab\u306e\u30ea\u30b9\u30af\u304c\u5e38\u306b\u767a\u751f\u3002<\/p>\n <\/div>\n <div class=\"bg-white p-6 rounded-xl shadow-lg text-center border-t-4 border-[#FFD166]\">\n <div class=\"text-5xl mb-4\">\ud83d\ude9a<\/div>\n <h3 class=\"text-xl font-bold mb-2\">\u7d0d\u671f\u7ba1\u7406\u306e\u8907\u96d1\u5316<\/h3>\n <p class=\"text-gray-600\">\u30d7\u30ed\u30bb\u30b9\u304c\u5206\u65ad\u3055\u308c\u3001\u9032\u6357\u304c\u4e0d\u900f\u660e\u3002\u9867\u5ba2\u3078\u306e\u7d0d\u671f\u9045\u5ef6\u306e\u539f\u56e0\u306b\u3002<\/p>\n <\/div>\n <div class=\"bg-white p-6 rounded-xl shadow-lg text-center border-t-4 border-[#06D6A0]\">\n <div class=\"text-5xl mb-4\">\u26a0\ufe0f<\/div>\n <h3 class=\"text-xl font-bold mb-2\">\u30b5\u30d7\u30e9\u30a4\u30e4\u30fc\u30ea\u30b9\u30af<\/h3>\n <p class=\"text-gray-600\">\u60c5\u5831\u4e0d\u8db3\u3067\u6709\u4e8b\u306e\u5bfe\u5fdc\u304c\u9045\u308c\u3001\u4e8b\u696d\u7d99\u7d9a\u306b\u6df1\u523b\u306a\u5f71\u97ff\u3092\u53ca\u307c\u3059\u53ef\u80fd\u6027\u3002<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"solution-flow\" class=\"mb-12 md:mb-20 bg-white rounded-xl shadow-lg p-6 md:p-8\">\n <h2 class=\"text-2xl md:text-3xl font-bold text-center mb-8 text-[#118AB2]\">YetiForceCRM\u304c\u7e4b\u3050\u3001\u30b7\u30fc\u30e0\u30ec\u30b9\u306a\u696d\u52d9\u30d5\u30ed\u30fc<\/h2>\n <div class=\"flex flex-col md:flex-row items-center justify-between text-center space-y-4 md:space-y-0\">\n <div class=\"flex-1\">\n <div class=\"p-4 bg-blue-50 rounded-lg\">\n <h4 class=\"font-bold\">\u53d7\u6ce8<\/h4>\n <p class=\"text-sm\">Sales Orders<\/p>\n <\/div>\n <\/div>\n <div class=\"flowchart-arrow\">\u2192<\/div>\n <div class=\"flex-1\">\n <div class=\"p-4 bg-blue-50 rounded-lg\">\n <h4 class=\"font-bold\">\u51fa\u8377\u30fb\u5728\u5eab\u6e1b\u7b97<\/h4>\n <p class=\"text-sm\">Automated Stock Update<\/p>\n <\/div>\n <\/div>\n <div class=\"flowchart-arrow\">\u2192<\/div>\n <div class=\"flex-1\">\n <div class=\"p-4 bg-blue-50 rounded-lg\">\n <h4 class=\"font-bold\">\u8acb\u6c42\u66f8\u4f5c\u6210<\/h4>\n <p class=\"text-sm\">Invoice Generation<\/p>\n <\/div>\n <\/div>\n <div class=\"flowchart-arrow\">\u2192<\/div>\n <div class=\"flex-1\">\n <div class=\"p-4 bg-blue-50 rounded-lg\">\n <h4 class=\"font-bold\">\u60c5\u5831\u9023\u643a<\/h4>\n <p class=\"text-sm\">Notify Stakeholders<\/p>\n <\/div>\n <\/div>\n <\/div>\n <p class=\"text-center mt-6 text-gray-600\">\u53d7\u6ce8\u304b\u3089\u8acb\u6c42\u307e\u3067\u3001\u5168\u3066\u306e\u30d7\u30ed\u30bb\u30b9\u304c\u81ea\u52d5\u9023\u643a\u3002\u624b\u4f5c\u696d\u306b\u3088\u308b\u30df\u30b9\u3084\u9045\u5ef6\u3092\u64b2\u6ec5\u3057\u307e\u3059\u3002<\/p>\n <\/section>\n\n <section id=\"kpi-impact\" class=\"mb-12 md:mb-20\">\n <h2 class=\"text-2xl md:text-3xl font-bold text-center mb-8 text-[#073B4C]\">\u30c7\u30fc\u30bf\u3067\u898b\u308b\u5c0e\u5165\u52b9\u679c<\/h2>\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-8\">\n <div class=\"bg-white p-6 rounded-xl shadow-lg\">\n <h3 class=\"text-xl font-bold mb-4 text-center\">\u5728\u5eab\u30b3\u30b9\u30c8\u306e\u5287\u7684\u306a\u524a\u6e1b<\/h3>\n <p class=\"text-center text-gray-600 mb-4\">CRM\u5c0e\u5165\u524d\u5f8c\u3067\u3001\u5728\u5eab\u95a2\u9023\u306e\u640d\u5931\u30b3\u30b9\u30c8\u3092\u6bd4\u8f03\u3002\u6a5f\u4f1a\u640d\u5931\u3092\u9632\u304e\u3001\u30ad\u30e3\u30c3\u30b7\u30e5\u30d5\u30ed\u30fc\u3092\u6539\u5584\u3057\u307e\u3059\u3002<\/p>\n <div class=\"chart-container\">\n <canvas id=\"inventoryCostChart\"><\/canvas>\n <\/div>\n <\/div>\n <div class=\"bg-white p-6 rounded-xl shadow-lg\">\n <h3 class=\"text-xl font-bold mb-4 text-center\">\u696d\u52d9\u30d7\u30ed\u30bb\u30b9\u306e\u52b9\u7387\u5316<\/h3>\n <p class=\"text-center text-gray-600 mb-4\">\u81ea\u52d5\u5316\u306b\u3088\u308a\u3001\u3053\u308c\u307e\u3067\u624b\u4f5c\u696d\u3067\u884c\u3063\u3066\u3044\u305f\u5de5\u7a0b\u304c\u5927\u5e45\u306b\u524a\u6e1b\u3055\u308c\u3001\u751f\u7523\u6027\u304c\u5411\u4e0a\u3057\u307e\u3059\u3002<\/p>\n <div class=\"chart-container flex items-center justify-center\">\n <canvas id=\"efficiencyChart\"><\/canvas>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"summary-table\" class=\"mb-12 md:mb-20\">\n <h2 class=\"text-2xl md:text-3xl font-bold text-center mb-8 text-[#073B4C]\">\u6a5f\u80fd\u3068\u52b9\u679c\u306e\u30b5\u30de\u30ea\u30fc<\/h2>\n <div class=\"bg-white rounded-xl shadow-lg overflow-x-auto\">\n <table class=\"w-full text-sm text-left\">\n <thead class=\"text-xs text-[#073B4C] uppercase bg-gray-50\">\n <tr>\n <th scope=\"col\" class=\"px-6 py-3\">\u4e3b\u8981\u6a5f\u80fd<\/th>\n <th scope=\"col\" class=\"px-6 py-3\">\u89e3\u6c7a\u3055\u308c\u308b\u8ab2\u984c<\/th>\n <th scope=\"col\" class=\"px-6 py-3\">\u5c0e\u5165\u306b\u3088\u308b\u52b9\u679c<\/th>\n <\/tr>\n <\/thead>\n <tbody class=\"text-gray-600\">\n <tr class=\"bg-white border-b\">\n <th scope=\"row\" class=\"px-6 py-4 font-medium text-[#073B4C] whitespace-nowrap\">\n \u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u5728\u5eab\u7ba1\u7406\n <\/th>\n <td class=\"px-6 py-4\">\n \u5728\u5eab\u628a\u63e1\u306e\u56f0\u96e3\u3055\u3001\u6b20\u54c1\u30fb\u904e\u5270\u5728\u5eab\n <\/td>\n <td class=\"px-6 py-4\">\n \u5728\u5eab\u6700\u9069\u5316\u3001\u68da\u5378\u4f5c\u696d\u306e\u52b9\u7387\u5316\n <\/td>\n <\/tr>\n <tr class=\"bg-white border-b\">\n <th scope=\"row\" class=\"px-6 py-4 font-medium text-[#073B4C] whitespace-nowrap\">\n \u8cfc\u8cb7\u30fb\u53d7\u6ce8\u30fb\u51fa\u8377\u9023\u643a\n <\/th>\n <td class=\"px-6 py-4\">\n \u7d0d\u671f\u7ba1\u7406\u306e\u8907\u96d1\u5316\u3001\u624b\u4f5c\u696d\u306b\u3088\u308b\u30df\u30b9\n <\/td>\n <td class=\"px-6 py-4\">\n \u7d0d\u671f\u9075\u5b88\u7387\u306e\u5411\u4e0a\u3001\u696d\u52d9\u30d7\u30ed\u30bb\u30b9\u52b9\u7387\u5316\n <\/td>\n <\/tr>\n <tr class=\"bg-white\">\n <th scope=\"row\" class=\"px-6 py-4 font-medium text-[#073B4C] whitespace-nowrap\">\n \u30b5\u30d7\u30e9\u30a4\u30e4\u30fc\u60c5\u5831\u7ba1\u7406\n <\/th>\n <td class=\"px-6 py-4\">\n \u30ea\u30b9\u30af\u7ba1\u7406\u4e0d\u8db3\u3001\u60c5\u5831\u306e\u6563\u5728\n <\/td>\n <td class=\"px-6 py-4\">\n \u30b5\u30d7\u30e9\u30a4\u30c1\u30a7\u30fc\u30f3\u306e\u53ef\u8996\u5316\u3001\u30ea\u30b9\u30af\u4f4e\u6e1b\n <\/td>\n <\/tr>\n <\/tbody>\n <\/table>\n <\/div>\n <\/section>\n \n <footer class=\"text-center pt-8 border-t\">\n <p class=\"text-gray-600\">YetiForceCRM\u3067\u3001\u30b5\u30d7\u30e9\u30a4\u30c1\u30a7\u30fc\u30f3\u306e\u672a\u6765\u3092\u5275\u9020\u3059\u308b\u3002<\/p>\n <div class=\"hidden\">\n Confirmation: NEITHER Mermaid JS NOR SVG were used in this output. All charts are rendered on Canvas via Chart.js.\n Chosen Palette: Energetic & Playful\n Narrative Plan: Hero -> Challenges -> Solution Flow -> KPI Impact -> Summary Table -> Footer\n Visualization Plan:\n – Challenges: HTML\/CSS Cards with Unicode Icons. Goal: Inform\/Compare.\n – Solution Flow: HTML\/CSS Flowchart. Goal: Organize.\n – Inventory Impact: Chart.js Grouped Bar Chart. Goal: Compare.\n – Efficiency Impact: Chart.js Donut Chart. Goal: Inform.\n – Summary: HTML\/CSS Table. Goal: Organize.\n <\/div>\n <\/footer>\n\n <\/div>\n\n <script>\n function wrapText(str, maxWidth) {\n if (str.length <= maxWidth) {\n return str;\n }\n const words = str.split(' ');\n const lines = [];\n let currentLine = '';\n for (const word of words) {\n if ((currentLine + ' ' + word).trim().length > maxWidth && currentLine.length > 0) {\n lines.push(currentLine);\n currentLine = word;\n } else {\n currentLine = (currentLine + ' ' + word).trim();\n }\n }\n if (currentLine.length > 0) {\n lines.push(currentLine);\n }\n return lines;\n }\n\n const tooltipTitleCallback = (tooltipItems) => {\n const item = tooltipItems[0];\n let label = item.chart.data.labels[item.dataIndex];\n if (Array.isArray(label)) {\n return label.join(' ');\n }\n return label;\n };\n \n const commonChartOptions = {\n responsive: true,\n maintainAspectRatio: false,\n plugins: {\n legend: {\n position: 'bottom',\n labels: {\n font: {\n family: \"'Noto Sans JP', sans-serif\",\n size: 12,\n },\n color: '#073B4C',\n }\n },\n tooltip: {\n callbacks: {\n title: tooltipTitleCallback\n },\n titleFont: {\n family: \"'Noto Sans JP', sans-serif\",\n },\n bodyFont: {\n family: \"'Noto Sans JP', sans-serif\",\n }\n }\n },\n scales: {\n y: {\n beginAtZero: true,\n ticks: {\n color: '#073B4C',\n font: { family: \"'Noto Sans JP', sans-serif\" }\n },\n grid: {\n color: '#E9ECEF'\n }\n },\n x: {\n ticks: {\n color: '#073B4C',\n font: { family: \"'Noto Sans JP', sans-serif\" }\n },\n grid: {\n display: false\n }\n }\n }\n };\n\n const inventoryCostCtx = document.getElementById('inventoryCostChart').getContext('2d');\n const inventoryCostChart = new Chart(inventoryCostCtx, {\n type: 'bar',\n data: {\n labels: ['\u904e\u5270\u5728\u5eab\u30b3\u30b9\u30c8', '\u6b20\u54c1\u306b\u3088\u308b\u6a5f\u4f1a\u640d\u5931'],\n datasets: [{\n label: 'CRM\u5c0e\u5165\u524d',\n data: [100, 80],\n backgroundColor: '#FF6B6B',\n borderColor: '#FF6B6B',\n borderWidth: 1\n }, {\n label: 'CRM\u5c0e\u5165\u5f8c',\n data: [35, 15],\n backgroundColor: '#06D6A0',\n borderColor: '#06D6A0',\n borderWidth: 1\n }]\n },\n options: {\n ...commonChartOptions,\n scales: {\n y: {\n ...commonChartOptions.scales.y,\n title: {\n display: true,\n text: '\u30b3\u30b9\u30c8\u30fb\u640d\u5931 (\u76f8\u5bfe\u5024)',\n color: '#073B4C',\n font: { family: \"'Noto Sans JP', sans-serif\" }\n }\n },\n x: { ...commonChartOptions.scales.x }\n }\n }\n });\n\n const efficiencyCtx = document.getElementById('efficiencyChart').getContext('2d');\n const efficiencyChart = new Chart(efficiencyCtx, {\n type: 'doughnut',\n data: {\n labels: ['\u524a\u6e1b\u3055\u308c\u305f\u624b\u4f5c\u696d', '\u6b8b\u308a\u306e\u696d\u52d9\u30d7\u30ed\u30bb\u30b9'],\n datasets: [{\n data: [60, 40],\n backgroundColor: [\n '#118AB2',\n '#E9ECEF'\n ],\n borderColor: [\n '#FFFFFF'\n ],\n borderWidth: 4,\n hoverOffset: 4\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n cutout: '70%',\n plugins: {\n legend: {\n display: false\n },\n tooltip: {\n callbacks: {\n title: (tooltipItems) => tooltipItems[0].label,\n label: (tooltipItem) => ` ${tooltipItem.raw}%`\n }\n },\n title: {\n display: true,\n text: '\u624b\u4f5c\u696d\u5de5\u7a0b\u306e60%\u3092\u81ea\u52d5\u5316',\n position: 'bottom',\n font: {\n size: 16,\n weight: 'bold',\n family: \"'Noto Sans JP', sans-serif\"\n },\n color: '#073B4C',\n padding: {\n top: 20\n }\n }\n }\n }\n });\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>\u30b5\u30d7\u30e9\u30a4\u30c1\u30a7\u30fc\u30f3DX\u30a4\u30f3\u30d5\u30a9\u30b0\u30e9\u30d5\u30a3\u30c3\u30af: YetiForceCRM\u306b\u3088\u308b\u8ab2\u984c\u89e3\u6c7a \u30b5\u30d7\u30e9\u30a4\u30c1\u30a7\u30fc\u30f3DX\u9769\u547d YetiForceCRM\u3067\u5b9f\u73fe\u3059\u308b\u3001\u52b9\u7387\u7684\u3067\u5f37\u976d\u306a\u7269\u6d41\u4f53\u5236 \u591a\u304f\u306e\u4f01\u696d\u304c\u76f4\u9762\u3059\u308b3\u3064\u306e\u58c1 \ud83d\udce6 \u5728\u5eab\u7ba1\u7406\u306e\u4e0d\u78ba\u5b9f […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-731","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/yetiworks.jp\/index.php?rest_route=\/wp\/v2\/pages\/731","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/yetiworks.jp\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/yetiworks.jp\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/yetiworks.jp\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/yetiworks.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=731"}],"version-history":[{"count":4,"href":"https:\/\/yetiworks.jp\/index.php?rest_route=\/wp\/v2\/pages\/731\/revisions"}],"predecessor-version":[{"id":897,"href":"https:\/\/yetiworks.jp\/index.php?rest_route=\/wp\/v2\/pages\/731\/revisions\/897"}],"wp:attachment":[{"href":"https:\/\/yetiworks.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=731"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":731,"date":"2025-08-04T16:35:46","date_gmt":"2025-08-04T07:35:46","guid":{"rendered":"https:\/\/yetiworks.jp\/?page_id=731"},"modified":"2025-08-06T15:47:29","modified_gmt":"2025-08-06T06:47:29","slug":"%e3%82%b5%e3%83%97%e3%83%a9%e3%82%a4%e3%83%81%e3%82%a7%e3%83%bc%e3%83%b3%e3%83%bb%e7%89%a9%e6%b5%81%e9%83%a8%e9%96%80","status":"publish","type":"page","link":"https:\/\/yetiworks.jp\/?page_id=731","title":{"rendered":"\u30b5\u30d7\u30e9\u30a4\u30c1\u30a7\u30fc\u30f3\u30fb\u7269\u6d41\u90e8\u9580\uff08\u56f3\u89e3\uff09"},"content":{"rendered":"\n\n\n\n \n \n \u30b5\u30d7\u30e9\u30a4\u30c1\u30a7\u30fc\u30f3DX\u30a4\u30f3\u30d5\u30a9\u30b0\u30e9\u30d5\u30a3\u30c3\u30af: YetiForceCRM\u306b\u3088\u308b\u8ab2\u984c\u89e3\u6c7a<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+JP:wght@400;700&display=swap\" rel=\"stylesheet\">\n <style>\n body {\n font-family: 'Noto Sans JP', sans-serif;\n background-color: #F8F9FA;\n }\n .chart-container {\n position: relative;\n width: 100%;\n max-width: 600px;\n margin-left: auto;\n margin-right: auto;\n height: 300px;\n max-height: 400px;\n }\n @media (min-width: 768px) {\n .chart-container {\n height: 350px;\n }\n }\n .flowchart-arrow {\n font-size: 2.5rem;\n line-height: 1;\n color: #FFD166;\n }\n .kpi-value {\n font-size: 4rem;\n font-weight: 700;\n line-height: 1;\n }\n .kpi-unit {\n font-size: 1.5rem;\n font-weight: 700;\n margin-left: 0.5rem;\n }\n table th, table td {\n white-space: nowrap;\n }\n <\/style>\n<\/head>\n<body class=\"text-[#073B4C]\">\n\n <div class=\"container mx-auto p-4 md:p-8 max-w-5xl\">\n\n <header class=\"text-center mb-12 md:mb-20\">\n <h1 class=\"text-3xl md:text-5xl font-bold text-[#118AB2] mb-4\">\u30b5\u30d7\u30e9\u30a4\u30c1\u30a7\u30fc\u30f3DX\u9769\u547d<\/h1>\n <p class=\"text-lg md:text-xl text-gray-600\">YetiForceCRM\u3067\u5b9f\u73fe\u3059\u308b\u3001\u52b9\u7387\u7684\u3067\u5f37\u976d\u306a\u7269\u6d41\u4f53\u5236<\/p>\n <\/header>\n\n <section id=\"challenges\" class=\"mb-12 md:mb-20\">\n <h2 class=\"text-2xl md:text-3xl font-bold text-center mb-8 text-[#073B4C]\">\u591a\u304f\u306e\u4f01\u696d\u304c\u76f4\u9762\u3059\u308b3\u3064\u306e\u58c1<\/h2>\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-8\">\n <div class=\"bg-white p-6 rounded-xl shadow-lg text-center border-t-4 border-[#FF6B6B]\">\n <div class=\"text-5xl mb-4\">\ud83d\udce6<\/div>\n <h3 class=\"text-xl font-bold mb-2\">\u5728\u5eab\u7ba1\u7406\u306e\u4e0d\u78ba\u5b9f\u6027<\/h3>\n <p class=\"text-gray-600\">\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u306a\u5728\u5eab\u72b6\u6cc1\u3092\u628a\u63e1\u3067\u304d\u305a\u3001\u6b20\u54c1\u3084\u904e\u5270\u5728\u5eab\u306e\u30ea\u30b9\u30af\u304c\u5e38\u306b\u767a\u751f\u3002<\/p>\n <\/div>\n <div class=\"bg-white p-6 rounded-xl shadow-lg text-center border-t-4 border-[#FFD166]\">\n <div class=\"text-5xl mb-4\">\ud83d\ude9a<\/div>\n <h3 class=\"text-xl font-bold mb-2\">\u7d0d\u671f\u7ba1\u7406\u306e\u8907\u96d1\u5316<\/h3>\n <p class=\"text-gray-600\">\u30d7\u30ed\u30bb\u30b9\u304c\u5206\u65ad\u3055\u308c\u3001\u9032\u6357\u304c\u4e0d\u900f\u660e\u3002\u9867\u5ba2\u3078\u306e\u7d0d\u671f\u9045\u5ef6\u306e\u539f\u56e0\u306b\u3002<\/p>\n <\/div>\n <div class=\"bg-white p-6 rounded-xl shadow-lg text-center border-t-4 border-[#06D6A0]\">\n <div class=\"text-5xl mb-4\">\u26a0\ufe0f<\/div>\n <h3 class=\"text-xl font-bold mb-2\">\u30b5\u30d7\u30e9\u30a4\u30e4\u30fc\u30ea\u30b9\u30af<\/h3>\n <p class=\"text-gray-600\">\u60c5\u5831\u4e0d\u8db3\u3067\u6709\u4e8b\u306e\u5bfe\u5fdc\u304c\u9045\u308c\u3001\u4e8b\u696d\u7d99\u7d9a\u306b\u6df1\u523b\u306a\u5f71\u97ff\u3092\u53ca\u307c\u3059\u53ef\u80fd\u6027\u3002<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"solution-flow\" class=\"mb-12 md:mb-20 bg-white rounded-xl shadow-lg p-6 md:p-8\">\n <h2 class=\"text-2xl md:text-3xl font-bold text-center mb-8 text-[#118AB2]\">YetiForceCRM\u304c\u7e4b\u3050\u3001\u30b7\u30fc\u30e0\u30ec\u30b9\u306a\u696d\u52d9\u30d5\u30ed\u30fc<\/h2>\n <div class=\"flex flex-col md:flex-row items-center justify-between text-center space-y-4 md:space-y-0\">\n <div class=\"flex-1\">\n <div class=\"p-4 bg-blue-50 rounded-lg\">\n <h4 class=\"font-bold\">\u53d7\u6ce8<\/h4>\n <p class=\"text-sm\">Sales Orders<\/p>\n <\/div>\n <\/div>\n <div class=\"flowchart-arrow\">\u2192<\/div>\n <div class=\"flex-1\">\n <div class=\"p-4 bg-blue-50 rounded-lg\">\n <h4 class=\"font-bold\">\u51fa\u8377\u30fb\u5728\u5eab\u6e1b\u7b97<\/h4>\n <p class=\"text-sm\">Automated Stock Update<\/p>\n <\/div>\n <\/div>\n <div class=\"flowchart-arrow\">\u2192<\/div>\n <div class=\"flex-1\">\n <div class=\"p-4 bg-blue-50 rounded-lg\">\n <h4 class=\"font-bold\">\u8acb\u6c42\u66f8\u4f5c\u6210<\/h4>\n <p class=\"text-sm\">Invoice Generation<\/p>\n <\/div>\n <\/div>\n <div class=\"flowchart-arrow\">\u2192<\/div>\n <div class=\"flex-1\">\n <div class=\"p-4 bg-blue-50 rounded-lg\">\n <h4 class=\"font-bold\">\u60c5\u5831\u9023\u643a<\/h4>\n <p class=\"text-sm\">Notify Stakeholders<\/p>\n <\/div>\n <\/div>\n <\/div>\n <p class=\"text-center mt-6 text-gray-600\">\u53d7\u6ce8\u304b\u3089\u8acb\u6c42\u307e\u3067\u3001\u5168\u3066\u306e\u30d7\u30ed\u30bb\u30b9\u304c\u81ea\u52d5\u9023\u643a\u3002\u624b\u4f5c\u696d\u306b\u3088\u308b\u30df\u30b9\u3084\u9045\u5ef6\u3092\u64b2\u6ec5\u3057\u307e\u3059\u3002<\/p>\n <\/section>\n\n <section id=\"kpi-impact\" class=\"mb-12 md:mb-20\">\n <h2 class=\"text-2xl md:text-3xl font-bold text-center mb-8 text-[#073B4C]\">\u30c7\u30fc\u30bf\u3067\u898b\u308b\u5c0e\u5165\u52b9\u679c<\/h2>\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-8\">\n <div class=\"bg-white p-6 rounded-xl shadow-lg\">\n <h3 class=\"text-xl font-bold mb-4 text-center\">\u5728\u5eab\u30b3\u30b9\u30c8\u306e\u5287\u7684\u306a\u524a\u6e1b<\/h3>\n <p class=\"text-center text-gray-600 mb-4\">CRM\u5c0e\u5165\u524d\u5f8c\u3067\u3001\u5728\u5eab\u95a2\u9023\u306e\u640d\u5931\u30b3\u30b9\u30c8\u3092\u6bd4\u8f03\u3002\u6a5f\u4f1a\u640d\u5931\u3092\u9632\u304e\u3001\u30ad\u30e3\u30c3\u30b7\u30e5\u30d5\u30ed\u30fc\u3092\u6539\u5584\u3057\u307e\u3059\u3002<\/p>\n <div class=\"chart-container\">\n <canvas id=\"inventoryCostChart\"><\/canvas>\n <\/div>\n <\/div>\n <div class=\"bg-white p-6 rounded-xl shadow-lg\">\n <h3 class=\"text-xl font-bold mb-4 text-center\">\u696d\u52d9\u30d7\u30ed\u30bb\u30b9\u306e\u52b9\u7387\u5316<\/h3>\n <p class=\"text-center text-gray-600 mb-4\">\u81ea\u52d5\u5316\u306b\u3088\u308a\u3001\u3053\u308c\u307e\u3067\u624b\u4f5c\u696d\u3067\u884c\u3063\u3066\u3044\u305f\u5de5\u7a0b\u304c\u5927\u5e45\u306b\u524a\u6e1b\u3055\u308c\u3001\u751f\u7523\u6027\u304c\u5411\u4e0a\u3057\u307e\u3059\u3002<\/p>\n <div class=\"chart-container flex items-center justify-center\">\n <canvas id=\"efficiencyChart\"><\/canvas>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"summary-table\" class=\"mb-12 md:mb-20\">\n <h2 class=\"text-2xl md:text-3xl font-bold text-center mb-8 text-[#073B4C]\">\u6a5f\u80fd\u3068\u52b9\u679c\u306e\u30b5\u30de\u30ea\u30fc<\/h2>\n <div class=\"bg-white rounded-xl shadow-lg overflow-x-auto\">\n <table class=\"w-full text-sm text-left\">\n <thead class=\"text-xs text-[#073B4C] uppercase bg-gray-50\">\n <tr>\n <th scope=\"col\" class=\"px-6 py-3\">\u4e3b\u8981\u6a5f\u80fd<\/th>\n <th scope=\"col\" class=\"px-6 py-3\">\u89e3\u6c7a\u3055\u308c\u308b\u8ab2\u984c<\/th>\n <th scope=\"col\" class=\"px-6 py-3\">\u5c0e\u5165\u306b\u3088\u308b\u52b9\u679c<\/th>\n <\/tr>\n <\/thead>\n <tbody class=\"text-gray-600\">\n <tr class=\"bg-white border-b\">\n <th scope=\"row\" class=\"px-6 py-4 font-medium text-[#073B4C] whitespace-nowrap\">\n \u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u5728\u5eab\u7ba1\u7406\n <\/th>\n <td class=\"px-6 py-4\">\n \u5728\u5eab\u628a\u63e1\u306e\u56f0\u96e3\u3055\u3001\u6b20\u54c1\u30fb\u904e\u5270\u5728\u5eab\n <\/td>\n <td class=\"px-6 py-4\">\n \u5728\u5eab\u6700\u9069\u5316\u3001\u68da\u5378\u4f5c\u696d\u306e\u52b9\u7387\u5316\n <\/td>\n <\/tr>\n <tr class=\"bg-white border-b\">\n <th scope=\"row\" class=\"px-6 py-4 font-medium text-[#073B4C] whitespace-nowrap\">\n \u8cfc\u8cb7\u30fb\u53d7\u6ce8\u30fb\u51fa\u8377\u9023\u643a\n <\/th>\n <td class=\"px-6 py-4\">\n \u7d0d\u671f\u7ba1\u7406\u306e\u8907\u96d1\u5316\u3001\u624b\u4f5c\u696d\u306b\u3088\u308b\u30df\u30b9\n <\/td>\n <td class=\"px-6 py-4\">\n \u7d0d\u671f\u9075\u5b88\u7387\u306e\u5411\u4e0a\u3001\u696d\u52d9\u30d7\u30ed\u30bb\u30b9\u52b9\u7387\u5316\n <\/td>\n <\/tr>\n <tr class=\"bg-white\">\n <th scope=\"row\" class=\"px-6 py-4 font-medium text-[#073B4C] whitespace-nowrap\">\n \u30b5\u30d7\u30e9\u30a4\u30e4\u30fc\u60c5\u5831\u7ba1\u7406\n <\/th>\n <td class=\"px-6 py-4\">\n \u30ea\u30b9\u30af\u7ba1\u7406\u4e0d\u8db3\u3001\u60c5\u5831\u306e\u6563\u5728\n <\/td>\n <td class=\"px-6 py-4\">\n \u30b5\u30d7\u30e9\u30a4\u30c1\u30a7\u30fc\u30f3\u306e\u53ef\u8996\u5316\u3001\u30ea\u30b9\u30af\u4f4e\u6e1b\n <\/td>\n <\/tr>\n <\/tbody>\n <\/table>\n <\/div>\n <\/section>\n \n <footer class=\"text-center pt-8 border-t\">\n <p class=\"text-gray-600\">YetiForceCRM\u3067\u3001\u30b5\u30d7\u30e9\u30a4\u30c1\u30a7\u30fc\u30f3\u306e\u672a\u6765\u3092\u5275\u9020\u3059\u308b\u3002<\/p>\n <div class=\"hidden\">\n Confirmation: NEITHER Mermaid JS NOR SVG were used in this output. All charts are rendered on Canvas via Chart.js.\n Chosen Palette: Energetic & Playful\n Narrative Plan: Hero -> Challenges -> Solution Flow -> KPI Impact -> Summary Table -> Footer\n Visualization Plan:\n – Challenges: HTML\/CSS Cards with Unicode Icons. Goal: Inform\/Compare.\n – Solution Flow: HTML\/CSS Flowchart. Goal: Organize.\n – Inventory Impact: Chart.js Grouped Bar Chart. Goal: Compare.\n – Efficiency Impact: Chart.js Donut Chart. Goal: Inform.\n – Summary: HTML\/CSS Table. Goal: Organize.\n <\/div>\n <\/footer>\n\n <\/div>\n\n <script>\n function wrapText(str, maxWidth) {\n if (str.length <= maxWidth) {\n return str;\n }\n const words = str.split(' ');\n const lines = [];\n let currentLine = '';\n for (const word of words) {\n if ((currentLine + ' ' + word).trim().length > maxWidth && currentLine.length > 0) {\n lines.push(currentLine);\n currentLine = word;\n } else {\n currentLine = (currentLine + ' ' + word).trim();\n }\n }\n if (currentLine.length > 0) {\n lines.push(currentLine);\n }\n return lines;\n }\n\n const tooltipTitleCallback = (tooltipItems) => {\n const item = tooltipItems[0];\n let label = item.chart.data.labels[item.dataIndex];\n if (Array.isArray(label)) {\n return label.join(' ');\n }\n return label;\n };\n \n const commonChartOptions = {\n responsive: true,\n maintainAspectRatio: false,\n plugins: {\n legend: {\n position: 'bottom',\n labels: {\n font: {\n family: \"'Noto Sans JP', sans-serif\",\n size: 12,\n },\n color: '#073B4C',\n }\n },\n tooltip: {\n callbacks: {\n title: tooltipTitleCallback\n },\n titleFont: {\n family: \"'Noto Sans JP', sans-serif\",\n },\n bodyFont: {\n family: \"'Noto Sans JP', sans-serif\",\n }\n }\n },\n scales: {\n y: {\n beginAtZero: true,\n ticks: {\n color: '#073B4C',\n font: { family: \"'Noto Sans JP', sans-serif\" }\n },\n grid: {\n color: '#E9ECEF'\n }\n },\n x: {\n ticks: {\n color: '#073B4C',\n font: { family: \"'Noto Sans JP', sans-serif\" }\n },\n grid: {\n display: false\n }\n }\n }\n };\n\n const inventoryCostCtx = document.getElementById('inventoryCostChart').getContext('2d');\n const inventoryCostChart = new Chart(inventoryCostCtx, {\n type: 'bar',\n data: {\n labels: ['\u904e\u5270\u5728\u5eab\u30b3\u30b9\u30c8', '\u6b20\u54c1\u306b\u3088\u308b\u6a5f\u4f1a\u640d\u5931'],\n datasets: [{\n label: 'CRM\u5c0e\u5165\u524d',\n data: [100, 80],\n backgroundColor: '#FF6B6B',\n borderColor: '#FF6B6B',\n borderWidth: 1\n }, {\n label: 'CRM\u5c0e\u5165\u5f8c',\n data: [35, 15],\n backgroundColor: '#06D6A0',\n borderColor: '#06D6A0',\n borderWidth: 1\n }]\n },\n options: {\n ...commonChartOptions,\n scales: {\n y: {\n ...commonChartOptions.scales.y,\n title: {\n display: true,\n text: '\u30b3\u30b9\u30c8\u30fb\u640d\u5931 (\u76f8\u5bfe\u5024)',\n color: '#073B4C',\n font: { family: \"'Noto Sans JP', sans-serif\" }\n }\n },\n x: { ...commonChartOptions.scales.x }\n }\n }\n });\n\n const efficiencyCtx = document.getElementById('efficiencyChart').getContext('2d');\n const efficiencyChart = new Chart(efficiencyCtx, {\n type: 'doughnut',\n data: {\n labels: ['\u524a\u6e1b\u3055\u308c\u305f\u624b\u4f5c\u696d', '\u6b8b\u308a\u306e\u696d\u52d9\u30d7\u30ed\u30bb\u30b9'],\n datasets: [{\n data: [60, 40],\n backgroundColor: [\n '#118AB2',\n '#E9ECEF'\n ],\n borderColor: [\n '#FFFFFF'\n ],\n borderWidth: 4,\n hoverOffset: 4\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n cutout: '70%',\n plugins: {\n legend: {\n display: false\n },\n tooltip: {\n callbacks: {\n title: (tooltipItems) => tooltipItems[0].label,\n label: (tooltipItem) => ` ${tooltipItem.raw}%`\n }\n },\n title: {\n display: true,\n text: '\u624b\u4f5c\u696d\u5de5\u7a0b\u306e60%\u3092\u81ea\u52d5\u5316',\n position: 'bottom',\n font: {\n size: 16,\n weight: 'bold',\n family: \"'Noto Sans JP', sans-serif\"\n },\n color: '#073B4C',\n padding: {\n top: 20\n }\n }\n }\n }\n });\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>\u30b5\u30d7\u30e9\u30a4\u30c1\u30a7\u30fc\u30f3DX\u30a4\u30f3\u30d5\u30a9\u30b0\u30e9\u30d5\u30a3\u30c3\u30af: YetiForceCRM\u306b\u3088\u308b\u8ab2\u984c\u89e3\u6c7a \u30b5\u30d7\u30e9\u30a4\u30c1\u30a7\u30fc\u30f3DX\u9769\u547d YetiForceCRM\u3067\u5b9f\u73fe\u3059\u308b\u3001\u52b9\u7387\u7684\u3067\u5f37\u976d\u306a\u7269\u6d41\u4f53\u5236 \u591a\u304f\u306e\u4f01\u696d\u304c\u76f4\u9762\u3059\u308b3\u3064\u306e\u58c1 \ud83d\udce6 \u5728\u5eab\u7ba1\u7406\u306e\u4e0d\u78ba\u5b9f […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-731","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/yetiworks.jp\/index.php?rest_route=\/wp\/v2\/pages\/731","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/yetiworks.jp\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/yetiworks.jp\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/yetiworks.jp\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/yetiworks.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=731"}],"version-history":[{"count":4,"href":"https:\/\/yetiworks.jp\/index.php?rest_route=\/wp\/v2\/pages\/731\/revisions"}],"predecessor-version":[{"id":897,"href":"https:\/\/yetiworks.jp\/index.php?rest_route=\/wp\/v2\/pages\/731\/revisions\/897"}],"wp:attachment":[{"href":"https:\/\/yetiworks.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=731"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}