{"version":3,"file":"component---src-pages-column-details-c-0088-tsx-31ef252fa77607be2ddf.js","mappings":"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","sources":["webpack://beaver-help/./src/components/molecules/columnAuthor004.tsx","webpack://beaver-help/./src/components/molecules/popupBanner.tsx","webpack://beaver-help/./src/components/molecules/usefulFunctionLayout019.tsx","webpack://beaver-help/./src/components/molecules/columnDetailInner0088.tsx","webpack://beaver-help/./src/pages/column/details/C0088.tsx"],"sourcesContent":["import styled from '@emotion/styled'\nimport React from 'react'\nimport BreakPoints from '../../styles/breakPoints'\n\nconst Wrapper = styled.article`\n  position: relative;\n  margin-bottom: 60px;\n  border: solid 2px #e5e5e5;\n  border-radius: 5px;\n  padding: 20px;\n\n  section {\n    display: flex;\n    justify-content: left;\n    align-items: center;\n\n    img {\n      width: 110px;\n      height: 110px;\n      margin: 0 20px 0 0;\n    }\n\n    .author-wrap {\n      position: relative;\n      width: 100%;\n\n      p {\n        line-height: 2;\n\n        &.author-name {\n          font-size: 18px;\n          font-weight: 600;\n\n          span {\n            font-weight: 400;\n            font-size: 14px;\n          }\n        }\n\n        &.author-job {\n          position: relative;\n          width: 100%;\n          margin-left: 14px;\n\n          &:before {\n            display: block;\n            content: '';\n            position: absolute;\n            width: 0;\n            height: 0;\n            top: 10px;\n            left: -14px;\n            border-left: 8px solid #3ec7b3;\n            border-top: 4px solid transparent;\n            border-bottom: 4px solid transparent;\n          }\n\n          a {\n            margin-right: 15px;\n          }\n        }\n      }\n    }\n  }\n\n  .detail-txt {\n    border-top: solid 1px #dcdee1;\n    margin-top: 20px;\n    padding-top: 15px;\n    line-height: 1.8;\n  }\n\n  ${BreakPoints.large} {\n  }\n`\n\n/**\n * コラム記事詳細：オーサ情報 辰本 実香（タツモト ミカ）\n * @constructor\n */\nconst columnAuthor004 = () => (\n  <Wrapper>\n    {/** TODO 川上申し送り事項：▼記事投稿（？）で作成された内容がここに入る予定 */}\n    <section>\n      <img src=\"/images/column/authors/a004.png\" alt=\"辰本　実香\" />\n      <div className=\"author-wrap\">\n        <p className=\"author-name\">\n          辰本 実香<span>（タツモト ミカ）</span>\n        </p>\n        <p className=\"author-job\">株式会社Efficiency M 代表取締役</p>\n      </div>\n    </section>\n    <div className=\"detail-txt\">\n      税理士法人での勤務経験を活かし、バックオフィス関連の業務効率化を提案する傍ら、経営者が抱える実務上の問題解決をサポートしている。\n      <br />\n      また、業務効率化にまつわるDX化を中心に、バックオフィス業務に関連する幅広い分野の執筆活動も行う。\n    </div>\n  </Wrapper>\n)\n\nexport default columnAuthor004\n","import React, { useEffect, useState } from 'react'\nimport styled from '@emotion/styled'\nimport { a } from 'aws-amplify'\nimport useRouteParam from '../../hooks/useRouteParam'\n\nconst Wrapper = styled.div`\n  position: fixed;\n  bottom: 100px;\n  left: 30px;\n  width: 300px;\n  height: 250px;\n  z-index: 100;\n  img {\n    height: 250px;\n    width: 300px;\n    border: 2px solid #e5e5e5;\n  }\n  .popup-close {\n    position: absolute;\n    top: -10px;\n    right: -10px;\n    width: 29px;\n    height: 29px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: #fff;\n    border-radius: 50%;\n    border: solid 2px #e5e5e5;\n    text-decoration: none;\n    &:hover {\n      text-decoration: none;\n    }\n  }\n`\n\n// ▼ここで何ピクセルスクロールしたら表示するのかを設定してね\nconst PAGE_Y_OFFSET = 1500\n\nconst PopupBanner = () => {\n  const [show, setShow] = useState<boolean>(false)\n\n  const changeShow = () => {\n    if (window.pageYOffset > PAGE_Y_OFFSET) {\n      setShow(true)\n    } else {\n      setShow(false)\n    }\n  }\n\n  const [visible, setVisible] = useState(true)\n\n  useEffect(() => {\n    window.addEventListener('scroll', changeShow)\n    return () => window.removeEventListener('scroll', changeShow)\n  }, [])\n\n  const [no, setNo] = useState(-1)\n  useEffect(() => {\n    setNo(Math.floor(Math.random() * 2))\n  }, [])\n\n  const routeParam = useRouteParam(\n    'https://www.kintaicloud.jp/contact/?utm_source=column&utm_medium=popup&utm_campaign=popup_202301'\n  )\n  const routeParam2 = useRouteParam(\n    'https://www.kintaicloud.jp/contact/?utm_source=column&utm_medium=popup&utm_campaign=popup_202302'\n  )\n\n  if (show)\n    return (\n      <Wrapper style={{ visibility: visible ? 'visible' : 'hidden' }}>\n        {no === 0 && (\n          <div>\n            <a target=\"_blank\" href={routeParam} rel=\"noreferrer\">\n              <img\n                src=\"/images/column/common/popupBanner01.png\"\n                alt=\"キンクラ\"\n              />\n            </a>\n          </div>\n        )}\n        {no === 1 && (\n          <div>\n            <a target=\"_blank\" href={routeParam2} rel=\"noreferrer\">\n              <img\n                src=\"/images/column/common/popupBanner02.png\"\n                alt=\"キンクラ\"\n              />\n            </a>\n          </div>\n        )}\n        {/** ▼閉じるボタン */}\n        {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}\n        <a className=\"popup-close\" onClick={() => setVisible(!visible)}>\n          ×\n        </a>\n      </Wrapper>\n    )\n  return null\n}\n\nexport default PopupBanner\n","import styled from '@emotion/styled'\nimport { Link } from 'gatsby'\nimport React from 'react'\nimport WingSvg from '../atoms/wingSvg'\nimport useRouteParam from '../../hooks/useRouteParam'\n\nconst Wrapper = styled.article`\n  position: relative;\n  margin-bottom: 30px;\n  font-size: 16px;\n\n  h1 {\n    border-bottom: solid 2px #243650;\n    position: relative;\n    display: inline-block;\n    width: auto;\n    padding: 0 6px 2px 0;\n    margin-bottom: 10px;\n\n    .svg-icon {\n      width: 24px;\n      height: 24px;\n      position: absolute;\n      right: -22px;\n      bottom: -3px;\n    }\n  }\n\n  section {\n    display: flex;\n    padding: 20px 25px 20px 20px;\n    background: #f2faf9;\n    border-radius: 5px;\n    justify-content: space-between;\n\n    h2 {\n      font-size: 22px;\n      color: #ff9600;\n      display: flex;\n      align-items: center;\n      margin-bottom: 15px;\n\n      img {\n        width: 65px;\n        margin: 0 5px 0 0;\n        height: auto;\n      }\n    }\n\n    p {\n      margin: 0 0 5px 5px;\n    }\n\n    .p-function-link {\n      position: relative;\n      top: 9px;\n      right: 2px;\n      left: 20px;\n\n      &:before {\n        display: block;\n        content: '';\n        position: absolute;\n        width: 0;\n        height: 0;\n        top: 5px;\n        left: -14px;\n        border-left: 8px solid #3ec7b3;\n        border-top: 4px solid transparent;\n        border-bottom: 4px solid transparent;\n      }\n    }\n\n    .p-screen-wrap {\n      width: 260px;\n      height: auto;\n      margin: 5px 5px 0;\n\n      img {\n        width: 100%;\n        box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);\n      }\n    }\n  }\n`\n\n/**\n * コラム記事下部：キンクラの便利な機能レイアウト_有給休暇設定\n * @constructor\n */\nconst usefulFunctionLayout019 = () => (\n  <Wrapper>\n    <h1>\n      キンクラの便利な機能\n      <WingSvg />\n    </h1>\n    <section>\n      <div>\n        <h2>\n          <img\n            src=\"/images/official/function/imgFunction37.png\"\n            alt=\"キンクラの有給休暇設定\"\n          />\n          有給休暇設定\n        </h2>\n        <p>\n          勤務年数に応じた有給休暇の付与日と付与日数などを設定することができます。\n        </p>\n        <Link className=\"p-function-link\" to={useRouteParam('/function/')}>\n          キンクラの機能を見る\n        </Link>\n      </div>\n      {/*\n      <div className=\"p-screen-wrap\">\n        <img src=\"/images/column/functions/f007.jpg\" alt=\"キンクラの残業管理\" />\n      </div> */}\n    </section>\n  </Wrapper>\n)\n\nexport default usefulFunctionLayout019\n","import styled from '@emotion/styled'\nimport React from 'react'\nimport BreakPoints from '../../styles/breakPoints'\nimport ColumnH1 from '../atoms/columnH1'\nimport Introduction004 from './Introduction004'\nimport Introduction005 from './Introduction005'\nimport Introduction006 from './Introduction006'\nimport Introduction007 from './Introduction007'\nimport Introduction008 from './Introduction008'\nimport Introduction009 from './Introduction009'\nimport Introduction010 from './Introduction010'\nimport Introduction011 from './Introduction011'\nimport Introduction012 from './Introduction012'\nimport useRouteParam from '../../hooks/useRouteParam'\n\nconst Wrapper = styled.article`\n  position: relative;\n  margin-bottom: 30px;\n\n  .p-txt-date {\n    margin-top: -10px;\n    color: #ababab;\n  }\n\n  section {\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: space-between;\n    font-size: 16px;\n    color: #505050;\n    line-height: 1.6em;\n\n    h1 {\n      color: #414141;\n      font-size: 22px;\n      line-height: 1.4em;\n      background: #f5f5f5;\n      border-radius: 3px;\n      position: relative;\n      width: 100%;\n      padding: 5px 5px 5px 20px;\n      margin-bottom: 30px;\n      margin-top: 10px;\n\n      &:before {\n        content: '';\n        position: absolute;\n        width: 10px;\n        background: #77d7c9;\n        left: 0;\n        top: 0;\n        border-radius: 3px 0 0 3px;\n        height: 100%;\n      }\n    }\n\n    h2 {\n      color: #414141;\n      font-size: 22px;\n      line-height: 1.4em;\n      background: #ffffff;\n      border-radius: 3px;\n      position: relative;\n      width: 100%;\n      padding: 5px 5px 5px 20px;\n      margin-top: 10px;\n      margin-bottom: 30px;\n\n      &:before {\n        content: '';\n        position: absolute;\n        width: 10px;\n        background: #d8d8d8;\n        left: 0;\n        top: 0;\n        border-radius: 3px 0 0 3px;\n        height: 100%;\n      }\n    }\n\n    h3 {\n      color: #414141;\n      font-size: 16px;\n      line-height: 1.4em;\n      background: #ffffff;\n      width: fit-content;\n      padding: 10px 0 8px;\n      margin-top: -10px;\n      margin-bottom: 20px;\n      border-top: solid 2px #e5e5e5;\n      border-bottom: solid 2px #e5e5e5;\n    }\n\n    p {\n      padding-bottom: 30px;\n      line-height: 2;\n      position: relative;\n\n      span {\n        background: linear-gradient(transparent 60%, #ff6 60%);\n        font-weight: 600;\n      }\n\n      .p-list-link {\n        position: absolute;\n        top: 6px;\n        right: 2px;\n\n        &:before {\n          display: block;\n          content: '';\n          position: absolute;\n          width: 0;\n          height: 0;\n          top: 7px;\n          left: -14px;\n          border-left: 8px solid #3ec7b3;\n          border-top: 4px solid transparent;\n          border-bottom: 4px solid transparent;\n        }\n      }\n\n      &.txt-color-red {\n        color: #ff7070;\n      }\n    }\n\n    .link-div {\n      width: 100%;\n      display: flex;\n      justify-content: left;\n      padding-bottom: 30px;\n\n      > div {\n        width: 50px;\n      }\n\n      .link-p {\n        width: calc(100% - 50px);\n\n        .p-list-link {\n          position: absolute;\n          top: -3px;\n          left: 30px;\n\n          &:before {\n            display: block;\n            content: '';\n            position: absolute;\n            width: 0;\n            height: 0;\n            top: 11px;\n            left: -14px;\n            border-left: 8px solid #3ec7b3;\n            border-top: 4px solid transparent;\n            border-bottom: 4px solid transparent;\n          }\n        }\n      }\n    }\n\n    img {\n      width: 100%;\n      height: auto;\n      padding-bottom: 30px;\n    }\n\n    //  表用のCSS\n    table {\n      width: 100%;\n      margin-bottom: 15px;\n\n\n      td {\n        padding: 5px;\n        border: solid 1px rgba(200, 200, 200, 1);\n        vertical-align: top;\n      }\n    }\n  }\n\n}\n\n${BreakPoints.large} {\n}\n`\ntype Props = {\n  /** 広告の番号 */\n  no: number\n}\n\n/**\n * コラム記事詳細：記事本体\n * @constructor\n */\nconst ColumnDetailInner0088 = (props: Props): JSX.Element => {\n  const routeParam = useRouteParam(\n    'https://www.kintaicloud.jp/column/details/C0067/'\n  )\n  const routeParam2 = useRouteParam('https://www.kintaicloud.jp/')\n  const routeParam3 = useRouteParam('https://www.kintaicloud.jp/')\n  return (\n    <Wrapper>\n      <ColumnH1 label=\"勤怠管理システムの選び方や比較ポイントは？ 導入方法も紹介\" />\n      {/** TODO 川上申し送り事項：▼投稿日をここに表示 */}\n      <p className=\"p-txt-date\">2024.02.13</p>\n      <section>\n        {/** TODO 川上申し送り事項：▼記事投稿（？）で作成された内容がここに入る予定 */}\n        <img\n          src=\"/images/column/details/c0088.jpg\"\n          alt=\"キンクラコラム画像88\"\n        />\n        <p>\n          自社に合わない勤怠管理システムを導入してしまうと余計なコストがかかってしまう可能性があります。そのため、\n          <span>自社に合ったシステムを選ぶことが重要</span>になります。\n          <br />\n          しかしながら、最適なシステムを選定するためには、どのようなことに気を付けなければいけないのか分からないという方もいるでしょう。\n          <br />\n          そこでこの記事では、勤怠管理システムの選び方から導入方法まで解説します。\n          <br />\n        </p>\n        <div id=\"toc1\">\n          <h1>勤怠管理システムの選び方が重要な理由とは</h1>\n        </div>\n        <p>\n          まずは、なぜ勤怠管理システムの選び方が重要な理由について解説します。\n        </p>\n        <div id=\"toc1-1\">\n          <h2>余計なコストがかかってしまう</h2>\n        </div>\n        <p>\n          自社に合わない勤怠管理システムを選んでしまうと、余計なコストがかかってしまう恐れがあります。\n          <br />\n          極端な例ですが、従業員の人数が少ないにも関わらず、大企業向けの高価な勤怠管理システムを導入してしまい、その結果コストが余計にかかってしまうといったことが起こりえます。\n          <br />\n          このように、\n          <span>\n            自社に合わない勤怠管理システムを選定してしまうと、余計なコストが発生\n          </span>\n          してしまう場合があるため、慎重に選定することが重要です。\n          <br />\n        </p>\n        <div id=\"toc1-2\">\n          <h2>自社の環境に合わないシステムを選んでしまう</h2>\n        </div>\n        <p>\n          自社の環境に合わないシステムを選んでしまうことで、余計な労力が発生してしまう可能性があります。例えば、フレックスタイム制を導入して柔軟な働き方を採用しているが、導入した勤怠管理システムがこの柔軟性に対応できないため、調整が必要となり余分な手間が発生します。\n          <br />\n          <br />\n          以上のようなリスクを避けるためにも、勤怠管理システムの選び方が重要になります。\n        </p>\n        <a href={routeParam} className=\"column-detail-link\">\n          参照記事：勤怠管理は経費精算付きのクラウドがおすすめ！ その理由とは...\n        </a>\n        <div id=\"toc2\">\n          <h1>自社に最適な勤怠管理システムの選び方や比較のポイントとは</h1>\n        </div>\n        <p>\n          勤怠管理システムを選定する際に、様々なシステムと比較検討をすることでしょう。\n          <br />\n          ここでは比較する際のポイントをご紹介します。\n        </p>\n        <div id=\"toc2-1\">\n          <h2>自社に必要な機能があるか</h2>\n        </div>\n        <p>\n          <span>\n            自社の業務フローや特定のニーズに合致する機能が備わっているか\n          </span>\n          を確認することが重要です。\n          <br />\n          例えば、フレックスタイム制の対応可否や、独自の休暇制度に対応できるかといったことを確認します。また、余計なコストをかけないためにも、必要な機能のみを備えたシステムをなるべく選定することが大切です。\n        </p>\n        <div id=\"toc2-2\">\n          <h2>費用対効果は合うか</h2>\n        </div>\n        <p>\n          自社の規模に合わない勤怠管理システムを導入してしまうと、当然余計なコストがかかります。\n          <br />\n          そのため、勤怠管理システムを導入しても費用対効果が合うかどうかを確認する必要があります。\n        </p>\n        <div id=\"toc2-3\">\n          <h2>サポート体制が整っているか</h2>\n        </div>\n        <p>\n          導入時だけではなく、導入後もサポートはあるのか？また、トラブルが発生した場合にも、迅速に対応をしてくれるのか？等、\n          <span>サポート体制を確認</span>することも重要です。\n          <br />\n          ただし、サポートの内容によっては追加費用が掛かる場合もあるため、それらも含めて確認しておく必要があります。\n        </p>\n        <div id=\"toc2-4\">\n          <h2>無料トライアルはあるか</h2>\n        </div>\n        <p>\n          勤怠管理システムを導入する際には、無料トライアルのあるシステムを導入するのがおすすめです。どれだけ事前に調査をしても、実際に導入をしてみなければ、自社に適合するかどうかは分かりません。\n          <br />\n          そのため、事前調査では問題なかったが、導入後に様々なトラブルが発生してしまう可能性もあります。\n          <span>\n            無料トライアルのある勤怠管理システムであれば試験導入ができる\n          </span>\n          ため、そのようなリスクを避けられます。\n          <br />\n          <a href={routeParam2} className=\"column-detail-link\">\n            ⇒無料トライアルで「全機能」が使える、勤怠管理システム「キンクラ」とは\n          </a>\n        </p>\n        <div id=\"toc2-5\">\n          <h2>法令の改正に対応しているか</h2>\n        </div>\n        <p>\n          <span>法改正に合わせてシステムをアップデート</span>\n          してくれるかどうかを確認することも重要です。\n          <br />\n          法令違反が起これば当然、罰則等のリスクが発生します。そのようなリスクを負わないためにも、法改正に対応してくれるシステムを選定するのが良いでしょう。ただし、システムによっては法改正のアップデートは有料の場合もあります。そのため、料金なども含めて確認することが大切です。\n          <br />\n          <br />\n          以上のポイントを押さえることで、自社に適切な勤怠管理システムの選定ができます。\n        </p>\n        {/** ここに9パターンの広告設定する */}\n        {props.no === 0 && <Introduction004 />}\n        {props.no === 1 && <Introduction005 />}\n        {props.no === 2 && <Introduction006 />}\n        {props.no === 3 && <Introduction007 />}\n        {props.no === 4 && <Introduction008 />}\n        {props.no === 5 && <Introduction009 />}\n        {props.no === 6 && <Introduction010 />}\n        {props.no === 7 && <Introduction011 />}\n        {props.no === 8 && <Introduction012 />}\n        <div id=\"toc3\">\n          <h1>勤怠管理システムは選び方だけではなく導入も重要</h1>\n        </div>\n        <img\n          src=\"/images/column/details/c0088_g01.jpg\"\n          alt=\"キンクラコラム画像88\"\n        />\n        <p>\n          勤怠管理システムは選び方だけではなく導入の手順も重要です。\n          <br />\n          以下の手順で、自社に最適な勤怠管理システムを導入することが出来ます。\n        </p>\n        <div id=\"toc3-1\">\n          <h2>勤怠管理システムを選定する</h2>\n        </div>\n        <p>\n          まずは、導入をする勤怠管理システムを選定します。ここでは、各機能や料金プランなどを確認して、自社に最適な勤怠管理システムを選定することが重要です。\n          <br />\n          選定する際のポイントは、前の項目で解説をしていますので、そちらを参照してください。\n        </p>\n        <div id=\"toc3-2\">\n          <h2>勤怠管理システムを導入することを従業員へ事前に周知する</h2>\n        </div>\n        <p>\n          勤怠管理システムを選定したら、次は従業員にシステムを導入することを\n          <span>事前に周知</span>します。\n          <br />\n          とくに告知もなく、いきなり勤怠管理システムを導入してしまうと従業員は混乱してしまいます。そのため、勤怠管理システムをいつ導入するのか？そのシステムはどのようなもので、どのように操作をするのか？等を事前に周知しておきましょう。\n        </p>\n        <div id=\"toc3-3\">\n          <h2>試験導入をする</h2>\n        </div>\n        <p>\n          勤怠管理システムの選定が完了し従業員への事前周知を実施したら、次は試験導入をします。\n          <br />\n          先述した通り、事前に調査をしても、実際に導入をしてみなければ、自社に適合するかどうかは分かりません。そのため、\n          <span>まずは試験導入</span>\n          をして操作性や機能に問題がないかどうかを検証することが大切です。\n        </p>\n        <div id=\"toc3-4\">\n          <h2>正式に導入を決定する</h2>\n        </div>\n        <p>\n          試験導入で問題がなければ、勤怠管理システムを正式に導入します。\n          <br />\n          この段階では、試験導入で得られたフィードバックを活用して、最終的な調整を行うことが重要です。将来的に必要になりそうな機能であっても、\n          <span>慣れるまでは現状必要な機能のみ</span>\n          に抑えて導入することが成功への鍵です。\n          <br />\n          <br />\n          以上の手順を取り入れることで、最適な勤怠管理システムを選ぶことができます。\n        </p>\n        <div id=\"toc4\">\n          <h1>勤怠管理システムは本格運用までの準備が重要</h1>\n        </div>\n        <p>\n          勤怠管理システムを導入することによって、勤怠管理を効率化できます。\n          <br />\n          とはいえ、自社のニーズに合った機能を持つものを比較し、法令の改正に対応しているか、そしてサポート体制が整っているかを確認して導入することが大切です。\n          <br />\n          また、システムを導入した後は従業員に操作方法を周知し、試用期間を設けることが重要です。\n          <br />\n          それによって、システムが本格的に運用される前に問題点を見つけ出し、改善策につながります。\n          <br />\n          これらのステップを踏むことで、勤怠管理システムは企業の成長を支える強力なツールとなります。\n          <br />\n          <br />\n          もし、勤怠管理システムの導入を検討しているならば、「キンクラ」がおすすめです。\n          <br />\n          「キンクラ」では、全機能が無料で使える「無料トライアル」を実施していますので、勤怠管理システムの導入を検討しているならば「キンクラ」をお試しください。\n          <br />\n        </p>\n        <a href={routeParam3} className=\"column-detail-link\">\n          ⇒ 勤怠管理システム「キンクラ」について詳しく知りたい方はここをクリック\n        </a>\n      </section>\n    </Wrapper>\n  )\n}\n\nexport default ColumnDetailInner0088\n","import { graphql } from 'gatsby'\nimport React, { useEffect, useState } from 'react'\nimport ColumnBackAndForth from '../../../components/atoms/columnBackAndForth'\nimport SEO from '../../../components/atoms/seo'\nimport { ITopicPath } from '../../../components/atoms/topicPath'\nimport ColumnDetailInner0088 from '../../../components/molecules/columnDetailInner0088'\nimport ColumnDetailsBody from '../../../components/organisms/columnDetailsBody'\nimport ColumnLayout from '../../../components/organisms/columnLayout'\nimport Conclusion001 from '../../../components/molecules/Conclusion001'\nimport Conclusion002 from '../../../components/molecules/Conclusion002'\nimport Conclusion003 from '../../../components/molecules/Conclusion003'\nimport Conclusion004 from '../../../components/molecules/Conclusion004'\nimport Conclusion005 from '../../../components/molecules/Conclusion005'\nimport Conclusion006 from '../../../components/molecules/Conclusion006'\nimport Conclusion007 from '../../../components/molecules/Conclusion007'\nimport Conclusion008 from '../../../components/molecules/Conclusion008'\nimport Conclusion009 from '../../../components/molecules/Conclusion009'\nimport CarouselBanner from '../../../components/molecules/carouselBanner'\nimport PopupBanner from '../../../components/molecules/popupBanner'\nimport ColumnAuthor004 from '../../../components/molecules/columnAuthor004'\nimport UsefulFunctionLayout019 from '../../../components/molecules/usefulFunctionLayout019'\nimport useRouteParam from '../../../hooks/useRouteParam'\n\n/**\n * コラム記事詳細画面\n * @constructor\n */\nconst C0088 = () => {\n  const paths: ITopicPath[] = [\n    { title: 'キンクラコラムTOP', link: useRouteParam('/column') },\n    { title: 'コラム記事一覧', link: useRouteParam('/column/list') },\n    {\n      title: '勤怠管理システムの選び方や比較ポイントは？ 導入方法も紹介\\n',\n    },\n  ]\n\n  // 0~8ランダム数字を保存\n  const [no, setNo] = useState(-1)\n  useEffect(() => {\n    setNo(Math.floor(Math.random() * 9))\n  }, [])\n\n  return (\n    <ColumnLayout paths={paths}>\n      <SEO\n        title=\"勤怠管理システムの選び方や比較ポイントは？ 導入方法も紹介\"\n        description=\"企業の効率的な勤怠管理のため、最適なシステムの選定と導入が不可欠です。本記事では、コスト削減につながるシステム選びと導入のポイントについて詳しく解説します。\"\n        ogUrl=\"https://kintaicloud.jp/column/details/C0088/\"\n        ogType=\"article\"\n        ogTitle=\"勤怠管理システムの選び方や比較ポイントは？ 導入方法も紹介\"\n        ogDescription=\"企業の効率的な勤怠管理のため、最適なシステムの選定と導入が不可欠です。本記事では、コスト削減につながるシステム選びと導入のポイントについて詳しく解説します。\"\n        ogSiteName=\"キンクラ - 客先常駐特化型のクラウド勤怠管理システム\"\n        ogImage=\"https://www.kintaicloud.jp/images/column/details/c0088.jpg\"\n      />\n      <ColumnDetailsBody>\n        {/** ポップアップバナー */}\n        <PopupBanner />\n        {/** 記事本体 */}\n        <ColumnDetailInner0088 no={no} />\n\n        {/** ここに9パターンの広告設定する */}\n        {no === 0 && <Conclusion001 />}\n        {no === 1 && <Conclusion002 />}\n        {no === 2 && <Conclusion003 />}\n        {no === 3 && <Conclusion004 />}\n        {no === 4 && <Conclusion005 />}\n        {no === 5 && <Conclusion006 />}\n        {no === 6 && <Conclusion007 />}\n        {no === 7 && <Conclusion008 />}\n        {no === 8 && <Conclusion009 />}\n\n        {/** オーサ情報 */}\n        <ColumnAuthor004 />\n        {/** お役立ち機能 */}\n        <UsefulFunctionLayout019 />\n        {/** 前後記事への遷移 */}\n        <ColumnBackAndForth />\n        {/** カルーセルバナー */}\n        <CarouselBanner />\n        {/** 関連記事 */}\n        {/* <ColumnRelationCards0088 /> */}\n      </ColumnDetailsBody>\n    </ColumnLayout>\n  )\n}\n\nexport default C0088\n\nexport const pageQuery = graphql`\n  query C0088 {\n    site {\n      siteMetadata {\n        title\n      }\n    }\n  }\n`\n"],"names":["Wrapper","BreakPoints","src","alt","className","useState","show","setShow","changeShow","window","pageYOffset","visible","setVisible","useEffect","addEventListener","removeEventListener","no","setNo","Math","floor","random","routeParam","useRouteParam","routeParam2","style","visibility","target","href","rel","onClick","Link","to","props","routeParam3","label","id","Introduction004","Introduction005","Introduction006","Introduction007","Introduction008","Introduction009","Introduction010","Introduction011","Introduction012","paths","title","link","description","ogUrl","ogType","ogTitle","ogDescription","ogSiteName","ogImage","Conclusion001","Conclusion002","Conclusion003","Conclusion004","Conclusion005","Conclusion006","Conclusion007","Conclusion008","Conclusion009"],"sourceRoot":""}