CINXE.COM

<!DOCTYPE html><html lang="ja" data-capo=""><head><meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://maps.googleapis.com/maps/api/js?v=beta&key=AIzaSyDkWB80NZvlcPIezuY5pBP9xNwnStZ6Eyo"></script> <style>.page-enter-active,.page-leave-active{opacity:0}</style> <style>.ripple{overflow:hidden;position:relative}.ripple-effect{animation-name:ripple;background:#888;border-radius:50%;display:block;opacity:.2;pointer-events:none;position:absolute;transform:scale(0);-webkit-user-select:none;-moz-user-select:none;user-select:none;will-change:opacity,transform}.ripple[data-ripple=light] .ripple-effect{background:#fff!important}.ripple[data-ripple=dark] .ripple-effect{background:#000!important}@keyframes ripple{to{opacity:0;transform:scale(2)}}</style> <style>@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}::-moz-selection{background-color:rgba(255,0,255,.25)}::selection{background-color:rgba(255,0,255,.25)}html{touch-action:manipulation}body{font-size:1rem;line-break:strict;margin:0;overflow-wrap:anywhere;padding:0;word-break:normal}@media (max-width:768px){body{font-size:.875rem}}strong{font-weight:700}img{background-repeat:none;height:auto;vertical-align:bottom}img,video{max-width:100%}h1,h2,h3,h4,h5{font-feature-settings:"palt";font-weight:400;letter-spacing:1px;line-height:1.5;margin:0;padding:0}h3{font-size:1.25rem}@media (max-width:768px){h3{font-size:1.125rem}}a{color:var(--color-text-a);-webkit-tap-highlight-color:transparent;text-decoration:none}@media print{a:after{content:" (" attr(href) ") "}}ol,ul{padding:0}ol li,ul li{list-style:none}button{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none}</style> <style>@charset "UTF-8";.gsapEffectSlide{overflow:hidden;position:relative}.gsapEffectSlide:before{background:var(--color-bg);content:"";inset:0;pointer-events:none;position:absolute;transform:translateX(0);transition:transform 1.5s cubic-bezier(.4,0,.2,1)}.gsapEffectSlide.is-active:before{transform:translateX(100%)}@media (prefers-reduced-motion:reduce){.gsapEffectSlide:before{transform:translateX(100%)}}.gsapSlideStagger>*{overflow:hidden;position:relative}.gsapSlideStagger_curtain{background:var(--color-bg);content:"";inset:0;pointer-events:none;position:absolute}@media (prefers-reduced-motion:reduce){.gsapSlideStagger_curtain{transform:translateX(100%)}}.gsapFromRightStagger>*{opacity:0}@media (prefers-reduced-motion:reduce){.gsapFromRightStagger>*{opacity:1}}.hl_textCenter{text-align:center}.hl_mt64{margin-top:64px}@media (max-width:768px){.hl_sp_mt48{margin-top:48px}}:root{--color-text-logo:#171c61;--color-text-p:#555;--color-text-p-secondary:#666;--color-text-h:#000;--color-bg:#fff;--color-bg-code:#f0f0f0;--color-bg-footer:#f9f9f9;--color-bg-strong:#fff996;--color-border:#f0f0f0;--color-bg-btn:#1976d2;--color-text-a:#1976d2;--color-text-a-hover:#1976d2;--color-text-a-visited:#504080;--color-icon-sns-hover:#090909;--primary:#3223b3;--font-sans:"Helvetica Neue","Segoe UI","Hiragino Sans","Hiragino Kaku Gothic ProN","BIZ UDPGothic",meiryo,sans-serif;--font-mono:"Source Han Code JP","Source Code Pro",sfmono-regular,menlo,consolas,"Bitstream Vera Sans Mono","Courier New",courier,"BIZ UDGothic",メイリオ,meiryo,monospace;--font-segoe:segoe ui,helvetica neue,sans-serif;--font-hiragino:"Hiragino Sans","游ゴシック体","游ゴシック",yugothic,"Yu Gothic",sans-serif}body{background-color:var(--color-bg);font-family:var(--font-sans)}@media (prefers-color-scheme:dark){:root{--color-text-p:#e0e0e0;--color-text-p-secondary:#999;--color-text-h:#fff;--color-bg:#1e1e1e;--color-bg-code:#282c34;--color-bg-footer:#090909;--color-bg-strong:#2f2d00;--color-border:#555;--color-text-a:#90caf9;--color-text-a-hover:#64b5f6;--color-text-a-visited:#b39ddb;--color-icon-sns-hover:#e0e0e0;--primary:#7e70fe}}iframe{border:none}.btnPrimary{background-color:var(--primary);border-color:var(--primary);color:#fff}@media (min-width:768px){.mobileOnly{display:none}}@media (max-width:768px){.desktopOnly{display:none}}.swiper-slide{mix-blend-mode:plus-lighter}</style> <style>@media (max-width:768px){.layout_main{filter:blur(0)}@media not all and (prefers-reduced-motion:reduce){.layout_main{transition:filter .7s}}.layout_main.is-navigation-show{filter:blur(20px)}}</style> <style>.header[data-v-ad5e2b2f]{border-bottom:1px solid hsla(0,0%,84%,.1);left:0;position:fixed;top:0;width:100%;z-index:100}@media (min-width:971px){.header[data-v-ad5e2b2f]{-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);background-color:hsla(0,0%,100%,.7)}}@media (min-width:971px) and (prefers-color-scheme:dark){.header[data-v-ad5e2b2f]{background-color:rgba(0,0,0,.7)}}.header_inner[data-v-ad5e2b2f]{align-items:center;box-sizing:border-box;display:flex;height:100%;justify-content:space-between;margin:0 auto;width:960px}@media (max-width:970px){.header_inner[data-v-ad5e2b2f]{display:block;height:auto;padding:0;width:100%}.header_inner.is-active[data-v-ad5e2b2f]{display:block;opacity:1;visibility:visible}}.header_logo[data-v-ad5e2b2f]{box-sizing:border-box}@media (max-width:970px){.header_logo[data-v-ad5e2b2f]{-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);background-color:hsla(0,0%,100%,.7);height:56px;padding:14px 0 14px 24px;text-align:left;transition:-webkit-backdrop-filter .2s;transition:backdrop-filter .2s;transition:backdrop-filter .2s,-webkit-backdrop-filter .2s;width:100%}}@media (max-width:970px) and (prefers-color-scheme:dark){.header_logo[data-v-ad5e2b2f]{background-color:rgba(0,0,0,.7)}}@media (max-width:970px){.header_logo.is-active[data-v-ad5e2b2f]{-webkit-backdrop-filter:saturate(180%) blur(0);backdrop-filter:saturate(180%) blur(0)}}.header_hamburgerButton[data-v-ad5e2b2f]{background:none;box-sizing:border-box;cursor:pointer;height:25px;position:absolute;right:19px;top:14px;width:34px}@media (min-width:971px){.header_hamburgerButton[data-v-ad5e2b2f]{display:none}}.header_hamburgerButton span[data-v-ad5e2b2f]{background-color:var(--color-text-p);display:block;height:1px;left:5px;position:absolute;transform-origin:left center;transition:.3s ease-in-out;transition-property:left,opacity,transform;width:24px}.header_hamburgerButton span[data-v-ad5e2b2f]:first-child{top:4px}.header_hamburgerButton span[data-v-ad5e2b2f]:nth-child(2){top:12px}.header_hamburgerButton span[data-v-ad5e2b2f]:nth-child(3){bottom:4px}.header_hamburgerButton.is-active span[data-v-ad5e2b2f]:first-child{transform:translateX(4px) translateY(-1px) rotate(45deg)}.header_hamburgerButton.is-active span[data-v-ad5e2b2f]:nth-child(2){left:10px;opacity:0}.header_hamburgerButton.is-active span[data-v-ad5e2b2f]:nth-child(3){transform:translateX(4px) rotate(-45deg)}</style> <style>.logo[data-v-1df3d140]{align-items:center;color:#171c61;display:flex;font-family:var(--font-sans);font-size:1.375rem;font-weight:500;justify-content:flex-start;line-height:1;text-decoration:none;width:90px}@media (prefers-color-scheme:dark){.logo[data-v-1df3d140]{color:#e0e0e0}}.logo_image[data-v-1df3d140]{height:28px;margin-right:8px;pointer-events:none;width:28px}@media (prefers-color-scheme:dark){.logo_image .st0[data-v-1df3d140]{fill:#fff}.logo_image .st1[data-v-1df3d140]{fill:transparent}}.logo_text[data-v-1df3d140]{pointer-events:none}</style> <style>.navigationWrapper[data-v-4d6a2f22]{display:block;opacity:1;transition:opacity .2s,visibility .2s,background-color .2s;visibility:visible}@media (prefers-color-scheme:dark){.navigationWrapper[data-v-4d6a2f22]{background-color:transparent}}@media (min-width:971px){.navigationWrapper[data-v-4d6a2f22]{background-color:transparent!important}}@media (max-width:970px){.navigationWrapper[data-v-4d6a2f22]{display:none;height:calc(100vh - 56px);opacity:0;visibility:hidden;width:100%}}.navigationWrapper.is-active[data-v-4d6a2f22]{display:block;opacity:1;visibility:visible}.navigation_list[data-v-4d6a2f22]{display:flex}@media (max-width:970px){.navigation_list[data-v-4d6a2f22]{flex-direction:column;margin:0}}.navigation_item[data-v-4d6a2f22]{margin-right:32px}@media (min-width:971px){.navigation_item[data-v-4d6a2f22]{opacity:1!important;transform:translate(0)!important}}@media (max-width:970px){.navigation_item[data-v-4d6a2f22]{margin-right:0}.navigation_item:last-child>a[data-v-4d6a2f22]{border-bottom:1px solid var(--color-border)}}.navigation_item[data-v-4d6a2f22]:last-child{margin-right:0}.navigation_item_external[data-v-4d6a2f22]{display:inline-block;margin-left:4px}.navigation_item_external path[data-v-4d6a2f22]{fill:#171c61;transition:fill .2s}@media (prefers-color-scheme:dark){.navigation_item_external path[data-v-4d6a2f22]{fill:#e0e0e0}}.navigation_item>a[data-v-4d6a2f22]{color:#171c61;font-size:.875rem;transition:color .2s}@media (prefers-color-scheme:dark){.navigation_item>a[data-v-4d6a2f22]{color:#e0e0e0}}@media (max-width:970px){.navigation_item>a[data-v-4d6a2f22]{border-top:1px solid var(--color-border);display:block;font-size:1rem;padding:16px 24px}}@media (any-hover:hover){.navigation_item>a[data-v-4d6a2f22]:hover{color:var(--color-text-a-hover)}.navigation_item>a:hover .navigation_item_external path[data-v-4d6a2f22]{fill:var(--color-text-a-hover)}}</style> <style>.top[data-v-fc711cbc]{background-color:var(--color-bg);color:var(--color-text-p);line-height:200%;overflow:hidden;width:100%}.topHero[data-v-fc711cbc]{background-color:#000;height:100vh;position:relative;width:100%}.topHero_loader[data-v-fc711cbc]{left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.topHero_loader_text[data-v-fc711cbc]{align-items:center;animation:blink-fc711cbc .1s infinite;color:var(--color-text-p-secondary);display:flex;font-size:.75rem}.topHero_loader_text[data-v-fc711cbc]:before{animation:anime-rotate-fc711cbc .5s infinite;border:2px solid #999;content:"";display:block;height:16px;margin-right:10px;width:16px}.topHero_loader.is-loaded[data-v-fc711cbc]{opacity:0;visibility:hidden}.topHero_image[data-v-fc711cbc]{height:100%;width:100%}.topHero_body[data-v-fc711cbc]{color:#ddd;left:50%;mix-blend-mode:color-dodge;position:absolute;text-align:center;top:50%;transform:translate(-50%,-50%);width:100%}.topHero_body[data-v-fc711cbc]>:last-child{margin-bottom:4.5rem}@media (max-width:970px){.topHero_body[data-v-fc711cbc]>:last-child{margin-bottom:2rem}}.topHero_jaTitle[data-v-fc711cbc]{color:#ccc;font-family:var(--font-hiragino);font-weight:200;line-height:2}@media not all and (prefers-reduced-motion:reduce){.topHero_jaTitle[data-v-fc711cbc]{opacity:0}}@media (max-width:750px){.topHero_jaTitle[data-v-fc711cbc]{font-size:3.3333333333vw}}.topHero_enTitle[data-v-fc711cbc]{font-family:var(--font-segoe);font-size:4rem;font-weight:100;letter-spacing:5px;line-height:normal;margin-bottom:2.5rem}@media (max-width:970px){.topHero_enTitle[data-v-fc711cbc]{font-size:7.6923076923vw;letter-spacing:1px;line-height:1;margin-bottom:1.6rem}}.topHero_enTitle>span[data-v-fc711cbc]{display:inline-block;padding:5px 0}@media not all and (prefers-reduced-motion:reduce){.topHero_enTitle>span[data-v-fc711cbc]{opacity:0}}.topHero_enTitle>i[data-v-fc711cbc]{color:#888;display:inline-block;font-style:normal}@media not all and (prefers-reduced-motion:reduce){.topHero_enTitle>i[data-v-fc711cbc]{opacity:0}}.topHero_text[data-v-fc711cbc]{line-height:2.1}@media (max-width:970px){.topHero_text[data-v-fc711cbc]{font-size:2.5vw}}.topMV[data-v-fc711cbc]{align-items:center;background-image:url(/_nuxt/gradation.D8awn2_I.webp);background-repeat:no-repeat;background-size:cover;display:flex;height:100vh;justify-content:center;min-height:calc(75vh - 40px)}.topMV section[data-v-fc711cbc]{box-sizing:border-box;margin-left:auto;margin-right:auto;max-width:960px;padding:64px}@media (max-width:970px){.topMV section[data-v-fc711cbc]{padding:16px 12.5vw}}.topMV_primary[data-v-fc711cbc]{font-size:4rem;font-weight:100!important;letter-spacing:4px!important;margin:0;text-align:center}@media (max-width:970px){.topMV_primary[data-v-fc711cbc]{font-size:2.25rem;margin-bottom:12px}}.topMV_text[data-v-fc711cbc]{text-align:center}@media (max-width:970px){.topMV_text[data-v-fc711cbc]{text-align:left}}.values[data-v-fc711cbc]{margin-bottom:120px}.values[data-v-fc711cbc]:last-child{margin-bottom:0}.values_title[data-v-fc711cbc]{font-size:2rem;font-weight:400;margin-bottom:48px;text-align:center}@media (max-width:970px){.values_title[data-v-fc711cbc]{font-size:1.25rem;margin-bottom:0;text-align:left}}.values_lead[data-v-fc711cbc]{display:block;font-size:1rem;margin-top:8px}.showcase[data-v-fc711cbc]{margin-bottom:120px}@media (max-width:970px){.showcase[data-v-fc711cbc]{margin-bottom:64px}}.showcase[data-v-fc711cbc]:last-of-type{margin-bottom:0}.showcase_title[data-v-fc711cbc]{font-size:2rem;font-weight:400;margin-bottom:48px;text-align:center}@media (max-width:970px){.showcase_title[data-v-fc711cbc]{font-size:1.25rem;margin-bottom:8px;text-align:left}}.showcase_upper[data-v-fc711cbc]{display:flex;margin-bottom:48px}@media (max-width:970px){.showcase_upper[data-v-fc711cbc]{flex-direction:column;margin-bottom:0}}.showcase_description[data-v-fc711cbc]{font-size:.875rem;line-height:2;margin-bottom:0;margin-right:48px;margin-top:-.5em;width:calc(100% - 496px)}@media (max-width:970px){.showcase_description[data-v-fc711cbc]{margin-bottom:32px;margin-right:0;margin-top:0;width:100%}}.showcase_description__grid[data-v-fc711cbc]{display:grid;grid-template-columns:1fr;grid-row-gap:16px;height:100%}@media (max-width:768px){.showcase_description__grid[data-v-fc711cbc]{grid-row-gap:13px;height:auto}}.showcase_description_textLink[data-v-fc711cbc]{color:var(--color-text-p);text-decoration:underline;transition:color .2s}@media (any-hover:hover){.showcase_description_textLink[data-v-fc711cbc]:hover{color:var(--color-text-a-hover)}}.showcase_description_text[data-v-fc711cbc]{margin:0}.showcase_carousel[data-v-fc711cbc]{margin:0;width:448px}.showcase_carousel img[data-v-fc711cbc]{width:100%}@media (max-width:970px){.showcase_carousel[data-v-fc711cbc]{width:100%}}.showcase_list[data-v-fc711cbc]{align-items:flex-start;display:flex;flex-wrap:wrap;gap:0 24px;justify-content:center}@media (max-width:970px){.showcase_list[data-v-fc711cbc]{align-items:flex-start;gap:0 16px;justify-content:flex-start}}.showcase_list li[data-v-fc711cbc]{width:144px}@media (max-width:970px){.showcase_list li[data-v-fc711cbc]{flex-shrink:0;margin-bottom:24px;width:calc(50% - 8px)}}.showcase_list li img[data-v-fc711cbc]{transition:filter .15s ease-in-out;width:100%}@media (any-hover:hover){.showcase_list li a:hover img[data-v-fc711cbc]{filter:brightness(1.1)}}.showcase_list_itemName[data-v-fc711cbc]{color:var(--color-text-p);font-size:.875rem;line-height:1.5;margin-top:12px}[data-v-fc711cbc] .googleMap{height:600px;width:100%}@media (max-width:768px){[data-v-fc711cbc] .googleMap{height:400px}}@keyframes anime-rotate-fc711cbc{0%{transform:rotate(0deg)}50%{transform:rotate(180deg)}to{transform:rotate(1turn)}}@keyframes blink-fc711cbc{0%{opacity:1}50%{opacity:.7}to{opacity:1}}</style> <style>.section[data-v-93565b87]{padding-bottom:192px}@media (max-width:970px){.section[data-v-93565b87]{padding-bottom:64px}}.section_content[data-v-93565b87]{background-color:var(--color-bg);box-sizing:border-box;margin-left:auto;margin-right:auto;margin-top:-64px;max-width:960px;padding:64px 64px 0;position:relative;z-index:1}@media (max-width:970px){.section_content[data-v-93565b87]{padding-left:6.25vw;padding-right:6.25vw;padding-top:32px}}.section_content[data-v-93565b87]:after{background-color:var(--color-bg);bottom:0;content:"";height:100%;position:absolute;right:-100%;width:100%}@media (min-width:971px){.section_content__small[data-v-93565b87]{padding-left:160px;padding-right:160px}}.section_content__rev[data-v-93565b87]:after{left:-100%}@media (max-width:970px){.section_content[data-v-93565b87]{margin-left:6.25vw;margin-right:6.25vw}}</style> <style>.recruit-headline[data-v-d3c5b7cc]{min-height:512px;position:relative}.recruit-headline-bg[data-v-d3c5b7cc]{background-position:50%;background-size:cover;filter:grayscale(.5)}.recruit-headline-bg[data-v-d3c5b7cc],.recruit-headline-bg-fill[data-v-d3c5b7cc]{height:100%;left:0;position:absolute;top:0;width:100%}.recruit-headline-bg-fill[data-v-d3c5b7cc]{background-image:linear-gradient(-125deg,#005580,#004080,purple);opacity:.75}.recruit-headline-inner[data-v-d3c5b7cc]{bottom:128px;margin-right:25vw;position:absolute;width:calc(100% - 25vw)}@media (max-width:768px){.recruit-headline-inner[data-v-d3c5b7cc]{margin-right:12.5vw;width:calc(100% - 12.5vw)}}.recruit-headline-inner h2[data-v-d3c5b7cc]{border-bottom:1px solid hsla(0,0%,100%,.25);color:#fff;font-size:4rem;font-weight:100;letter-spacing:2px;margin:0 0 16px;padding:0;text-align:right}@media (max-width:768px){.recruit-headline-inner h2[data-v-d3c5b7cc]{font-size:2rem}}.recruit-headline-inner p[data-v-d3c5b7cc]{color:#fff;font-size:1.25rem;font-weight:200;letter-spacing:2px;margin:0;text-align:right}@media (max-width:768px){.recruit-headline-inner p[data-v-d3c5b7cc]{font-size:1rem}}.recruit-headline-inner__rev[data-v-d3c5b7cc]{margin-left:25vw;margin-right:0}@media (max-width:768px){.recruit-headline-inner__rev[data-v-d3c5b7cc]{margin-left:12.5vw}}.recruit-headline-inner__rev h2[data-v-d3c5b7cc],.recruit-headline-inner__rev p[data-v-d3c5b7cc]{text-align:left}.recruit-headline-overlay[data-v-d3c5b7cc]{filter:grayscale(100);height:100%;left:0;mix-blend-mode:overlay;opacity:.1;position:absolute;top:0}</style> <style>.value_description[data-v-dc5f8054]{font-size:.875rem;line-height:2;margin-bottom:0;margin-right:48px;margin-top:-.5em;width:calc(100% - 496px)}@media (max-width:970px){.value_description[data-v-dc5f8054]{margin-bottom:32px;margin-right:0;margin-top:0;width:100%}}.value_description__grid[data-v-dc5f8054]{display:grid;grid-template-columns:1fr;grid-row-gap:16px;height:100%}@media (max-width:768px){.value_description__grid[data-v-dc5f8054]{grid-row-gap:13px;height:auto}}.value_description_textLink[data-v-dc5f8054]{color:var(--color-text-p);text-decoration:underline;transition:color .2s}@media (any-hover:hover){.value_description_textLink[data-v-dc5f8054]:hover{color:var(--color-text-a-hover)}}.value_description_text[data-v-dc5f8054]{margin:0}.value_upper[data-v-dc5f8054]{display:flex;margin-bottom:48px;padding-top:92px}@media (max-width:970px){.value_upper[data-v-dc5f8054]{flex-direction:column;margin-bottom:0;padding-top:48px}}.value_upper__first[data-v-dc5f8054]{padding-top:0}@media (max-width:970px){.value_upper__first[data-v-dc5f8054]{margin-top:48px}}.value_upper__reverse[data-v-dc5f8054]{flex-direction:row-reverse}@media (max-width:970px){.value_upper__reverse[data-v-dc5f8054]{flex-direction:column}}.value_upper__reverse .value_description[data-v-dc5f8054]{margin-left:48px;margin-right:0}@media (max-width:970px){.value_upper__reverse .value_description[data-v-dc5f8054]{margin-left:0}}.value_upper__one[data-v-dc5f8054]{margin-bottom:0}.value_title[data-v-dc5f8054]{font-size:1.25rem;font-weight:400;letter-spacing:1px;margin-bottom:32px;white-space:pre-wrap}@media (max-width:970px){.value_title[data-v-dc5f8054]{margin-bottom:24px;text-align:left}}.value_message[data-v-dc5f8054]{white-space:pre-wrap}.value_subTile[data-v-dc5f8054]{font-size:.75rem;font-weight:700;margin-bottom:24px;overflow:hidden;padding-left:72px;position:relative}@supports ((-webkit-background-clip:text) or (background-clip:text)){.value_subTile[data-v-dc5f8054]{-webkit-background-clip:text;background-clip:text;background-image:linear-gradient(-125deg,#0af,#0080ff,#f0f);-webkit-text-fill-color:transparent}}.value_subTile[data-v-dc5f8054]:before{background-color:#0080ff;content:"";height:1px;left:0;position:absolute;top:50%;width:64px}.value_swiper[data-v-dc5f8054]{align-items:center;display:flex;flex-direction:column}.value_swiper_image[data-v-dc5f8054]{aspect-ratio:16/9}.value_swiper_image>img[data-v-dc5f8054]{filter:grayscale(1);height:100%;-o-object-fit:cover;object-fit:cover}@media (any-hover:hover){.value_swiper_image>img[data-v-dc5f8054]{transition:filter .2s}.value_swiper_image>img[data-v-dc5f8054]:hover{filter:grayscale(1) brightness(1.1)}}.value_swiper_title[data-v-dc5f8054]{color:var(--color-text-p);font-size:.75rem;line-height:1.5;text-align:center;white-space:pre-wrap}.value_carousel[data-v-dc5f8054]{margin:0;width:448px}.value_carousel img[data-v-dc5f8054]{width:100%}@media (max-width:970px){.value_carousel[data-v-dc5f8054]{width:100%}}.value_list[data-v-dc5f8054]{align-items:flex-start;display:flex;flex-wrap:wrap;justify-content:center}@media (max-width:970px){.value_list[data-v-dc5f8054]{align-items:flex-start;justify-content:flex-start}}.value_list li[data-v-dc5f8054]{margin-left:12px;margin-right:12px;width:144px}@media (max-width:970px){.value_list li[data-v-dc5f8054]{flex-shrink:0;margin-bottom:24px;margin-left:0;margin-right:16px;width:calc(50% - 8px)}.value_list li[data-v-dc5f8054]:nth-child(2n){margin-right:0}}.value_list li img[data-v-dc5f8054]{aspect-ratio:16/9;filter:grayscale(1);-o-object-fit:cover;object-fit:cover;transition:filter .15s;width:100%;will-change:filter}@media (any-hover:hover){.value_list li a:hover img[data-v-dc5f8054]{filter:grayscale(1) brightness(1.1)}}.value_list_itemName[data-v-dc5f8054]{color:var(--color-text-p);font-size:.75rem;line-height:1.5;margin-top:0;padding-top:12px}</style> <style>.iconButton[data-v-21f060b4]{align-items:center;border:1px solid #ccc;color:var(--color-text-p);display:inline-flex;justify-content:center;line-height:1.5;padding:16px 56px 16px 64px;text-align:center;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle}@media (prefers-color-scheme:dark){.iconButton[data-v-21f060b4]{border:1px solid #ccc}}.iconButton[data-v-21f060b4]:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:contain;content:"";display:inline-block;height:24px;transition:transform .2s;width:24px}@media (prefers-color-scheme:dark){.iconButton[data-v-21f060b4]:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23FFF' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z'/%3E%3C/svg%3E")}}@media (any-hover:hover){.iconButton[data-v-21f060b4]:focus,.iconButton[data-v-21f060b4]:hover{border-color:#000}}@media (any-hover:hover) and (prefers-color-scheme:dark){.iconButton[data-v-21f060b4]:focus,.iconButton[data-v-21f060b4]:hover{background-color:#000;border:1px solid #ccc}}@media (any-hover:hover){.iconButton[data-v-21f060b4]:focus:after,.iconButton[data-v-21f060b4]:hover:after{transform:translateX(4px)}}.iconButton__small[data-v-21f060b4]{font-size:.875rem;padding:4px 8px 4px 16px}@media (max-width:768px){.iconButton__small[data-v-21f060b4]{font-size:.75rem}}</style> <style>@media (max-width:768px){.borderList{font-size:.875rem}}.borderList_item{align-items:flex-start;border-top:1px solid var(--color-border);display:flex;line-height:normal;padding:24px 8px}@media (max-width:768px){.borderList_item{flex-direction:column;line-height:200%;padding:16px 0}}.borderList_item:first-child{border-top:0;padding-top:0}.borderList_item:last-child{padding-bottom:0}.borderList_name{flex-shrink:0;font-weight:700;line-height:2;width:184px}@media (max-width:768px){.borderList_name{font-size:1rem}}.borderList_name p{margin:0}.borderList_desc{flex-shrink:1;margin:0;width:100%}@media (max-width:768px){.borderList_desc{margin-left:0}}.borderList_desc p{line-height:2;margin:0}.borderList_desc p>a{color:inherit;text-decoration:underline;transition:color .2s}.borderList_desc p>a:visited{color:inherit}@media (any-hover:hover){.borderList_desc p>a:hover{color:var(--color-text-a-hover)}}.borderList_desc p>small{color:var(--color-text-p-secondary);display:inline-block;font-size:.875rem;line-height:1.4;margin-top:8px}@media (max-width:768px){.borderList_desc p>small{font-size:.75rem;margin-top:4px}}</style> <style>.footer[data-v-abcec3ea]{background-color:var(--color-bg-footer);color:var(--color-text-p);padding:24px 0}.footer_copyright[data-v-abcec3ea]{font-size:.75rem;font-style:normal;text-align:center}@media (min-width:768px){.footer_copyright[data-v-abcec3ea]{padding:16px 0}}@media (max-width:768px){.footer_copyright[data-v-abcec3ea]{font-size:.75rem;padding:16px 0}}.footer_menu[data-v-abcec3ea]{align-items:center;display:flex;font-size:.625rem;gap:6px;justify-content:center}.footer_menuItem[data-v-abcec3ea]{color:inherit;display:grid;place-items:center;transition:color .2s}@media (any-hover:hover){.footer_menuItem[data-v-abcec3ea]:hover{color:var(--color-text-a-hover)}}.footer_xIcon path[data-v-abcec3ea]{fill:#888;transition:fill .2s}@media (any-hover:hover){.footer_xIcon:hover path[data-v-abcec3ea]{fill:var(--color-icon-sns-hover)}}</style> <link rel="stylesheet" href="/_nuxt/useNavigation.Dl2w2lym.css"> <link rel="stylesheet" href="/_nuxt/SectionHeadline.CNIBOydQ.css"> <link rel="stylesheet" href="/_nuxt/useHeadData.iI_Awy0x.css"> <link rel="modulepreload" as="script" crossorigin href="/_nuxt/DRS5uDoH.js"> <link rel="modulepreload" as="script" crossorigin href="/_nuxt/Cwj9XG5c.js"> <link rel="modulepreload" as="script" crossorigin href="/_nuxt/SdXODsrH.js"> <link rel="modulepreload" as="script" crossorigin href="/_nuxt/tVk3rBps.js"> <link rel="modulepreload" as="script" crossorigin href="/_nuxt/tRaTXpqy.js"> <link rel="modulepreload" as="script" crossorigin href="/_nuxt/DkTBc9gr.js"> <link rel="modulepreload" as="script" crossorigin href="/_nuxt/BUP0eY3v.js"> <link rel="modulepreload" as="script" crossorigin href="/_nuxt/B_ssyK5H.js"> <link rel="modulepreload" as="script" crossorigin href="/_nuxt/BkkIF9Yi.js"> <link rel="modulepreload" as="script" crossorigin href="/_nuxt/C8a0P702.js"> <link rel="modulepreload" as="script" crossorigin href="/_nuxt/BDlZOQM-.js"> <link rel="modulepreload" as="script" crossorigin href="/_nuxt/0dMRuz2v.js"> <link rel="modulepreload" as="script" crossorigin href="/_nuxt/BKrmdn8s.js"> <link rel="prefetch" as="script" crossorigin href="/_nuxt/BRm5EJnP.js"> <link rel="prefetch" as="script" crossorigin href="/_nuxt/9WrOl09S.js"> <link rel="prefetch" as="script" crossorigin href="/_nuxt/BChk9dm-.js"> <link rel="prefetch" as="image" type="image/webp" href="/_nuxt/gradation.D8awn2_I.webp"> <link rel="prefetch" as="image" type="image/jpeg" href="/_nuxt/office_15.DX64UWqu.jpg"> <link rel="prefetch" as="image" type="image/jpeg" href="/_nuxt/office_17.BJ4Uow-_.jpg"> <link rel="prefetch" as="image" type="image/jpeg" href="/_nuxt/seminer_01.DvTlldOf.jpg"> <meta name="color-scheme" content="light dark"> <title>株式会社ICS - インタラクションデザイン専門のウェブ制作会社</title> <meta name="description" content="ICS（アイシーエス）はインタラクションデザインを得意とする東京都港区のウェブ制作会社。HTMLやJavaScriptの最先端技術を用いたハイパフォーマンスなウェブサイト・ウェブアプリの制作を得意とします。"> <meta property="article:author" content="https://www.facebook.com/icswebjp"> <meta property="og:locale" content="ja_JP"> <meta property="og:type" content="website"> <meta property="og:title" content="株式会社ICS - インタラクションデザイン専門のウェブ制作会社"> <meta property="og:description" content="ICS（アイシーエス）はインタラクションデザインを得意とする東京都港区のウェブ制作会社。HTMLやJavaScriptの最先端技術を用いたハイパフォーマンスなウェブサイト・ウェブアプリの制作を得意とします。"> <meta property="og:url" content="https://ics-web.jp/"> <meta property="og:site_name" content="株式会社ICS - インタラクションデザイン専門のウェブ制作会社"> <meta property="og:image" content="https://ics-web.jp/assets/images/icswebjp_ogp.png"> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:description" content="ICS（アイシーエス）はインタラクションデザインを得意とする東京都港区のウェブ制作会社。HTMLやJavaScriptの最先端技術を用いたハイパフォーマンスなウェブサイト・ウェブアプリの制作を得意とします。"> <meta name="twitter:title" content="株式会社ICS - インタラクションデザイン専門のウェブ制作会社"> <meta name="twitter:image" content="https://ics-web.jp/assets/images/icswebjp_ogp.png"> <meta name="twitter:site" content="@icsweb"> <script type="module" src="/_nuxt/DRS5uDoH.js" crossorigin></script></head><body><div id="__nuxt"><div><div><div class="layout_header"><div class="header" data-v-ad5e2b2f><div class="header_inner" data-v-ad5e2b2f><h1 class="header_logo" data-v-ad5e2b2f><a href="#" data-v-ad5e2b2f><span class="logo" data-v-ad5e2b2f data-v-1df3d140><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42.3 42.3" class="logo_image" data-v-1df3d140><path class="st0" d="M6 36.1c-.8-2.1-1.2-4.7-2.5-6.4s-2.3.2-3.5 1.1v11.5h13.4A10.31 10.31 0 0 1 6 36.1m17.3-2.6a15.67 15.67 0 0 1-4.2-1.8 11.91 11.91 0 0 1-3.4-2.9 7.41 7.41 0 0 0 7.6 4.7" fill="#171c61" data-v-1df3d140></path><path class="st0" d="M21.2 0c.2 1.1.5 2.3-.1 3.2-.9 1.2-2.4 2.5-2.7 3.1a7.89 7.89 0 0 1-1.8 2.9c-2.3 2.5-6.8 1.1-7.5-2S9.8 2 12.4.1H0v22.8c2.3-3 1.9-1.1 4.7-5.2 1.8-2.8 6.2-2.9 7.9-.1s1.8 6.7 2.6 9.9a14.87 14.87 0 0 0 4.1 3.8 11.37 11.37 0 0 0 5.6 1.9 10.46 10.46 0 0 0 3.8-1.9c1.4-1.2 3-2 3.1-.7 0 .6-1.2 1-1.9 2.2s3.4-1.1-1 4.7a13.15 13.15 0 0 1-7.8 4.8h21.2V0z" fill="#171c61" data-v-1df3d140></path><path class="st1" d="M9 7.2c.7 3.1 5.2 4.5 7.5 2a7.89 7.89 0 0 0 1.8-2.9c.3-.6 1.8-1.9 2.7-3.1.6-.8.3-1.9.1-3.1h-8.9C9.7 2 8.3 4.2 9 7.2zm19.9 30.3c4.4-5.8.4-3.5 1-4.7s1.9-1.6 1.9-2.2c-.1-1.3-1.7-.4-3.1.7a9.09 9.09 0 0 1-3.8 1.9 12.47 12.47 0 0 1-5.6-1.9 14.87 14.87 0 0 1-4.1-3.8c-.8-3.2-1-7.2-2.6-9.9s-6.1-2.7-7.9.1c-2.9 4.1-2.4 2.2-4.7 5.2v7.9c1.1-.9 2.2-2.7 3.5-1.1s1.7 4.4 2.5 6.4a10.31 10.31 0 0 0 7.4 6.2h7.7a13.15 13.15 0 0 0 7.8-4.8zm-13.2-8.7a15.06 15.06 0 0 0 7.6 4.7 7.41 7.41 0 0 1-7.6-4.7z" fill="#fff" data-v-1df3d140></path></svg><span class="name" data-v-1df3d140>ICS</span></span></a></h1><div class="navigationWrapper" data-v-ad5e2b2f data-v-4d6a2f22><nav class="navigation" data-v-4d6a2f22><ul class="navigation_list gsap-from-left-stagger" data-v-4d6a2f22><li class="navigation_item" data-v-4d6a2f22><a href="#about" data-v-4d6a2f22>ABOUT</a></li><li class="navigation_item" data-v-4d6a2f22><a href="#values" data-v-4d6a2f22>CREATION VALUES</a></li><li class="navigation_item" data-v-4d6a2f22><a href="#showcase" data-v-4d6a2f22>SHOWCASE</a></li><li class="navigation_item" data-v-4d6a2f22><a href="#company" data-v-4d6a2f22>COMPANY</a></li><li class="navigation_item" data-v-4d6a2f22><a href="https://ics.media/" target="_blank" rel="noopener" data-v-4d6a2f22>ICS MEDIA <span class="navigation_item_external" data-v-4d6a2f22><svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8" data-v-4d6a2f22><path d="M7.111 7.111H.889V.889H4V0H.889A.889.889 0 0 0 0 .889v6.222A.889.889 0 0 0 .889 8h6.222A.892.892 0 0 0 8 7.111V4h-.889zM4.889 0v.889h1.6L2.116 5.258l.627.627 4.369-4.369v1.6H8V0z" fill="#555" data-v-4d6a2f22></path></svg></span></a></li><li class="navigation_item" data-v-4d6a2f22><a href="/recruit/" class="" data-v-4d6a2f22>RECRUIT</a></li><li class="navigation_item" data-v-4d6a2f22><a href="/contact/" class="" data-v-4d6a2f22>CONTACT</a></li></ul></nav></div><button class="header_hamburgerButton" aria-label="Menu" data-v-ad5e2b2f><span data-v-ad5e2b2f></span><span data-v-ad5e2b2f></span><span data-v-ad5e2b2f></span></button></div></div></div><div class="layout_main"><div class="top" data-v-fc711cbc><div class="topHero" data-v-fc711cbc><iframe title="メインイメージの背景" class="topHero_image" src="/assets/topHero/" frameborder="0" data-v-fc711cbc></iframe><div class="topHero_loader" data-v-fc711cbc><span class="topHero_loader_text" data-v-fc711cbc> LOADING </span></div><div class="topHero_body" data-v-fc711cbc><p class="topHero_enTitle" data-v-fc711cbc><span class="gsap-hero" data-v-fc711cbc>INTERACTION DESIGN</span><br data-v-fc711cbc><i class="gsap-hero" data-v-fc711cbc>& </i><span class="gsap-hero" data-v-fc711cbc>TECHNOLOGY</span></p><p class="topHero_jaTitle gsap-hero" data-v-fc711cbc> ウェブサイトの価値を<br class="mobileOnly" data-v-fc711cbc>最大化するフロントエンド技術を。 </p><p class="topHero_jaTitle gsap-hero" data-v-fc711cbc> ICSはインタラクティブコンテンツの制作を<br class="mobileOnly" data-v-fc711cbc>得意とするウェブ制作会社です。 </p></div></div><div id="about" class="topMV" data-v-fc711cbc><section class="gsap-about-trigger" data-v-fc711cbc><h2 class="topMV_primary gsap-about" data-v-fc711cbc>ABOUT ICS</h2><p class="topMV_text gsap-about" data-v-fc711cbc> ICSは東京都港区にあるウェブ制作会社です。<br data-v-fc711cbc> フロントエンド技術に特化し、ハイパフォーマンスで表現豊かなウェブサイトの制作に取り組んでいます。<br data-v-fc711cbc> シングルページアプリケーションや3Dコンテンツの開発を得意としています。 </p></section></div><section class="section" id="values" data-v-fc711cbc data-v-93565b87><div class="recruit-headline" data-v-93565b87 data-v-d3c5b7cc><div class="recruit-headline-bg" style="background-image:url(/_nuxt/office_17.BJ4Uow-_.jpg);" data-v-d3c5b7cc></div><div class="recruit-headline-bg-fill" data-v-d3c5b7cc></div><div class="recruit-headline-inner__rev recruit-headline-inner gsap-children-left" data-v-d3c5b7cc><h2 data-v-d3c5b7cc>CREATION VALUES</h2><p data-v-d3c5b7cc>得意領域と特徴</p></div></div><div class="section_content__rev section_content" data-v-93565b87><section data-v-fc711cbc><div class="values" data-v-fc711cbc><h3 class="values_title gsap-from-right" data-v-fc711cbc> HTMLコーディング <span class="values_lead" data-v-fc711cbc>デザインに正確で、よりよいUI体験を実現する</span></h3><div class="value" data-v-fc711cbc data-v-dc5f8054><div class="value_upper__first value_upper__one value_upper gsapFromRightStagger" data-v-dc5f8054><div class="value_description" data-v-dc5f8054><div class="value_subTile" data-v-dc5f8054> POINT 01</div><h4 class="value_title" data-v-dc5f8054>デザインを忠実に再現する HTML制作</h4><p class="value_message" data-v-dc5f8054>HTMLコーディングは誰が作っても同じではありません。ウェブ制作では、デザイン制作とHTMLコーディングは分業となっていることが多いです。 ICSではデザインに対してズレのない正確なコーディングと、検証を行います。詳しくは関連記事の取り組みをご参照ください。</p></div><div class="value_swiper" data-v-dc5f8054><div class="swiper value_carousel desktopOnly" data-v-dc5f8054><div class="swiper-wrapper"><div class="swiper-slide" data-swiper-slide-index="0" data-v-dc5f8054><a href="https://ics.media/entry/220331/" target="_blank" rel="noopener" data-v-dc5f8054><div class="value_swiper_image" data-v-dc5f8054><img loading="lazy" src="https://ics.media/entry/220331/images/eyecatch.jpg" alt width="640" height="426" data-v-dc5f8054></div><p class="value_swiper_title" data-v-dc5f8054>関連記事『Node.jsとPuppeteer活用のビジュアル校正テストで実装時のケアレスミスを防ぐ』</p></a></div></div></div></div></div></div><div class="value" data-v-fc711cbc data-v-dc5f8054><div class="value_upper__reverse value_upper gsapFromRightStagger" data-v-dc5f8054><div class="value_description" data-v-dc5f8054><div class="value_subTile" data-v-dc5f8054> POINT 02</div><h4 class="value_title" data-v-dc5f8054>ユーザビリティーとアクセシビリティーの追求</h4><p class="value_message" data-v-dc5f8054>ウェブサイトが使いにくい･･･という原因はHTMLの作りに依存することが多いです。 ICSではHTMLの細部にまでこだわり、ユーザビリティーを意識したコーディングを行います。アクセシビリティーの向上に力も入れており、スクリーンリーダーやキーボード操作の検証も行っています。</p></div><div class="value_swiper" data-v-dc5f8054><div class="swiper value_carousel desktopOnly" data-v-dc5f8054><div class="swiper-wrapper"><div class="swiper-slide" data-swiper-slide-index="0" data-v-dc5f8054><a href="https://ics.media/entry/221208/" target="_blank" rel="noopener" data-v-dc5f8054><div class="value_swiper_image" data-v-dc5f8054><img loading="lazy" src="https://ics.media/entry/221208/images/eyecatch.png" alt width="640" height="426" data-v-dc5f8054></div><p class="value_swiper_title" data-v-dc5f8054>関連記事『リンク/ボタン/フォームをより良くするHTML・CSS 17選』</p></a></div><div class="swiper-slide" data-swiper-slide-index="1" data-v-dc5f8054><a href="https://ics.media/entry/11221/" target="_blank" rel="noopener" data-v-dc5f8054><div class="value_swiper_image" data-v-dc5f8054><img loading="lazy" src="https://ics.media/entry/11221/images/eyecatch.jpg" alt width="640" height="426" data-v-dc5f8054></div><p class="value_swiper_title" data-v-dc5f8054>関連記事『HTMLコーダーがおさえるべきinputタグの書き方まとめ』</p></a></div><div class="swiper-slide" data-swiper-slide-index="2" data-v-dc5f8054><a href="https://ics.media/entry/230206/" target="_blank" rel="noopener" data-v-dc5f8054><div class="value_swiper_image" data-v-dc5f8054><img loading="lazy" src="https://ics.media/entry/230206/images/eyecatch.jpg" alt width="640" height="426" data-v-dc5f8054></div><p class="value_swiper_title" data-v-dc5f8054>関連記事『HTML制作で気をつけたいスクロールバーの挙動』</p></a></div><div class="swiper-slide" data-swiper-slide-index="3" data-v-dc5f8054><a href="https://ics.media/entry/220620/" target="_blank" rel="noopener" data-v-dc5f8054><div class="value_swiper_image" data-v-dc5f8054><img loading="lazy" src="https://ics.media/entry/220620/images/eyecatch.jpg" alt width="640" height="426" data-v-dc5f8054></div><p class="value_swiper_title" data-v-dc5f8054>関連記事『HTMLでモーダルUIを作るときに気をつけたいこと』</p></a></div></div></div></div></div><div class="value_lower" data-v-dc5f8054><ul class="value_list gsapSlideStagger" data-v-dc5f8054><li data-v-dc5f8054><a href="https://ics.media/entry/221208/" target="_blank" rel="noopener" data-v-dc5f8054><img loading="lazy" src="https://ics.media/entry/221208/images/eyecatch.png" alt="" width="640" height="426" sizes="sm:320,md:640,lg:240" data-v-dc5f8054><p class="value_list_itemName" data-v-dc5f8054>リンク/ボタン/フォームをより良くするHTML・CSS 17選</p><div class="gsapSlideStagger_curtain" data-v-dc5f8054></div></a></li><li data-v-dc5f8054><a href="https://ics.media/entry/11221/" target="_blank" rel="noopener" data-v-dc5f8054><img loading="lazy" src="https://ics.media/entry/11221/images/eyecatch.jpg" alt="" width="640" height="426" sizes="sm:320,md:640,lg:240" data-v-dc5f8054><p class="value_list_itemName" data-v-dc5f8054>HTMLコーダーがおさえるべきinputタグの書き方まとめ</p><div class="gsapSlideStagger_curtain" data-v-dc5f8054></div></a></li><li data-v-dc5f8054><a href="https://ics.media/entry/230206/" target="_blank" rel="noopener" data-v-dc5f8054><img loading="lazy" src="https://ics.media/entry/230206/images/eyecatch.jpg" alt="" width="640" height="426" sizes="sm:320,md:640,lg:240" data-v-dc5f8054><p class="value_list_itemName" data-v-dc5f8054>HTML制作で気をつけたいスクロールバーの挙動</p><div class="gsapSlideStagger_curtain" data-v-dc5f8054></div></a></li><li data-v-dc5f8054><a href="https://ics.media/entry/220620/" target="_blank" rel="noopener" data-v-dc5f8054><img loading="lazy" src="https://ics.media/entry/220620/images/eyecatch.jpg" alt="" width="640" height="426" sizes="sm:320,md:640,lg:240" data-v-dc5f8054><p class="value_list_itemName" data-v-dc5f8054>HTMLでモーダルUIを作るときに気をつけたいこと</p><div class="gsapSlideStagger_curtain" data-v-dc5f8054></div></a></li></ul></div></div><div class="value" data-v-fc711cbc data-v-dc5f8054><div class="value_upper gsapFromRightStagger" data-v-dc5f8054><div class="value_description" data-v-dc5f8054><div class="value_subTile" data-v-dc5f8054> POINT 03</div><h4 class="value_title" data-v-dc5f8054>UXを意識したインタラクション</h4><p class="value_message" data-v-dc5f8054>ウェブサイトのユーザー体験を向上させるため、ICSではインタラクションの実装を重視しています。ウェブサイトにインタラクションがあることで、没入感が増し、操作性が向上します。UIパーツとしてのマイクロインタラクションをはじめ、スクロール連動演出、画面遷移演出などインパクトのある表現も制作可能です。</p></div><div class="value_swiper" data-v-dc5f8054><div class="swiper value_carousel desktopOnly" data-v-dc5f8054><div class="swiper-wrapper"><div class="swiper-slide" data-swiper-slide-index="0" data-v-dc5f8054><a href="https://ics.media/entry/230123/" target="_blank" rel="noopener" data-v-dc5f8054><div class="value_swiper_image" data-v-dc5f8054><img loading="lazy" src="https://ics.media/entry/230123/images/eyecatch.png" alt width="640" height="426" data-v-dc5f8054></div><p class="value_swiper_title" data-v-dc5f8054>関連記事『CSSで下線を引く方法まとめ』</p></a></div><div class="swiper-slide" data-swiper-slide-index="1" data-v-dc5f8054><a href="https://ics.media/entry/220901/" target="_blank" rel="noopener" data-v-dc5f8054><div class="value_swiper_image" data-v-dc5f8054><img loading="lazy" src="https://ics.media/entry/220901/images/eyecatch.png" alt width="640" height="426" data-v-dc5f8054></div><p class="value_swiper_title" data-v-dc5f8054>関連記事『detailsとsummaryタグで作るアコーディオンUI』</p></a></div><div class="swiper-slide" data-swiper-slide-index="2" data-v-dc5f8054><a href="https://ics.media/entry/210426/" target="_blank" rel="noopener" data-v-dc5f8054><div class="value_swiper_image" data-v-dc5f8054><img loading="lazy" src="https://ics.media/entry/210426/images/eyecatch.png" alt width="640" height="426" data-v-dc5f8054></div><p class="value_swiper_title" data-v-dc5f8054>関連記事『JavaScriptで作る本格スクロール演出』</p></a></div><div class="swiper-slide" data-swiper-slide-index="3" data-v-dc5f8054><a href="https://ics.media/entry/15130/" target="_blank" rel="noopener" data-v-dc5f8054><div class="value_swiper_image" data-v-dc5f8054><img loading="lazy" src="https://ics.media/entry/15130/images/eyecatch.png" alt width="640" height="426" data-v-dc5f8054></div><p class="value_swiper_title" data-v-dc5f8054>関連記事『CSSアニメーションでマイクロインタラクション』</p></a></div></div></div></div></div><div class="value_lower" data-v-dc5f8054><ul class="value_list gsapSlideStagger" data-v-dc5f8054><li data-v-dc5f8054><a href="https://ics.media/entry/230123/" target="_blank" rel="noopener" data-v-dc5f8054><img loading="lazy" src="https://ics.media/entry/230123/images/eyecatch.png" alt="" width="640" height="426" sizes="sm:320,md:640,lg:240" data-v-dc5f8054><p class="value_list_itemName" data-v-dc5f8054>CSSで下線を引く方法まとめ</p><div class="gsapSlideStagger_curtain" data-v-dc5f8054></div></a></li><li data-v-dc5f8054><a href="https://ics.media/entry/220901/" target="_blank" rel="noopener" data-v-dc5f8054><img loading="lazy" src="https://ics.media/entry/220901/images/eyecatch.png" alt="" width="640" height="426" sizes="sm:320,md:640,lg:240" data-v-dc5f8054><p class="value_list_itemName" data-v-dc5f8054>detailsとsummaryタグで作るアコーディオンUI</p><div class="gsapSlideStagger_curtain" data-v-dc5f8054></div></a></li><li data-v-dc5f8054><a href="https://ics.media/entry/210426/" target="_blank" rel="noopener" data-v-dc5f8054><img loading="lazy" src="https://ics.media/entry/210426/images/eyecatch.png" alt="" width="640" height="426" sizes="sm:320,md:640,lg:240" data-v-dc5f8054><p class="value_list_itemName" data-v-dc5f8054>JavaScriptで作る本格スクロール演出</p><div class="gsapSlideStagger_curtain" data-v-dc5f8054></div></a></li><li data-v-dc5f8054><a href="https://ics.media/entry/15130/" target="_blank" rel="noopener" data-v-dc5f8054><img loading="lazy" src="https://ics.media/entry/15130/images/eyecatch.png" alt="" width="640" height="426" sizes="sm:320,md:640,lg:240" data-v-dc5f8054><p class="value_list_itemName" data-v-dc5f8054>CSSアニメーションでマイクロインタラクション</p><div class="gsapSlideStagger_curtain" data-v-dc5f8054></div></a></li></ul></div></div><div class="value" data-v-fc711cbc data-v-dc5f8054><div class="value_upper__reverse value_upper gsapFromRightStagger" data-v-dc5f8054><div class="value_description" data-v-dc5f8054><div class="value_subTile" data-v-dc5f8054> POINT 04</div><h4 class="value_title" data-v-dc5f8054>読み込みの素早いウェブサイトに</h4><p class="value_message" data-v-dc5f8054>ウェブページの表示までの待ち時間はユーザーへのストレスとなります。 ICSで制作するウェブコンテンツは容量的にも作法的にも最適な作り方を追求しています。画像の作り方はもちろん、ファイル最適化など妥協することはありません。Lighthouse等のベンチマークにおいても、常にフルスコアを実現しています。</p></div><div class="value_swiper" data-v-dc5f8054><div class="swiper value_carousel desktopOnly" data-v-dc5f8054><div class="swiper-wrapper"><div class="swiper-slide" data-swiper-slide-index="0" data-v-dc5f8054><a href="https://ics.media/entry/221223/" target="_blank" rel="noopener" data-v-dc5f8054><div class="value_swiper_image" data-v-dc5f8054><img loading="lazy" src="https://ics.media/entry/221223/images/eyecatch.png" alt width="640" height="426" data-v-dc5f8054></div><p class="value_swiper_title" data-v-dc5f8054>関連記事『HTMLで画像読込を高速化するために取り組んでいること』</p></a></div><div class="swiper-slide" data-swiper-slide-index="1" data-v-dc5f8054><a href="https://ics.media/entry/220204/" target="_blank" rel="noopener" data-v-dc5f8054><div class="value_swiper_image" data-v-dc5f8054><img loading="lazy" src="https://ics.media/entry/220204/images/eyecatch.jpg" alt width="640" height="426" data-v-dc5f8054></div><p class="value_swiper_title" data-v-dc5f8054>関連記事『グーグルが開発した画像圧縮ツールSquooshを扱う方法』</p></a></div><div class="swiper-slide" data-swiper-slide-index="2" data-v-dc5f8054><a href="https://ics.media/entry/201001/" target="_blank" rel="noopener" data-v-dc5f8054><div class="value_swiper_image" data-v-dc5f8054><img loading="lazy" src="https://ics.media/entry/201001/images/eyecatch.png" alt width="640" height="426" data-v-dc5f8054></div><p class="value_swiper_title" data-v-dc5f8054>関連記事『次世代画像形式のWebP、そしてAVIFへ』</p></a></div><div class="swiper-slide" data-swiper-slide-index="3" data-v-dc5f8054><a href="https://ics.media/entry/12746/" target="_blank" rel="noopener" data-v-dc5f8054><div class="value_swiper_image" data-v-dc5f8054><img loading="lazy" src="https://ics.media/entry/12746/images/eyecatch.png" alt width="640" height="426" data-v-dc5f8054></div><p class="value_swiper_title" data-v-dc5f8054>関連記事『APNGやWebPへ変換できる「アニメ画像に変換する君」を開発』</p></a></div></div></div></div></div><div class="value_lower" data-v-dc5f8054><ul class="value_list gsapSlideStagger" data-v-dc5f8054><li data-v-dc5f8054><a href="https://ics.media/entry/221223/" target="_blank" rel="noopener" data-v-dc5f8054><img loading="lazy" src="https://ics.media/entry/221223/images/eyecatch.png" alt="" width="640" height="426" sizes="sm:320,md:640,lg:240" data-v-dc5f8054><p class="value_list_itemName" data-v-dc5f8054>HTMLで画像読込を高速化するために取り組んでいること</p><div class="gsapSlideStagger_curtain" data-v-dc5f8054></div></a></li><li data-v-dc5f8054><a href="https://ics.media/entry/220204/" target="_blank" rel="noopener" data-v-dc5f8054><img loading="lazy" src="https://ics.media/entry/220204/images/eyecatch.jpg" alt="" width="640" height="426" sizes="sm:320,md:640,lg:240" data-v-dc5f8054><p class="value_list_itemName" data-v-dc5f8054>グーグルが開発した画像圧縮ツールSquooshを扱う方法</p><div class="gsapSlideStagger_curtain" data-v-dc5f8054></div></a></li><li data-v-dc5f8054><a href="https://ics.media/entry/201001/" target="_blank" rel="noopener" data-v-dc5f8054><img loading="lazy" src="https://ics.media/entry/201001/images/eyecatch.png" alt="" width="640" height="426" sizes="sm:320,md:640,lg:240" data-v-dc5f8054><p class="value_list_itemName" data-v-dc5f8054>次世代画像形式のWebP、そしてAVIFへ</p><div class="gsapSlideStagger_curtain" data-v-dc5f8054></div></a></li><li data-v-dc5f8054><a href="https://ics.media/entry/12746/" target="_blank" rel="noopener" data-v-dc5f8054><img loading="lazy" src="https://ics.media/entry/12746/images/eyecatch.png" alt="" width="640" height="426" sizes="sm:320,md:640,lg:240" data-v-dc5f8054><p class="value_list_itemName" data-v-dc5f8054>APNGやWebPへ変換できる「アニメ画像に変換する君」を開発</p><div class="gsapSlideStagger_curtain" data-v-dc5f8054></div></a></li></ul></div></div></div><div class="values" data-v-fc711cbc><h3 class="values_title gsap-from-right" data-v-fc711cbc> フロントエンド開発 <span class="values_lead" data-v-fc711cbc>快適な操作性を実現する最先端の技術</span></h3><div class="value" data-v-fc711cbc data-v-dc5f8054><div class="value_upper__first value_upper gsapFromRightStagger" data-v-dc5f8054><div class="value_description" data-v-dc5f8054><div class="value_subTile" data-v-dc5f8054> POINT 01</div><h4 class="value_title" data-v-dc5f8054>ハイパフォーマンスなSPAを</h4><p class="value_message" data-v-dc5f8054>シングルページアプリケーションの魅力のひとつは、サクサクな画面操作体験を提供できることです。 ICSではさまざまなJavaScriptライブラリ・フレームワークに精通しています。とくにReactやVueを得意とし、ベストプラクティスに則った最高品質のSPAを提供できます。</p></div><div class="value_swiper" data-v-dc5f8054><div class="swiper value_carousel desktopOnly" data-v-dc5f8054><div class="swiper-wrapper"><div class="swiper-slide" data-swiper-slide-index="0" data-v-dc5f8054><a href="https://ics.media/entry/190731/" target="_blank" rel="noopener" data-v-dc5f8054><div class="value_swiper_image" data-v-dc5f8054><img loading="lazy" src="https://ics.media/entry/190731/images/eyecatch.jpg" alt width="640" height="426" data-v-dc5f8054></div><p class="value_swiper_title" data-v-dc5f8054>関連記事『Vue・React・Angularのパフォーマンス比較検証』</p></a></div><div class="swiper-slide" data-swiper-slide-index="1" data-v-dc5f8054><a href="https://ics.media/entry/210929/" target="_blank" rel="noopener" data-v-dc5f8054><div class="value_swiper_image" data-v-dc5f8054><img loading="lazy" src="https://ics.media/entry/210929/images/eyecatch.png" alt width="640" height="426" data-v-dc5f8054></div><p class="value_swiper_title" data-v-dc5f8054>関連記事『Vue Composition APIを活用したコンポーネント分割術』</p></a></div><div class="swiper-slide" data-swiper-slide-index="2" data-v-dc5f8054><a href="https://ics.media/entry/200310/" target="_blank" rel="noopener" data-v-dc5f8054><div class="value_swiper_image" data-v-dc5f8054><img loading="lazy" src="https://ics.media/entry/200310/images/eyecatch.jpg" alt width="640" height="426" data-v-dc5f8054></div><p class="value_swiper_title" data-v-dc5f8054>関連記事『React今昔物語』</p></a></div><div class="swiper-slide" data-swiper-slide-index="3" data-v-dc5f8054><a href="https://ics.media/entry/200716/" target="_blank" rel="noopener" data-v-dc5f8054><div class="value_swiper_image" data-v-dc5f8054><img loading="lazy" src="https://ics.media/entry/200716/images/eyecatch.png" alt width="640" height="426" data-v-dc5f8054></div><p class="value_swiper_title" data-v-dc5f8054>関連記事『Vue.jsでやりがちな「サイレント・ミス」』</p></a></div></div></div></div></div><div class="value_lower" data-v-dc5f8054><ul class="value_list gsapSlideStagger" data-v-dc5f8054><li data-v-dc5f8054><a href="https://ics.media/entry/190731/" target="_blank" rel="noopener" data-v-dc5f8054><img loading="lazy" src="https://ics.media/entry/190731/images/eyecatch.jpg" alt="" width="640" height="426" sizes="sm:320,md:640,lg:240" data-v-dc5f8054><p class="value_list_itemName" data-v-dc5f8054>Vue・React・Angularのパフォーマンス比較検証</p><div class="gsapSlideStagger_curtain" data-v-dc5f8054></div></a></li><li data-v-dc5f8054><a href="https://ics.media/entry/210929/" target="_blank" rel="noopener" data-v-dc5f8054><img loading="lazy" src="https://ics.media/entry/210929/images/eyecatch.png" alt="" width="640" height="426" sizes="sm:320,md:640,lg:240" data-v-dc5f8054><p class="value_list_itemName" data-v-dc5f8054>Vue Composition APIを活用したコンポーネント分割術</p><div class="gsapSlideStagger_curtain" data-v-dc5f8054></div></a></li><li data-v-dc5f8054><a href="https://ics.media/entry/200310/" target="_blank" rel="noopener" data-v-dc5f8054><img loading="lazy" src="https://ics.media/entry/200310/images/eyecatch.jpg" alt="" width="640" height="426" sizes="sm:320,md:640,lg:240" data-v-dc5f8054><p class="value_list_itemName" data-v-dc5f8054>React今昔物語</p><div class="gsapSlideStagger_curtain" data-v-dc5f8054></div></a></li><li data-v-dc5f8054><a href="https://ics.media/entry/200716/" target="_blank" rel="noopener" data-v-dc5f8054><img loading="lazy" src="https://ics.media/entry/200716/images/eyecatch.png" alt="" width="640" height="426" sizes="sm:320,md:640,lg:240" data-v-dc5f8054><p class="value_list_itemName" data-v-dc5f8054>Vue.jsでやりがちな「サイレント・ミス」</p><div class="gsapSlideStagger_curtain" data-v-dc5f8054></div></a></li></ul></div></div><div class="value" data-v-fc711cbc data-v-dc5f8054><div class="value_upper__reverse value_upper gsapFromRightStagger" data-v-dc5f8054><div class="value_description" data-v-dc5f8054><div class="value_subTile" data-v-dc5f8054> POINT 02</div><h4 class="value_title" data-v-dc5f8054>ベストプラクティスを追求した開発</h4><p class="value_message" data-v-dc5f8054>フロントエンドの技術は移り変わりが激しいと言われてきました。トレンドの技術が時代で変化するため、根拠のある技術選定は欠かせません。 ICSではトレンドの技術を使いつつ、作法に対して常に正しく実装し、改修に強い堅牢な設計を行います。開発体験がより良くなる技術選定も得意とします。</p></div><div class="value_swiper" data-v-dc5f8054><div class="swiper value_carousel desktopOnly" data-v-dc5f8054><div class="swiper-wrapper"><div class="swiper-slide" data-swiper-slide-index="0" data-v-dc5f8054><a href="https://ics.media/entry/210708/" target="_blank" rel="noopener" data-v-dc5f8054><div class="value_swiper_image" data-v-dc5f8054><img loading="lazy" src="https://ics.media/entry/210708/images/eyecatch.png" alt width="640" height="426" data-v-dc5f8054></div><p class="value_swiper_title" data-v-dc5f8054>関連記事『Viteで始めるモダンで高速な開発環境構築』</p></a></div><div class="swiper-slide" data-swiper-slide-index="1" data-v-dc5f8054><a href="https://ics.media/entry/220915/" target="_blank" rel="noopener" data-v-dc5f8054><div class="value_swiper_image" data-v-dc5f8054><img loading="lazy" src="https://ics.media/entry/220915/images/eyecatch.jpg" alt width="640" height="426" data-v-dc5f8054></div><p class="value_swiper_title" data-v-dc5f8054>関連記事『JavaScriptの命名テクニック』</p></a></div><div class="swiper-slide" data-swiper-slide-index="2" data-v-dc5f8054><a href="https://ics.media/entry/211203/" target="_blank" rel="noopener" data-v-dc5f8054><div class="value_swiper_image" data-v-dc5f8054><img loading="lazy" src="https://ics.media/entry/211203/images/eyecatch.png" alt width="640" height="426" data-v-dc5f8054></div><p class="value_swiper_title" data-v-dc5f8054>関連記事『一段上のPromise活用テクニック』</p></a></div><div class="swiper-slide" data-swiper-slide-index="3" data-v-dc5f8054><a href="https://ics.media/entry/200515/" target="_blank" rel="noopener" data-v-dc5f8054><div class="value_swiper_image" data-v-dc5f8054><img loading="lazy" src="https://ics.media/entry/200515/images/eyecatch.png" alt width="640" height="426" data-v-dc5f8054></div><p class="value_swiper_title" data-v-dc5f8054>関連記事『Scoped CSSにおけるCSS設計手法』</p></a></div></div></div></div></div><div class="value_lower" data-v-dc5f8054><ul class="value_list gsapSlideStagger" data-v-dc5f8054><li data-v-dc5f8054><a href="https://ics.media/entry/210708/" target="_blank" rel="noopener" data-v-dc5f8054><img loading="lazy" src="https://ics.media/entry/210708/images/eyecatch.png" alt="" width="640" height="426" sizes="sm:320,md:640,lg:240" data-v-dc5f8054><p class="value_list_itemName" data-v-dc5f8054>Viteで始めるモダンで高速な開発環境構築</p><div class="gsapSlideStagger_curtain" data-v-dc5f8054></div></a></li><li data-v-dc5f8054><a href="https://ics.media/entry/220915/" target="_blank" rel="noopener" data-v-dc5f8054><img loading="lazy" src="https://ics.media/entry/220915/images/eyecatch.jpg" alt="" width="640" height="426" sizes="sm:320,md:640,lg:240" data-v-dc5f8054><p class="value_list_itemName" data-v-dc5f8054>JavaScriptの命名テクニック</p><div class="gsapSlideStagger_curtain" data-v-dc5f8054></div></a></li><li data-v-dc5f8054><a href="https://ics.media/entry/211203/" target="_blank" rel="noopener" data-v-dc5f8054><img loading="lazy" src="https://ics.media/entry/211203/images/eyecatch.png" alt="" width="640" height="426" sizes="sm:320,md:640,lg:240" data-v-dc5f8054><p class="value_list_itemName" data-v-dc5f8054>一段上のPromise活用テクニック</p><div class="gsapSlideStagger_curtain" data-v-dc5f8054></div></a></li><li data-v-dc5f8054><a href="https://ics.media/entry/200515/" target="_blank" rel="noopener" data-v-dc5f8054><img loading="lazy" src="https://ics.media/entry/200515/images/eyecatch.png" alt="" width="640" height="426" sizes="sm:320,md:640,lg:240" data-v-dc5f8054><p class="value_list_itemName" data-v-dc5f8054>Scoped CSSにおけるCSS設計手法</p><div class="gsapSlideStagger_curtain" data-v-dc5f8054></div></a></li></ul></div></div><div class="value" data-v-fc711cbc data-v-dc5f8054><div class="value_upper gsapFromRightStagger" data-v-dc5f8054><div class="value_description" data-v-dc5f8054><div class="value_subTile" data-v-dc5f8054> POINT 03</div><h4 class="value_title" data-v-dc5f8054>Jamstackの開発</h4><p class="value_message" data-v-dc5f8054>Jamstackを採用すれば、SEOやOGPの情報を損なうことなく、SPAとしてのウェブサイトの構築が可能です。自社サイトはすべてJamstackで構成しており、その利点を熟知しています。お客様のニーズに適するようであればJamstackを提案します。</p></div><div class="value_swiper" data-v-dc5f8054><div class="swiper value_carousel desktopOnly" data-v-dc5f8054><div class="swiper-wrapper"><div class="swiper-slide" data-swiper-slide-index="0" data-v-dc5f8054><a href="https://ics.media/entry/190410/" target="_blank" rel="noopener" data-v-dc5f8054><div class="value_swiper_image" data-v-dc5f8054><img loading="lazy" src="https://ics.media/entry/190410/images/eyecatch.jpg" alt width="640" height="426" data-v-dc5f8054></div><p class="value_swiper_title" data-v-dc5f8054>関連記事『WordPressをやめ静的サイトジェネレーターで高速化した話』</p></a></div><div class="swiper-slide" data-swiper-slide-index="1" data-v-dc5f8054><a href="https://ics.media/entry/210215/" target="_blank" rel="noopener" data-v-dc5f8054><div class="value_swiper_image" data-v-dc5f8054><img loading="lazy" src="https://ics.media/entry/210215/images/eyecatch.png" alt width="640" height="426" data-v-dc5f8054></div><p class="value_swiper_title" data-v-dc5f8054>関連記事『Flash作品を残すために取り組んだこと』</p></a></div></div></div></div></div><div class="value_lower" data-v-dc5f8054><ul class="value_list gsapSlideStagger" data-v-dc5f8054><li data-v-dc5f8054><a href="https://ics.media/entry/190410/" target="_blank" rel="noopener" data-v-dc5f8054><img loading="lazy" src="https://ics.media/entry/190410/images/eyecatch.jpg" alt="" width="640" height="426" sizes="sm:320,md:640,lg:240" data-v-dc5f8054><p class="value_list_itemName" data-v-dc5f8054>WordPressをやめ静的サイトジェネレーターで高速化した話</p><div class="gsapSlideStagger_curtain" data-v-dc5f8054></div></a></li><li data-v-dc5f8054><a href="https://ics.media/entry/210215/" target="_blank" rel="noopener" data-v-dc5f8054><img loading="lazy" src="https://ics.media/entry/210215/images/eyecatch.png" alt="" width="640" height="426" sizes="sm:320,md:640,lg:240" data-v-dc5f8054><p class="value_list_itemName" data-v-dc5f8054>Flash作品を残すために取り組んだこと</p><div class="gsapSlideStagger_curtain" data-v-dc5f8054></div></a></li></ul></div></div></div><div class="values" data-v-fc711cbc><h3 class="values_title gsap-from-right" data-v-fc711cbc> クリエイティブコーディング <span class="values_lead" data-v-fc711cbc>ウェブサイトに魅力的な表現を加える技術</span></h3><div class="value" data-v-fc711cbc data-v-dc5f8054><div class="value_upper__reverse value_upper__first value_upper gsapFromRightStagger" data-v-dc5f8054><div class="value_description" data-v-dc5f8054><div class="value_subTile" data-v-dc5f8054> POINT 01</div><h4 class="value_title" data-v-dc5f8054>表現系コンテンツの制作</h4><p class="value_message" data-v-dc5f8054>ウェブ制作において表現系コンテンツはフロントエンド開発とは異なる技術ともいえます。 ICSでは2000年代のFlash時代から表現系コンテンツの制作を得意としてきました。現在ではWebGLやHTML Canvas、SVGを駆使した表現の制作を行います。これらの技術はデータビジュアライゼーションや3D、ゲーム、サイネージなどの分野で利用できます。</p></div><div class="value_swiper" data-v-dc5f8054><div class="swiper value_carousel desktopOnly" data-v-dc5f8054><div class="swiper-wrapper"><div class="swiper-slide" data-swiper-slide-index="0" data-v-dc5f8054><a href="https://ics.media/entry/7162/" target="_blank" rel="noopener" data-v-dc5f8054><div class="value_swiper_image" data-v-dc5f8054><img loading="lazy" src="https://ics.media/entry/7162/images/eyecatch.jpg" alt width="640" height="426" data-v-dc5f8054></div><p class="value_swiper_title" data-v-dc5f8054>関連記事『JSライブラリGSAPを使ったタイムリマップ表現』</p></a></div><div class="swiper-slide" data-swiper-slide-index="1" data-v-dc5f8054><a href="https://ics.media/entry/10748/" target="_blank" rel="noopener" data-v-dc5f8054><div class="value_swiper_image" data-v-dc5f8054><img loading="lazy" src="https://ics.media/entry/10748/images/eyecatch.jpg" alt width="640" height="426" data-v-dc5f8054></div><p class="value_swiper_title" data-v-dc5f8054>関連記事『HTML5製アプリParticle Developの開発の裏側』</p></a></div><div class="swiper-slide" data-swiper-slide-index="2" data-v-dc5f8054><a href="https://ics.media/entry/132/" target="_blank" rel="noopener" data-v-dc5f8054><div class="value_swiper_image" data-v-dc5f8054><img loading="lazy" src="https://ics.media/entry/132/images/eyecatch.jpg" alt width="640" height="426" data-v-dc5f8054></div><p class="value_swiper_title" data-v-dc5f8054>関連記事『CreateJSとTypeScriptでの効率的な開発手法』</p></a></div><div class="swiper-slide" data-swiper-slide-index="3" data-v-dc5f8054><a href="https://ics.media/entry/230119/" target="_blank" rel="noopener" data-v-dc5f8054><div class="value_swiper_image" data-v-dc5f8054><img loading="lazy" src="https://ics.media/entry/230119/images/eyecatch.png" alt width="640" height="426" data-v-dc5f8054></div><p class="value_swiper_title" data-v-dc5f8054>関連記事『Lottieのアニメーションを手描き風に動かしたい！ SVGとWebGLを使った2つのアプローチ』</p></a></div><div class="swiper-slide" data-swiper-slide-index="4" data-v-dc5f8054><a href="https://ics.media/entry/230421/" target="_blank" rel="noopener" data-v-dc5f8054><div class="value_swiper_image" data-v-dc5f8054><img loading="lazy" src="https://ics.media/entry/230421/images/eyecatch_230405.jpg" alt width="640" height="426" data-v-dc5f8054></div><p class="value_swiper_title" data-v-dc5f8054>関連記事『JSで作成するサウンドビジュアライザー』</p></a></div><div class="swiper-slide" data-swiper-slide-index="5" data-v-dc5f8054><a href="https://ics.media/entry/13973/" target="_blank" rel="noopener" data-v-dc5f8054><div class="value_swiper_image" data-v-dc5f8054><img loading="lazy" src="https://ics.media/entry/13973/images/eyecatch.jpg" alt width="640" height="426" data-v-dc5f8054></div><p class="value_swiper_title" data-v-dc5f8054>関連記事『Three.js ゲーム演出に役立つマグマ表現』</p></a></div><div class="swiper-slide" data-swiper-slide-index="6" data-v-dc5f8054><a href="https://ics.media/entry/12206/" target="_blank" rel="noopener" data-v-dc5f8054><div class="value_swiper_image" data-v-dc5f8054><img loading="lazy" src="https://ics.media/entry/12206/images/eyecatch.jpg" alt width="640" height="426" data-v-dc5f8054></div><p class="value_swiper_title" data-v-dc5f8054>関連記事『HTML物理演算入門』</p></a></div><div class="swiper-slide" data-swiper-slide-index="7" data-v-dc5f8054><a href="https://ics.media/entry/18881/" target="_blank" rel="noopener" data-v-dc5f8054><div class="value_swiper_image" data-v-dc5f8054><img loading="lazy" src="https://ics.media/entry/18881/images/eyecatch.png" alt width="640" height="426" data-v-dc5f8054></div><p class="value_swiper_title" data-v-dc5f8054>関連記事『CEDEC2018発表資料』</p></a></div></div></div></div></div><div class="value_lower" data-v-dc5f8054><ul class="value_list gsapSlideStagger" data-v-dc5f8054><li data-v-dc5f8054><a href="https://ics.media/entry/7162/" target="_blank" rel="noopener" data-v-dc5f8054><img loading="lazy" src="https://ics.media/entry/7162/images/eyecatch.jpg" alt="" width="640" height="426" sizes="sm:320,md:640,lg:240" data-v-dc5f8054><p class="value_list_itemName" data-v-dc5f8054>JSライブラリGSAPを使ったタイムリマップ表現</p><div class="gsapSlideStagger_curtain" data-v-dc5f8054></div></a></li><li data-v-dc5f8054><a href="https://ics.media/entry/10748/" target="_blank" rel="noopener" data-v-dc5f8054><img loading="lazy" src="https://ics.media/entry/10748/images/eyecatch.jpg" alt="" width="640" height="426" sizes="sm:320,md:640,lg:240" data-v-dc5f8054><p class="value_list_itemName" data-v-dc5f8054>HTML5製アプリParticle Developの開発の裏側</p><div class="gsapSlideStagger_curtain" data-v-dc5f8054></div></a></li><li data-v-dc5f8054><a href="https://ics.media/entry/132/" target="_blank" rel="noopener" data-v-dc5f8054><img loading="lazy" src="https://ics.media/entry/132/images/eyecatch.jpg" alt="" width="640" height="426" sizes="sm:320,md:640,lg:240" data-v-dc5f8054><p class="value_list_itemName" data-v-dc5f8054>CreateJSとTypeScriptでの効率的な開発手法</p><div class="gsapSlideStagger_curtain" data-v-dc5f8054></div></a></li><li data-v-dc5f8054><a href="https://ics.media/entry/230119/" target="_blank" rel="noopener" data-v-dc5f8054><img loading="lazy" src="https://ics.media/entry/230119/images/eyecatch.png" alt="" width="640" height="426" sizes="sm:320,md:640,lg:240" data-v-dc5f8054><p class="value_list_itemName" data-v-dc5f8054>Lottieのアニメーションを手描き風に動かしたい！SVGとWebGLを使った2つのアプローチ</p><div class="gsapSlideStagger_curtain" data-v-dc5f8054></div></a></li><li data-v-dc5f8054><a href="https://ics.media/entry/230421/" target="_blank" rel="noopener" data-v-dc5f8054><img loading="lazy" src="https://ics.media/entry/230421/images/eyecatch_230405.jpg" alt="" width="640" height="426" sizes="sm:320,md:640,lg:240" data-v-dc5f8054><p class="value_list_itemName" data-v-dc5f8054>JSで作成するサウンドビジュアライザー</p><div class="gsapSlideStagger_curtain" data-v-dc5f8054></div></a></li><li data-v-dc5f8054><a href="https://ics.media/entry/13973/" target="_blank" rel="noopener" data-v-dc5f8054><img loading="lazy" src="https://ics.media/entry/13973/images/eyecatch.jpg" alt="" width="640" height="426" sizes="sm:320,md:640,lg:240" data-v-dc5f8054><p class="value_list_itemName" data-v-dc5f8054>Three.js ゲーム演出に役立つマグマ表現</p><div class="gsapSlideStagger_curtain" data-v-dc5f8054></div></a></li><li data-v-dc5f8054><a href="https://ics.media/entry/12206/" target="_blank" rel="noopener" data-v-dc5f8054><img loading="lazy" src="https://ics.media/entry/12206/images/eyecatch.jpg" alt="" width="640" height="426" sizes="sm:320,md:640,lg:240" data-v-dc5f8054><p class="value_list_itemName" data-v-dc5f8054>HTML物理演算入門</p><div class="gsapSlideStagger_curtain" data-v-dc5f8054></div></a></li><li data-v-dc5f8054><a href="https://ics.media/entry/18881/" target="_blank" rel="noopener" data-v-dc5f8054><img loading="lazy" src="https://ics.media/entry/18881/images/eyecatch.png" alt="" width="640" height="426" sizes="sm:320,md:640,lg:240" data-v-dc5f8054><p class="value_list_itemName" data-v-dc5f8054>CEDEC2018発表資料</p><div class="gsapSlideStagger_curtain" data-v-dc5f8054></div></a></li></ul></div></div><div class="value" data-v-fc711cbc data-v-dc5f8054><div class="value_upper gsapFromRightStagger" data-v-dc5f8054><div class="value_description" data-v-dc5f8054><div class="value_subTile" data-v-dc5f8054> POINT 02</div><h4 class="value_title" data-v-dc5f8054>WebGLの最適化</h4><p class="value_message" data-v-dc5f8054>WebGLはGPUを使うことでHTMLやCSSだけでは実現できないような高度な表現を作ることができます。その一方、使い方をあやまるとコンテンツの実行負荷が増大し、期待通りに再生できないといった課題を生むことがあります。ICSではWebGLのスペシャリストが分析し、高効率なWebGLコンテンツの制作を行います。</p></div><div class="value_swiper" data-v-dc5f8054><div class="swiper value_carousel desktopOnly" data-v-dc5f8054><div class="swiper-wrapper"><div class="swiper-slide" data-swiper-slide-index="0" data-v-dc5f8054><a href="https://ics.media/entry/19043/" target="_blank" rel="noopener" data-v-dc5f8054><div class="value_swiper_image" data-v-dc5f8054><img loading="lazy" src="https://ics.media/entry/19043/images/eyecatch.png" alt width="640" height="426" data-v-dc5f8054></div><p class="value_swiper_title" data-v-dc5f8054>関連記事『オフスクリーンキャンバスを使った JavaScriptのマルチスレッド描画』</p></a></div><div class="swiper-slide" data-swiper-slide-index="1" data-v-dc5f8054><a href="https://ics.media/entry/16060/" target="_blank" rel="noopener" data-v-dc5f8054><div class="value_swiper_image" data-v-dc5f8054><img loading="lazy" src="https://ics.media/entry/16060/images/eyecatch.png" alt width="640" height="426" data-v-dc5f8054></div><p class="value_swiper_title" data-v-dc5f8054>関連記事『サンプルで理解するWebGL 2.0』</p></a></div><div class="swiper-slide" data-swiper-slide-index="2" data-v-dc5f8054><a href="https://ics.media/entry/17863/" target="_blank" rel="noopener" data-v-dc5f8054><div class="value_swiper_image" data-v-dc5f8054><img loading="lazy" src="https://ics.media/entry/17863/images/eyecatch.png" alt width="640" height="426" data-v-dc5f8054></div><p class="value_swiper_title" data-v-dc5f8054>関連記事『圧縮テクスチャーをWebGLで扱う方法と利点』</p></a></div><div class="swiper-slide" data-swiper-slide-index="3" data-v-dc5f8054><a href="https://ics.media/entry/12930/" target="_blank" rel="noopener" data-v-dc5f8054><div class="value_swiper_image" data-v-dc5f8054><img loading="lazy" src="https://ics.media/entry/12930/images/eyecatch.png" alt width="640" height="426" data-v-dc5f8054></div><p class="value_swiper_title" data-v-dc5f8054>関連記事『WebGLのカクつき対策まとめ（Three.js編）』</p></a></div></div></div></div></div><div class="value_lower" data-v-dc5f8054><ul class="value_list gsapSlideStagger" data-v-dc5f8054><li data-v-dc5f8054><a href="https://ics.media/entry/19043/" target="_blank" rel="noopener" data-v-dc5f8054><img loading="lazy" src="https://ics.media/entry/19043/images/eyecatch.png" alt="" width="640" height="426" sizes="sm:320,md:640,lg:240" data-v-dc5f8054><p class="value_list_itemName" data-v-dc5f8054>オフスクリーンキャンバスを使ったJavaScriptのマルチスレッド描画</p><div class="gsapSlideStagger_curtain" data-v-dc5f8054></div></a></li><li data-v-dc5f8054><a href="https://ics.media/entry/16060/" target="_blank" rel="noopener" data-v-dc5f8054><img loading="lazy" src="https://ics.media/entry/16060/images/eyecatch.png" alt="" width="640" height="426" sizes="sm:320,md:640,lg:240" data-v-dc5f8054><p class="value_list_itemName" data-v-dc5f8054>サンプルで理解するWebGL 2.0</p><div class="gsapSlideStagger_curtain" data-v-dc5f8054></div></a></li><li data-v-dc5f8054><a href="https://ics.media/entry/17863/" target="_blank" rel="noopener" data-v-dc5f8054><img loading="lazy" src="https://ics.media/entry/17863/images/eyecatch.png" alt="" width="640" height="426" sizes="sm:320,md:640,lg:240" data-v-dc5f8054><p class="value_list_itemName" data-v-dc5f8054>圧縮テクスチャーをWebGLで扱う方法と利点</p><div class="gsapSlideStagger_curtain" data-v-dc5f8054></div></a></li><li data-v-dc5f8054><a href="https://ics.media/entry/12930/" target="_blank" rel="noopener" data-v-dc5f8054><img loading="lazy" src="https://ics.media/entry/12930/images/eyecatch.png" alt="" width="640" height="426" sizes="sm:320,md:640,lg:240" data-v-dc5f8054><p class="value_list_itemName" data-v-dc5f8054>WebGLのカクつき対策まとめ（Three.js編）</p><div class="gsapSlideStagger_curtain" data-v-dc5f8054></div></a></li></ul></div></div></div></section></div></section><section class="section" id="showcase" data-v-fc711cbc data-v-93565b87><div class="recruit-headline" data-v-93565b87 data-v-d3c5b7cc><div class="recruit-headline-bg" style="background-image:url(/_nuxt/office_15.DX64UWqu.jpg);" data-v-d3c5b7cc></div><div class="recruit-headline-bg-fill" data-v-d3c5b7cc></div><div class="recruit-headline-inner gsap-children-left" data-v-d3c5b7cc><h2 data-v-d3c5b7cc>SHOWCASE</h2><p data-v-d3c5b7cc>事例紹介</p></div></div><div class="section_content" data-v-93565b87><section data-v-fc711cbc><div class="showcase" data-v-fc711cbc><h3 class="showcase_title gsap-from-right" data-v-fc711cbc>クライアントワーク</h3><div class="showcase_upper gsapFromRightStagger" data-v-fc711cbc><p class="showcase_description" data-v-fc711cbc> ICSではフロントエンド技術を専門に、難易度の高いウェブ制作に取り組んでいます。シングルページアプリケーションやJamstack、ブラウザゲームなど様々なウェブ制作案件の制作を担当しています。いずれの案件でも品質に強いこだわりを持っており、HTMLコーディングであればアクセシビリティやセマンティックスを意識したり、3D表現ではエモーショナルな表現を求めたり、性能面重視のSPA開発ではパフォーマンスチューニングを徹底します。 </p><div class="swiper showcase_carousel desktopOnly" data-v-fc711cbc><div class="swiper-wrapper"><div class="swiper-slide" data-swiper-slide-index="0" data-v-fc711cbc><a href="/showcase/inuneko/" class="" data-v-fc711cbc><img loading="lazy" src="/assets/images/top/client_work/inuneko.jpg" alt width="640" height="426" data-v-fc711cbc></a></div><div class="swiper-slide" data-swiper-slide-index="1" data-v-fc711cbc><a href="/showcase/placesion/" class="" data-v-fc711cbc><img loading="lazy" src="/assets/images/top/client_work/placesion.jpg" alt width="640" height="426" data-v-fc711cbc></a></div><div class="swiper-slide" data-swiper-slide-index="2" data-v-fc711cbc><a href="/showcase/tyo/" class="" data-v-fc711cbc><img loading="lazy" src="/assets/images/top/client_work/tyo.jpg" alt width="640" height="426" data-v-fc711cbc></a></div><div class="swiper-slide" data-swiper-slide-index="3" data-v-fc711cbc><a href="/showcase/amana_jp/" class="" data-v-fc711cbc><img loading="lazy" src="/assets/images/top/client_work/amana_jp.jpg" alt width="640" height="426" data-v-fc711cbc></a></div><div class="swiper-slide" data-swiper-slide-index="4" data-v-fc711cbc><a href="/showcase/oshare_dorobo/" class="" data-v-fc711cbc><img loading="lazy" src="/assets/images/top/client_work/osdb.jpg" alt width="640" height="426" data-v-fc711cbc></a></div><div class="swiper-slide" data-swiper-slide-index="5" data-v-fc711cbc><a href="/showcase/puzzoku/" class="" data-v-fc711cbc><img loading="lazy" src="/assets/images/top/client_work/puzzoku.jpg" alt width="640" height="426" data-v-fc711cbc></a></div><div class="swiper-slide" data-swiper-slide-index="6" data-v-fc711cbc><a href="/showcase/legend_world/" class="" data-v-fc711cbc><img loading="lazy" src="/assets/images/top/client_work/lw.jpg" alt width="640" height="426" data-v-fc711cbc></a></div></div></div></div><div class="showcase_lower" data-v-fc711cbc><ul class="showcase_list gsapSlideStagger" data-v-fc711cbc><li data-v-fc711cbc><a href="/showcase/inuneko/" class="" data-v-fc711cbc><img loading="lazy" src="/assets/images/top/client_work/inuneko.jpg" alt width="640" height="426" sizes="sm:320,md:640,lg:240" data-v-fc711cbc><p class="showcase_list_itemName" data-v-fc711cbc>犬猫生活</p><div class="gsapSlideStagger_curtain" data-v-fc711cbc></div></a></li><li data-v-fc711cbc><a href="/showcase/placesion/" class="" data-v-fc711cbc><img loading="lazy" src="/assets/images/top/client_work/placesion.jpg" alt width="640" height="426" sizes="sm:320,md:640,lg:240" data-v-fc711cbc><p class="showcase_list_itemName" data-v-fc711cbc>PLACESION BRAND SITE</p><div class="gsapSlideStagger_curtain" data-v-fc711cbc></div></a></li><li data-v-fc711cbc><a href="/showcase/tyo/" class="" data-v-fc711cbc><img loading="lazy" src="/assets/images/top/client_work/tyo.jpg" alt width="640" height="426" sizes="sm:320,md:640,lg:240" data-v-fc711cbc><p class="showcase_list_itemName" data-v-fc711cbc>TYO</p><div class="gsapSlideStagger_curtain" data-v-fc711cbc></div></a></li><li data-v-fc711cbc><a href="/showcase/amana_jp/" class="" data-v-fc711cbc><img loading="lazy" src="/assets/images/top/client_work/amana_jp.jpg" alt width="640" height="426" sizes="sm:320,md:640,lg:240" data-v-fc711cbc><p class="showcase_list_itemName" data-v-fc711cbc>amana INDEX</p><div class="gsapSlideStagger_curtain" data-v-fc711cbc></div></a></li><li data-v-fc711cbc><a href="/showcase/oshare_dorobo/" class="" data-v-fc711cbc><img loading="lazy" src="/assets/images/top/client_work/osdb.jpg" alt width="640" height="426" sizes="sm:320,md:640,lg:240" data-v-fc711cbc><p class="showcase_list_itemName" data-v-fc711cbc>おしゃれ泥棒</p><div class="gsapSlideStagger_curtain" data-v-fc711cbc></div></a></li><li data-v-fc711cbc><a href="/showcase/puzzoku/" class="" data-v-fc711cbc><img loading="lazy" src="/assets/images/top/client_work/puzzoku.jpg" alt width="640" height="426" sizes="sm:320,md:640,lg:240" data-v-fc711cbc><p class="showcase_list_itemName" data-v-fc711cbc> パズ億～爽快パズルゲーム </p><div class="gsapSlideStagger_curtain" data-v-fc711cbc></div></a></li><li data-v-fc711cbc><a href="/showcase/legend_world/" class="" data-v-fc711cbc><img loading="lazy" src="/assets/images/top/client_work/lw.jpg" alt width="640" height="426" sizes="sm:320,md:640,lg:240" data-v-fc711cbc><p class="showcase_list_itemName" data-v-fc711cbc>LEGEND WORLD</p><div class="gsapSlideStagger_curtain" data-v-fc711cbc></div></a></li></ul></div></div><div class="showcase" data-v-fc711cbc><h3 class="showcase_title gsap-from-right" data-v-fc711cbc>自社プロジェクト</h3><div class="showcase_upper gsapFromRightStagger" data-v-fc711cbc><p class="showcase_description" data-v-fc711cbc> 月間30万ページビューをもつオウンドメディア「<a class="showcase_description_textLink" href="https://ics.media/" target="_blank" data-v-fc711cbc>ICS MEDIA</a>」をはじめ、データビジュアライゼーションや画像変換アプリ、文章校正ツールをリリースしています。ICS MEDIAは<a class="showcase_description_textLink" href="https://ics.media/entry/staff/" target="_blank" data-v-fc711cbc>自社のスタッフ</a>が記事を書いています。業界貢献へのマインドで、「ウェブ制作がよりよいもの」になるよう、情報発信に取り組んでいます。 </p><div class="swiper showcase_carousel desktopOnly" data-v-fc711cbc><div class="swiper-wrapper"><div class="swiper-slide" data-swiper-slide-index="0" data-v-fc711cbc><a href="http://ics-web.jp/projects/pollenmap/" target="_blank" rel="noopener" data-v-fc711cbc><img loading="lazy" src="/assets/images/top/service/pollenmap.jpg" alt width="640" height="426" data-v-fc711cbc></a></div><div class="swiper-slide" data-swiper-slide-index="1" data-v-fc711cbc><a href="https://ics-creative.github.io/project-particle-develop/" target="_blank" rel="noopener" data-v-fc711cbc><img loading="lazy" src="/assets/images/top/service/particle_develop.jpg" alt width="640" height="426" data-v-fc711cbc></a></div><div class="swiper-slide" data-swiper-slide-index="2" data-v-fc711cbc><a href="https://ics.media" target="_blank" rel="noopener" data-v-fc711cbc><img loading="lazy" src="/assets/images/top/service/ics_media.jpg" alt width="640" height="426" data-v-fc711cbc></a></div></div></div></div><div class="showcase_lower" data-v-fc711cbc><ul class="showcase_list gsapSlideStagger" data-v-fc711cbc><li data-v-fc711cbc><a href="http://ics-web.jp/projects/pollenmap/" target="_blank" rel="noopener" data-v-fc711cbc><img loading="lazy" src="/assets/images/top/service/pollenmap.jpg" alt="" width="640" height="426" sizes="sm:320,md:640,lg:240" data-v-fc711cbc><p class="showcase_list_itemName" data-v-fc711cbc>日本全国花粉飛散マップ</p><div class="gsapSlideStagger_curtain" data-v-fc711cbc></div></a></li><li data-v-fc711cbc><a href="https://ics-creative.github.io/project-particle-develop/" target="_blank" rel="noopener" data-v-fc711cbc><img loading="lazy" src="/assets/images/top/service/particle_develop.jpg" alt="" width="640" height="426" sizes="sm:320,md:640,lg:240" data-v-fc711cbc><p class="showcase_list_itemName" data-v-fc711cbc>Particle Develop</p><div class="gsapSlideStagger_curtain" data-v-fc711cbc></div></a></li><li data-v-fc711cbc><a href="https://ics.media" target="_blank" rel="noopener" data-v-fc711cbc><img loading="lazy" src="/assets/images/top/service/ics_media.jpg" alt="" width="640" height="426" sizes="sm:320,md:640,lg:240" data-v-fc711cbc><p class="showcase_list_itemName" data-v-fc711cbc>ICS MEDIA</p><div class="gsapSlideStagger_curtain" data-v-fc711cbc></div></a></li></ul></div></div><div class="showcase" data-v-fc711cbc><h3 class="showcase_title gsap-from-right" data-v-fc711cbc>書籍</h3><div class="showcase_upper gsapFromRightStagger" data-v-fc711cbc><p class="showcase_description" data-v-fc711cbc> 技術情報を発信する活動として、解説書として書籍化しています。とくに『JavaScriptコードレシピ集』は第6刷となり韓国でも翻訳出版されました。 </p><div class="swiper showcase_carousel desktopOnly" data-v-fc711cbc><div class="swiper-wrapper"><div class="swiper-slide" data-swiper-slide-index="0" data-v-fc711cbc><a href="https://ics.media/entry/231120/" target="_blank" rel="noopener" data-v-fc711cbc><img loading="lazy" src="/assets/images/top/books/frontend_roadmap.jpg" alt width="640" height="426" data-v-fc711cbc></a></div><div class="swiper-slide" data-swiper-slide-index="1" data-v-fc711cbc><a href="https://ics.media/entry/19765/" target="_blank" rel="noopener" data-v-fc711cbc><img loading="lazy" src="/assets/images/top/books/javascript_recipe.jpg" alt width="640" height="426" data-v-fc711cbc></a></div><div class="swiper-slide" data-swiper-slide-index="2" data-v-fc711cbc><a href="/showcase/html5_interactive/" class="" data-v-fc711cbc><img loading="lazy" src="/assets/images/top/books/html5_book.jpg" alt width="640" height="426" data-v-fc711cbc></a></div><div class="swiper-slide" data-swiper-slide-index="3" data-v-fc711cbc><a href="/showcase/mobile_app/" class="" data-v-fc711cbc><img loading="lazy" src="/assets/images/top/books/mobile_app.jpg" alt width="640" height="426" data-v-fc711cbc></a></div><div class="swiper-slide" data-swiper-slide-index="4" data-v-fc711cbc><a href="/showcase/stage3d_book/" class="" data-v-fc711cbc><img loading="lazy" src="/assets/images/top/books/stage3d_book.jpg" alt width="640" height="426" data-v-fc711cbc></a></div></div></div></div><div class="showcase_lower" data-v-fc711cbc><ul class="showcase_list gsapSlideStagger" data-v-fc711cbc><li data-v-fc711cbc><a href="https://ics.media/entry/231120/" target="_blank" rel="noopener" data-v-fc711cbc><img loading="lazy" src="/assets/images/top/books/frontend_roadmap.jpg" alt="" width="640" height="426" sizes="sm:320,md:640,lg:240" data-v-fc711cbc><p class="showcase_list_itemName" data-v-fc711cbc>フロントエンドの知識地図</p><div class="gsapSlideStagger_curtain" data-v-fc711cbc></div></a></li><li data-v-fc711cbc><a href="https://ics.media/entry/19765/" target="_blank" rel="noopener" data-v-fc711cbc><img loading="lazy" src="/assets/images/top/books/javascript_recipe.jpg" alt="" width="640" height="426" sizes="sm:320,md:640,lg:240" data-v-fc711cbc><p class="showcase_list_itemName" data-v-fc711cbc>JavaScriptコードレシピ集</p><div class="gsapSlideStagger_curtain" data-v-fc711cbc></div></a></li><li data-v-fc711cbc><a href="/showcase/html5_interactive/" class="" data-v-fc711cbc><img loading="lazy" src="/assets/images/top/books/html5_book.jpg" alt width="640" height="426" sizes="sm:320,md:640,lg:240" data-v-fc711cbc><p class="showcase_list_itemName" data-v-fc711cbc> HTML5 インタラクティブ表現ガイド </p><div class="gsapSlideStagger_curtain" data-v-fc711cbc></div></a></li><li data-v-fc711cbc><a href="/showcase/mobile_app/" class="" data-v-fc711cbc><img loading="lazy" src="/assets/images/top/books/mobile_app.jpg" alt width="640" height="426" sizes="sm:320,md:640,lg:240" data-v-fc711cbc><p class="showcase_list_itemName" data-v-fc711cbc> Flashプログラミングスキルを活かすモバイルアプリ開発 </p><div class="gsapSlideStagger_curtain" data-v-fc711cbc></div></a></li><li data-v-fc711cbc><a href="/showcase/stage3d_book/" class="" data-v-fc711cbc><img loading="lazy" src="/assets/images/top/books/stage3d_book.jpg" alt width="640" height="426" sizes="sm:320,md:640,lg:240" data-v-fc711cbc><p class="showcase_list_itemName" data-v-fc711cbc>Stage3D Programming</p><div class="gsapSlideStagger_curtain" data-v-fc711cbc></div></a></li></ul></div></div><div class="showcase" data-v-fc711cbc><h3 class="showcase_title gsap-from-right" data-v-fc711cbc>セミナー</h3><div class="showcase_upper gsapFromRightStagger" data-v-fc711cbc><div class="showcase_description showcase_description__grid" data-v-fc711cbc><p class="showcase_description_text" data-v-fc711cbc> カンファレンスや勉強会への登壇や、企業研修を行っています。ICSはウェブのフロントエンド技術の専門集団ですが、その技術を必要とする場所で積極的にレクチャーしています。 </p><div class="showcase_description_button" data-v-fc711cbc><a href="/seminar/" class="iconButton iconButton__small" data-v-fc711cbc data-v-21f060b4><span data-v-21f060b4>詳細はこちら</span></a></div></div><div class="swiper showcase_carousel" data-v-fc711cbc><div class="swiper-wrapper"><div class="swiper-slide" data-swiper-slide-index="0" data-v-fc711cbc><img loading="lazy" src="/assets/images/top/seminar/about_onstage.jpg" alt width="640" height="426" data-v-fc711cbc></div><div class="swiper-slide" data-swiper-slide-index="1" data-v-fc711cbc><img loading="lazy" src="/assets/images/top/seminar/seminer_02.jpg" alt width="640" height="426" data-v-fc711cbc></div></div></div></div></div></section></div></section><section class="section" id="company" data-v-fc711cbc data-v-93565b87><div class="recruit-headline" data-v-93565b87 data-v-d3c5b7cc><div class="recruit-headline-bg" style="background-image:url(/_nuxt/seminer_01.DvTlldOf.jpg);" data-v-d3c5b7cc></div><div class="recruit-headline-bg-fill" data-v-d3c5b7cc></div><div class="recruit-headline-inner__rev recruit-headline-inner gsap-children-left" data-v-d3c5b7cc><h2 data-v-d3c5b7cc>COMPANY</h2><p data-v-d3c5b7cc>会社情報</p></div></div><div class="section_content__rev section_content__small section_content" data-v-93565b87><dl class="borderList gsapFromRightStagger" data-v-fc711cbc><div class="borderList_item"><dt class="borderList_name">商号</dt><dd class="borderList_desc"><p>株式会社 ICS（英語表記：ICS INC.）</p></dd></div><div class="borderList_item"><dt class="borderList_name">設立</dt><dd class="borderList_desc"><p>2012年5月10日</p></dd></div><div class="borderList_item"><dt class="borderList_name">役員</dt><dd class="borderList_desc"><p>代表取締役池田泰延</p></dd></div><div class="borderList_item"><dt class="borderList_name">所在地</dt><dd class="borderList_desc"><p>〒106-0031</p> <p>東京都港区西麻布1-15-4</p> <p>Grado Nishiazabu #202</p> <p><small>※同番地内に別の建物があるため、郵送の際は建物名を記載するようお願いします。</small></p> </dd></div><div class="borderList_item"><dt class="borderList_name">事業内容</dt><dd class="borderList_desc"><p>ウェブサイトの企画、設計、開発、運営</p> <p>アプリケーションソフトの企画、開発、販売</p> <p>デスクトップ・モバイル向けソフトウェアの企画、開発</p> <p>インタラクティブコンテンツに関するコンサルティング業務</p> <p>雑誌、書籍、電子書籍の執筆</p></dd></div><div class="borderList_item"><dt class="borderList_name">取引銀行</dt><dd class="borderList_desc"><p>三菱UFJ銀行 五反田支店</p></dd></div><div class="borderList_item"><dt class="borderList_name">お問い合わせ</dt><dd class="borderList_desc"><p>各種相談は「<a href=/contact/>問い合わせ</a>」ページをご覧ください。</p></dd></div></dl></div></section><div class="googleMap js-googleMap" data-v-fc711cbc></div></div></div><div class="layout_footer"><footer class="footer" data-v-abcec3ea><address class="footer_copyright" data-v-abcec3ea> Copyright © 2025 ICS INC. All Rights Reserved. </address><p class="footer_menu" data-v-abcec3ea><a class="footer_menuItem footer_xIcon" href="https://x.com/icsweb" target="_blank" rel="noopener" aria-label="X（旧Twitter）はこちら" data-v-abcec3ea><svg width="14" height="15" viewBox="0 0 14 15" xmlns="http://www.w3.org/2000/svg" data-v-abcec3ea><path d="M8.3319 6.05831L13.5437 0H12.3087L7.78326 5.26035L4.16883 0H0L5.46574 7.95458L0 14.3077H1.2351L6.01406 8.75254L9.83117 14.3077H14L8.3319 6.05831ZM6.64026 8.02466L6.08646 7.23256L1.68013 0.929768H3.57717L7.13314 6.01633L7.68693 6.80842L12.3093 13.4202H10.4122L6.64026 8.02466Z" fill="#888" data-v-abcec3ea></path></svg></a><span data-v-abcec3ea> / </span><a class="footer_menuItem" href="https://ics.media/entry/privacy/" target="_blank" rel="noopener" data-v-abcec3ea>プライバシーポリシー</a><span data-v-abcec3ea> / </span><a class="footer_menuItem" href="https://ics.media/entry/quality/" target="_blank" rel="noopener" data-v-abcec3ea>品質への取り組み</a></p></footer></div></div></div></div><div id="teleports"></div><script type="application/json" data-nuxt-data="nuxt-app" data-ssr="true" id="__NUXT_DATA__">[["ShallowReactive",1],{"prerenderedAt":2,"data":3,"state":5,"once":7,"_errors":8,"serverRendered":10,"path":11},1741262559170,["ShallowReactive",4],{},["Reactive",6],{},["Set"],["ShallowReactive",9],{},true,"/"]</script> <script>window.__NUXT__={};window.__NUXT__.config={public:{},app:{baseURL:"/",buildId:"17571c2d-9c17-49ea-b71d-abe9ac1b5d2a",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script></body></html>