はじめまして、ひらいさだあきと申します。グッドパッチというデザインカンパニーで、CTO（最高技術責任者）とVice President of Product（プロダクト責任者）をしています。
この記事では、私がいくつかのきっかけからデザインへ関わるようになっていった経緯、そしてグッドパッチにおけるデザインとエンジニアリングの関係性について、ご紹介したいと思います。
社外のコミュニティ活動で広がった興味の対象
まずは、エンジニアとして最初の就職をした私が、どのようにデザインに対して興味を持ったのかについてお話しします。
大学卒業後、新卒として3,000人規模のSIerに就職し、主にJavaとLinuxを用いたシステム開発や、インフラ構築を行いました。入社して3年目くらいに、全社の技術支援を行う部署に異動し、プログラミングやパフォーマンスチューニングなどを経験しました。SIerに所属していた8年ほどの間、デザイナーと一緒に働くことはありませんでした。
興味の対象が広がったのは2011年ごろ、外部の勉強会などに積極的に参加するようになってからです。当時のSun Microsystems（2009年にOracleが買収）によるJavaの勉強会や、Webクリエイター・エンジニア向けコミュニティ「html5j」が主催する勉強会「HTML5とか勉強会」などで、多くの人と交流したり、スピーカーとして登壇したりしました。そういった活動の結果、「html5j」のメインスタッフにもなりました。
こういったコミュニティ活動の結果、さまざまなエンジニアやデザイナーと知り合うことになり、興味の領域は大きく広がっていきました。コミュニティの中にはデザイナーの人もいて、自然とデザインについて考える機会が増えました。
そして、『ノンデザイナーズ・デザインブック』（Robin Williams著、吉川典秀訳）や『誰のためのデザイン？』（D.A.ノーマン著、岡本明・安村通晃・伊賀聡一郎・野島久雄訳）など、デザインに関連する著名な書籍を読んでいくうちに、「IA（インフォメーションアーキテクチャ）」という領域があることを知りました。
その頃業務では、サーバサイドエンジニアとしてデータベースを扱うこともありました。Oracleのデータベース構築やテーブル設計などをする際には、データベースが扱いやすいようにデータを格納する必要があります。正規化したり、適切にインデックスを張ったりと、どうしたらソフトウェアにとって情報が扱いやすくなるかを考えます。これに対し、IA領域では「人間にとって情報を見つけやすく、わかりやすくするにはどうするか」について考えます。IAを知ってからは、「情報が格納される部分の最適化」に加え、「情報が表示される部分の最適化」にも興味を持つようになりました。
Web系企業でデザイナーと共に働き、デザインへの興味が明確に
31歳のときに最初の転職をしました。Webサービスの運営会社「カカクコム」で、グルメサイト「食べログ」の新規事業に関する開発に携わりました。少人数で密にコミュニケーションを取る開発スタイルは、SIerから転職してきた自分にとって、とても楽しいものでした。
プログラマーとして初めてデザイナーと一緒に働いたことで、ディスカッションを通じて機能やUIの仕様を決め、実装していくことがごく当たり前になりました。その経験からデザインへの興味がより明確になり、「デザインの意図を理解した上で最適な実装を考えることがエンジニアの役割だ」と感じました。
また、この頃から書体やフォントにも興味を持つようになりました。きっかけはGoogleがWebフォント（Google Fonts）の提供を開始したため、Webフォントの仕様について調べ、それに関する記事を執筆したことです。私は小説を読むことが好きなのですが、昔から好きだった本で「秀英体」が使われていることを知り、フォントやその周辺技術についても調べ始めました。フォントが好きなデザイナーやエンジニアと一緒に、フォントに関する勉強会などを開くようにもなりました。
- インストールせずに、好きなWeb Fontsを使おう：Web Fontsの歴史と使い方（1） - ＠IT （2011年09月28日）
- 好みのWeb Fontsが使えるツールを探そう：Web Fontsの歴史と使い方（2） - ＠IT （2011年10月21日）
- Google Web Fontsから好きなフォントを使ってみよう：Web Fontsの歴史と使い方（3） - ＠IT （2011年12月13日）
Webやスマートフォンの世界が変わることを感じてグッドパッチへ
カカクコムでの開発は楽しかったのですが、徐々にもっと小規模なスタートアップ企業で働いてみたいという気持ちが強くなりました。また、当時「モバイルファースト」「レスポンシブWebデザイン」（閲覧する人の画面サイズやWebブラウザなど、閲覧環境に合ったレイアウトでWebページを閲覧できるようにするWebデザインの表現手法）という言葉を聞く機会が増え、Webやスマートフォンの世界が大きく変わりそうだとも感じていました。
そこで、これまでの経験やデザインへの興味・関心を踏まえ、エンジニアとしてもっとデザインに関われる環境に身を置きたいと考えて、2015年1月、グッドパッチに入社しました。
当時のグッドパッチは、約50名という小さな組織でした。自社プロダクトのプロトタイピングツール「Prott」の開発チームには、優秀なエンジニアが何人もいたのですが、チーム全体をまとめる人はいませんでした。そこで、入社してすぐに開発環境やドキュメントなどの整備を行いました。具体的には以下のようなことです。
- ばらばらになっていた環境構築手順をまとめて最新化し、最後に入社した人が次に入社した人のセットアップを支援するようにした
- Capistrano（Rubyをベースにしたサーバ操作・デプロイ自動化ツール）で行っていたデプロイについて、手順が複雑になっていたため、スクリプトにまとめた
- GitHub Flowを導入し、積極的にコードレビューなどを実施するようにしていった
- エンジニアの社内勉強会を隔週で行うようにし、自分自身もグッドパッチのエンジニアとして外部のイベントに登壇した
私はコードを書きたいと思って入社しており、マネジメントをやりたかったわけではありませんでした。ただ、優秀なエンジニアが気持ちよく働ける環境を作ることは楽しいし、そのことで喜んでもらえるのならチームのサポートやマネジメントの比率を増やしてもいいと思うようになりました。
そして、CEOの土屋尚史や他のメンバーともディスカッションを重ねた上で、入社してから1年くらいのタイミングで「執行役員 CTO」に就任し、エンジニア組織をまとめることになったのです。
「デザインと技術をつなぐ」グッドパッチのエンジニアは、デザインにどう向き合っているか
ここで、デザインに特化した会社であるグッドパッチのエンジニアがどのように働いているかについて、紹介させていただきます。
デザイナーとエンジニアがそれぞれの領域を広げてカバーし合う
グッドパッチには「ハートを揺さぶるデザインで世界を前進させる」というビジョンと、「デザインの力を証明する」というミッションがあります。私がCTOになった時に、エンジニアのミッションステートメント「デザインと技術をつなぐ」を定義しました。
エンジニアが増えてきて、それぞれの多様性を保ちつつ、グッドパッチで同じ方向を向いて仕事に取り組むために、ミッションステートメントが必要だと考えました。
デザインを実現するためには技術が必要ですが、単に技術力を高めていくだけではなく、「自分自身が持つ技術をどのようにデザインにつなげていくかについて考えてほしい」という思いを、ミッションステートメントに込めました。
グッドパッチのエンジニアは、大きく4つの職種に分けられます。
- フロントエンドエンジニア
- サーバサイドエンジニア
- iOSデベロッパー
- Androidデベロッパー
フロントエンドとサーバサイド、iOSとAndroidなど、複数の役割を兼務している場合もあります。また、上記以外に、「UXエンジニア」「インターフェイスデベロッパー」「アプリケーションデザイナー」などの肩書きを持つエンジニアもいます。いずれも、デザインとエンジニアリングの架け橋となるような働き方をする職種です。
良いサービスやプロダクトは、デザインと技術の融合によって成立していると考えています。サービス・プロダクトとユーザーとの間に立って、技術でより良いユーザー体験を作り出すのが、グッドパッチのエンジニアの仕事だと思っています。
デザイナーと一緒にプロジェクトの初期から開発するスタイル
グッドパッチでは、プロジェクトの初期フェーズからエンジニアが入ることを推奨しています。プロジェクトの基本的なメンバー構成は、「プロダクトマネージャー（PM）/UXデザイナー」「UIデザイナー」「エンジニア」です。エンジニアとデザイナーがディスカッションしながら、「どんなものをどうやって届けようか？」というリサーチやユーザーインタビューの段階から関わり、ユーザー体験の仮説検証を行いながら、UIやシステムの設計をしています。
グッドパッチのエンジニアは、私と同様にデザインが好きな人ばかりです。私自身はIAの専門家ではありませんが、IAの知識を多少でも身に付けておくと、「どうしてここにそのボタンがあるか」「このタグはどんな意味があるか」などについて、デザイナーと同じ言語で議論することができるようになります。そういった議論を経ることで、意味のあるデザインと意味のある実装を両立していきます。
エンジニアがプロジェクトの初期フェーズから関わることによって、ネイティブアプリ1つとってもユーザー体験の作り込みが深くなります。例えば、サービスの基本設計に関わるような新規登録のフローやプッシュ通知の設計などは、iOSとAndroidそれぞれで違います。エンジニアがごく初期からプロジェクトに入っていれば、基本設計の時点で、エンジニアの視点から検討事項を反映できます。
もう少し具体的な例をお伝えしましょう。
例えば、Androidデベロッパーには、マテリアルデザインのアドバイザーとして別のプロジェクトにも参加してもらいました。「どのようなコンポーネントが最適か」など、エンジニアの知識をデザインに落とし込んでいく必要がある部分はたくさんあります。
また、iOSデベロッパーがUXデザイナーとしてプロジェクトに参加したケースもあります。Appleが提供している「Human Interface Guideline」は、インターフェースに関する内容ではありますが、iOSの仕組みを前提とした内容も多々存在しています。そこでグッドパッチでは、iOSデベロッパーがデザインに関わることで、理解しづらいところをクリアにしています。
Themes - Overview - iOS Human Interface Guidelines
このように、エンジニアがプロジェクトの初期フェーズから入って、チームとして動いていくことはとても大事です。
ネイティブアプリやフロントエンドに関わるエンジニアはUIも作るので、ユーザーが目にするデザインと直接的に関わっています。バックエンドのエンジニアは、ユーザー体験を向上させるためにパフォーマンスチューニングによってレスポンスタイムを改善することを常に意識してくれています。
デザインと関わるエンジニアのキャリアパス
グッドパッチのエンジニアには、エンジニアリングという軸をベースにデザインの領域を広げていく“T字型人材”*1タイプが多いです。自主的にデザインを学んでいる者もいます。社内のSlackにはUIをテーマにしたチャンネルがあり、職種を超えてあらゆるプロダクトのUIに関する考察をしています。
そんな中で、私たちはエンジニアそれぞれの得意分野や今後伸ばしていきたい分野に合わせ、プロジェクトのアサインを考えています。例えば、「iOSデベロッパーだけど、今後はUXデザインの領域でも知識を身に付け、プロダクトに活かしていきたい」というエンジニアがいる場合は、デザインスプリントへのアサインを検討します。
エンジニアの次のステップとしては、主に以下の4つがあります。
- リードエンジニア
- エンジニアリングに関するスペシャリスト
- デザインエンジニア / UXエンジニア
- エンジニアリングの知識やスキルを活かして、UIやUXを作る
- プロダクトマネージャー
- エンジニアリングの知識やスキルを活かして、プロダクトを作る
- ピープルマネージャー / エンジニアリングマネージャー
- エンジニアリングの知識やスキルを活かして、チームを作る
職種によって、エンジニアリングのバックグラウンドを活用する部分が異なるイメージです。海外では「デザインエンジニア」や「UXエンジニア」という肩書の人は増えてきていますし、求人も多くなってきています。この現状を受け、エンジニアがどのように次のステップに進むかについて現時点では定義していません。もし目指す職種が「プロダクトマネージャー」だとしても、個人によって身に付けたい知識やスキルは異なるためです。
また、技術の発展に伴って職種が細分化されていく流れの中で、上記以外の職種も増えていくでしょう。どんな職種ができたとしても、グッドパッチのエンジニアリングに関わる上で、ミッションステートメントである「デザインと技術をつなぐ」は、どのエンジニアにも意識し続けてもらいたいと思っています。
＊ ＊ ＊
グッドパッチの職種紹介で挙げた「UXエンジニア」には、一般的に「UXデザイナーとは違い、コードを書ける」という意味が含まれていると思いますが、その境界は限りなく曖昧になってきました。デザイナーでも自分でコードを書いて直したい人もいると思いますし、JavaScriptやCSSだけで実現できることも増えていて、それを可能にするツールもあります。一方で、エンジニアの中から「デザインを自分でもやってみたい」という人も出てきています。職種の垣根を越えようとする人が増えていくのは面白いことです。
デザインとエンジニアリング、Webとアプリ、Webのエンジニアとネイティブアプリのデベロッパーの境目は、これからどんどんなくなっていくでしょう。ただ、ユーザーがプロダクトから受け取る体験そのものは、そういった境目とは関係ありません。
グッドパッチのデザイナーとエンジニアは、それぞれの領域を広げお互いをカバーし合うことで、デザインのクオリティを上げていきます。お互いの得意不得意を補い合いながら開発に取り組んでいくということが、今後エンジニアにとって大切になってくると思います。
執筆者プロフィール
ひらい さだあき 
sada_h / 
sadah / 
console.blog(self);
株式会社グッドパッチ 執行役員 CTO & Vice President of Product。2015年1月に入社、2015年12月にCTOに就任。CTOとしてエンジニアリング組織作り、エンジニアリング評価制度策定、技術選定、環境整備、エンジニア採用などを行い、Vice President of ProductとしてProttのプロダクト開発の推進、事業目標達成に向けて取り組む。プライベートでは「html5j」というコミュニティのスタッフとして活動し、執筆/登壇活動を行う。FontLoversというFacebookグループを友人と立ち上げ、フォントに関するイベントなどを開催。好きなフォントは秀英体とOptima。
*1:得意領域の専門知識・スキルを軸足とし、それ以外の周辺領域についても幅広く知見を持つ人材のこと。アルファベットの「T」の文字における縦の棒を専門性、横の棒を周辺領域や視野の広さに見立てている。
読み込み中