ディレクターがコードを書いてみた時の学び

こんにちは。ユーザーファースト推進室 ディレクターの林田です。

ユーザーファースト推進室では「企画やディレクション、実装・デザインなど、一気通貫して役割を担えることで、より良いサービス開発が可能になる」という考えの下、ディレクターでも企画・進行管理だけでなく、コードを書いたり、場合によってはデザインを行うことがあります。

今回は、一気通貫してプロジェクトを進めるスキルの習得を目的として、あるアイコンの部分公開をディレクションから実装まで一通り行いました。 その中で私が感じた「ディレクターがエンジニアと仕事を進める上で気をつけたいポイント(主に技術面)」についてご紹介したいと思います。

※ 尚、ここでは経験から得た学びの共有にフォーカスしたいと考えていますので、ABテストの手法や結果等については敢えて触れません。ご了承ください。

実装始める前後で考えたこと

実装開始前

これまでクックパッド上のコードをほとんど触ったことが無かった私は、

「アイコンの実装だけだし、そこまで大変じゃなさそう」

「ABテストの仕組みをアイコンが実装されている所に入れて、その上で2つのアイコンを出すように設定すれば大丈夫そう」

と感じていました。その上で、以下の4点:

  • アイコンの出し方や計測ポイントなどの仕様を決める
  • デザイン・実装
  • 他部署の施策との調整
  • レビューなどのやり取り

を含めて大体4日程度あれば出来そうだ、という予測を立てました。

実装開始後

クックパッドでアイコンが実装されている箇所を確認し、実装に着手しました。 しかし実装を進める内に、

  • アイコンの実装箇所
  • 部分公開の導入方法
  • 出し分けの仕組み
  • アイコンのデザイン
  • クリック率の計測方法
  • 他部署の施策との調整(技術面)

など、実装前に考えていたこと以外に、いくつもの考えるべきポイントが残っていたことが明らかになり、結果として、アイコンの差し替えを行うために10日もの期間を要することになってしまいました。

実装で感じたギャップと技術の 'ブラックボックス感'

結果として予想よりも多くの時間がかかってしまったことの主な原因として、実装をする前後で考える事に大きなギャップがある事だと考えられます。

エンジニアに実装をお願いする際「技術的なことはわからないから・・・」と、技術をブラックボックスのように感じているディレクターの方も多いのではないでしょうか? この "ブラックボックス感 "が、今回実装する前後で考えた事の "ギャップ" だと感じています。

このような "ギャップ" をできるだけ解消することが、ディレクターとエンジニアがよりスムーズに仕事を進める上で重要なことではないか、と考えています。

f:id:KoichiHayashida:20151111192846p:plain

