エンジニアtype - エンジニアのシゴト人生を考えるWebマガジン
  • TOP
  • キーパーソン
  • 旬ネタ
  • コラボ
  • ノウハウ
  • 女子部
  • キャリア

現代のデザイナーは実装できて当たり前?GunosyのUIデザインチームが考えるエンジニアとの理想の関係

タグ : Gunosy, UIデザイン, グノシー, ニュースアプリ, プロトタイピング 公開

 

BASEのCTOえふしん氏は今年1月の弊誌連載の中で、モバイルファーストの時代においては「フロントエンドを担う人材の作業範囲が、ビジュアルデザイン主流から実装主体へと移ってきている」ことを指摘していた。

>> UIデザインは結局誰の仕事なのか?スマホ時代のサービス設計で必要なスキルを再考する【連載:えふしん】

その作業範囲は時にはバックエンドにまで及ぶ。これだけの広範囲を適切にカバーできる人材は、それほど多くないというのが現実だろう。

そんな中、情報キュレーションアプリ『グノシー』を提供するGunosyのUIデザインチームは、所属する3人のデザイナー全員が日常的に実装までを担っているという。

Gunosyのデザイナーはなぜコードを書くのか、また書けるのか。同社のUIデザイナー森浩明氏、樋口剛氏へのインタビューから、同社の考えるエンジニアとデザイナーの理想的な関係を探った。

表示ロジックもAPI設計もデザイナーが担当する

GunosyのUIデザインは現在3人体制。森氏がiOS、木村宏平氏がWeb、樋口氏がプラットフォームと、それぞれプロダクトごとの少人数のチームに所属している。

同社には「フロントエンドエンジニア」と呼ばれるエンジニアがおらず、必然的にその業務はUIデザイナーである彼らが担うことになる。

「自分の場合で言えばもう少し踏み込んだところまで行っていて、表示ロジックやドメインモデルなどを鑑みて、APIの設計素案も担当しています。その後、エンジニアとともにその素案に基づいて、クライアント・バックエンドの設計・実装フェーズに移ります」(樋口氏)

こうした業務の区分けは、Gunosyの社員デザイナー1号である森氏が2014年ごろ、フリーランス時代に自分で作ったライブラリを使って『グノシー』のテキスト周りの実装を行ったのが始まりだった。

その後に入社した樋口氏、木村氏もコードを書ける人材だったため、次第にそれはGunosyとしての“文化”になった。

デザイナーとエンジニアのやり取りは基本的にGitHub上で行われる。ブランチを切ってプルリクエストを送り、それがマージされて……という流れは、デザイナーであってもエンジニア同士のそれと変わらない。

「GitHubベースのコミュニケーションになったことは、こうした仕事の仕方をグッと楽にさせました。間違いがあったら巻き戻しができるし、コードベースでリクエストができるから、担当領域を超えた部分でも躊躇なく提案できる。心理的な効果が大きかったですね」(森氏)

実装能力が「とりあえず作ってみる」ことのハードルを下げる

ユーザーインタビューの様子。検討されている機能などは、デザイナーが最小限の動作を仮実装し、実際にユーザーに使ってもらうこともある

ユーザーインタビューの様子。検討されている機能などは、デザイナーが最小限の動作を仮実装し、実際にユーザーに使ってもらうこともある

「どんなデザインにするのかは、実装コストとの掛け合いです。そもそも実現可能なのか、それによってユーザーにどのようなメリットがもたらされるのかの議論抜きに、デザインは決められない。だから、最終的に実装はエンジニアに任せるにしても、デザイナーがそのロジックやコストを理解していることは必須だと考えています」(樋口氏)

こうした考え自体は、多くのデザイナーが共有しているものかもしれないが、Gunosyのデザイナーは実装の能力も備えていた。そうした条件面も手伝って、現在のような仕事の切り分けになっているという。

「プロトタイプを作る上でも、実装能力の高さは大きなメリットをもたらす」と森氏が続ける。

「Gunosyでは、ペーパープロトタイプレベルのモックアップは『InVision』を使っています。ただ、より実際のプロダクトに近い導線・インタラクションであればあるほど、ユーザーインタビューでも社内のエンジニアとのやりとりでも、フィードバック量が段違いに増えるんです」(森氏)

エンジニア同士、専門家同士の話が煮詰まるにつれて実際のユーザー目線から離れてしまうことがあるように、デザイナー同士の話が盛り上がった場合にこそ、大きな落とし穴が潜んでいると2人は口をそろえる。

「アイデアがひらめくとテンションが上がるのがデザイナーですが、実際に作ってみると思ったほど面白くないということもよくある。だからとりあえず作ってみて、いろんな人の反応を知ることがすごく重要なんです。自分の手である程度のところまで作ることができれば、『とりあえず作ってみる』のハードルを下げることができます」(森氏)

「一過性の話題ではなく、真に使われ続けているサービスは大抵、数字を見ているし、ユーザーを見ている」と樋口氏。その遡上にいち早くのせるためにも、「とりあえず作ってみる」ことが非常に重要だと2人は言う。

