{"version":3,"sources":["webpack:///./src/images/gatsby-image/v2-work-page/fluid-images.js","webpack:///./src/constants-v2/page-contents/work-info.js","webpack:///./src/components/work-v2/index.jsx","webpack:///./src/images/gatsby-image/work-detail-page/fluid-images.js","webpack:///./src/pages/works/dx-solution.jsx"],"names":["WorkFluidImages","image","useStaticQuery","childImageSharp","fluid","workInfo","link","subtitle","title","description","text","buttonlabel","Root","styled","div","ListItemBox","ListItemBoxLink","Link","ListItemBoxNoLink","ListItemBoxPic","Img","props","addHover","ListItemTitle","p","ListItemDescription","colorPaletteV2","blue","ListItemText","CaptionLeftAlign","Title","h2","TitleInner","WorksGridList","ButtonM","ButtonStr","span","Works","className","map","work","index","key","to","join","WorkDetailFluidImages","contentFontH","h1","font","line","h3","h4","BodyWrapper","CaptionRightAlign","TopAttention","WorkContentWrapper","EyeCatchPic","WorkTitle","WorkTags","WorkTagsItem","WorksOuter","WorkDescriptionWrapper","WorkParagraph","WorkBlockImagePC","WorkBlockImageSP","DxSolution","pageTitle","pagesV2","works","path"],"mappings":"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","file":"component---src-pages-works-dx-solution-jsx-051389c9fe403da750bf.js","sourcesContent":["import { useStaticQuery, graphql } from 'gatsby';\n\nconst WorkFluidImages = image => {\n  const data = useStaticQuery(graphql`\n    query {\n      workproductevelopment: file(\n        relativePath: { eq: \"v2-work/productevelopment@2x.png\" }\n      ) {\n        childImageSharp {\n          fluid(maxWidth: 448, maxHeight: 310) {\n            ...GatsbyImageSharpFluid\n          }\n        }\n      }\n      productionManagement: file(\n        relativePath: { eq: \"v2-work/productionManagement@2x.png\" }\n      ) {\n        childImageSharp {\n          fluid(maxWidth: 448, maxHeight: 310) {\n            ...GatsbyImageSharpFluid\n          }\n        }\n      }\n      valveMaintenanceSystem: file(\n        relativePath: { eq: \"v2-work/valveMaintenanceSystem@2x.png\" }\n      ) {\n        childImageSharp {\n          fluid(maxWidth: 448, maxHeight: 310) {\n            ...GatsbyImageSharpFluid\n          }\n        }\n      }\n      dxsolution: file(relativePath: { eq: \"v2-work/dxsolution@2x.png\" }) {\n        childImageSharp {\n          fluid(maxWidth: 448, maxHeight: 310) {\n            ...GatsbyImageSharpFluid\n          }\n        }\n      }\n      dxHumanIntroduce: file(\n        relativePath: { eq: \"v2-work/dxHumanIntroduce@2x.png\" }\n      ) {\n        childImageSharp {\n          fluid(maxWidth: 448, maxHeight: 310) {\n            ...GatsbyImageSharpFluid\n          }\n        }\n      }\n    }\n  `);\n\n  return data[image].childImageSharp.fluid;\n};\n\nexport default WorkFluidImages;\n","const workInfo = [\n  {\n    image: 'workproductevelopment',\n    link: 'work-product-development',\n    subtitle: null,\n    title: [\n      '鋼板の生産ラインを自動化！',\n      '熟練の匠にしかできない神技。',\n      '自動制御システムで現場の負担を軽減',\n    ],\n    description: [\n      '重厚長大な産業の現場で活躍する',\n      '匠の「熟練の技」をデータ化し、AIモデルを生成。',\n    ],\n    text:\n      '安全性の向上や、後継者不足の解消、現場の方々の負担の軽減に繋がるようなプロダクトを、パートナーと共に作っています。',\n    buttonlabel: '詳しく見る',\n  },\n  {\n    image: 'productionManagement',\n    link: 'production-management-system',\n    subtitle: null,\n    title: [\n      '需要予測から生産計画を立案！',\n      '資材発注と生産実績計上も自動で行い、',\n      '生産工程を丸ごと効率化。',\n    ],\n    description: ['老舗豆腐メーカーの', '生産工程をDXするシステムを開発中'],\n    text:\n      '安全性の向上や、後継者不足の解消、現場の方々の負担の軽減に繋がるようなプロダクトを、パートナーと共に作っています。',\n    buttonlabel: 'Comming Soon...',\n  },\n  {\n    image: 'valveMaintenanceSystem',\n    link: 'valve-maintenance-system',\n    subtitle: null,\n    title: ['ハードとソフトが融合！', '超高圧バルブメンテナンスシステム'],\n    description: [\n      '超高圧バルブの診断装置とWebシステムが融合。',\n      '次世代メンテナンスシステムを継続開発中！',\n    ],\n    text:\n      '発電所などで使用する超高圧バルブを製造する老舗企業様とのプロジェクト。（システム開発＆人材育成）',\n    buttonlabel: '詳しく見る',\n  },\n  {\n    image: 'dxHumanIntroduce',\n    link: 'dx-humanIntroduce',\n    subtitle: null,\n    title: ['人材を弊社でお預かりして', 'DX技術者（エンジニア）として育成！'],\n    description: [\n      '老舗企業様から人材をお預かりし、人材育成中。',\n      '次世代メンテナンスシステムを継続開発中！',\n    ],\n    text:\n      'システム開発を通して、広範なIT技術や、新しいワークスタイルを身に付けて、社内に持ち帰っていただきます。',\n    buttonlabel: '詳しく見る',\n  },\n  {\n    image: 'dxsolution',\n    link: 'dx-solution',\n    subtitle: 'Online Merges With Offline',\n    title: ['OMO実現を見据えて', '顧客との接点を生むシステム開発'],\n    description: [\n      '老舗の釣り具販売企業様の、',\n      'WEBシステム＆SNSモバイルアプリの開発',\n    ],\n    text:\n      'ファンコミュニティの形成を通じた、企業ブランドと顧客接点の変革のためのシステムを制作しました。',\n    buttonlabel: '詳しく見る',\n  },\n];\n\nexport default workInfo;\n","import React from 'react';\nimport styled from 'styled-components';\nimport { Link } from 'gatsby';\nimport Img from 'gatsby-image';\nimport WorkFluidImages from '../../images/gatsby-image/v2-work-page/fluid-images';\nimport workInfo from '../../constants-v2/page-contents/work-info';\nimport '../../styles/foundation-v2.css';\nimport colorPaletteV2 from '../../styles/color-palette-v2';\n\nconst Root = styled.div``;\n\nconst ListItemBox = styled.div`\n  width: 100%;\n`;\nconst ListItemBoxLink = styled(Link)`\n  cursor: pointer;\n`;\n\nconst ListItemBoxNoLink = styled.div``;\n\nconst ListItemBoxPic = styled(Img)`\n  background: no-repeat center;\n  border: 0;\n  background-size: cover;\n  &:hover {\n    opacity: ${props => (props.addHover ? '0.7' : 'none')};\n  }\n  transition: 0.4s all;\n  @media (max-width: 1023px) {\n    width: 100%;\n    height: 237px;\n    height: 237px;\n  }\n\n  @media (min-width: 1024px) {\n    width: 100%;\n    height: 343px;\n    height: 343px;\n  }\n`;\n\nconst ListItemTitle = styled.p`\n  display: inline-block;\n  white-space: pre-wrap;\n  margin-top: 18px;\n  margin-top: 18px;\n  font-weight: 600;\n  @media (max-width: 1023px) {\n    font-size: 19px;\n    font-size: 19px;\n    line-height: 1.5;\n  }\n  @media (min-width: 1024px) {\n    font-size: 24px;\n    font-size: 24px;\n    line-height: 1.5;\n  }\n  @media (max-width: 742px) {\n    font-size: 18px;\n    font-size: 18px;\n    line-height: 1.5;\n  }\n  @media (max-width: 632px) {\n    font-size: 15px;\n    font-size: 15px;\n    line-height: 1.5;\n  }\n\n  @media (max-width: 591px) {\n    font-size: 17px;\n    font-size: 17px;\n    line-height: 1.5;\n  }\n`;\n\nconst ListItemDescription = styled.p`\n  display: inline-block;\n  white-space: pre-wrap;\n  padding: 0px 8px;\n  margin-top: 18px;\n  border-left: solid 6px ${colorPaletteV2.blue};\n  color: ${colorPaletteV2.blue};\n  font-weight: 400;\n\n  @media (max-width: 1023px) {\n    font-size: 15px;\n    font-size: 15px;\n    line-height: 22.5px;\n    line-height: 22.5px;\n  }\n  @media (min-width: 1024px) {\n    font-size: 16px;\n    font-size: 16px;\n    line-height: 1.5;\n    line-height: 1.5;\n  }\n  @media (max-width: 742px) {\n    font-size: 13px;\n    font-size: 13px;\n    line-height: 1.5;\n    line-height: 1.5;\n  }\n  @media (max-width: 591px) {\n    font-size: 16px;\n    font-size: 16px;\n    line-height: 1.5;\n    line-height: 1.5;\n  }\n`;\n\nconst ListItemText = styled.p`\n  font-size: 16px;\n  font-size: 16px;\n  line-height: 28.8px;\n  line-height: 28.8px;\n  margin-top: 22px;\n  font-weight: 400;\n`;\n\nconst CaptionLeftAlign = styled.div`\n  display: flex;\n  align-items: baseline;\n  @media (max-width: 1023px) {\n    margin-bottom: 32px;\n  }\n  @media (min-width: 1024px) {\n    margin-bottom: 56px;\n  }\n`;\n\nconst Title = styled.h2`\n  margin-left: 20px;\n  margin-left: 20px;\n  display: inline-block;\n  text-transform: uppercase;\n  @media (max-width: 1023px) {\n    font-size: 20px;\n    font-size: 20px;\n  }\n  @media (min-width: 1024px) {\n    font-size: 24px;\n    font-size: 24px;\n  }\n`;\n\nconst TitleInner = styled.div`\n  display: flex;\n`;\n\nconst WorksGridList = styled.div`\n  display: grid;\n  gap: 2vw;\n  @media (max-width: 1023px) {\n    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));\n    column-gap: 2vw;\n    row-gap: 42px;\n    row-gap: 42px;\n  }\n  @media (min-width: 1024px) {\n    grid-template-columns: repeat(2, minmax(288px, 1fr));\n    column-gap: 3vw;\n    row-gap: 40px;\n    row-gap: 40px;\n  }\n`;\n\nconst ButtonM = styled(Link)`\n  margin-top: 16px;\n`;\nconst ButtonStr = styled.span`\n  line-height: 1;\n`;\n\nconst Works = () => {\n  return (\n    <Root>\n      <div>\n        <CaptionLeftAlign>\n          <h1 className=\"section_title_left\">実績紹介</h1>\n          <Title>\n            <TitleInner>\n              <p className=\"grad_txt section_title_right\">works</p>\n            </TitleInner>\n          </Title>\n        </CaptionLeftAlign>\n      </div>\n      <div>\n        <WorksGridList>\n          {workInfo.map((work, index) => {\n            return (\n              <ListItemBox key={index}>\n                {work.link === 'production-management-system' ? (\n                  <ListItemBoxNoLink>\n                    <ListItemBoxPic fluid={WorkFluidImages(work.image)} />\n                  </ListItemBoxNoLink>\n                ) : (\n                  <ListItemBoxLink to={`/works/${work.link}`}>\n                    <ListItemBoxPic\n                      fluid={WorkFluidImages(work.image)}\n                      addHover\n                    />\n                  </ListItemBoxLink>\n                )}\n                <ListItemTitle>{work.title.join('\\n')}</ListItemTitle>\n                <ListItemDescription>\n                  {work.description.join('\\n')}\n                </ListItemDescription>\n                <ListItemText>{work.text}</ListItemText>\n                {work.buttonlabel === 'Comming Soon...' ? (\n                  <ButtonM className=\"comming_soon_button sizeM\">\n                    <ButtonStr className=\"comming_soon_button_inside\">\n                      {work.buttonlabel}\n                    </ButtonStr>\n                  </ButtonM>\n                ) : (\n                  <ButtonM\n                    className=\"grad1_border_button sizeM\"\n                    to={`/works/${work.link}`}\n                  >\n                    <ButtonStr className=\"grad1_border_button_inside white\">\n                      {work.buttonlabel}\n                    </ButtonStr>\n                  </ButtonM>\n                )}\n              </ListItemBox>\n            );\n          })}\n        </WorksGridList>\n      </div>\n    </Root>\n  );\n};\nexport default Works;\n","import { useStaticQuery, graphql } from 'gatsby';\n\nconst WorkDetailFluidImages = image => {\n  const data = useStaticQuery(graphql`\n    query {\n      workproductDevelopmentDescktop01: file(\n        relativePath: { eq: \"v2-work-detail/productDevelopment_img_01.png\" }\n      ) {\n        childImageSharp {\n          fluid(maxWidth: 608, maxHeight: 320) {\n            ...GatsbyImageSharpFluid_withWebp\n            ...GatsbyImageSharpFluidLimitPresentationSize\n          }\n        }\n      }\n      workproductDevelopmentMobile01: file(\n        relativePath: { eq: \"v2-work-detail/productDevelopment_img_sp_01.png\" }\n      ) {\n        childImageSharp {\n          fluid(maxWidth: 360, maxHeight: 238) {\n            ...GatsbyImageSharpFluid_withWebp\n            ...GatsbyImageSharpFluidLimitPresentationSize\n          }\n        }\n      }\n      workproductDevelopmentDescktop02: file(\n        relativePath: { eq: \"v2-work-detail/productDevelopment_img_02.png\" }\n      ) {\n        childImageSharp {\n          fluid(maxWidth: 608, maxHeight: 320) {\n            ...GatsbyImageSharpFluid_withWebp\n            ...GatsbyImageSharpFluidLimitPresentationSize\n          }\n        }\n      }\n      workproductDevelopmentMobile02: file(\n        relativePath: { eq: \"v2-work-detail/productDevelopment_img_sp_02.png\" }\n      ) {\n        childImageSharp {\n          fluid(maxWidth: 360, maxHeight: 238) {\n            ...GatsbyImageSharpFluid_withWebp\n            ...GatsbyImageSharpFluidLimitPresentationSize\n          }\n        }\n      }\n\n      valveMaintenanceSystemDescktop01: file(\n        relativePath: { eq: \"v2-work-detail/valveMaintenanceSystem_img_01.png\" }\n      ) {\n        childImageSharp {\n          fluid(maxWidth: 608, maxHeight: 320) {\n            ...GatsbyImageSharpFluid_withWebp\n            ...GatsbyImageSharpFluidLimitPresentationSize\n          }\n        }\n      }\n      valveMaintenanceSystemMobile01: file(\n        relativePath: {\n          eq: \"v2-work-detail/valveMaintenanceSystem_img_sp_01.png\"\n        }\n      ) {\n        childImageSharp {\n          fluid(maxWidth: 360, maxHeight: 238) {\n            ...GatsbyImageSharpFluid_withWebp\n            ...GatsbyImageSharpFluidLimitPresentationSize\n          }\n        }\n      }\n\n      dxsolutionDescktop01: file(\n        relativePath: { eq: \"v2-work-detail/dxsolution_img_01.png\" }\n      ) {\n        childImageSharp {\n          fluid(maxWidth: 608, maxHeight: 320) {\n            ...GatsbyImageSharpFluid_withWebp\n            ...GatsbyImageSharpFluidLimitPresentationSize\n          }\n        }\n      }\n      dxsolutionMobile01: file(\n        relativePath: { eq: \"v2-work-detail/dxsolution_img_sp_01.png\" }\n      ) {\n        childImageSharp {\n          fluid(maxWidth: 360, maxHeight: 238) {\n            ...GatsbyImageSharpFluid_withWebp\n            ...GatsbyImageSharpFluidLimitPresentationSize\n          }\n        }\n      }\n\n      dxHumanIntroduceDescktop01: file(\n        relativePath: { eq: \"v2-work-detail/dxHumanIntroduce_img_01.png\" }\n      ) {\n        childImageSharp {\n          fluid(maxWidth: 608, maxHeight: 320) {\n            ...GatsbyImageSharpFluid_withWebp\n            ...GatsbyImageSharpFluidLimitPresentationSize\n          }\n        }\n      }\n      dxHumanIntroduceMobile01: file(\n        relativePath: { eq: \"v2-work-detail/dxHumanIntroduce_img_sp_01.png\" }\n      ) {\n        childImageSharp {\n          fluid(maxWidth: 360, maxHeight: 238) {\n            ...GatsbyImageSharpFluid_withWebp\n            ...GatsbyImageSharpFluidLimitPresentationSize\n          }\n        }\n      }\n    }\n  `);\n\n  return data[image].childImageSharp.fluid;\n};\n\nexport default WorkDetailFluidImages;\n","import React from 'react';\nimport styled from 'styled-components';\nimport { Link } from 'gatsby';\nimport Img from 'gatsby-image';\nimport PageRoot from '../../components/common-components/templates/page-root-v2';\nimport Works from '../../components/work-v2/index';\nimport colorPaletteV2 from '../../styles/color-palette-v2';\nimport '../../styles/foundation-v2.css';\nimport WorkFluidImages from '../../images/gatsby-image/v2-work-page/fluid-images';\nimport WorkDetailFluidImages from '../../images/gatsby-image/work-detail-page/fluid-images';\nimport pagesV2 from '../../constants-v2/pages-v2';\nimport SEOHeaderV2 from '../../components/common-components/templates/page-root-v2/seo-v2';\n\nconst wpContentSideMarginSp = 2.4;\n\nconst captionWidthPc = '608px';\nconst captionWidthSp = `calc(100% - ${wpContentSideMarginSp * 2}px)`;\n\nconst contentFontH = {\n  sp: {\n    h1: {\n      font: '24px',\n      line: '36px',\n    },\n    h2: {\n      font: '24px',\n      line: '36px',\n    },\n    h3: {\n      font: '21px',\n      line: '31.5px',\n    },\n    h4: {\n      font: '17px',\n      line: '27px',\n    },\n  },\n  pc: {\n    h1: {\n      font: '24px',\n      line: '34.75px',\n    },\n    h2: {\n      font: '24px',\n      line: '34.75px',\n    },\n    h3: {\n      font: '18px',\n      line: '24.06px',\n    },\n    h4: {\n      font: '16px',\n      line: '23.17px',\n    },\n  },\n};\n\nconst Root = styled.div`\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  min-height: 60vh;\n`;\n\nconst BodyWrapper = styled.div`\n  z-index: 1;\n  margin-bottom: 160px;\n  @media (max-width: 1023px) {\n    width: 100%;\n    margin-bottom: 100px;\n  }\n`;\n\nconst CaptionRightAlign = styled(Link)`\n  display: flex;\n  align-items: center;\n  width: 110px;\n  margin: 0 0 24px auto;\n  @media (max-width: 1023px) {\n    margin-bottom: 18px;\n  }\n  @media (min-width: 1024px) {\n    margin-bottom: 24px;\n  }\n`;\n\nconst TopAttention = styled.h2`\n  font-weight: 400;\n  color: ${colorPaletteV2.blue};\n  @media (max-width: 1023px) {\n    font-size: 16px;\n    line-height: 16px;\n  }\n  @media (min-width: 1024px) {\n    font-size: 16px;\n    line-height: 16px;\n    margin-left: 4px;\n  }\n`;\n\nconst WorkContentWrapper = styled.div`\n  @media (min-width: 1024px) {\n    width: ${captionWidthPc};\n  }\n`;\n\nconst EyeCatchPic = styled(Img)`\n  border: 0;\n  background-size: cover;\n  @media (max-width: 1023px) {\n    width: ${captionWidthSp};\n    height: 320px;\n    margin: 0 auto 24px;\n  }\n  @media (min-width: 1024px) {\n    width: ${captionWidthPc};\n    height: 420px;\n    margin-bottom: 28px;\n  }\n  @media (max-width: 640px) {\n    height: 210px;\n  }\n`;\n\nconst WorkTitle = styled.h1`\n  font-size: 24px;\n  line-height: 34.75px;\n  font-weight: 700;\n  @media (max-width: 1023px) {\n    margin-bottom: 12px;\n  }\n  @media (min-width: 1024px) {\n    margin-bottom: 14px;\n  }\n`;\n\nconst WorkTags = styled.div`\n  @media (max-width: 1023px) {\n    display: block;\n    line-height: 28.8px;\n  }\n  @media (min-width: 1024px) {\n    margin-bottom: 40px;\n    margin-bottom: 40px;\n  }\n`;\n\nconst WorkTagsItem = styled.span`\n  font-size: 16px;\n  color: ${colorPaletteV2.blue};\n  display: inline;\n  margin-right: 5px;\n  cursor: pointer;\n  white-space: nowrap;\n  &:hover {\n    text-decoration: underline;\n  }\n`;\n\nconst WorksOuter = styled.div`\n  margin-bottom: 100px;\n`;\n\nconst WorkDescriptionWrapper = styled.div`\n  font-size: 16px;\n  font-size: 16px;\n  line-height: 28.8px;\n  line-height: 28.8px;\n\n  & h2 {\n    padding: 2px 8px;\n    border-left: solid 6px ${colorPaletteV2.blue};\n    margin-top: 20px;\n    margin-top: 20px;\n    margin-bottom: 20px;\n    margin-bottom: 20px;\n\n    @media (max-width: 1023px) {\n      font-size: ${contentFontH.sp.h2.font};\n      line-height: ${contentFontH.sp.h2.line};\n    }\n    @media (min-width: 1024px) {\n      font-size: ${contentFontH.pc.h2.font};\n      line-height: ${contentFontH.pc.h2.line};\n    }\n  }\n`;\n\nconst WorkParagraph = styled.p`\n  font-size: 16px;\n  font-size: 16px;\n  line-height: 28.8px;\n  line-height: 28.8px;\n  font-weight: 400;\n  display: inline-block;\n  margin-bottom: 24px;\n`;\n\nconst WorkBlockImagePC = styled(Img)`\n  @media (min-width: 1024px) {\n    width: 100%;\n    height: auto;\n    margin: 0 auto 20px;\n  }\n  @media (max-width: 1023px) {\n    display: none;\n  }\n  //TO DO:2021/03/30:公開後タブレット用画像用意する？\n`;\n\nconst WorkBlockImageSP = styled(Img)`\n  @media (min-width: 1024px) {\n    display: none;\n  }\n  @media (max-width: 1023px) {\n    width: 100%;\n    height: auto;\n    margin: 0 auto 20px;\n  }\n  //TO DO:2021/03/30:公開後タブレット用画像用意する？\n`;\n\nconst DxSolution = () => {\n  return (\n    <PageRoot>\n      <SEOHeaderV2 pageTitle=\"実績紹介｜OMO実現を見据えて顧客との接点を生むシステム開発\" />\n      <Root className=\"wrapper-v2\">\n        <BodyWrapper>\n          <CaptionRightAlign to={pagesV2.works.path}>\n            <TopAttention>実績紹介一覧</TopAttention>\n          </CaptionRightAlign>\n          <WorkContentWrapper>\n            <EyeCatchPic fluid={WorkFluidImages('dxsolution')} />\n            <WorkTitle>\n              OMO実現を見据えて <br />\n              顧客との接点を生むシステム開発\n            </WorkTitle>\n            <WorkTags>\n              <WorkTagsItem>#モバイルアプリ</WorkTagsItem>\n              <WorkTagsItem>#Webサイト</WorkTagsItem>\n            </WorkTags>\n            <WorkDescriptionWrapper>\n              <h2>プロジェクトの背景</h2>\n              <WorkParagraph>\n                &emsp;釣具の小売業として店舗数と売り上げを拡大し続けてきた株式会社タカミヤ様は、さらなる顧客のLTV(Life&nbsp;Time&nbsp;Value)向上を模索していました。\n                <br />\n                顧客との接点としてモバイルアプリとWebサイトがありますが、それまでのものは、店舗や本部から情報発信するのみで、エンドユーザーから何か情報をアップロードしたりコメントを残したりするような仕組みはなく、一方通行のコミュニケーションしか行えない状況でした。\n                <br />\n                そこで、デジタル世界でのファンコミュニティを形成し、双方向にコミュニケーションが行える新システムを構築することになりました。\n                <br />\n                「釣具を売る」という事を超えて「釣りの楽しさ」を届ける、すなわち、「釣具のポイント」から「釣りのポイント」への転換を図るプロジェクトとしてスタートしました。\n              </WorkParagraph>\n              <h2>取り組み内容</h2>\n              <WorkBlockImagePC\n                fluid={WorkDetailFluidImages('dxsolutionDescktop01')}\n              />\n              <WorkBlockImageSP\n                fluid={WorkDetailFluidImages('dxsolutionMobile01')}\n              />\n              <WorkParagraph>\n                &emsp;釣りに特化したSNSモバイルアプリケーションと、読み物や釣具のレビュー機能が実装されたWEBサイト、相互に連携する二つのアプリケーションシステムを構築しました。\n                <br />\n                どちらもエンドユーザーが能動的に情報をアップロードできる点が今まで異なり、双方向のコミュニケーションを可能とするシステムです。\n                <br />\n                ReactとRuby&nbsp;on&nbsp;Railsを用いてシステム実装を行い、インフラはAmazon&nbsp;WEB&nbsp;Servicesで構築。月間数百万PVのWEBサイトであった為、ロードバランシングや冗長化を行い、高アクセスに耐えうるシステム設計としました。\n                <br />\n                また、旧アプリとWEBサイトから新システムへ数十万件の過去データを移行する作業も実施し、これまで作り上げてきたコンテンツを捨てることなく新システムを構築しました。\n                <br />\n                リリース後は、日々システムの安定運用と新機能の追加開発を行いながら、継続的にサービスを育てていくことで、長期的に同社の「釣りのポイント」への転換をサポートしています。今後はSNSアプリ/WEBサイト内での行動で貯まるポイントと、実際の釣具の購買に使用できるポイントと紐付け、リアルとデジタルを繋ぐ体験を提供予定です。\n              </WorkParagraph>\n            </WorkDescriptionWrapper>\n          </WorkContentWrapper>\n        </BodyWrapper>\n        <WorksOuter>\n          <Works />\n        </WorksOuter>\n      </Root>\n    </PageRoot>\n  );\n};\nexport default DxSolution;\n"],"sourceRoot":""}