引用元: ⒸJeriff Cheng (http://free-images.gatag.net/2013/02/03/200000.html)

気持よくサービス開発を進めるために技術を知る

これらを踏まえ、エンジニアとプロジェクトを進める際に、ディレクターとして今後気をつけたいと感じたことを以下に記します。

「技術に関する知識」を身につける

このような経験を踏まえ、ディレクターでも実装工程についてエンジニアと話ができる程度の「技術に関する知識」を身につける必要があると考えています。

開発言語に関する基礎知識を身につけたり、このボタンを押したらどのような条件で処理が進むのか、などプロダクトが動く仕組みを理解することで、エンジニアが進める業務がより具体的に想像できるようになります。

また、これらの知識を身につけることで、決めた仕様に抜け漏れがないか、予想外の挙動になった場合でもそれがバグなのか、それとも仕様なのか、適切に判断することが可能となります。

私の場合は入社後にRails Tutorialなど、いくつかドキュメントを読んで簡単なwebアプリケーションを作ることで、ある程度知識を身につけました。 先日「総合職で入社した新卒がクックパッドでエンジニアになるまで」でも少し触れられていましたが、知識を身につけるのに役立つ書籍やドキュメントは多くありますので、ご覧ください。

実装にかける日数は、必ずエンジニアと相談して決める

それでももちろん、日常的にコードを書いているエンジニアとは知識の広さも深さも叶いません。プロダクトの中にどのようなコードが書かれているのか、最もよく知っているのはエンジニアです。 ある程度の工数を予想したら、エンジニアと無理のない日程が組まれているのか適宜確認することで、実現可能なプロジェクト進行が可能になると考えています。 (リリース日が先に決まってしまう場合も多いかと思いますが、その場合でも「どれくらい無理をしないといけないのか」を互いに認識しておくことは重要なことです)

これらのポイントに気をつけることで、エンジニアとディレクター間での認識のズレを極力小さくして、より良いサービス開発に取り組めると考えています。

まとめ

今回は、ディレクターとエンジニアがプロジェクトを進める際に気をつけたいポイントについてご紹介しました。 もちろん、今回書いたことはあくまで技術面のみに焦点を絞ったものでありますが、ディレクターが技術について理解していることは、エンジニアと近い目線で話すためにも必要なことだと感じています。 ディレクターの技術との付き合い方については、まだまだ模索している最中ではありますが、少しでもお役に立てれば幸いです。

/* */ @import "/css/theme/report/report.css"; /* */ /* */ body{ background-image: url('http://cdn-ak.f.st-hatena.com/images/fotolife/c/cookpadtech/20140527/20140527163350.png'); background-repeat: repeat-x; background-color:transparent; background-attachment: scroll; background-position: left top;} /* */ body{ border-top: 3px solid orange; color: #3c3c3c; font-family: 'Helvetica Neue', Helvetica, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Meiryo, Osaka, 'MS Pゴシック', sans-serif; line-height: 1.8; font-size: 16px; } a { text-decoration: underline; color: #693e1c; } a:hover { color: #80400e; text-decoration: underline; } .entry-title a{ color: rgb(176, 108, 28); cursor: auto; display: inline; font-family: 'Helvetica Neue', Helvetica, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Meiryo, Osaka, 'MS Pゴシック', sans-serif; font-size: 30px; font-weight: bold; height: auto; line-height: 40.5px; text-decoration: underline solid rgb(176, 108, 28); width: auto; line-height: 1.35; } .date a { color: #9b8b6c; font-size: 14px; text-decoration: none; font-weight: normal; } .urllist-title-link { font-size: 14px; } /* Recent Entries */ .recent-entries a{ color: #693e1c; } .recent-entries a:visited { color: #4d2200; text-decoration: none; } .hatena-module-recent-entries li { padding-bottom: 8px; border-bottom-width: 0px; } /*Widget*/ .hatena-module-body li { list-style-type: circle; } .hatena-module-body a{ text-decoration: none; } .hatena-module-body a:hover{ text-decoration: underline; } /* Widget name */ .hatena-module-title, .hatena-module-title a{ color: #b06c1c; margin-top: 20px; margin-bottom: 7px; } /* work frame*/ #container { width: 970px; text-align: center; margin: 0 auto; background: transparent; padding: 0 30px; } #wrapper { float: left; overflow: hidden; width: 660px; } #box2 { width: 240px; float: right; font-size: 14px; word-wrap: break-word; } /*#blog-title-inner{*/ /*margin-top: 3px;*/ /*height: 125px;*/ /*background-position: left 0px;*/ /*}*/ /*.header-image-only #blog-title-inner {*/ /*background-repeat: no-repeat;*/ /*position: relative;*/ /*height: 200px;*/ /*display: none;*/ /*}*/ /*#blog-title {*/ /*margin-top: 3px;*/ /*height: 125px;*/ /*background-image: url('http://cdn-ak.f.st-hatena.com/images/fotolife/c/cookpadtech/20140527/20140527172848.png');*/ /*background-repeat: no-repeat;*/ /*background-position: left 0px;*/ /*}*/