報道関係者各位
    プレスリリース
    2025年12月23日 10:00
    ICT株式会社

    デザイン注入型コーディングで工数を最大50%削減  最新Webスターターキット「DI-KIT v2」公開

    独自メソッド「DI-CODING(R)」でWeb制作の「メンテナンス複雑化」を解消。 コードの再利用性を高め、チーム全体の開発効率を劇的に向上

    ICT株式会社(本社:兵庫県姫路市)は、Webコーディングの生産性と保守性を飛躍的に向上させる独自メソッド「DI-CODING(R)」に基づくスターターキットの最新版「DI-KIT v2」を公開しました。本キットを利用することで、Web制作工数を最大50%削減することが可能になります。


    『DI-CODING』

    https://www.di-coding.com/


    DI-KIT v2 最大50%の工数削減を実現するスターターキット

    DI-KIT v2 最大50%の工数削減を実現するスターターキット


    【背景】Web制作現場が抱える「メンテナンスの複雑化」という課題

    Webサイトの構造が複雑化するにつれ、コード変更による影響範囲の把握が難しくなり、メンテナンス工数が増大しがちです。

    特に大規模サイトやチーム開発では、

    ・デザイン変更が他の要素へ波及してしまう

    ・新規メンバーがコードを理解するまでに時間がかかる

    といった非効率が大きな負担となっていました。



    【革新的な解決策】デザイン注入型コーディング「DI-CODING(R)」

    この課題を解決するのが、当社が提唱する「DI-CODING(R)(ディーアイコーディング)」です。「デザイン注入(Design Injection)」という考え方に基づき、従来の“デザインにコードを合わせる”手法とは逆転のアプローチを採用しています。


    1.骨格(HTML)の再利用

     共通する構造パターンをもとにHTML(Webページの骨格)をコンポーネント単位で事前に用意し、再利用します。


    2.デザインの注入

     そのHTML構造に対して、柔軟にCSSデザインを注入します。


    これによりコードの再利用性が高まり、コンポーネント単位でCSSの影響範囲が限定されるため、保守性と可読性が飛躍的に向上します。



    【実践ツール】メソッドを具現化するスターターキット「DI-KIT v2」

    DI-CODING(R)メソッドを、最新技術を用いてすぐに現場で活用できるよう設計したのが「DI-KIT v2」です。


    1.開発効率と拡張性の向上

    ●最新アーキテクチャ:Nuxt 3 をベースに採用し、Vue.js の単一ファイルコンポーネントでHTML・CSS・JavaScriptを一元管理できます。

    ●高速化を標準装備 :画像遅延ロードを行う UnLazyImage モジュールを標準バンドルし、ユーザー体験の向上に寄与します。

    ●将来的な拡張性  :静的サイトジェネレーターとしての高速性・SEO優位性に加え、将来的なSPA開発への拡張も容易です。


    2.品質管理と実用性の強化

    ●品質保証      :Sass/SCSSでのスタイル記述や、ESLint・Markuplint など推奨ツールの設定を組み込み、コーディング品質を確保します。

    ●実用的なサンプル提供:vee-validate を活用した問い合わせフォーム(バリデーション、ファイルアップロード、reCAPTCHA v3対応)のサンプルを用意し、実務投入をサポートします。

    ● 簡単な導入     :Windows向けbatファイルやnpmスクリプトにより、数ステップでインストールと開発サーバーの起動が可能です。


    3.オープンソースで商用利用も自由

    本キットはGitHubから無償でダウンロードでき、商用プロジェクトにも制限なく利用いただけます。



    【Web制作者・管理者へのメリット】

    DI-KIT v2は、チームとビジネスに以下のメリットをもたらします。

    ●チーム開発の効率化  :デザイナーとエンジニアがシームレスに連携しやすく、チーム全体の生産性が向上します。

    ●保守・運用コストの削減:コンポーネント再利用性が高いため、過去のプロジェクト資産を活かし、新規サイト構築や更新の工数を大幅に削減できます。

    ●低い学習コスト    :Vue.jsに不慣れな方でも扱いやすく、Web管理者の運用・保守も、従来のHTML/CSS(Sass)の知識で利用可能です。



    【入手方法】

    「DI-KIT v2」は、以下より無償でご利用いただけます。

    ●GitHubリポジトリ(ダウンロード・利用方法): https://github.com/ICTinc3773/DI-KIT

    ●DI-CODING(R)公式サイト(詳細情報)    : https://www.DI-CODING.com/



    【ICT株式会社について】

    ICT株式会社は、中小企業のDXを支える「実行力あるパートナー」として、AI・クラウド・セキュリティ等の先端技術を活用したITソリューションを提供しています。

    顧客と同じ目線で課題に向き合い、要件定義から運用まで一貫して支援する伴走スタイルが特長です。

    ISMS認証取得済みの安全な運用体制のもと、東京・大阪・兵庫を中心に、実際の業務改善と長期的な成長にコミットするITサービスを提供しています。


    ICT株式会社

    ICT株式会社


    【会社概要】

    社名   : ICT株式会社

    所在地  : 兵庫県姫路市東雲町5-6-2 電交社ビル2階

    代表取締役: 宇治 貴博

    事業内容 : クラウド技術を基盤としたITソリューションによる、企業のDX推進サポート

    設立   : 2005年4月6日

    HP    : http://www.ictinc.co.jp/