ベイジのウェブサイト開発において、トップページと特長ページは特に実装に時間がかかる。従来だとWordPressの開発含めて4〜5人日程かかってしまっていた。しかし、最近のプロジェクトでは工夫を重ねて、なんと2人日程度で完成させることができた。
なぜ半分の工数で作ることが出来たのか、今回はその工夫を紹介したい。
AIの力を借りて初期構築を高速化
まず、社内のエンジニアが開発したHTML&CSSの生成AIを使って、初期のHTML/CSSを構築した。ただし、中盤以降は構築済みのものをコピーする方が速いので、AIの使用は控えめになる。
Tailwind CSSで爆速コーディング
次に、CSSのフレームワークである「Tailwind CSS」を使ってHTML&CSSのデザイン再現度を高めていく。Tailwind CSSの良いところは、HTMLとCSSの間を行き来する必要がなく、HTMLだけでコーディングが完結すること。これがとにかく速い。
ただし、注意点もある。Tailwind CSSを使う場合、複数のページで使われるパーツはコンポーネント化しておく必要がある（要Astro等のフレームワーク）。コンポーネント化せずに書きっぱなしにしてしまうと、後の改修などで複数箇所に同じ変更をしなければならないなど、管理面の理由からだ。面倒くさがらずにコンポーネント化しよう。
ライブラリの活用でスライドショーを高速実装
ホームページのスライドショーには「splide」というライブラリを使用した。これが効果抜群で、フルスクラッチなら2人日程かかるスライドショーの実装が、3時間程度で終わった。
デザインチェックの効率化
実装が終わるごとに細かくデザインが再現できているかをチェックするのではなく、ある程度まとめてチェックすることで、作業の流れとスピードを維持した。デザイナーには事前に「粗がある」ことを伝えておき、デザインチェック前にまとめて修正を行っている。
また、デザイナーがデザインチェックに入る前に、口頭で大きな気になるところを先に潰しておくようにした。これでデザインチェックの負荷を軽減できる。「これは後回しだね」という点も共通認識として持っておくことで、細かなフィードバックを減らすことができた。
まとめ
これらの工夫を重ねることで、通常の半分以下の時間でウェブサイトを完成させることができた。改めて振り返ると、ツールだけでの効率化では不十分で、やはり深く関わるデザイナーとのコミュニケーションの効率化に重点を置くのがポイントな気もしている。
効率化は一朝一夕には実現できないが、少しずつ改善を重ねていくことで、大きな成果につながるだろう。