なぜできる?2つの理由

しかし冒頭でも触れた通り、理想はそうであっても、実際にできる人材はそう多くはいないはず。なぜGunosyのデザイナーにはそれだけのことができるのか。

その答えの1つは、デザイナーとしての長いキャリアにあるようだ。

「90年代はインタラクティブなコンテンツやWebサイトが盛り上がっていて、そこにコミットしていきたいデザイナーの多くは自然とActionScriptやJavaScriptを学びました。だからコードを書けるデザイナーは一般的な存在だったと思いますよ」(森氏)

その後、サービスの規模が拡大し、だんだんと複雑化していく中で、デザイナーとプログラマーの分業が進んでいった。それ以前から活動しているデザイナーであれば、こうしたスキルや習慣が備わっている人はそれほど珍しくないという。

2つ目の答えは、「好奇心」と「必要」の相乗効果といえるだろうか。

樋口氏はもともと情報工学の専攻で、プログラマー寄りの出自。デザインは独学で学んだ。映画のプロモーションサイトを作る仕事の際など、「他に人材がいなかった」という理由で担当領域を広げていった。その後7年のフリーランス時代には、デザイン、フロントエンド、バックエンド、ディレクションの全てを行っていたという。

一方の森氏は、印刷物のデザインから始めて、音楽CDのムービーコンテンツなどを経て、Webに活躍の場を移していった。最初はデザインだけを扱っていたが、分業するエンジニアの仕事を間近で見続ける中で、「自分にもできるのではないか。やってみたい」と好奇心から徐々に領域を広げ、自身でアプリをリリースするまでになっていった。

「ただ、専門外のことはゼロから学習するから時間がかかる。サービスに主体的にかかわりつつ、効率よく作る環境を求めてたどり着いたのがGunosyだったんです」(森氏)

何かを実現したいと考えた時に、まず自分で手を動かして作ってみるという精神はGunosyに入社してからも変わっていない。

足りないものがあればその都度調べて、必要とあれば新たなスキルを身につけるというスタンスで、デザイナーとエンジニアの境界を超えた挑戦を続けている。

全てはアウトプットのために。職能や肩書きは関係ない

「何かを実現したいと考えた時には、まず自分で手を動かして作ってみる」−−。こうした森氏と樋口氏に共通する精神とスキルは、Gunosyが今後新たなデザイナーを採用する上でも重視していく考えという。

「Gunosyが掲げているのは、最適な情報を最適な形でユーザーに届けるというミッション。その実現のために僕らは集まっている。自分にできることを肩書きや職能に縛られることなく発揮するのは自然なのではないか」と、樋口氏はあらためて仕事へのスタンスを語る。

Gunosyではこれまで、その「最適」を知るために数値を重視してきた。そのスタンスは変わらないが、今後はそれに加えてより、直接のユーザーインタビューを重視していく方針という。そこにはデザイナーだけでなく、エンジニアをも巻き込みたいと2人は考えている。

「人の反応を観察することには、調査会社のデータでは得られない気づきがあるから、みんなやってみるといいと思うんですよ。現状はユーザーインタビューをデザイナーチームが行っていますが、エンジニアにもそれを広げていったらおもしろいんじゃないかと思っています」(森氏)

最終的なアウトプットのために、できることがある人が集まり、肩書きにとらわれずに得意なことを発揮して足りない部分を埋めていく。Gunosyが追求しているのは、そんな理想的なチームのようだ。

取材・文/鈴木陸夫(編集部) 画像/Gunosy提供




人気のタグ
業界有名人 スタートアップ 開発 SE 転職 エンジニア プログラマー Web スキルアップ ソーシャル アプリ シリコンバレー キャリア プログラミング Android 起業 えふしん スマートフォン アプリ開発 SIer 技術者 UI btrax Webサービス クラウド Apple スペシャリスト CTO Twitter Brandon K. Hill ギーク 英語 村上福之 Facebook Google デザイン IoT SNS ツイキャス 世良耕太 モイめし IT 30代 採用 赤松洋介 コーディング 20代 UX 勉強会 プロジェクトマネジメント Ruby ITイベント Webエンジニア 中島聡 ビッグデータ 法林浩之 ウエアラブル iOS 五十嵐悠紀 LINE ドワンゴ ひがやすを ロボット 受託開発 モノづくり IT業界 コミュニケーション イノベーション ハードウエア MAKERS tips ゲーム 女性 ソーシャルゲーム Webアプリ SI インフラ iPhone 女性技術者 高須正和 マイクロソフト 研究者 UI/UX トヨタ 自動車 ノウハウ チームラボ 息抜き システム ソニー プラットフォーム Java メイカームーブメント オープンソース 和田卓人 エンジン グローバル 開発者 教育 イベント サイバーエージェント ソフトウェア 女子会 コミュニティ メーカー 家入一真 スーパーギーク 増井雄一郎 GitHub 人工知能 IPA 40代 日産 テスト駆動開発 ソフトウエア 音楽 TDD ニュース モバイル PHP TechLION

タグ一覧を見る