ICS

INTERACTION DESIGN
& TECHNOLOGY

ウェブサイトの価値を
最大化するフロントエンド技術を。

ICSはインタラクティブコンテンツの制作を
得意とするウェブ制作会社です。

ABOUT ICS

ICSは東京都港区にあるウェブ制作会社です。
フロントエンド技術に特化し、ハイパフォーマンスで表現豊かなウェブサイトの制作に取り組んでいます。
シングルページアプリケーションや3Dコンテンツの開発を得意としています。

CREATION VALUES

得意領域と特徴

HTMLコーディングデザインに正確で、よりよいUI体験を実現する

POINT 01

デザインを忠実に再現するHTML制作

HTMLコーディングは誰が作っても同じではありません。ウェブ制作では、デザイン制作とHTMLコーディングは分業となっていることが多いです。ICSではデザインに対してズレのない正確なコーディングと、検証を行います。詳しくは関連記事の取り組みをご参照ください。

関連記事『Node.jsとPuppeteer活用のビジュアル校正テストで実装時のケアレスミスを防ぐ』

POINT 02

ユーザビリティーとアクセシビリティーの追求

ウェブサイトが使いにくい･･･という原因はHTMLの作りに依存することが多いです。ICSではHTMLの細部にまでこだわり、ユーザビリティーを意識したコーディングを行います。アクセシビリティーの向上に力も入れており、スクリーンリーダーやキーボード操作の検証も行っています。

関連記事『リンク/ボタン/フォームをより良くするHTML・CSS 17選』

関連記事『HTMLコーダーがおさえるべきinputタグの書き方まとめ』

関連記事『HTML制作で気をつけたいスクロールバーの挙動』

関連記事『HTMLでモーダルUIを作るときに気をつけたいこと』

POINT 03

UXを意識したインタラクション

ウェブサイトのユーザー体験を向上させるため、ICSではインタラクションの実装を重視しています。ウェブサイトにインタラクションがあることで、没入感が増し、操作性が向上します。UIパーツとしてのマイクロインタラクションをはじめ、スクロール連動演出、画面遷移演出などインパクトのある表現も制作可能です。

関連記事『CSSで下線を引く方法まとめ』

関連記事『detailsとsummaryタグで作るアコーディオンUI』

関連記事『JavaScriptで作る本格スクロール演出』

関連記事『CSSアニメーションでマイクロインタラクション』

POINT 04

読み込みの素早いウェブサイトに

ウェブページの表示までの待ち時間はユーザーへのストレスとなります。ICSで制作するウェブコンテンツは容量的にも作法的にも最適な作り方を追求しています。画像の作り方はもちろん、ファイル最適化など妥協することはありません。Lighthouse等のベンチマークにおいても、常にフルスコアを実現しています。

関連記事『HTMLで画像読込を高速化するために取り組んでいること』

関連記事『グーグルが開発した画像圧縮ツールSquooshを扱う方法』

関連記事『次世代画像形式のWebP、そしてAVIFへ』

関連記事『APNGやWebPへ変換できる「アニメ画像に変換する君」を開発』

フロントエンド開発快適な操作性を実現する最先端の技術

POINT 01

ハイパフォーマンスなSPAを

シングルページアプリケーションの魅力のひとつは、サクサクな画面操作体験を提供できることです。ICSではさまざまなJavaScriptライブラリ・フレームワークに精通しています。とくにReactやVueを得意とし、ベストプラクティスに則った最高品質のSPAを提供できます。

関連記事『Vue・React・Angularのパフォーマンス比較検証』

関連記事『Vue Composition APIを活用したコンポーネント分割術』

ベストプラクティスを追求した開発

フロントエンドの技術は移り変わりが激しいと言われてきました。トレンドの技術が時代で変化するため、根拠のある技術選定は欠かせません。ICSではトレンドの技術を使いつつ、作法に対して常に正しく実装し、改修に強い堅牢な設計を行います。開発体験がより良くなる技術選定も得意とします。

関連記事『Viteで始めるモダンで高速な開発環境構築』

関連記事『JavaScriptの命名テクニック』

関連記事『一段上のPromise活用テクニック』

関連記事『Scoped CSSにおけるCSS設計手法』

POINT 03

Jamstackの開発

Jamstackを採用すれば、SEOやOGPの情報を損なうことなく、SPAとしてのウェブサイトの構築が可能です。自社サイトはすべてJamstackで構成しており、その利点を熟知しています。お客様のニーズに適するようであればJamstackを提案します。

関連記事『WordPressをやめ静的サイトジェネレーターで高速化した話』

関連記事『Flash作品を残すために取り組んだこと』

クリエイティブコーディングウェブサイトに魅力的な表現を加える技術

POINT 01

表現系コンテンツの制作

ウェブ制作において表現系コンテンツはフロントエンド開発とは異なる技術ともいえます。ICSでは2000年代のFlash時代から表現系コンテンツの制作を得意としてきました。現在ではWebGLやHTML Canvas、SVGを駆使した表現の制作を行います。これらの技術はデータビジュアライゼーションや3D、ゲーム、サイネージなどの分野で利用できます。

関連記事『JSライブラリGSAPを使ったタイムリマップ表現』

関連記事『HTML5製アプリParticle Developの開発の裏側』

関連記事『CreateJSとTypeScriptでの効率的な開発手法』

関連記事『Lottieのアニメーションを手描き風に動かしたい！SVGとWebGLを使った2つのアプローチ』

関連記事『JSで作成するサウンドビジュアライザー』

関連記事『Three.js ゲーム演出に役立つマグマ表現』

関連記事『HTML物理演算入門』

WebGLの最適化

WebGLはGPUを使うことでHTMLやCSSだけでは実現できないような高度な表現を作ることができます。その一方、使い方をあやまるとコンテンツの実行負荷が増大し、期待通りに再生できないといった課題を生むことがあります。ICSではWebGLのスペシャリストが分析し、高効率なWebGLコンテンツの制作を行います。

関連記事『オフスクリーンキャンバスを使ったJavaScriptのマルチスレッド描画』

関連記事『サンプルで理解するWebGL 2.0』

関連記事『圧縮テクスチャーをWebGLで扱う方法と利点』

関連記事『WebGLのカクつき対策まとめ（Three.js編）』

SHOWCASE

事例紹介

クライアントワーク

ICSではフロントエンド技術を専門に、難易度の高いウェブ制作に取り組んでいます。シングルページアプリケーションやJamstack、ブラウザゲームなど様々なウェブ制作案件の制作を担当しています。いずれの案件でも品質に強いこだわりを持っており、HTMLコーディングであればアクセシビリティやセマンティックスを意識したり、3D表現ではエモーショナルな表現を求めたり、性能面重視のSPA開発ではパフォーマンスチューニングを徹底します。

自社プロジェクト

月間30万ページビューをもつオウンドメディア「ICS MEDIA」をはじめ、データビジュアライゼーションや画像変換アプリ、文章校正ツールをリリースしています。ICS MEDIAは自社のスタッフが記事を書いています。業界貢献へのマインドで、「ウェブ制作がよりよいもの」になるよう、情報発信に取り組んでいます。