特設ページ制作の内製化で、サイトデザインの統一を実現。ユーザビリティ向上に向け汎用コンポーネントを開発

株式会社ジェイ・スポーツ様は、4つのスポーツ専門チャンネル「J SPORTS」を運営されています。同社は Web サイト運用において、競技ごとの特設ページ制作によるデザインの不統一や、制作コストの増大という課題を抱えていました。

アイレットは、長年運用されている既存 CMS 環境に適合する HTML 設計を行ない、CSS 変数^※を活用した配色管理の仕組みを構築。新旧デザインが混在しても干渉しない緻密な設計により、お客様自身でのスピーディなページ制作を可能にしました。これにより、制作コストの大幅な削減とサイト全体のブランド統一に貢献しました。

※CSS 変数：Web サイトの色や文字サイズなどを「変数」として定義し、一括で管理・変更できる機能

株式会社ジェイ・スポーツ様（以下、ジェイ・スポーツ様）は、スポーツテレビ局「J SPORTS」を運営し、豊富なジャンルのスポーツコンテンツを提供しています。

同社では、長期間にわたりサイト運営を続ける中で、特設ページが個別に制作されることが増え、サイト全体のデザインのトンマナ（トーン＆マナー）が徐々に不統一になっていくという課題に直面していました。また、サイトのデザインの統一性が保たれていないことで、ユーザーが異なるスポーツジャンルのコンテンツを横断する際に、ヘッダーメニューなどがページごとに異なるなど、ユーザビリティの悪化が懸念されていました。

さらに、ページ単位での個別デザイン・コーディングが必要となり、制作にかかる時間と費用の負担が増加。運用コストの面でも改善が求められていました。

そこで本プロジェクトでは、これらの課題を解決し、ブランドの統一性を保ちながら、将来にわたって持続可能かつ効率的なサイト運営の仕組みの構築を目指しました。

アイレットは、制作の内製化とデザインの統一化を両立させるソリューションを提案。解決策の核となったのは、汎用性の高いコンポーネント群の開発と、CSS 変数を用いた柔軟な配色管理です。

まず、様々なスポーツジャンルへ柔軟に展開できるよう、ページを構成する UI 要素を汎用性の高いコンポーネントとして設計・開発。大会やスポーツジャンルによって要素の並びが変わっても、デザイン的に違和感がないフォーマットを実現しました。また、お客様と試行錯誤を重ねることで、内製化運用を前提とした柔軟な設計を確立しています。

さらに、統一されたフォーマットでありながら各競技の個性を演出するため、配色管理に CSS 変数を採用しました。この工夫により、コードを数行書き換えてカラー設定を変更するだけで、各競技の特性に合った雰囲気を簡単に演出できる仕組みを構築し、運用効率を大幅に向上させました。

なお、技術的な工夫として、長年運用されている CMS 環境の仕様を深く解析し、既存システムに適合する HTML 設計を実施。加えて、新規パーツと既存ページが混在してもレイアウト崩れ（干渉）が起きないよう、CSS の調整を入念に行ない、新旧デザインのシームレスな共存を可能にしています。

本プロジェクトの導入後は、お客様自身での新規ページコンテンツ作成の内製化が実現。これまで外注制作していた特設ページを、ジェイ・スポーツ様ご自身で今回開発したフォーマットを活用して制作しています。これにより、制作にかかる時間とコストを大幅に削減でき、運用コストの低減に大きく貢献しました。

アイレットは、様々な内製化支援のプロジェクトで培った知見を活かし、引き続き、お客様の環境に深く適応し、事業成長に貢献するデザイン・技術支援を提供してまいります。