開発効率化:半分の工数で作る工夫

酒井 琢郎のプロフィール画像
エンジニア 酒井 琢郎

1,724 view

ベイジのウェブサイト開発において、トップページと特長ページは特に実装に時間がかかる。従来だと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時間程度で終わった。

デザインチェックの効率化

実装が終わるごとに細かくデザインが再現できているかをチェックするのではなく、ある程度まとめてチェックすることで、作業の流れとスピードを維持した。デザイナーには事前に「粗がある」ことを伝えておき、デザインチェック前にまとめて修正を行っている。

また、デザイナーがデザインチェックに入る前に、口頭で大きな気になるところを先に潰しておくようにした。これでデザインチェックの負荷を軽減できる。「これは後回しだね」という点も共通認識として持っておくことで、細かなフィードバックを減らすことができた。

まとめ

これらの工夫を重ねることで、通常の半分以下の時間でウェブサイトを完成させることができた。改めて振り返ると、ツールだけでの効率化では不十分で、やはり深く関わるデザイナーとのコミュニケーションの効率化に重点を置くのがポイントな気もしている。

効率化は一朝一夕には実現できないが、少しずつ改善を重ねていくことで、大きな成果につながるだろう。

関連する日報

    ページネーションの必要性と表示件数の考え方

    1,120 view

    岡本 早樹のプロフィール画像
    岡本 早樹 デザイナー
    価値を生み出すスピードの本質

    499 view

    奥原美穂子のプロフィール画像
    奥原美穂子 経営企画
    新入社員が気づいた、プロジェクト改善のヒント

    592 view

    奥原美穂子のプロフィール画像
    奥原美穂子 経営企画
    納得感のあるデザイン提案のポイント

    4,042 view

    岡本 早樹のプロフィール画像
    岡本 早樹 デザイナー
    「わかりやすい」ミーティングの3原則

    8,378 view

    本山 太志のプロフィール画像
    本山 太志 コンサルタント
上に戻る