{"version":3,"file":"component---src-pages-column-details-c-0002-tsx-3171da42ad785cb9c295.js","mappings":"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","sources":["webpack://beaver-help/./src/components/atoms/arrowSvg.tsx","webpack://beaver-help/./src/components/atoms/columnBtnCard.tsx","webpack://beaver-help/./src/components/atoms/officialCommonBtn.tsx","webpack://beaver-help/./src/components/molecules/columnAuthor002.tsx","webpack://beaver-help/./src/components/molecules/columnRelationCards0002.tsx","webpack://beaver-help/./src/components/molecules/usefulFunctionLayout001.tsx","webpack://beaver-help/./src/components/molecules/columnDetailInner0002.tsx","webpack://beaver-help/./src/pages/column/details/C0002.tsx"],"sourcesContent":["import styled from '@emotion/styled'\nimport React from 'react'\n\nconst Wrapper = styled.div`\n padding: 0;\n height: 20px;\n width: 20px;\n margin-bottom: 8px;\n .cls-1{\n fill: #FFF;\n }\n`\n\n/**\n * SVGアイコンコンポーネント\n * 製品サイトボタン用矢印アイコン\n */\nconst ArrowSvg = (): JSX.Element => (\n \n \n \n \n \n \n)\nexport default ArrowSvg\n","import styled from '@emotion/styled'\nimport { Link } from 'gatsby'\nimport React from 'react'\n\nconst StyledLink = styled(Link)`\n padding: 7px;\n width: 220px;\n border-radius: 5px;\n border: solid 3px transparent;\n margin-bottom: 15px;\n &:hover {\n border-color: #77d7c9;\n text-decoration: underline solid rgba(255, 255, 255, 0);\n }\n .img-wrap {\n width: 200px;\n height: 100px;\n overflow: hidden;\n margin-bottom: 12px;\n img {\n width: 110%;\n height: auto;\n }\n }\n h2 {\n font-size: 18px;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n margin-bottom: 8px;\n }\n span {\n color: #ababab;\n }\n`\n\ntype Props = {\n /** クラス名 */\n className?: string\n /** リンク先 */\n href: string\n /** 画像 */\n imgId: string\n /** タイトル */\n label: string\n /** タイトル */\n date: string\n}\n\n/**\n * コラム用カード型ボタンリンクコンポーネント\n * @param props\n * @constructor\n */\nconst ColumnBtnCard = (props: Props): JSX.Element => {\n const { className = '' } = props\n\n return (\n \n
\n {/** TODO 川上申し送り事項:▼記事ごとに指定されて画像がここに表示されます */}\n \n
\n {/** TODO 川上申し送り事項:▼記事のタイトルがここに表示されます */}\n

{props.label}

\n {/** TODO 川上申し送り事項:▼記事の投稿日がここに表示されます */}\n {props.date}\n
\n )\n}\n\nexport default ColumnBtnCard\n","import styled from '@emotion/styled'\nimport React from 'react'\nimport BreakPoints from '../../styles/breakPoints'\n\nconst Button = styled.button`\n clear: both;\n position: relative;\n overflow: hidden;\n transform: translate3d(0, 0, 0);\n transition: ease 0.2s;\n\n :after {\n content: '';\n display: block;\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n pointer-events: none;\n background-image: radial-gradient(circle, #fff 10%, transparent 11%);\n background-repeat: no-repeat;\n background-position: 50%;\n transform: scale(10, 10);\n opacity: 0;\n transition: transform 0.4s, opacity 1s;\n }\n\n :active:after {\n transform: scale(0, 0);\n opacity: 0.5;\n transition: 0s;\n }\n\n &:hover {\n opacity: 1;\n }\n\n &.small {\n /* サービスサイト用調整中 */\n display: inline-flex;\n min-width: 90px;\n height: 34px;\n font-size: 16px;\n font-weight: 600;\n border-radius: 100vh;\n line-height: 16px;\n padding: 0 20px;\n justify-content: center;\n align-items: center;\n }\n\n &.medium {\n /* サービスサイト用調整中 */\n display: inline-flex;\n min-width: 120px;\n height: 48px;\n font-size: 16px;\n font-weight: 600;\n border-radius: 100vh;\n line-height: 16px;\n padding: 0 20px;\n justify-content: center;\n align-items: center;\n }\n\n &.large {\n /* サービスサイト用調整中 */\n display: inline-flex;\n min-width: 120px;\n height: 48px;\n font-size: 16px;\n font-weight: 600;\n border-radius: 100vh;\n line-height: 16px;\n padding: 0 20px;\n justify-content: center;\n align-items: center;\n }\n\n ${BreakPoints.medium} {\n &.large {\n min-width: 50px;\n font-size: 16px;\n height: 34px;\n padding: 0 10px;\n }\n }\n\n &.mega {\n /* サービスサイト用調整済 */\n display: inline-flex;\n height: 85px;\n font-size: 30px;\n font-weight: 600;\n border-radius: 100vh;\n padding: 0 40px;\n justify-content: center;\n align-items: center;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n }\n\n ${BreakPoints.large} {\n &.mega {\n height: 60px;\n font-size: 26px;\n padding: 0 10px;\n }\n }\n\n ${BreakPoints.smallest} {\n &.mega {\n height: 60px;\n font-size: 24px;\n }\n }\n\n &.weak {\n /* サービスサイト用調整済 */\n color: #00b5a6;\n background-color: #ffffff;\n border: solid 2px #19ba9b;\n overflow: hidden;\n transition: 0.2s;\n\n :before {\n content: '';\n z-index: -1;\n position: absolute;\n width: 110%;\n height: 101%;\n top: 0;\n right: -110%;\n background-color: #19ba9b;\n transition: 0.2s;\n }\n\n :hover {\n color: #ffffff;\n background-position: 0 105%;\n background-color: #19ba9b;\n transition: 0.22s;\n\n :hover:before {\n right: 0;\n }\n }\n }\n\n &.normal {\n /* サービスサイト用調整済 */\n color: #ffffff;\n background: #19ba9b;\n border: solid 2px #19ba9b;\n overflow: hidden;\n\n :before {\n content: '';\n z-index: -1;\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n right: -100%;\n background-color: #ffffff;\n transition: 0.2s;\n }\n\n :hover {\n color: #19ba9b;\n background-position: 0 100%;\n\n :hover:before {\n right: 0;\n }\n }\n }\n\n &.strong {\n /* サービスサイト用調整中 */\n color: #ffffff;\n background: #ff9900;\n background: linear-gradient(\n to bottom right,\n #ff860d 15%,\n #ffbf00 75%,\n #ffff00 95%\n );\n background-size: 110% 110%;\n background-position: -2px -2px;\n border: solid 2px #ffbf00;\n\n :before {\n content: '';\n z-index: -1;\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n right: -100%;\n background-color: #ff860d;\n transition: 0.2s;\n }\n\n :hover {\n transform: scale(1.1, 1.1);\n border-color: #ff860d;\n\n :hover:before {\n right: 0;\n }\n }\n }\n\n &.weak-caution {\n color: #ff5454;\n background-color: #ffffff;\n border: solid 1px #ff5454;\n }\n\n &.caution {\n color: #ffffff;\n background: #d62d2d;\n border: solid 1px #f78787;\n }\n\n &.disabled {\n color: rgba(210, 210, 210, 1);\n background: rgba(220, 220, 220, 0.3);\n border: solid 1px rgba(220, 220, 220, 1);\n\n &:hover {\n border-color: rgba(220, 220, 220, 0.8);\n }\n }\n`\n\nexport type ICommonBtnProps = React.DetailedHTMLProps<\n React.ButtonHTMLAttributes,\n HTMLButtonElement\n> & {\n size?: 'small' | 'medium' | 'large' | 'mega'\n level?: 'weak' | 'normal' | 'strong' | 'weak-caution' | 'caution' | 'disabled'\n}\n/**\n * サービスサイト用共通ボタン\n * 強弱/大小で組み合わせて使うぞ\n * 立体感を出したくないときは各画面から.no-shadowを指定するようにする\n * @param props\n */\nconst OfficialCommonBtn = (props: ICommonBtnProps): JSX.Element => {\n const { className = '', size = 'small', level = 'weak' } = props\n return (\n \n )\n}\nexport default OfficialCommonBtn\n","import styled from '@emotion/styled'\nimport { Link } from 'gatsby'\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 columnAuthor002 = () => (\n \n {/** TODO 川上申し送り事項:▼記事投稿(?)で作成された内容がここに入る予定 */}\n
\n \"加藤\n
\n

加藤 知美

\n

\n \n エスプリーメ社労士事務所\n \n 社会保険労務士\n

\n
\n
\n
\n 愛知県社会保険労務士会所属。総合商社、会計事務所、社労士事務所の勤務経験を経て、2014年に「エスプリーメ社労士事務所」を設立。\n
\n 総合商社時では秘書・経理・総務が一体化した管理部署で指揮を執り、人事部と連携した数々の社員面接にも同席。会計事務所、社労士事務所勤務では顧問先の労務管理に加えセミナー講師としても活動。\n
\n 現在は文章能力を活かしたオリジナルの就業規則・広報誌作成事業の2本柱を掲げ、専門知識を分かりやすく伝えることをモットーに企業の支援に取り組んでいる。\n
\n
\n)\n\nexport default columnAuthor002\n","import styled from '@emotion/styled'\nimport React from 'react'\nimport BreakPoints from '../../styles/breakPoints'\nimport ColumnBtnCard from '../atoms/columnBtnCard'\nimport ColumnH1 from '../atoms/columnH1'\nimport useRouteParam from '../../hooks/useRouteParam'\n\nconst Wrapper = styled.article`\n section {\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n\n span {\n display: none;\n }\n }\n\n ${BreakPoints.large} {\n margin-bottom: 10px;\n }\n`\n\n/**\n * 関連記事カードセット\n * TODO 川上申し送り事項:記事詳細下部に表示されるコンポーネントです。\n * ここでは、表示している記事に関連した他の記事3件が表示される予定です\n * @constructor\n */\nconst ColumnRelationCards0002 = () => {\n const routePram = useRouteParam('/column/details/C0003/')\n\n return (\n \n \n
\n \n
\n
\n )\n}\n\nexport default ColumnRelationCards0002\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 display: flex;\n align-items: center;\n justify-content: right;\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 usefulFunctionLayout001 = () => (\n \n

\n キンクラの便利な機能\n \n

\n
\n
\n

\n \n 打刻\n

\n

\n 専用機器はいりません!\n
\n パソコン、スマートフォンで1タッチで出勤/退勤/休憩の打刻ができます。\n

\n \n キンクラの機能を見る\n \n
\n
\n \n
\n
\n
\n)\n\nexport default usefulFunctionLayout001\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-list-link {\n position: absolute;\n top: 9px;\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 .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: auto;\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\n span {\n background: linear-gradient(transparent 60%, #ff6 60%);\n font-weight: 600;\n }\n }\n\n img {\n width: 100%;\n height: auto;\n padding-bottom: 30px;\n }\n }\n\n .toc {\n border: 1px solid #ababab;\n padding: 20px 40px;\n margin: 0 auto 30px;\n\n ol {\n padding-left: 30px;\n }\n\n p {\n text-align: center;\n padding-bottom: 10px;\n }\n\n a {\n text-decoration: underline;\n }\n\n li {\n list-style-type: decimal;\n display: list-item;\n }\n\n ul {\n padding-left: 30px;\n\n li {\n list-style-type: circle;\n }\n }\n }\n\n ${BreakPoints.large} {\n }\n`\ntype Props = {\n /** 広告の番号 */\n no: number\n}\n\n/**\n * コラム記事詳細:記事本体\n * @constructor\n */\nconst ColumnDetailInner0002 = (props: Props): JSX.Element => {\n const routePram = useRouteParam(\n 'https://www.kintaicloud.jp/column/details/C0068/'\n )\n const routePram2 = useRouteParam(\n 'https://www.kintaicloud.jp/column/details/C0067/'\n )\n const routePram3 = useRouteParam(\n 'https://www.kintaicloud.jp/column/details/C0069/'\n )\n const routePram4 = useRouteParam('https://www.kintaicloud.jp/')\n const routePram5 = useRouteParam('https://www.kintaicloud.jp/')\n return (\n \n \n {/** TODO 川上申し送り事項:▼投稿日をここに表示 */}\n

2022.04.15

\n
\n {/** TODO 川上申し送り事項:▼記事投稿(?)で作成された内容がここに入る予定 */}\n

\n 勤怠管理とは、\n \n 労働日ごとの出勤時間・退勤時間・休憩時間など、従業員の勤務状況を記録し管理する\n \n ことです。この勤怠管理は、会社の規模や業種にかかわらず、会社内で必ず行わなければなりません。ワーク・ライフ・バランスや働き方改革、そして新型コロナウイルス感染症流行拡大の影響により在宅勤務が一般的になるなど、近年、\n 社員一人ひとりの働き方が急速に多様化\n しました。また労働時間にまつわる労使トラブルも後を絶たない中、適切な勤怠管理がこれまで以上に求められています。\n
\n
\n 今回は、勤怠管理とはそもそもどのような内容か、具体的な方法や就業管理との違い、未来に向けた勤怠管理体制の整備について、順に解説をしていきましょう。\n

\n \"キンクラコラム\"\n
\n

目次

\n
    \n
  1. \n 勤怠管理とは?その目的と必要性\n
  2. \n
  3. \n 勤怠管理の方法には何があるか\n
  4. \n
  5. \n 勤怠管理システムのメリット・デメリット\n
  6. \n
  7. \n 就業管理との違いは?\n
  8. \n
  9. \n 勤怠管理が必要とされる理由\n
  10. \n
  11. \n 勤怠管理体制の整備\n
  12. \n
  13. \n まとめ\n
  14. \n
\n
\n
\n

勤怠管理とは?その目的と必要性

\n
\n

\n 勤怠管理を行う目的は、社員が決められた労働時間を守っているか、労働基準法などの法律に違反した働き方をしていないか確認するため、また、正しい賃金計算を実施するためです。\n
\n 具体的には、社員が何時から何時まで働いているのか、休憩時間をどれだけ取っているのか、残業はいつ何時まで行っているのか、深夜労働をしているのか、休日出勤をしているのか、有給休暇を取得したのはいつか、などの情報を記録していきます。\n
\n 給与計算の際、時間外労働、深夜労働、休日労働については割増賃金を支払うことが法律で義務付けられているため、\n 労働時間数だけでなく、時間帯の把握も必要です。\n

\n

\n ↓ 勤怠管理の必要性についてこちらの記事でも詳しく解説しています。\n
\n \n 関連記事:勤怠管理システムを導入していない会社で発生するリスクとは?\n \n

\n
\n

勤怠管理の方法には何があるか

\n
\n \"キンクラコラム\"\n

\n 社員ごとの勤怠情報を記録する方法や媒体には法律的な決まりはありません。ただし、厚生労働省のガイドライン「労働時間の適正な把握のために使用者が講ずべき措置」には、\n 原則的な方法として、タイムカード、ICカード、パソコンの使用時間の記録等の客観的な記録を基礎として\n 確認し、適正に記録すること\n
\n やむを得ず自己申告制で労働時間を把握する場合には、十分な説明を行い、実態調査を実施し、適正な自己申告を阻害する措置を設けてはならない\n
\n と記載されています。どのような方法を利用したとしても、\n 労働時間を過少申告、過大申告をさせない仕組みが必要です。\n
\n たとえば、手書き、専用機を用いた「タイムカード」、機器にかざすことで自動的に勤怠データが登録される「ICカード」、システムへのログイン記録がクラウド上で自動保存される「勤怠管理システム」などの方法を用いて、社員ごとの記録を入手する方法があり、会社の規模などによって利用しやすい方法を選ぶことができます。\n

\n

\n ↓ 勤怠管理のお勧めの方法についてはこちらで紹介しています。\n
\n \n 関連記事:勤怠管理は経費精算付きのクラウドがおすすめ!\n その理由とは...\n \n

\n
\n

各種勤怠管理システムのメリット・デメリット

\n
\n

\n 紙のタイムカードは、自分で表に記入するもの、時計と一体になった機械を利用して打刻するものがあります。メリットとしては、安価でどのような職場でも利用できますが、デメリットとしては、偽装が容易で客観性に欠ける場合があり、労働時間の集計が手作業で効率が悪くなることなどが挙げられます。\n
\n 交通系のICカードや携帯に内蔵されたICを利用したタイムカードは、偽装しづらいため客観性が高く、勤怠管理システムを利用することで労働時間の集計を自動的に行うことができるメリットがあります。デメリットとしてはシステムの導入や運用に費用がかかることなどが挙げられます。その他にも、パソコンからインターネットを経由して打刻する方法などがあります。\n

\n

\n ↓\n 無料で使える勤怠管理システムのメリットについてこちらで詳しくご紹介していますので合わせて読んでみてください。\n
\n \n 関連記事:手動での勤怠管理からの脱却!無料の勤怠管理システムのメリットとは?\n \n

\n \n ⇒ 勤怠管理システム「キンクラ」について詳しく知りたい方はここをクリック\n \n {/** ここに9パターンの広告設定する */}\n {props.no === 0 && }\n {props.no === 1 && }\n {props.no === 2 && }\n {props.no === 3 && }\n {props.no === 4 && }\n {props.no === 5 && }\n {props.no === 6 && }\n {props.no === 7 && }\n {props.no === 8 && }\n
\n

就業管理との違いは?

\n
\n

\n 勤怠管理と似たような内容の一つに「就業管理」が挙げられますが、その内容は異なります。\n
\n 勤怠管理が、賃金支払いのために義務付けられている労働時間管理であることに対し、就業管理とは、勤怠管理を行うことに加えて、\n 社員が安心安全に働ける環境にあるか否か\n を全般的に管理していくことです。\n
\n 具体的には、法律で定められた月あたりの残業時間をオーバーしていないか、変形労働時間制などのイレギュラーな働き方を導入している場合はその内容が守られているか、連日の休日出勤などで心身に支障をきたす働き方をしていないか、などの観点からチェックをしていきます。\n
\n
\n 社員全体の働き方を就業管理で管理することで、社員が安心して働ける環境を整え、\n 企業の成長へつなげていくというねらいがあります。\n

\n
\n

勤怠管理が必要とされる理由

\n
\n

\n 勤怠管理は、労働基準法という法律により使用者に向けて義務づけられています。正確な賃金支払いという目的はもちろん、長時間労働の抑制などを抑制や賃金の未払い問題を防ぐための管理であるともいえます。\n
\n なお、勤怠管理情報が記載されたデータは5年間の保存\n をしなければならず、実施していない場合は法律違反に問われるケースがあります。この「5年」のカウントは、最後に記録を行った日から起算して5年という形で行います。\n
\n
\n 勤怠管理を怠ることは残業代の未払いや長時間労働を見過ごす事態へとつながる危険性があり、労使トラブルのもとになる状況に陥る可能性がありますので、覚えておきましょう。\n

\n
\n

勤怠管理体制の整備

\n
\n

\n 前述の通り、勤怠管理は使用者に課せられた義務であり、管理体制の整備は経営者にとって必須の対応です。\n
\n しかし、昨今の新型コロナウイルス感染症流行の影響により、テレワークや在宅勤務など、通常通り会社へ出社しないまま仕事をする社員が非常に増加しました。したがって、昔ながらのタイムカード打刻システムにより勤怠管理を行っていた会社などは、在宅勤務で社員が出社しない日の勤怠管理法について改めて検討する必要があるでしょう。\n
\n
\n 対策としては、\n \n パソコンシステムを活用したオンラインでの勤怠管理を行う方法を取る\n \n ことが一般的ですが、特に自宅で仕事を行う在宅勤務の場合などは、プライベート空間と仕事の空間が同じ場所になることから、勤務時間が変則的になってしまう可能性があるため、気をつけなければなりません。たとえば、仕事を行う時間にバラつきが生じる場合や、オン・オフの切り替えがなく昼夜を問わずダラダラと仕事を続けてしまう場合、勤怠情報を社員が任意で入力し、実際は仕事をせずサボってしまう場合などが挙げられます。\n
\n このような状況に対応するため、最近では各社よりさまざまな勤怠管理システムが打ち出されています。たとえば、社員の仕事状況を一定期間ごとにチェックできるようにパソコン画面が定期的に保存され、システムへ送信されるシステムを活用することで、社員の仕事への意識を高める効果が生まれます。また、有給休暇の管理や残業申請書フォームと連携した機能のある勤怠システムや、交代制勤務のシフトを自動的に組み、管理できるシステムが搭載されているものもあります。\n

\n \"キンクラコラム\"\n
\n

まとめ

\n
\n

\n 勤怠管理を正しく行うためには、使用者が守らなければならない法律の内容や、就業規則などで定められた社内ルールを熟知することが求められます。\n
\n 現状の勤怠管理体制に不安がある場合などは、まずは\n \n 社内ルールを洗い出し、勤怠管理をスムーズに行うために必要な機能を検討\n \n することから始めてみてはいかがでしょうか。\n
\n
\n 雇用形態や働き方が多様化している昨今の時世に合わせた形で適切な勤怠管理を実施することが、会社の未来へとつながります。\n

\n \n ⇒ 勤怠管理システム「キンクラ」について詳しく知りたい方はここをクリック\n \n
\n
\n )\n}\n\nexport default ColumnDetailInner0002\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 ColumnAuthor002 from '../../../components/molecules/columnAuthor002'\nimport ColumnDetailInner0002 from '../../../components/molecules/columnDetailInner0002'\nimport ColumnRelationCards0002 from '../../../components/molecules/columnRelationCards0002'\nimport UsefulFunctionLayout001 from '../../../components/molecules/usefulFunctionLayout001'\nimport ColumnDetailsBody from '../../../components/organisms/columnDetailsBody'\nimport ColumnLayout from '../../../components/organisms/columnLayout'\nimport CarouselBanner from '../../../components/molecules/carouselBanner'\nimport useRouteParam from '../../../hooks/useRouteParam'\n\n/**\n * コラム記事詳細画面\n * @constructor\n */\nconst C0002 = () => {\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 \n \n \n {/** 記事本体 */}\n \n {/** オーサ情報 */}\n \n {/** お役立ち機能 */}\n \n {/** 前後記事への遷移 */}\n \n {/** カルーセルバナー */}\n \n {/** 関連記事 */}\n \n \n \n )\n}\n\nexport default C0002\n\nexport const pageQuery = graphql`\n query C0002 {\n site {\n siteMetadata {\n title\n }\n }\n }\n`\n"],"names":["Wrapper","xmlns","viewBox","className","d","StyledLink","Link","props","to","href","src","imgId","alt","label","date","Button","BreakPoints","size","level","children","target","rel","routePram","useRouteParam","routePram2","routePram3","routePram4","routePram5","id","no","Introduction004","Introduction005","Introduction006","Introduction007","Introduction008","Introduction009","Introduction010","Introduction011","Introduction012","paths","title","link","useState","setNo","useEffect","Math","floor","random","description","ogUrl","ogType","ogTitle","ogDescription","ogSiteName","ogImage"],"sourceRoot":""}