こんにちは、システムチームのKです。
前回、2022年のデキテル・デザインマシマシプロジェクトを終えて思うこと
という記事を書きましたが、
もう少し、掘り下げた分析をしてみようと思います。
今回CSSコーディングを行う上で、
過去のコードをベースにせず、０からコーディングをするように変更しました。
それによって得られた成果と現存する問題、改善策について
書いてみようと思います。
最初に得られた成果を数値でまとめると、
一昨年のデザインマシマシプロジェクトと比較して、
・１デザイン当たりのCSSコード量が 約 1,500行減
・テスト時の発生エラー数が 55%減（1,444件 → 657件）
となりました。
CSSに含まれる無駄なコードを一掃
これまでのデキテルCSSコーディングは、
過去のデザインCSSをベースに
必要な個所を変える、追記するというコーディング方法を取っていました。
この方法の良い点は、1からコーディングをしなくても良いので、
必要な部分だけを変えて、コーディング量を削減できることにありました。
ただ、ベースとなるCSSにも、ベースがあったので、
その過程で、新しく追加されたコードがあり、
実装担当者の経験年数もスキルもバラバラな状態で
何世代も受け継がれてできた今のCSSは、
まさしく「継ぎ足し製法の秘伝のタレ」状態となっていました。
確かに便利で使うことはできる。けれど、何が継ぎ足されているかわからないため、
「たぶん必要なものだからそのままにしておこう」という事態が発生していました。
実際、私がベースを使わずに0からCSSコーディングをしたところ、
約2,000行ほど少ないコード量で実装することができました。
全体的にも、平均して 約1,500行 は削減できています。
それだけ使わずにそのままになっている
無駄なコードがあった、ということですね。
コーディング担当者の育成不足にメス
過去のデザインCSSに頼ることで、
コーディング担当者の育成不足にも陥っていました。
特に育成が不足していたのは、
デキテルで使用されているID、class名の知識です。
もう少しひらたくいうと、デキテルのHTML構造ですね。
セレクタ指定するために必要なIDやclassを自分で取ってくることで、
必然的に、HTMLを読む機会が増えて、
HTML構造の理解度アップにもつながりました。
テスト時の発生エラー数を削減
放置された無駄なコードや、HTML構造の理解不足は
は最終的に「エラー」という形で顕在化します。
一度コーディングを終えて、テストをした段階で、
「××ページのCSSがごっそり抜け落ちていた」
「○○を△△したときに崩れる」
など
実装「漏れ」や、意図していない箇所へスタイルが当たる問題がありました。
デザインごとのテスト結果シートを見返すと、
今回新たに制作した12デザインは、
合計 657 件（平均 54.75件）のエラー箇所がありました。
これでも「多いな…」と感じるのですが、
実はこれらの数値を、
一昨年のデキテル・デザインマシマシプロジェクト
と比較してみると、
一昨年は 12デザインで
合計 1,444 件（平均 120.3件）のエラー箇所があったので、
エラーの数を半分以下にまで削減できているんですね。
エラーの数が多いほど、
修正にかかるコスト、再テストにかかる時間が膨らむので、
デザイン制作にかかるコストを下げることができました。
次回への改善 ‐ テスト結果シートを活用し、チェックリストの導入
いくつか改善できた部分があるとはいえ、
現時点でも、１デザイン当たり 48.1h のコストがかかっており、
社内で基準としている、 30h は達成していません。
今回の制作で、担当者別のエラー件数と実装時間の平均を出してみたところ
以下のようになりました。
北条（経験 6年） エラー：20件 実装時間：10.8h（※特殊なデザインが含まれるので低いですが、実質 16~17h ほどです）
内海（経験 4年） エラー：31件 実装時間：26.5h
秋吉（経験 3年） エラー：43件 実装時間：38h
布山（経験 2年） エラー：115件 実装時間：59h
片瀬（経験 1.8年） エラー：149件 実装時間：60h
辰野（経験 0.7年） エラー：107件 実装時間：64h
おおよそ担当者の経験年数と反比例しています。
また、以前より減ったとはいえ、エラーの件数がいまだ多く、
この部分が実装時間を引き上げてしまっている要因です。
このデータから、
コーディング後に発生するエラーの件数を減らすことで改善ができると考えています。
コードを書くスピードを１日２日で劇的に改善することは現実的ではないので、
エラーの件数を経験年数の長い担当者の基準に合わせに行きます。
そのために、
過去100デザイン以上のテスト結果を記載したシートという立派なデータベースを活用して
チェックリストへ変換し、
次回からの実装時に導入すれば、
エラーの数を削減し、実装にかかるコストも減らせると考えています。
