NETSEAのUIリニューアルでは、TOPページやヘッダーの情報設計と並行して、 サイト全体で使用するカラーや共通UIの見直しを進めました。 本記事では、既存のSCSSを調査・整理し、 デザインと実装で共通の基準を参照できるようにした取り組みを紹介します。

長年の機能追加や個別改修によって、 カラー・ボタン・フォームなどのUI表現にばらつきが生じていました。 SCSSにはカラー変数や共通スタイルが存在していたものの、 Figma上ではそれらに対応するデザインルールが十分に整備されていませんでした。

また、既存コードには重複・不要な記述が残り、 共通UIを変更する際には影響範囲の確認が必要でした。 そこで、既存の実装資産を活かしながら、 画面を横断して一貫した判断ができる基準を整備することを課題としました。

新しいデザインルールをゼロから定義するのではなく、 既存のSCSS変数や共通スタイルを確認するところから着手しました。 既存の定義を活かしつつ、必要なカラーやUI表現は新たに設計し、 画面を横断して使用できる基準として整理しました。

カラー・ボタン・フォームについて、 従来の表現と改善後のUIを比較しながら、 変更の目的と設計上の判断を整理しました。

共通UIの変更を一度限りのものにしないため、 既存SCSSの変数や共通スタイルを調査・整理し、 Figma上のデザインルールとの対応関係を明確にしました。 特にカラーは、既存の変数定義を活かしながら、 新規カラーも含めて用途や使い分けを整理しました。

共通UIの保守性を意識し、 SCSSや既存の共通コードに残っていた重複・不要な記述の削除、 関連ファイルの統合、共通ロジックの整理に取り組みました。 既存ページへの影響を確認しながら、 デザインルールと実装の整合性を保つことを意識しました。

STG環境ではPC・SPの表示や、 ボタンのクラス、HTML構造、テンプレートの整合性などを確認し、 共通UIの変更による表示・実装上の不整合を整理しました。