{"version":3,"file":"component---src-pages-column-details-c-0092-tsx-80fd1ec068880bbab03e.js","mappings":"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","sources":["webpack://beaver-help/./src/components/molecules/columnAuthor005.tsx","webpack://beaver-help/./src/components/molecules/popupBanner.tsx","webpack://beaver-help/./src/components/molecules/usefulFunctionLayout005.tsx","webpack://beaver-help/./src/components/molecules/columnDetailInner0092.tsx","webpack://beaver-help/./src/pages/column/details/C0092.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 columnAuthor005 = () => (\n  <Wrapper>\n    <section>\n      <img src=\"/images/column/authors/a005.png\" alt=\"キンクラコラム編集部\" />\n      <div className=\"author-wrap\">\n        <p className=\"author-name\">キンクラコラム編集部</p>\n      </div>\n    </section>\n    <div className=\"detail-txt\">\n      キンクラコラム編集部です！このコラムでは、効率的な業務運営や経営判断のサポートを目指し\n      <br />\n      勤怠管理や経理に関する役立つ情報をわかりやすくお伝えします！\n    </div>\n  </Wrapper>\n)\n\nexport default columnAuthor005\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 */\nconst usefulFunctionLayout005 = () => (\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      <div className=\"p-screen-wrap\">\n        <img\n          src=\"/images/column/functions/f005.jpg\"\n          alt=\"キンクラのマイデータ\"\n        />\n      </div>\n    </section>\n  </Wrapper>\n)\n\nexport default usefulFunctionLayout005\n","import styled from '@emotion/styled'\nimport React from 'react'\nimport { Link } from 'gatsby'\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 ColumnDetailInner0092 = (props: Props): JSX.Element => (\n  <Wrapper>\n    <ColumnH1 label=\"勤怠管理のワークフローはシステム化できる！メリットや選び方を解説\" />\n    {/** TODO 川上申し送り事項：▼投稿日をここに表示 */}\n    <p className=\"p-txt-date\">2024.03.21</p>\n    <section>\n      {/** TODO 川上申し送り事項：▼記事投稿（？）で作成された内容がここに入る予定 */}\n      <img src=\"/images/column/details/c0092.jpg\" alt=\"キンクラコラム画像92\" />\n      <p>\n        勤怠管理における申請や承認、決済などの手続きに無駄があると、業務効率が下がってしまう可能性があります。このような問題を解決する方法として、ワークフロー機能が付いた勤怠管理システムの導入がおすすめです。\n        <br />\n        しかし、具体的にどのようなシステムを導入すればいいのか分からないという方も多いでしょう。この記事では、そもそもワークフローとは何か、またワークフロー機能付きの勤怠管理システムを選定する際のポイントなどを解説します。\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        <br />\n        1.従業員が出退勤や残業など勤務時間の申請をする。\n        <br />\n        2.管理部署や上司が承認を行う。\n        <br />\n        3.給与計算の担当部署が事務手続きをすることで給与支払いが実施される。\n        <br />\n        このように、社内の業務には一定のワークフローが存在しています。\n        <br />\n        ワークフローに無駄が生じていると業務の効率が下がってしまうため、ワークフローを適宜見直していく必要があります。\n      </p>\n      <div id=\"toc1-2\">\n        <h2>ワークフローはシステム化で効率化できる</h2>\n      </div>\n      <p>\n        ワークフローの運用方法は企業によって異なりますが、紙媒体で管理をしている企業も少なくありません。紙による運用では、書類の作成や保管に手間がかかり、紛失などのリスクも高いです。\n        <br />\n        さらに、ワークフローが不明瞭な状態になり、従業員の管理が難しくなる場合もあります。\n        <br />\n        申請や報告の漏れ、手続きの不備などの問題が起きた場合は、迅速な対処が必要です。このような問題は、ワークフローをシステム化することで解決できます。\n      </p>\n      <div id=\"toc1-3\">\n        <h2>ワークフロー機能を備えた勤怠管理システムによる効率化がおすすめ</h2>\n      </div>\n      <p>\n        ワークフローシステムには様々なものがありますが、特におすすめしたいのはワークフロー機能付きの勤怠管理システムです。\n        <br />\n        ワークフロー機能を備えた勤怠管理システムを導入すれば、日々の出退勤管理はもちろん、休日出勤や残業の記録、遅刻や早退の申請、休暇や代休申請などを一元管理可能です。さらに、申請の承認や給与計算システムとの連携を行うことができます。\n        <br />\n        <br />\n        以上のように、ワークフローはシステムを導入することによって効率化できますが、更に効率を上げるために、ワークフロー機能を備えた勤怠管理システムを導入するのがおすすめです。\n      </p>\n      <div id=\"toc2\">\n        <h1>ワークフロー機能付きの勤怠管理システムを導入するメリット</h1>\n      </div>\n      <img\n        src=\"/images/column/details/c0092_g01.jpg\"\n        alt=\"キンクラコラム画像92\"\n      />\n      <p>\n        ワークフロー機能付きの勤怠管理システムを導入することで、さまざまなメリットがあります。\n        <br />\n        そのメリットとは何か？いくつかご紹介します。\n      </p>\n      <div id=\"toc2-1\">\n        <h2>複雑な作業を簡略化できる</h2>\n      </div>\n      <p>\n        ワークフロー機能を備えた勤怠管理システムを導入することで複雑な作業を簡略化できます。従業員ごとに勤務時間や休日、残業などの状況が異なるため、勤怠管理や集計には膨大な手間がかかります。しかし、システムを導入することで、集計作業の手間を削減でき、業務の効率化が可能です。\n      </p>\n      <Link\n        to={useRouteParam('https://www.kintaicloud.jp/column/details/C0069/')}\n        className=\"column-detail-link\"\n      >\n        関連記事：手動での勤怠管理からの脱却！無料の勤怠管理システムのメリットとは？\n      </Link>\n      <div id=\"toc2-2\">\n        <h2>業務の流れを可視化できる</h2>\n      </div>\n      <p>\n        一連の業務を可視化できるのも、メリットのひとつです。\n        <br />\n        例えば何かしらの申請作業を行う場合、ワークフローが可視化されることによって、「誰に承認をもらえばいいのか？」が分かりやすくなります。\n        <br />\n        それにより、スムーズに承認作業をすることが可能になります。\n      </p>\n      <div id=\"toc2-3\">\n        <h2>他システムとの連携ができる</h2>\n      </div>\n      <p>\n        システムによっては、社内の既存システムと連携させて使うことが可能です。\n        <br />\n        すべての情報を一元管理できるためチェックミスも減り、スピーディーかつ効率的に業務を処理できるでしょう。\n      </p>\n      <div id=\"toc2-4\">\n        <h2>ペーパーレス化につながる</h2>\n      </div>\n      <p>\n        勤怠管理システムを導入すれば、申請や承認、決裁など一連のワークフローをすべてシステム上で行えます。\n        <br />\n        紙の書類を作成し、印刷したりファイリングしたりする手間もかかりません。\n        <br />\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/c0092_g02.jpg\"\n        alt=\"キンクラコラム画像92\"\n      />\n      <p>\n        ワークフロー機能付き勤怠管理システムを選定する際にはどのようなことに気を付ければよいのか、いくつかポイントを解説します。\n      </p>\n      <Link\n        to={useRouteParam('https://www.kintaicloud.jp/column/details/C0067/')}\n        className=\"column-detail-link\"\n      >\n        関連記事：勤怠管理は経費精算付きのクラウドがおすすめ！ その理由とは...\n      </Link>\n      <div id=\"toc3-1\">\n        <h2>クラウド型を導入する</h2>\n      </div>\n      <p>\n        ワークフロー機能付きの勤怠管理システムは、クラウド型がおすすめです。\n        <br />\n        クラウド型は導入コストを抑えることができ、設定やメンテナンスにもそれほど手間がかかりません。また、システムの提供会社が保守対応やセキュリティ対策をしてくれるのもクラウド型の魅力です。複雑な設定をせず、すぐに運用できるクラウド型サービスで、効率的よくシステムを運用しましょう。\n      </p>\n      <Link\n        to={useRouteParam('https://www.kintaicloud.jp/column/details/C0067/')}\n        className=\"column-detail-link\"\n      >\n        関連記事：勤怠管理は経費精算付きのクラウドがおすすめ！ その理由とは...\n      </Link>\n      <div id=\"toc3-2\">\n        <h2>操作はしやすいか</h2>\n      </div>\n      <p>\n        操作性の悪いシステムを導入した結果「使いにくい」と敬遠されてしまうケースもあります。システムを導入するときには、すべての従業員が負担なく使えるかを確認しておきましょう。直感的に操作できるものを選べば、申請や承認にかかる時間を削減できます。\n      </p>\n      <div id=\"toc3-3\">\n        <h2>コスト面</h2>\n      </div>\n      <p>\n        勤怠管理システムを導入するにあたってはコスト面が気になると思います。\n        勤怠管理システムの料金プランは企業の規模や利用人数、機能の幅によって変動します。\n        単に安いものを選んで導入するのではなく、必要な機能が過不足なく備わっているかを確認しましょう。\n        <br />\n        <br />\n        上記のポイントを押さえることによって、自社に最適なワークフロー付きの勤怠管理システムを導入することが出来ます。\n      </p>\n      <Link\n        to={useRouteParam('https://www.kintaicloud.jp/column/details/C0090/')}\n        className=\"column-detail-link\"\n      >\n        関連記事：無料で使える勤怠管理アプリとは？メリットや注意点も紹介\n      </Link>\n      <div id=\"toc4\">\n        <h1>ワークフロー機能付きの勤怠管理システムなら「キンクラ」</h1>\n      </div>\n      <p>\n        ここまでで、ワークフロー機能付きの勤怠管理システムを導入するメリットや選定する際のポイントを解説していきました。\n        ワークフロー機能付きの勤怠管理システムを導入する際には、この記事で紹介したことを参考にすることで自社に最適なシステムを導入することが出来ます。\n        もし、ワークフロー機能付きの勤怠管理システムの導入を検討しているならば「キンクラ」もおすすめめです。\n        <br />\n        キンクラは、全機能が無料でお試しできるトライアルがあります。\n        そのため、実際に導入してみて、自社に合った勤怠管理システムなのかどうかを試すことが出来ます。\n      </p>\n      <Link\n        to={useRouteParam('https://www.kintaicloud.jp/column/details/C0090/')}\n        className=\"column-detail-link\"\n      >\n        ⇒ 勤怠管理システム「キンクラ」について詳しく知りたい方はここをクリック\n      </Link>\n    </section>\n  </Wrapper>\n)\n\nexport default ColumnDetailInner0092\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 ColumnDetailInner0092 from '../../../components/molecules/columnDetailInner0092'\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 useRouteParam from '../../../hooks/useRouteParam'\nimport ColumnAuthor005 from '../../../components/molecules/columnAuthor005'\nimport UsefulFunctionLayout005 from '../../../components/molecules/usefulFunctionLayout005'\n\n/**\n * コラム記事詳細画面\n * @constructor\n */\nconst C0092 = () => {\n  const paths: ITopicPath[] = [\n    { title: 'キンクラコラムTOP', link: useRouteParam('/column') },\n    { title: 'コラム記事一覧', link: useRouteParam('/column/list') },\n    {\n      title: '勤怠管理のワークフローはシステム化できる！メリットや選び方を解説',\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/C0092/\"\n        ogType=\"article\"\n        ogTitle=\"勤怠管理のワークフローはシステム化できる！メリットや選び方を解説\"\n        ogDescription=\"勤怠管理のワークフローを効率化するためにはシステム化が不可欠です。本記事では、ワークフローの意味や効率化する方法やワークフロー機能付きの勤怠管理システムの導入メリット、選定ポイントについて解説します。\"\n        ogSiteName=\"キンクラ - 客先常駐特化型のクラウド勤怠管理システム\"\n        ogImage=\"https://www.kintaicloud.jp/images/column/details/c0092.jpg\"\n      />\n      <ColumnDetailsBody>\n        {/** ポップアップバナー */}\n        <PopupBanner />\n        {/** 記事本体 */}\n        <ColumnDetailInner0092 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        <ColumnAuthor005 />\n        {/** お役立ち機能 */}\n        <UsefulFunctionLayout005 />\n        {/** 前後記事への遷移 */}\n        <ColumnBackAndForth />\n        {/** カルーセルバナー */}\n        <CarouselBanner />\n        {/** 関連記事 */}\n        {/* <ColumnRelationCards0092 /> */}\n      </ColumnDetailsBody>\n    </ColumnLayout>\n  )\n}\n\nexport default C0092\n\nexport const pageQuery = graphql`\n  query C0092 {\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","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":""}