YetiForceCRM | \u30ab\u30b9\u30bf\u30de\u30fc\u30b5\u30fc\u30d3\u30b9\u5909\u9769\u30a4\u30f3\u30d5\u30a9\u30b0\u30e9\u30d5\u30a3\u30c3\u30af<\/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=Inter:wght@400;700;900&family=Noto+Sans+JP:wght@400;700;900&display=swap\" rel=\"stylesheet\">\n <style>\n body {\n font-family: 'Inter', 'Noto Sans JP', sans-serif;\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 .flow-arrow::after {\n content: '\u2192';\n font-size: 2rem;\n color: #1e90ff;\n margin: 0 1rem;\n line-height: 1;\n }\n .flow-arrow-down::after {\n content: '\u2193';\n font-size: 2rem;\n color: #1e90ff;\n margin-top: 0.5rem;\n display: block;\n }\n <\/style>\n<\/head>\n<body class=\"bg-[#f0f8ff]\">\n\n <header class=\"bg-white shadow-md p-6 text-center\">\n <h1 class=\"text-4xl font-black text-[#007bff]\">YetiForceCRM\u3067\u5b9f\u73fe\u3059\u308b\u3001\u6b21\u4e16\u4ee3\u306e\u30ab\u30b9\u30bf\u30de\u30fc\u30b5\u30fc\u30d3\u30b9<\/h1>\n <p class=\"mt-2 text-lg text-gray-600\">\u30c7\u30fc\u30bf\u3067\u898b\u308b\u3001\u9867\u5ba2\u6e80\u8db3\u5ea6\u3068\u751f\u7523\u6027\u5411\u4e0a\u306e\u8ecc\u8de1<\/p>\n <\/header>\n\n <main class=\"container mx-auto p-4 md:p-8\">\n\n <section id=\"challenge\" class=\"mb-12\">\n <h2 class=\"text-3xl font-bold text-center text-[#007bff] mb-6\">\u591a\u304f\u306e\u4f01\u696d\u304c\u76f4\u9762\u3059\u308b\u300c\u5171\u901a\u306e\u58c1\u300d<\/h2>\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-8 items-center\">\n <div class=\"bg-white rounded-lg shadow-md p-6\">\n <h3 class=\"text-2xl font-bold text-[#1e90ff] mb-4\">\u60c5\u5831\u306e\u6563\u5728\u3068\u30b5\u30a4\u30ed\u5316<\/h3>\n <p class=\"text-gray-700 mb-4\">\u96fb\u8a71\u3001\u30e1\u30fc\u30eb\u3001SNS\u306a\u3069\u3001\u554f\u3044\u5408\u308f\u305b\u30c1\u30e3\u30cd\u30eb\u304c\u591a\u69d8\u5316\u3057\u3001\u9867\u5ba2\u60c5\u5831\u3084\u5bfe\u5fdc\u5c65\u6b74\u304c\u30d0\u30e9\u30d0\u30e9\u306b\u3002\u7d50\u679c\u3068\u3057\u3066\u5bfe\u5fdc\u306e\u9045\u5ef6\u3084\u3001\u9867\u5ba2\u306b\u540c\u3058\u8aac\u660e\u3092\u7e70\u308a\u8fd4\u3055\u305b\u308b\u624b\u9593\u304c\u767a\u751f\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n <div class=\"flex justify-around items-center p-4 bg-gray-100 rounded-lg\">\n <span class=\"text-4xl\" title=\"\u30e1\u30fc\u30eb\">\ud83d\udce7<\/span>\n <span class=\"text-4xl\" title=\"\u96fb\u8a71\">\ud83d\udcde<\/span>\n <span class=\"text-4xl\" title=\"SNS\">\ud83d\udcac<\/span>\n <span class=\"text-4xl\" title=\"\u30c1\u30e3\u30c3\u30c8\">\ud83d\udde8\ufe0f<\/span>\n <\/div>\n <\/div>\n <div class=\"bg-white rounded-lg shadow-md p-6\">\n <h3 class=\"text-2xl font-bold text-[#1e90ff] mb-4\">\u5bfe\u5fdc\u54c1\u8cea\u306e\u3070\u3089\u3064\u304d<\/h3>\n <p class=\"text-gray-700\">\u30ca\u30ec\u30c3\u30b8\u304c\u5c5e\u4eba\u5316\u3057\u3001\u62c5\u5f53\u8005\u306b\u3088\u3063\u3066\u30b5\u30dd\u30fc\u30c8\u306e\u8cea\u304c\u5909\u52d5\u3002\u4e00\u8cab\u3057\u305f\u9ad8\u54c1\u8cea\u306a\u30b5\u30fc\u30d3\u30b9\u3092\u63d0\u4f9b\u3067\u304d\u305a\u3001\u9867\u5ba2\u6e80\u8db3\u5ea6\u306e\u7dad\u6301\u304c\u56f0\u96e3\u306b\u306a\u3063\u3066\u3044\u307e\u3059\u3002<\/p>\n <div class=\"chart-container h-64 md:h-72\">\n <canvas id=\"qualityChart\"><\/canvas>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"solution\" class=\"mb-12 text-center\">\n <div class=\"bg-white rounded-lg shadow-xl p-8\">\n <h2 class=\"text-3xl font-bold text-[#007bff] mb-4\">\u305d\u306e\u8ab2\u984c\u3001YetiForceCRM\u304c\u89e3\u6c7a\u3057\u307e\u3059<\/h2>\n <p class=\"text-xl text-gray-700 max-w-3xl mx-auto mb-6\">\u6563\u5728\u3057\u305f\u60c5\u5831\u30921\u3064\u306e\u30d7\u30e9\u30c3\u30c8\u30d5\u30a9\u30fc\u30e0\u306b\u7d71\u5408\u3057\u3001\u696d\u52d9\u30d7\u30ed\u30bb\u30b9\u3092\u53ef\u8996\u5316\u3002\u30c7\u30fc\u30bf\u306b\u57fa\u3065\u3044\u305f\u3001\u6226\u7565\u7684\u306a\u30ab\u30b9\u30bf\u30de\u30fc\u30b5\u30fc\u30d3\u30b9\u3092\u5b9f\u73fe\u3057\u307e\u3059\u3002<\/p>\n <div class=\"flex flex-col md:flex-row items-center justify-center text-2xl font-bold text-gray-700\">\n <div class=\"flex items-center\">\n <span class=\"text-4xl mx-2\">\ud83d\udce7<\/span>\n <span class=\"text-4xl mx-2\">\ud83d\udcde<\/span>\n <span class=\"text-4xl mx-2\">\ud83d\udcac<\/span>\n <\/div>\n <div class=\"flow-arrow-down md:flow-arrow\"><\/div>\n <div class=\"p-4 bg-[#007bff] text-white rounded-full shadow-lg\">\n YETIWORKS\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"features\" class=\"mb-12\">\n <h2 class=\"text-3xl font-bold text-center text-[#007bff] mb-6\">\u30c7\u30fc\u30bf\u3067\u898b\u308bYetiForceCRM\u306e\u30a4\u30f3\u30d1\u30af\u30c8<\/h2>\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-8\">\n\n <div class=\"bg-white rounded-lg shadow-md p-6\">\n <h3 class=\"text-2xl font-bold text-[#1e90ff] mb-2\">\u554f\u3044\u5408\u308f\u305b\u5bfe\u5fdc\u6642\u9593\u306e\u5287\u7684\u306a\u77ed\u7e2e<\/h3>\n <p class=\"text-gray-600 mb-4\">\u60c5\u5831\u5171\u6709\u306e\u8fc5\u901f\u5316\u3068\u81ea\u52d5\u5316\u306b\u3088\u308a\u3001\u5e73\u5747\u5bfe\u5fdc\u6642\u9593\u304c\u5927\u5e45\u306b\u6539\u5584\u3002\u9867\u5ba2\u3092\u5f85\u305f\u305b\u306a\u3044\u4f53\u5236\u3092\u69cb\u7bc9\u3057\u307e\u3059\u3002<\/p>\n <div class=\"chart-container\">\n <canvas id=\"responseTimeChart\"><\/canvas>\n <\/div>\n <\/div>\n\n <div class=\"bg-white rounded-lg shadow-md p-6\">\n <h3 class=\"text-2xl font-bold text-[#1e90ff] mb-2\">\u554f\u3044\u5408\u308f\u305b\u30c1\u30e3\u30cd\u30eb\u306e\u7d71\u5408\u7ba1\u7406<\/h3>\n <p class=\"text-gray-600 mb-4\">\u5168\u3066\u306e\u30c1\u30e3\u30cd\u30eb\u304b\u3089\u306e\u554f\u3044\u5408\u308f\u305b\u3092\u4e00\u5143\u7ba1\u7406\u3002\u30e1\u30fc\u30eb\u7d4c\u7531\u306e\u554f\u3044\u5408\u308f\u305b\u304c\u6700\u3082\u591a\u3044\u73fe\u72b6\u3092\u6b63\u78ba\u306b\u628a\u63e1\u3057\u3001\u30ea\u30bd\u30fc\u30b9\u3092\u6700\u9069\u914d\u5206\u3057\u307e\u3059\u3002<\/p>\n <div class=\"chart-container\">\n <canvas id=\"channelDonutChart\"><\/canvas>\n <\/div>\n <\/div>\n\n <div class=\"bg-white rounded-lg shadow-md p-6 md:col-span-2\">\n <h3 class=\"text-2xl font-bold text-[#1e90ff] mb-2\">\u554f\u984c\u89e3\u6c7a\u65b9\u6cd5\u306e\u5909\u5316<\/h3>\n <p class=\"text-gray-600 mb-4\">\u30ca\u30ec\u30c3\u30b8\u30d9\u30fc\u30b9\u3068\u9867\u5ba2\u30dd\u30fc\u30bf\u30eb\u306e\u6d3b\u7528\u3067\u3001\u9867\u5ba2\u81ea\u8eab\u306b\u3088\u308b\u81ea\u5df1\u89e3\u6c7a\u7387\u304c\u5411\u4e0a\u3002\u62c5\u5f53\u8005\u306f\u3088\u308a\u8907\u96d1\u306a\u554f\u984c\u306b\u96c6\u4e2d\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n <div class=\"chart-container h-80 md:h-96 max-h-[500px]\">\n <canvas id=\"resolutionStackedBarChart\"><\/canvas>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"transformation\" class=\"mb-12\">\n <h2 class=\"text-3xl font-bold text-center text-[#007bff] mb-6\">\u5c0e\u5165\u304c\u3082\u305f\u3089\u3059\u300c3\u3064\u306e\u5909\u9769\u300d<\/h2>\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-8\">\n <div class=\"bg-white rounded-lg shadow-xl p-6 text-center transform hover:scale-105 transition-transform duration-300\">\n <div class=\"text-6xl font-black text-[#1e90ff]\">45%<\/div>\n <h3 class=\"text-2xl font-bold mt-2 text-gray-800\">\u751f\u7523\u6027\u5411\u4e0a<\/h3>\n <p class=\"mt-2 text-gray-600\">\u81ea\u52d5\u5316\u3068\u60c5\u5831\u5171\u6709\u306b\u3088\u308a\u3001\u554f\u3044\u5408\u308f\u305b\u5bfe\u5fdc\u306e\u6642\u9593\u3092\u5927\u5e45\u306b\u77ed\u7e2e\u3002\u90e8\u9580\u5168\u4f53\u306e\u751f\u7523\u6027\u304c\u98db\u8e8d\u7684\u306b\u5411\u4e0a\u3057\u307e\u3059\u3002<\/p>\n <\/div>\n <div class=\"bg-white rounded-lg shadow-xl p-6 text-center transform hover:scale-105 transition-transform duration-300\">\n <div class=\"text-6xl font-black text-[#1e90ff]\">92%<\/div>\n <h3 class=\"text-2xl font-bold mt-2 text-gray-800\">\u9867\u5ba2\u6e80\u8db3\u5ea6<\/h3>\n <p class=\"mt-2 text-gray-600\">\u8fc5\u901f\u3067\u4e00\u8cab\u6027\u306e\u3042\u308b\u9ad8\u54c1\u8cea\u306a\u30b5\u30dd\u30fc\u30c8\u304c\u9867\u5ba2\u306e\u4fe1\u983c\u3092\u91b8\u6210\u3002\u30ed\u30a4\u30e4\u30eb\u30c6\u30a3\u5411\u4e0a\u306b\u76f4\u7d50\u3057\u307e\u3059\u3002<\/p>\n <\/div>\n <div class=\"bg-white rounded-lg shadow-xl p-6 text-center transform hover:scale-105 transition-transform duration-300\">\n <div class=\"text-6xl font-black text-[#1e90ff]\">30%<\/div>\n <h3 class=\"text-2xl font-bold mt-2 text-gray-800\">\u30b5\u30dd\u30fc\u30c8\u30b3\u30b9\u30c8\u524a\u6e1b<\/h3>\n <p class=\"mt-2 text-gray-600\">\u81ea\u5df1\u89e3\u6c7a\u306e\u4fc3\u9032\u306b\u3088\u308a\u3001\u5358\u7d14\u306a\u554f\u3044\u5408\u308f\u305b\u304c\u6e1b\u5c11\u3057\u3001\u30b5\u30dd\u30fc\u30c8\u30b3\u30b9\u30c8\u306e\u6700\u9069\u5316\u3092\u5b9f\u73fe\u3057\u307e\u3059\u3002<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"value-creation\" class=\"text-center bg-white rounded-lg shadow-xl p-8 mb-12\">\n <h2 class=\"text-3xl font-bold text-[#007bff] mb-6\">\u30b5\u30dd\u30fc\u30c8\u304b\u3089\u59cb\u307e\u308b\u5168\u793e\u7684\u306a\u4fa1\u5024\u5275\u9020\u30b5\u30a4\u30af\u30eb<\/h2>\n <p class=\"text-xl text-gray-700 max-w-4xl mx-auto mb-8\">\u30ab\u30b9\u30bf\u30de\u30fc\u30b5\u30dd\u30fc\u30c8\u3067\u5f97\u3089\u308c\u305f\u300c\u9867\u5ba2\u306e\u751f\u306e\u58f0\u300d\u306f\u3001CRM\u3092\u901a\u3058\u3066\u5168\u793e\u306e\u5927\u5207\u306a\u8cc7\u7523\u306b\u5909\u308f\u308a\u307e\u3059\u3002<\/p>\n <div class=\"flex flex-col md:flex-row items-center justify-center space-y-4 md:space-y-0 md:space-x-4\">\n <div class=\"p-4 rounded-lg bg-blue-100 border-2 border-blue-300\">\n <h4 class=\"font-bold text-lg text-blue-800\">\ud83d\udcde \u9867\u5ba2\u30b5\u30dd\u30fc\u30c8<\/h4>\n <p class=\"text-blue-700\">\u554f\u3044\u5408\u308f\u305b\u30fb\u8981\u671b\u3092\u53ce\u96c6<\/p>\n <\/div>\n <div class=\"flow-arrow-down md:flow-arrow\"><\/div>\n <div class=\"p-4 rounded-lg bg-green-100 border-2 border-green-300\">\n <h4 class=\"font-bold text-lg text-green-800\">\ud83d\udcc8 \u30c7\u30fc\u30bf\u5206\u6790<\/h4>\n <p class=\"text-green-700\">\u30cb\u30fc\u30ba\u30fb\u8ab2\u984c\u3092\u53ef\u8996\u5316<\/p>\n <\/div>\n <div class=\"flow-arrow-down md:flow-arrow\"><\/div>\n <div class=\"p-4 rounded-lg bg-purple-100 border-2 border-purple-300\">\n <h4 class=\"font-bold text-lg text-purple-800\">\ud83d\udee0\ufe0f \u88fd\u54c1\u30fb\u30b5\u30fc\u30d3\u30b9\u6539\u5584<\/h4>\n <p class=\"text-purple-700\">\u9867\u5ba2\u306e\u58f0\u3092\u53cd\u6620<\/p>\n <\/div>\n <div class=\"flow-arrow-down md:flow-arrow\"><\/div>\n <div class=\"p-4 rounded-lg bg-yellow-100 border-2 border-yellow-300\">\n <h4 class=\"font-bold text-lg text-yellow-800\">\ud83c\udfaf \u30de\u30fc\u30b1\u30c6\u30a3\u30f3\u30b0<\/h4>\n <p class=\"text-yellow-700\">\u7684\u78ba\u306a\u65bd\u7b56\u3092\u5c55\u958b<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"summary-table\" class=\"bg-white rounded-lg shadow-xl p-6 md:p-8\">\n <h2 class=\"text-3xl font-bold text-center text-[#007bff] mb-6\">\u6a5f\u80fd\u3068\u52b9\u679c\u306e\u30b5\u30de\u30ea\u30fc<\/h2>\n <div class=\"overflow-x-auto\">\n <table class=\"w-full text-sm md:text-base text-left text-gray-600\">\n <thead class=\"bg-blue-50\">\n <tr>\n <th class=\"p-4 font-bold text-blue-800\">\u4e3b\u8981\u6a5f\u80fd<\/th>\n <th class=\"p-4 font-bold text-blue-800\">\u5177\u4f53\u7684\u306a\u6d3b\u7528\u65b9\u6cd5<\/th>\n <th class=\"p-4 font-bold text-blue-800\">\u89e3\u6c7a\u3055\u308c\u308b\u8ab2\u984c<\/th>\n <th class=\"p-4 font-bold text-blue-800\">\u5c0e\u5165\u306b\u3088\u308b\u52b9\u679c<\/th>\n <\/tr>\n <\/thead>\n <tbody>\n <tr class=\"border-b\">\n <td class=\"p-4 font-semibold\">\u30b1\u30fc\u30b9\u7ba1\u7406<\/td>\n <td class=\"p-4\">\u554f\u3044\u5408\u308f\u305b\u53d7\u4ed8\u304b\u3089\u89e3\u6c7a\u307e\u3067\u306e\u30d7\u30ed\u30bb\u30b9\u7ba1\u7406\u3001\u62c5\u5f53\u8005\u5272\u308a\u5f53\u3066\u3001\u5c65\u6b74\u8a18\u9332<\/td>\n <td class=\"p-4\">\u554f\u3044\u5408\u308f\u305b\u5bfe\u5fdc\u306e\u9045\u5ef6\u3001\u60c5\u5831\u5171\u6709\u4e0d\u8db3<\/td>\n <td class=\"p-4\">\u8fc5\u901f\u304b\u3064\u4e01\u5be7\u306a\u5bfe\u5fdc\u3001\u30b5\u30dd\u30fc\u30c8\u4f53\u5236\u306e\u52b9\u7387\u5316<\/td>\n <\/tr>\n <tr class=\"border-b bg-gray-50\">\n <td class=\"p-4 font-semibold\">\u9867\u5ba2\u30dd\u30fc\u30bf\u30eb<\/td>\n <td class=\"p-4\">\u9867\u5ba2\u81ea\u8eab\u306b\u3088\u308b\u554f\u3044\u5408\u308f\u305b\u9032\u6357\u78ba\u8a8d\u3001FAQ\u691c\u7d22<\/td>\n <td class=\"p-4\">\u9867\u5ba2\u304b\u3089\u306e\u91cd\u8907\u554f\u3044\u5408\u308f\u305b\u3001\u30b5\u30dd\u30fc\u30c8\u62c5\u5f53\u8005\u306e\u8ca0\u62c5\u5897<\/td>\n <td class=\"p-4\">\u9867\u5ba2\u81ea\u8eab\u306b\u3088\u308b\u554f\u984c\u89e3\u6c7a\u4fc3\u9032\u3001\u30b5\u30dd\u30fc\u30c8\u30b3\u30b9\u30c8\u524a\u6e1b<\/td>\n <\/tr>\n <tr class=\"border-b\">\n <td class=\"p-4 font-semibold\">\u30ca\u30ec\u30c3\u30b8\u30d9\u30fc\u30b9<\/td>\n <td class=\"p-4\">\u3088\u304f\u3042\u308b\u8cea\u554f\uff08FAQ\uff09\u3084\u89e3\u6c7a\u7b56\u306e\u84c4\u7a4d\u3001\u691c\u7d22\u6a5f\u80fd<\/td>\n <td class=\"p-4\">\u60c5\u5831\u5171\u6709\u4e0d\u8db3\u3001\u62c5\u5f53\u8005\u306b\u3088\u308b\u5bfe\u5fdc\u54c1\u8cea\u306e\u3070\u3089\u3064\u304d<\/td>\n <td class=\"p-4\">\u9867\u5ba2\u306e\u81ea\u5df1\u89e3\u6c7a\u4fc3\u9032\u3001\u7d44\u7e54\u5168\u4f53\u306e\u5bfe\u5fdc\u529b\u5411\u4e0a<\/td>\n <\/tr>\n <tr class=\"bg-gray-50\">\n <td class=\"p-4 font-semibold\">\u9867\u5ba2\u5c65\u6b74\u306e\u4e00\u5143\u7ba1\u7406<\/td>\n <td class=\"p-4\">\u8907\u6570\u30c1\u30e3\u30cd\u30eb\u304b\u3089\u306e\u9867\u5ba2\u30a4\u30f3\u30bf\u30e9\u30af\u30b7\u30e7\u30f3\u5c65\u6b74\u306e\u7d71\u5408\u30fb\u53ef\u8996\u5316<\/td>\n <td class=\"p-4\">\u9867\u5ba2\u60c5\u5831\u30fb\u5bfe\u5fdc\u5c65\u6b74\u306e\u6563\u5728\u3001\u5bfe\u5fdc\u306e\u5c5e\u4eba\u5316<\/td>\n <td class=\"p-4\">\u9867\u5ba2\u7406\u89e3\u306e\u6df1\u5316\u3001\u4e00\u8cab\u3057\u305f\u9ad8\u54c1\u8cea\u306a\u30b5\u30dd\u30fc\u30c8\u63d0\u4f9b<\/td>\n <\/tr>\n <\/tbody>\n <\/table>\n <\/div>\n <\/section>\n\n <\/main>\n\n <footer class=\"text-center p-8 mt-8 bg-white\">\n <p class=\"text-xl font-bold text-[#007bff] mb-2\">\u9867\u5ba2\u3068\u306e\u7d46\u3092\u3001\u672a\u6765\u306e\u529b\u306b\u3002<\/p>\n <\/footer>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', function () {\n\n const wrapLabel = (label) => {\n const maxLength = 16;\n if (typeof label !== 'string' || label.length <= maxLength) {\n return label;\n }\n const words = label.split(' ');\n let lines = [];\n let currentLine = '';\n words.forEach(word => {\n if ((currentLine + ' ' + word).length > maxLength) {\n lines.push(currentLine);\n currentLine = word;\n } else {\n currentLine = currentLine ? currentLine + ' ' + word : word;\n }\n });\n lines.push(currentLine);\n return lines;\n };\n\n const tooltipTitleCallback = {\n plugins: {\n tooltip: {\n callbacks: {\n title: function(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 }\n }\n };\n\n const qualityChartCtx = document.getElementById('qualityChart')?.getContext('2d');\n if (qualityChartCtx) {\n new Chart(qualityChartCtx, {\n type: 'bar',\n data: {\n labels: ['\u62c5\u5f53\u8005A', '\u62c5\u5f53\u8005B', '\u62c5\u5f53\u8005C', '\u62c5\u5f53\u8005D'],\n datasets: [{\n label: '\u9867\u5ba2\u6e80\u8db3\u5ea6\u30b9\u30b3\u30a2',\n data: [65, 92, 78, 58],\n backgroundColor: ['#add8e6', '#007bff', '#1e90ff', '#add8e6'],\n borderColor: '#ffffff',\n borderWidth: 2\n }]\n },\n options: {\n ...tooltipTitleCallback,\n responsive: true,\n maintainAspectRatio: false,\n scales: {\n y: {\n beginAtZero: true,\n max: 100\n }\n },\n plugins: {\n ...tooltipTitleCallback.plugins,\n legend: {\n display: false\n },\n title: {\n display: true,\n text: '\u62c5\u5f53\u8005\u306b\u3088\u308b\u30b5\u30dd\u30fc\u30c8\u54c1\u8cea\u306e\u3070\u3089\u3064\u304d'\n }\n }\n }\n });\n }\n\n const responseTimeChartCtx = document.getElementById('responseTimeChart')?.getContext('2d');\n if (responseTimeChartCtx) {\n new Chart(responseTimeChartCtx, {\n type: 'line',\n data: {\n labels: ['\u5c0e\u5165\u524d Q1', '\u5c0e\u5165\u524d Q2', '\u5c0e\u5165\u5f8c Q3', '\u5c0e\u5165\u5f8c Q4', '\u5c0e\u5165\u5f8c Q5'],\n datasets: [{\n label: '\u5e73\u5747\u5bfe\u5fdc\u6642\u9593 (\u5206)',\n data: [120, 125, 70, 45, 30],\n fill: true,\n borderColor: '#007bff',\n backgroundColor: 'rgba(0, 123, 255, 0.1)',\n tension: 0.3\n }]\n },\n options: {\n ...tooltipTitleCallback,\n responsive: true,\n maintainAspectRatio: false,\n scales: {\n y: {\n beginAtZero: true,\n title: {\n display: true,\n text: '\u6642\u9593 (\u5206)'\n }\n }\n },\n plugins: {\n ...tooltipTitleCallback.plugins,\n legend: {\n display: false\n }\n }\n }\n });\n }\n\n const channelDonutChartCtx = document.getElementById('channelDonutChart')?.getContext('2d');\n if (channelDonutChartCtx) {\n new Chart(channelDonutChartCtx, {\n type: 'doughnut',\n data: {\n labels: ['\u30e1\u30fc\u30eb', '\u96fb\u8a71', 'SNS\u30fb\u30c1\u30e3\u30c3\u30c8', '\u305d\u306e\u4ed6'],\n datasets: [{\n label: '\u554f\u3044\u5408\u308f\u305b\u30c1\u30e3\u30cd\u30eb\u6bd4\u7387',\n data: [55, 25, 15, 5],\n backgroundColor: ['#007bff', '#1e90ff', '#00bfff', '#add8e6'],\n hoverOffset: 4\n }]\n },\n options: {\n ...tooltipTitleCallback,\n responsive: true,\n maintainAspectRatio: false,\n plugins: {\n ...tooltipTitleCallback.plugins,\n legend: {\n position: 'bottom',\n }\n }\n }\n });\n }\n\n const resolutionStackedBarChartCtx = document.getElementById('resolutionStackedBarChart')?.getContext('2d');\n if (resolutionStackedBarChartCtx) {\n const originalLabels = ['\u5c0e\u5165\u524d', '\u5c0e\u5165\u5f8c'];\n const processedLabels = originalLabels.map(wrapLabel);\n\n new Chart(resolutionStackedBarChartCtx, {\n type: 'bar',\n data: {\n labels: processedLabels,\n datasets: [\n {\n label: '\u62c5\u5f53\u8005\u304c\u76f4\u63a5\u5bfe\u5fdc',\n data: [90, 40],\n backgroundColor: '#007bff',\n },\n {\n label: '\u9867\u5ba2\u304c\u81ea\u5df1\u89e3\u6c7a (\u30ca\u30ec\u30c3\u30b8\u30d9\u30fc\u30b9\u7b49)',\n data: [5, 35],\n backgroundColor: '#1e90ff',\n },\n {\n label: '\u81ea\u52d5\u5fdc\u7b54\u3067\u89e3\u6c7a',\n data: [5, 25],\n backgroundColor: '#add8e6',\n }\n ]\n },\n options: {\n ...tooltipTitleCallback,\n responsive: true,\n maintainAspectRatio: false,\n scales: {\n x: {\n stacked: true,\n },\n y: {\n stacked: true,\n max: 100,\n ticks: {\n callback: function(value) {\n return value + '%'\n }\n }\n }\n },\n plugins: {\n ...tooltipTitleCallback.plugins,\n legend: {\n position: 'bottom'\n }\n }\n }\n });\n }\n\n});\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>YetiForceCRM | \u30ab\u30b9\u30bf\u30de\u30fc\u30b5\u30fc\u30d3\u30b9\u5909\u9769\u30a4\u30f3\u30d5\u30a9\u30b0\u30e9\u30d5\u30a3\u30c3\u30af YetiForceCRM\u3067\u5b9f\u73fe\u3059\u308b\u3001\u6b21\u4e16\u4ee3\u306e\u30ab\u30b9\u30bf\u30de\u30fc\u30b5\u30fc\u30d3\u30b9 \u30c7\u30fc\u30bf\u3067\u898b\u308b\u3001\u9867\u5ba2\u6e80\u8db3\u5ea6\u3068\u751f\u7523\u6027\u5411\u4e0a\u306e\u8ecc\u8de1 \u591a\u304f\u306e\u4f01\u696d\u304c\u76f4\u9762\u3059\u308b\u300c\u5171\u901a\u306e\u58c1\u300d \u60c5\u5831 […]<\/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-712","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/yetiworks.jp\/index.php?rest_route=\/wp\/v2\/pages\/712","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=712"}],"version-history":[{"count":4,"href":"https:\/\/yetiworks.jp\/index.php?rest_route=\/wp\/v2\/pages\/712\/revisions"}],"predecessor-version":[{"id":893,"href":"https:\/\/yetiworks.jp\/index.php?rest_route=\/wp\/v2\/pages\/712\/revisions\/893"}],"wp:attachment":[{"href":"https:\/\/yetiworks.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=712"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":712,"date":"2025-08-01T17:28:06","date_gmt":"2025-08-01T08:28:06","guid":{"rendered":"https:\/\/yetiworks.jp\/?page_id=712"},"modified":"2025-08-06T15:46:20","modified_gmt":"2025-08-06T06:46:20","slug":"%e3%82%ab%e3%82%b9%e3%82%bf%e3%83%9e%e3%83%bc%e3%82%b5%e3%83%9d%e3%83%bc%e3%83%88%e9%83%a8%e9%96%80","status":"publish","type":"page","link":"https:\/\/yetiworks.jp\/?page_id=712","title":{"rendered":"\u30ab\u30b9\u30bf\u30de\u30fc\u30b5\u30dd\u30fc\u30c8\u90e8\u9580\uff08\u56f3\u89e3\uff09"},"content":{"rendered":"\n\n\n\n \n \n YetiForceCRM | \u30ab\u30b9\u30bf\u30de\u30fc\u30b5\u30fc\u30d3\u30b9\u5909\u9769\u30a4\u30f3\u30d5\u30a9\u30b0\u30e9\u30d5\u30a3\u30c3\u30af<\/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=Inter:wght@400;700;900&family=Noto+Sans+JP:wght@400;700;900&display=swap\" rel=\"stylesheet\">\n <style>\n body {\n font-family: 'Inter', 'Noto Sans JP', sans-serif;\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 .flow-arrow::after {\n content: '\u2192';\n font-size: 2rem;\n color: #1e90ff;\n margin: 0 1rem;\n line-height: 1;\n }\n .flow-arrow-down::after {\n content: '\u2193';\n font-size: 2rem;\n color: #1e90ff;\n margin-top: 0.5rem;\n display: block;\n }\n <\/style>\n<\/head>\n<body class=\"bg-[#f0f8ff]\">\n\n <header class=\"bg-white shadow-md p-6 text-center\">\n <h1 class=\"text-4xl font-black text-[#007bff]\">YetiForceCRM\u3067\u5b9f\u73fe\u3059\u308b\u3001\u6b21\u4e16\u4ee3\u306e\u30ab\u30b9\u30bf\u30de\u30fc\u30b5\u30fc\u30d3\u30b9<\/h1>\n <p class=\"mt-2 text-lg text-gray-600\">\u30c7\u30fc\u30bf\u3067\u898b\u308b\u3001\u9867\u5ba2\u6e80\u8db3\u5ea6\u3068\u751f\u7523\u6027\u5411\u4e0a\u306e\u8ecc\u8de1<\/p>\n <\/header>\n\n <main class=\"container mx-auto p-4 md:p-8\">\n\n <section id=\"challenge\" class=\"mb-12\">\n <h2 class=\"text-3xl font-bold text-center text-[#007bff] mb-6\">\u591a\u304f\u306e\u4f01\u696d\u304c\u76f4\u9762\u3059\u308b\u300c\u5171\u901a\u306e\u58c1\u300d<\/h2>\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-8 items-center\">\n <div class=\"bg-white rounded-lg shadow-md p-6\">\n <h3 class=\"text-2xl font-bold text-[#1e90ff] mb-4\">\u60c5\u5831\u306e\u6563\u5728\u3068\u30b5\u30a4\u30ed\u5316<\/h3>\n <p class=\"text-gray-700 mb-4\">\u96fb\u8a71\u3001\u30e1\u30fc\u30eb\u3001SNS\u306a\u3069\u3001\u554f\u3044\u5408\u308f\u305b\u30c1\u30e3\u30cd\u30eb\u304c\u591a\u69d8\u5316\u3057\u3001\u9867\u5ba2\u60c5\u5831\u3084\u5bfe\u5fdc\u5c65\u6b74\u304c\u30d0\u30e9\u30d0\u30e9\u306b\u3002\u7d50\u679c\u3068\u3057\u3066\u5bfe\u5fdc\u306e\u9045\u5ef6\u3084\u3001\u9867\u5ba2\u306b\u540c\u3058\u8aac\u660e\u3092\u7e70\u308a\u8fd4\u3055\u305b\u308b\u624b\u9593\u304c\u767a\u751f\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n <div class=\"flex justify-around items-center p-4 bg-gray-100 rounded-lg\">\n <span class=\"text-4xl\" title=\"\u30e1\u30fc\u30eb\">\ud83d\udce7<\/span>\n <span class=\"text-4xl\" title=\"\u96fb\u8a71\">\ud83d\udcde<\/span>\n <span class=\"text-4xl\" title=\"SNS\">\ud83d\udcac<\/span>\n <span class=\"text-4xl\" title=\"\u30c1\u30e3\u30c3\u30c8\">\ud83d\udde8\ufe0f<\/span>\n <\/div>\n <\/div>\n <div class=\"bg-white rounded-lg shadow-md p-6\">\n <h3 class=\"text-2xl font-bold text-[#1e90ff] mb-4\">\u5bfe\u5fdc\u54c1\u8cea\u306e\u3070\u3089\u3064\u304d<\/h3>\n <p class=\"text-gray-700\">\u30ca\u30ec\u30c3\u30b8\u304c\u5c5e\u4eba\u5316\u3057\u3001\u62c5\u5f53\u8005\u306b\u3088\u3063\u3066\u30b5\u30dd\u30fc\u30c8\u306e\u8cea\u304c\u5909\u52d5\u3002\u4e00\u8cab\u3057\u305f\u9ad8\u54c1\u8cea\u306a\u30b5\u30fc\u30d3\u30b9\u3092\u63d0\u4f9b\u3067\u304d\u305a\u3001\u9867\u5ba2\u6e80\u8db3\u5ea6\u306e\u7dad\u6301\u304c\u56f0\u96e3\u306b\u306a\u3063\u3066\u3044\u307e\u3059\u3002<\/p>\n <div class=\"chart-container h-64 md:h-72\">\n <canvas id=\"qualityChart\"><\/canvas>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"solution\" class=\"mb-12 text-center\">\n <div class=\"bg-white rounded-lg shadow-xl p-8\">\n <h2 class=\"text-3xl font-bold text-[#007bff] mb-4\">\u305d\u306e\u8ab2\u984c\u3001YetiForceCRM\u304c\u89e3\u6c7a\u3057\u307e\u3059<\/h2>\n <p class=\"text-xl text-gray-700 max-w-3xl mx-auto mb-6\">\u6563\u5728\u3057\u305f\u60c5\u5831\u30921\u3064\u306e\u30d7\u30e9\u30c3\u30c8\u30d5\u30a9\u30fc\u30e0\u306b\u7d71\u5408\u3057\u3001\u696d\u52d9\u30d7\u30ed\u30bb\u30b9\u3092\u53ef\u8996\u5316\u3002\u30c7\u30fc\u30bf\u306b\u57fa\u3065\u3044\u305f\u3001\u6226\u7565\u7684\u306a\u30ab\u30b9\u30bf\u30de\u30fc\u30b5\u30fc\u30d3\u30b9\u3092\u5b9f\u73fe\u3057\u307e\u3059\u3002<\/p>\n <div class=\"flex flex-col md:flex-row items-center justify-center text-2xl font-bold text-gray-700\">\n <div class=\"flex items-center\">\n <span class=\"text-4xl mx-2\">\ud83d\udce7<\/span>\n <span class=\"text-4xl mx-2\">\ud83d\udcde<\/span>\n <span class=\"text-4xl mx-2\">\ud83d\udcac<\/span>\n <\/div>\n <div class=\"flow-arrow-down md:flow-arrow\"><\/div>\n <div class=\"p-4 bg-[#007bff] text-white rounded-full shadow-lg\">\n YETIWORKS\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"features\" class=\"mb-12\">\n <h2 class=\"text-3xl font-bold text-center text-[#007bff] mb-6\">\u30c7\u30fc\u30bf\u3067\u898b\u308bYetiForceCRM\u306e\u30a4\u30f3\u30d1\u30af\u30c8<\/h2>\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-8\">\n\n <div class=\"bg-white rounded-lg shadow-md p-6\">\n <h3 class=\"text-2xl font-bold text-[#1e90ff] mb-2\">\u554f\u3044\u5408\u308f\u305b\u5bfe\u5fdc\u6642\u9593\u306e\u5287\u7684\u306a\u77ed\u7e2e<\/h3>\n <p class=\"text-gray-600 mb-4\">\u60c5\u5831\u5171\u6709\u306e\u8fc5\u901f\u5316\u3068\u81ea\u52d5\u5316\u306b\u3088\u308a\u3001\u5e73\u5747\u5bfe\u5fdc\u6642\u9593\u304c\u5927\u5e45\u306b\u6539\u5584\u3002\u9867\u5ba2\u3092\u5f85\u305f\u305b\u306a\u3044\u4f53\u5236\u3092\u69cb\u7bc9\u3057\u307e\u3059\u3002<\/p>\n <div class=\"chart-container\">\n <canvas id=\"responseTimeChart\"><\/canvas>\n <\/div>\n <\/div>\n\n <div class=\"bg-white rounded-lg shadow-md p-6\">\n <h3 class=\"text-2xl font-bold text-[#1e90ff] mb-2\">\u554f\u3044\u5408\u308f\u305b\u30c1\u30e3\u30cd\u30eb\u306e\u7d71\u5408\u7ba1\u7406<\/h3>\n <p class=\"text-gray-600 mb-4\">\u5168\u3066\u306e\u30c1\u30e3\u30cd\u30eb\u304b\u3089\u306e\u554f\u3044\u5408\u308f\u305b\u3092\u4e00\u5143\u7ba1\u7406\u3002\u30e1\u30fc\u30eb\u7d4c\u7531\u306e\u554f\u3044\u5408\u308f\u305b\u304c\u6700\u3082\u591a\u3044\u73fe\u72b6\u3092\u6b63\u78ba\u306b\u628a\u63e1\u3057\u3001\u30ea\u30bd\u30fc\u30b9\u3092\u6700\u9069\u914d\u5206\u3057\u307e\u3059\u3002<\/p>\n <div class=\"chart-container\">\n <canvas id=\"channelDonutChart\"><\/canvas>\n <\/div>\n <\/div>\n\n <div class=\"bg-white rounded-lg shadow-md p-6 md:col-span-2\">\n <h3 class=\"text-2xl font-bold text-[#1e90ff] mb-2\">\u554f\u984c\u89e3\u6c7a\u65b9\u6cd5\u306e\u5909\u5316<\/h3>\n <p class=\"text-gray-600 mb-4\">\u30ca\u30ec\u30c3\u30b8\u30d9\u30fc\u30b9\u3068\u9867\u5ba2\u30dd\u30fc\u30bf\u30eb\u306e\u6d3b\u7528\u3067\u3001\u9867\u5ba2\u81ea\u8eab\u306b\u3088\u308b\u81ea\u5df1\u89e3\u6c7a\u7387\u304c\u5411\u4e0a\u3002\u62c5\u5f53\u8005\u306f\u3088\u308a\u8907\u96d1\u306a\u554f\u984c\u306b\u96c6\u4e2d\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n <div class=\"chart-container h-80 md:h-96 max-h-[500px]\">\n <canvas id=\"resolutionStackedBarChart\"><\/canvas>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"transformation\" class=\"mb-12\">\n <h2 class=\"text-3xl font-bold text-center text-[#007bff] mb-6\">\u5c0e\u5165\u304c\u3082\u305f\u3089\u3059\u300c3\u3064\u306e\u5909\u9769\u300d<\/h2>\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-8\">\n <div class=\"bg-white rounded-lg shadow-xl p-6 text-center transform hover:scale-105 transition-transform duration-300\">\n <div class=\"text-6xl font-black text-[#1e90ff]\">45%<\/div>\n <h3 class=\"text-2xl font-bold mt-2 text-gray-800\">\u751f\u7523\u6027\u5411\u4e0a<\/h3>\n <p class=\"mt-2 text-gray-600\">\u81ea\u52d5\u5316\u3068\u60c5\u5831\u5171\u6709\u306b\u3088\u308a\u3001\u554f\u3044\u5408\u308f\u305b\u5bfe\u5fdc\u306e\u6642\u9593\u3092\u5927\u5e45\u306b\u77ed\u7e2e\u3002\u90e8\u9580\u5168\u4f53\u306e\u751f\u7523\u6027\u304c\u98db\u8e8d\u7684\u306b\u5411\u4e0a\u3057\u307e\u3059\u3002<\/p>\n <\/div>\n <div class=\"bg-white rounded-lg shadow-xl p-6 text-center transform hover:scale-105 transition-transform duration-300\">\n <div class=\"text-6xl font-black text-[#1e90ff]\">92%<\/div>\n <h3 class=\"text-2xl font-bold mt-2 text-gray-800\">\u9867\u5ba2\u6e80\u8db3\u5ea6<\/h3>\n <p class=\"mt-2 text-gray-600\">\u8fc5\u901f\u3067\u4e00\u8cab\u6027\u306e\u3042\u308b\u9ad8\u54c1\u8cea\u306a\u30b5\u30dd\u30fc\u30c8\u304c\u9867\u5ba2\u306e\u4fe1\u983c\u3092\u91b8\u6210\u3002\u30ed\u30a4\u30e4\u30eb\u30c6\u30a3\u5411\u4e0a\u306b\u76f4\u7d50\u3057\u307e\u3059\u3002<\/p>\n <\/div>\n <div class=\"bg-white rounded-lg shadow-xl p-6 text-center transform hover:scale-105 transition-transform duration-300\">\n <div class=\"text-6xl font-black text-[#1e90ff]\">30%<\/div>\n <h3 class=\"text-2xl font-bold mt-2 text-gray-800\">\u30b5\u30dd\u30fc\u30c8\u30b3\u30b9\u30c8\u524a\u6e1b<\/h3>\n <p class=\"mt-2 text-gray-600\">\u81ea\u5df1\u89e3\u6c7a\u306e\u4fc3\u9032\u306b\u3088\u308a\u3001\u5358\u7d14\u306a\u554f\u3044\u5408\u308f\u305b\u304c\u6e1b\u5c11\u3057\u3001\u30b5\u30dd\u30fc\u30c8\u30b3\u30b9\u30c8\u306e\u6700\u9069\u5316\u3092\u5b9f\u73fe\u3057\u307e\u3059\u3002<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"value-creation\" class=\"text-center bg-white rounded-lg shadow-xl p-8 mb-12\">\n <h2 class=\"text-3xl font-bold text-[#007bff] mb-6\">\u30b5\u30dd\u30fc\u30c8\u304b\u3089\u59cb\u307e\u308b\u5168\u793e\u7684\u306a\u4fa1\u5024\u5275\u9020\u30b5\u30a4\u30af\u30eb<\/h2>\n <p class=\"text-xl text-gray-700 max-w-4xl mx-auto mb-8\">\u30ab\u30b9\u30bf\u30de\u30fc\u30b5\u30dd\u30fc\u30c8\u3067\u5f97\u3089\u308c\u305f\u300c\u9867\u5ba2\u306e\u751f\u306e\u58f0\u300d\u306f\u3001CRM\u3092\u901a\u3058\u3066\u5168\u793e\u306e\u5927\u5207\u306a\u8cc7\u7523\u306b\u5909\u308f\u308a\u307e\u3059\u3002<\/p>\n <div class=\"flex flex-col md:flex-row items-center justify-center space-y-4 md:space-y-0 md:space-x-4\">\n <div class=\"p-4 rounded-lg bg-blue-100 border-2 border-blue-300\">\n <h4 class=\"font-bold text-lg text-blue-800\">\ud83d\udcde \u9867\u5ba2\u30b5\u30dd\u30fc\u30c8<\/h4>\n <p class=\"text-blue-700\">\u554f\u3044\u5408\u308f\u305b\u30fb\u8981\u671b\u3092\u53ce\u96c6<\/p>\n <\/div>\n <div class=\"flow-arrow-down md:flow-arrow\"><\/div>\n <div class=\"p-4 rounded-lg bg-green-100 border-2 border-green-300\">\n <h4 class=\"font-bold text-lg text-green-800\">\ud83d\udcc8 \u30c7\u30fc\u30bf\u5206\u6790<\/h4>\n <p class=\"text-green-700\">\u30cb\u30fc\u30ba\u30fb\u8ab2\u984c\u3092\u53ef\u8996\u5316<\/p>\n <\/div>\n <div class=\"flow-arrow-down md:flow-arrow\"><\/div>\n <div class=\"p-4 rounded-lg bg-purple-100 border-2 border-purple-300\">\n <h4 class=\"font-bold text-lg text-purple-800\">\ud83d\udee0\ufe0f \u88fd\u54c1\u30fb\u30b5\u30fc\u30d3\u30b9\u6539\u5584<\/h4>\n <p class=\"text-purple-700\">\u9867\u5ba2\u306e\u58f0\u3092\u53cd\u6620<\/p>\n <\/div>\n <div class=\"flow-arrow-down md:flow-arrow\"><\/div>\n <div class=\"p-4 rounded-lg bg-yellow-100 border-2 border-yellow-300\">\n <h4 class=\"font-bold text-lg text-yellow-800\">\ud83c\udfaf \u30de\u30fc\u30b1\u30c6\u30a3\u30f3\u30b0<\/h4>\n <p class=\"text-yellow-700\">\u7684\u78ba\u306a\u65bd\u7b56\u3092\u5c55\u958b<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"summary-table\" class=\"bg-white rounded-lg shadow-xl p-6 md:p-8\">\n <h2 class=\"text-3xl font-bold text-center text-[#007bff] mb-6\">\u6a5f\u80fd\u3068\u52b9\u679c\u306e\u30b5\u30de\u30ea\u30fc<\/h2>\n <div class=\"overflow-x-auto\">\n <table class=\"w-full text-sm md:text-base text-left text-gray-600\">\n <thead class=\"bg-blue-50\">\n <tr>\n <th class=\"p-4 font-bold text-blue-800\">\u4e3b\u8981\u6a5f\u80fd<\/th>\n <th class=\"p-4 font-bold text-blue-800\">\u5177\u4f53\u7684\u306a\u6d3b\u7528\u65b9\u6cd5<\/th>\n <th class=\"p-4 font-bold text-blue-800\">\u89e3\u6c7a\u3055\u308c\u308b\u8ab2\u984c<\/th>\n <th class=\"p-4 font-bold text-blue-800\">\u5c0e\u5165\u306b\u3088\u308b\u52b9\u679c<\/th>\n <\/tr>\n <\/thead>\n <tbody>\n <tr class=\"border-b\">\n <td class=\"p-4 font-semibold\">\u30b1\u30fc\u30b9\u7ba1\u7406<\/td>\n <td class=\"p-4\">\u554f\u3044\u5408\u308f\u305b\u53d7\u4ed8\u304b\u3089\u89e3\u6c7a\u307e\u3067\u306e\u30d7\u30ed\u30bb\u30b9\u7ba1\u7406\u3001\u62c5\u5f53\u8005\u5272\u308a\u5f53\u3066\u3001\u5c65\u6b74\u8a18\u9332<\/td>\n <td class=\"p-4\">\u554f\u3044\u5408\u308f\u305b\u5bfe\u5fdc\u306e\u9045\u5ef6\u3001\u60c5\u5831\u5171\u6709\u4e0d\u8db3<\/td>\n <td class=\"p-4\">\u8fc5\u901f\u304b\u3064\u4e01\u5be7\u306a\u5bfe\u5fdc\u3001\u30b5\u30dd\u30fc\u30c8\u4f53\u5236\u306e\u52b9\u7387\u5316<\/td>\n <\/tr>\n <tr class=\"border-b bg-gray-50\">\n <td class=\"p-4 font-semibold\">\u9867\u5ba2\u30dd\u30fc\u30bf\u30eb<\/td>\n <td class=\"p-4\">\u9867\u5ba2\u81ea\u8eab\u306b\u3088\u308b\u554f\u3044\u5408\u308f\u305b\u9032\u6357\u78ba\u8a8d\u3001FAQ\u691c\u7d22<\/td>\n <td class=\"p-4\">\u9867\u5ba2\u304b\u3089\u306e\u91cd\u8907\u554f\u3044\u5408\u308f\u305b\u3001\u30b5\u30dd\u30fc\u30c8\u62c5\u5f53\u8005\u306e\u8ca0\u62c5\u5897<\/td>\n <td class=\"p-4\">\u9867\u5ba2\u81ea\u8eab\u306b\u3088\u308b\u554f\u984c\u89e3\u6c7a\u4fc3\u9032\u3001\u30b5\u30dd\u30fc\u30c8\u30b3\u30b9\u30c8\u524a\u6e1b<\/td>\n <\/tr>\n <tr class=\"border-b\">\n <td class=\"p-4 font-semibold\">\u30ca\u30ec\u30c3\u30b8\u30d9\u30fc\u30b9<\/td>\n <td class=\"p-4\">\u3088\u304f\u3042\u308b\u8cea\u554f\uff08FAQ\uff09\u3084\u89e3\u6c7a\u7b56\u306e\u84c4\u7a4d\u3001\u691c\u7d22\u6a5f\u80fd<\/td>\n <td class=\"p-4\">\u60c5\u5831\u5171\u6709\u4e0d\u8db3\u3001\u62c5\u5f53\u8005\u306b\u3088\u308b\u5bfe\u5fdc\u54c1\u8cea\u306e\u3070\u3089\u3064\u304d<\/td>\n <td class=\"p-4\">\u9867\u5ba2\u306e\u81ea\u5df1\u89e3\u6c7a\u4fc3\u9032\u3001\u7d44\u7e54\u5168\u4f53\u306e\u5bfe\u5fdc\u529b\u5411\u4e0a<\/td>\n <\/tr>\n <tr class=\"bg-gray-50\">\n <td class=\"p-4 font-semibold\">\u9867\u5ba2\u5c65\u6b74\u306e\u4e00\u5143\u7ba1\u7406<\/td>\n <td class=\"p-4\">\u8907\u6570\u30c1\u30e3\u30cd\u30eb\u304b\u3089\u306e\u9867\u5ba2\u30a4\u30f3\u30bf\u30e9\u30af\u30b7\u30e7\u30f3\u5c65\u6b74\u306e\u7d71\u5408\u30fb\u53ef\u8996\u5316<\/td>\n <td class=\"p-4\">\u9867\u5ba2\u60c5\u5831\u30fb\u5bfe\u5fdc\u5c65\u6b74\u306e\u6563\u5728\u3001\u5bfe\u5fdc\u306e\u5c5e\u4eba\u5316<\/td>\n <td class=\"p-4\">\u9867\u5ba2\u7406\u89e3\u306e\u6df1\u5316\u3001\u4e00\u8cab\u3057\u305f\u9ad8\u54c1\u8cea\u306a\u30b5\u30dd\u30fc\u30c8\u63d0\u4f9b<\/td>\n <\/tr>\n <\/tbody>\n <\/table>\n <\/div>\n <\/section>\n\n <\/main>\n\n <footer class=\"text-center p-8 mt-8 bg-white\">\n <p class=\"text-xl font-bold text-[#007bff] mb-2\">\u9867\u5ba2\u3068\u306e\u7d46\u3092\u3001\u672a\u6765\u306e\u529b\u306b\u3002<\/p>\n <\/footer>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', function () {\n\n const wrapLabel = (label) => {\n const maxLength = 16;\n if (typeof label !== 'string' || label.length <= maxLength) {\n return label;\n }\n const words = label.split(' ');\n let lines = [];\n let currentLine = '';\n words.forEach(word => {\n if ((currentLine + ' ' + word).length > maxLength) {\n lines.push(currentLine);\n currentLine = word;\n } else {\n currentLine = currentLine ? currentLine + ' ' + word : word;\n }\n });\n lines.push(currentLine);\n return lines;\n };\n\n const tooltipTitleCallback = {\n plugins: {\n tooltip: {\n callbacks: {\n title: function(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 }\n }\n };\n\n const qualityChartCtx = document.getElementById('qualityChart')?.getContext('2d');\n if (qualityChartCtx) {\n new Chart(qualityChartCtx, {\n type: 'bar',\n data: {\n labels: ['\u62c5\u5f53\u8005A', '\u62c5\u5f53\u8005B', '\u62c5\u5f53\u8005C', '\u62c5\u5f53\u8005D'],\n datasets: [{\n label: '\u9867\u5ba2\u6e80\u8db3\u5ea6\u30b9\u30b3\u30a2',\n data: [65, 92, 78, 58],\n backgroundColor: ['#add8e6', '#007bff', '#1e90ff', '#add8e6'],\n borderColor: '#ffffff',\n borderWidth: 2\n }]\n },\n options: {\n ...tooltipTitleCallback,\n responsive: true,\n maintainAspectRatio: false,\n scales: {\n y: {\n beginAtZero: true,\n max: 100\n }\n },\n plugins: {\n ...tooltipTitleCallback.plugins,\n legend: {\n display: false\n },\n title: {\n display: true,\n text: '\u62c5\u5f53\u8005\u306b\u3088\u308b\u30b5\u30dd\u30fc\u30c8\u54c1\u8cea\u306e\u3070\u3089\u3064\u304d'\n }\n }\n }\n });\n }\n\n const responseTimeChartCtx = document.getElementById('responseTimeChart')?.getContext('2d');\n if (responseTimeChartCtx) {\n new Chart(responseTimeChartCtx, {\n type: 'line',\n data: {\n labels: ['\u5c0e\u5165\u524d Q1', '\u5c0e\u5165\u524d Q2', '\u5c0e\u5165\u5f8c Q3', '\u5c0e\u5165\u5f8c Q4', '\u5c0e\u5165\u5f8c Q5'],\n datasets: [{\n label: '\u5e73\u5747\u5bfe\u5fdc\u6642\u9593 (\u5206)',\n data: [120, 125, 70, 45, 30],\n fill: true,\n borderColor: '#007bff',\n backgroundColor: 'rgba(0, 123, 255, 0.1)',\n tension: 0.3\n }]\n },\n options: {\n ...tooltipTitleCallback,\n responsive: true,\n maintainAspectRatio: false,\n scales: {\n y: {\n beginAtZero: true,\n title: {\n display: true,\n text: '\u6642\u9593 (\u5206)'\n }\n }\n },\n plugins: {\n ...tooltipTitleCallback.plugins,\n legend: {\n display: false\n }\n }\n }\n });\n }\n\n const channelDonutChartCtx = document.getElementById('channelDonutChart')?.getContext('2d');\n if (channelDonutChartCtx) {\n new Chart(channelDonutChartCtx, {\n type: 'doughnut',\n data: {\n labels: ['\u30e1\u30fc\u30eb', '\u96fb\u8a71', 'SNS\u30fb\u30c1\u30e3\u30c3\u30c8', '\u305d\u306e\u4ed6'],\n datasets: [{\n label: '\u554f\u3044\u5408\u308f\u305b\u30c1\u30e3\u30cd\u30eb\u6bd4\u7387',\n data: [55, 25, 15, 5],\n backgroundColor: ['#007bff', '#1e90ff', '#00bfff', '#add8e6'],\n hoverOffset: 4\n }]\n },\n options: {\n ...tooltipTitleCallback,\n responsive: true,\n maintainAspectRatio: false,\n plugins: {\n ...tooltipTitleCallback.plugins,\n legend: {\n position: 'bottom',\n }\n }\n }\n });\n }\n\n const resolutionStackedBarChartCtx = document.getElementById('resolutionStackedBarChart')?.getContext('2d');\n if (resolutionStackedBarChartCtx) {\n const originalLabels = ['\u5c0e\u5165\u524d', '\u5c0e\u5165\u5f8c'];\n const processedLabels = originalLabels.map(wrapLabel);\n\n new Chart(resolutionStackedBarChartCtx, {\n type: 'bar',\n data: {\n labels: processedLabels,\n datasets: [\n {\n label: '\u62c5\u5f53\u8005\u304c\u76f4\u63a5\u5bfe\u5fdc',\n data: [90, 40],\n backgroundColor: '#007bff',\n },\n {\n label: '\u9867\u5ba2\u304c\u81ea\u5df1\u89e3\u6c7a (\u30ca\u30ec\u30c3\u30b8\u30d9\u30fc\u30b9\u7b49)',\n data: [5, 35],\n backgroundColor: '#1e90ff',\n },\n {\n label: '\u81ea\u52d5\u5fdc\u7b54\u3067\u89e3\u6c7a',\n data: [5, 25],\n backgroundColor: '#add8e6',\n }\n ]\n },\n options: {\n ...tooltipTitleCallback,\n responsive: true,\n maintainAspectRatio: false,\n scales: {\n x: {\n stacked: true,\n },\n y: {\n stacked: true,\n max: 100,\n ticks: {\n callback: function(value) {\n return value + '%'\n }\n }\n }\n },\n plugins: {\n ...tooltipTitleCallback.plugins,\n legend: {\n position: 'bottom'\n }\n }\n }\n });\n }\n\n});\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>YetiForceCRM | \u30ab\u30b9\u30bf\u30de\u30fc\u30b5\u30fc\u30d3\u30b9\u5909\u9769\u30a4\u30f3\u30d5\u30a9\u30b0\u30e9\u30d5\u30a3\u30c3\u30af YetiForceCRM\u3067\u5b9f\u73fe\u3059\u308b\u3001\u6b21\u4e16\u4ee3\u306e\u30ab\u30b9\u30bf\u30de\u30fc\u30b5\u30fc\u30d3\u30b9 \u30c7\u30fc\u30bf\u3067\u898b\u308b\u3001\u9867\u5ba2\u6e80\u8db3\u5ea6\u3068\u751f\u7523\u6027\u5411\u4e0a\u306e\u8ecc\u8de1 \u591a\u304f\u306e\u4f01\u696d\u304c\u76f4\u9762\u3059\u308b\u300c\u5171\u901a\u306e\u58c1\u300d \u60c5\u5831 […]<\/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-712","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/yetiworks.jp\/index.php?rest_route=\/wp\/v2\/pages\/712","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=712"}],"version-history":[{"count":4,"href":"https:\/\/yetiworks.jp\/index.php?rest_route=\/wp\/v2\/pages\/712\/revisions"}],"predecessor-version":[{"id":893,"href":"https:\/\/yetiworks.jp\/index.php?rest_route=\/wp\/v2\/pages\/712\/revisions\/893"}],"wp:attachment":[{"href":"https:\/\/yetiworks.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=712"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}