こんにちは。はてな デザインチームの 
id:ueday です。
先日、はてなでは品川の日本マイクロソフトで「はてな エンジニアブロガー祭り」を開催しました。
そこで発表された、はてな アプリケーションエンジニアの 
id:hitode909 による 「高速にドッグフードを食べる方法」 のスライドが SpeakerDeck に公開されています。もうご覧になりましたか？
はてなブログチームでは高速にドッグフードを食べながら開発していますが、この記事では 「エンジニアと一緒に高速にドッグフードを食べるデザイナー」 という視点から、はてなブログ開発の様子をご紹介します。
高速にドッグフードを食べるメリット
「ドッグフードを食べる」とは、実際にドッグフードを食べるわけではなく、「自社で開発したソフトウェアを自分達で実際に業務などに使ってみる」という意味で、マイクロソフトの社内文化から生まれたエンジニア用語なのだそうです。はてなブログチームでも、はてなブログを各自日常的に使っており、そこで感じた「もっとこんな機能があったらいいのに」といった意見を開発に活かしています。
ドッグフードを食べると、下記のようなメリットがあります。
- プロダクトの使用感を確かめられる
- 機能開発や不具合修正のモチベーションが高い
高速にドッグフードを食べるには
はてなブログチームでは、リリースの頻度を高めることで高速ドッグフーディングを実現しています。月曜〜木曜は毎日デプロイしており、 毎週何かが変わるはてなブログ として開発してきました。
この開発スピードに対応するには、エンジニアとなるべく同じ開発環境を整えることが大切です。はてなではデザイナーでも「直接テンプレートを触ってコーディングする」「git commit する」「ローカルサーバーで動作させる」といったスタイルで開発しています。デザイナーにはあまり馴染みがない文化なので最初はちょっと大変で、戸惑いもありましたが、2〜3ヶ月したら慣れました。慣れるとむしろ便利なことに気づきます。
開発の流れ
不具合を見つけたら
はてなブログに不具合を見つけたら、とりあえず GitHub Enterprise (社内にGitHubを構築できるサービス) の Issue に登録します。最近はサポートスタッフや編集スタッフも GitHub を使っており、ほとんどのタスクは GitHub の Issue で管理しています。
自力で直せそうな不具合だったら、直して Pull Request*1 を送ります。
実際の Pull Request の様子です。エンジニアに確認してもらい、問題なかったらマージします。
こんな感じで確認してもらっています。
自力で直せなかったらエンジニアに相談して、チームメンバーにアサインを依頼します。
新機能を作るときは
ここでもまず Issue ありきなので、Issue に機能概要を書きます。
次に具体的な仕様を詰めるのですが、おおむね下記の3つの手段でチームメンバーと相談しています。
- IRC
- 口頭
- Issueコメント
Issue には IRC のログやスクリーンショットを貼り付けています。
ここまでできたら実際に開発を始めます。開発のスタイルはチームやデザイナーの性格によってそれぞれ違いますが、私の場合は軽くラフスケッチを描いてから、すぐコーディングに入る場合が多いです。Photoshop や Illustrator でモックを作る場合でも、チームメンバーが理解できる程度の作り込みで済ませて、早めにコーディングに入るようにしています。実際にブラウザでたたき台を見た方が使用感がわかりやすいし、それをもとにより良い仕様や UI に変えることも多いからです。ブログチームは全員ドッグフードを食べている（はてなブログを使っている）おかげで、軽いラフスケッチだけでもチームメンバーが何を言おうとしているのか理解できるのです。（もちろんきちんとモックを作った方が良い状況もあるので、場面によって使い分けています）
そのやりとりも GitHub の Issue で行っています。これはテーマ ストア開発時の様子です。
デザイナーの担当範囲
コーディングでのデザイナーの担当範囲は主に HTML と CSS で、ページをひと通り作る（けどまだ動かない）、といった感じです。例えば何かボタンを実装する場合にはとりあえずリンクが空のボタンを置いて、デザインを当てた状態で push します。ここから先はエンジニアにバトンタッチして、「ボタンを押したら記事が投稿される」などの部分を実装してもらえば完成です。
まとめ
以上、はてなブログチームのデザイナーの高速ドッグフーディングの様子を紹介しました。まとめると、
- 日頃から自分達のサービスを使う
- モックの作り込みは程々に、早めにコーディングに入る
- デザイナーもテンプレートを直接触る
- GitHub でコミュニケーションする
の4点を開発スタイルに取り入れることで、エンジニアと一緒に高速にドッグフードを食べることができます。
デザイナー募集
はてなでは関西最速ドッグフーディングを目指したいデザイナーを募集しています。
*1:変更を本流に取り込んでもらうように要望すること
