はじめに
こんにちは、ニフティの添野 隼矢です。
今回は、驚くべき出来事をご紹介します。なんと、クリエイティブ職の方※が直接コンテナ環境でデザインを修正し、GitHubでPRをあげてくださったのです！この画期的な出来事の舞台裏に迫ります。
※クリエイティブ職の詳細については、こちらをご覧ください。
https://recruit.nifty.co.jp/career_top/
経緯:施策スピードアップへのチャレンジ
とあるサービスの施策で、画面にバナーを追加する作業がありました。
従来の課題
通常のフローでは、以下のような流れになります：
1. クリエイティブ職の方がデザイン要件を整理
2. 開発担当とのデザイン調整（複数回のやりとり）
3. 実装・レビュー・デプロイ
このデザインやりとりで時間がかかってしまい、施策開始が遅れてしまうことが課題でした。
今回の経緯
そこでクリエイティブ職の方から「デザイン修正を自分たちでやってみる」という提案をいただきました。
既存の開発環境が生んだ偶然
もともと整備していた環境
私たちは自身の開発効率向上のために、以下のローカル開発環境を構築していました。
- フロントエンド
- SvelteKit
- 開発環境
- DevContainerで統一
- 品質管理
- linter/formatter自動適用
- コンテナ管理
- Rancher Desktopを採用
これらの環境が、予想外にも「クリエイティブ職の方でも触りやすい」環境になっていました。
SvelteKit：
エンジニア向けに選択したSvelteKitが、結果的にHTMLライクでクリエイティブ職の方にも理解しやすい構造でした。
DevContainer：
「エンジニア間で環境を統一したい」という目的で導入したDevContainerが、「誰でもワンクリックで開発環境を起動できる」仕組みとして機能しました。
Rancher Desktop：
無料で誰でもつかえるツールとして、クリエイティブ職の方にも導入しやすい環境を提供してくれました。
自動linter/formatter：
エンジニアのコード品質を保つために導入していた自動フォーマッターが、クリエイティブ職の方が書いたコードも自動的にきれいに整形してくれました。
実際の作業プロセス
前提条件
- バナー画像：クリエイティブ職の方で作成済み
- HTML/CSS：知識があり、触っている
実作業の流れ
- 環境構築サポート
- Rancher Desktopのインストールと初期設定のみサポート
- DevContainer起動
- VSCodeのボタンひとつでローカル開発環境が完成
- コード修正
- 普段のHTMLを書く感覚でSvelteファイルを編集
- リアルタイム確認
- ローカル環境ですぐに変更を確認
- 自動品質管理
- 保存時に自動でコードがフォーマット
- PR作成
- クリエイティブ職の方からGitHubのPRを作成
成功要因の分析
実際にこの取り組みが成功したのは、前述の仕組み的な部分ももちろんですが、弊社に根付いている以下の文化も良い方向に作用しているように思います。
- クリエイティブ職の方の積極性
- 組織内の垣根を超えて、自由に挑戦できる環境が弊社ではあります。
- 失敗を恐れない文化
- 弊社では、問題が発生した際に個人を責めるのではなく、仕組みやシステムの改善にフォーカスする文化が根付いています。
適用範囲と制約事項
今回成功した要因として、以下の前提条件があったことも重要です。
適用可能な作業
- HTML/CSSの知識がある方による軽微なデザイン修正
- 画像やテキストの差し替え
- レイアウトの微調整
従来通りエンジニアが必要な作業
- ロジックを伴う機能追加
- データベース関連の修正
- セキュリティに関わる変更
また今回、あげてくださったPRをエンジニア側でレビューしています。
おわりに
今回の経験から得られた知見は以下です。
- 開発環境の民主化が組織全体の生産性向上につながる
- 技術選択の副次的効果を意識した環境設計の重要性
- 組織文化と技術環境の相乗効果
この気付きをもとに、みなさまの環境の参考にしていただければ幸いです。
