アイキャッチ

アプリ開発の「手戻り問題」からチームを救え~デザインと技術をつなぐ、ゆめみの神ツール開発秘話

転職

    あの企業の開発環境を徹底調査!Hack the Team

    エンジニアが働く上で気になる【開発環境】に焦点を当てた、チーム紹介コーナー。言語やツール類を紹介するだけではなく、チーム運営や開発を進める上での不文律など、ハード・ソフト面双方の「環境づくり」について深掘りして紹介していく。

    とあるクライアントワークで、あなたがAndroidアプリ開発のプランナーとなってモックアップの提案をしたとしよう。

    今風のインタラクションで、かっこいいUIに顧客の反応も上々だ。しかし、すぐに壁に突き当たる。実際に実装してみると、機種によってはモックアップどおりにUIが作れなかったり、アニメーションがうまく動かなかったり。

    はたまた、あなたがそのチームのデザイナーかプログラマーだったとしよう。

    デザインファイルを実装した後、「ここの見た目をもうちょっと」などと微調整の依頼が来ることは日常茶飯事。その都度、数あるAndroid端末で表示をチェックし、うまく動かない場合は原因を探り……。費やす時間はバカにならない。

    From Luke Wroblewski

    From Luke Wroblewski
    近年のアプリ開発で最大の“敵”は、対応しなければならない端末の多さにある

    こういったアプリ開発の手戻りは、受託開発では直接コストになってしまう。結果、デザイナーとプログラマーは納期が近づくにつれて疲弊していき、プランナーは顧客と自社チームの間で板挟みに。ことAndroidアプリの開発では、「あるある」な負のループといえる。

    各種モバイル向けサービスの企画・開発・運用を手掛けるゆめみも、過去のクライアントワークで似たような経験を何度もしてきた。そこで、同社のソフトウェアエンジニア柳瀬薫氏は、手戻りの回数を可能な限り減らし、チーム全体の労力を減らすべく、ある社内ツールの開発を始める。

    それが、今回紹介する『ビュージェネレーター(仮)』だ。

    たった3ステップでデザインファイルをプログラマブルに変換

    (写真左から)プランナーの岩野真理子さん、ソフトウェアエンジニアの久野雄一郎氏と柳瀬薫氏、Webデザイナーの木村昌代さん

    (写真左から)プランナーの岩野真理子さん、ソフトウェアエンジニアの久野雄一郎氏と柳瀬薫氏、Webデザイナーの木村昌代さん

    『ビュージェネレーター(仮)』を一言で説明するなら、昨今流行しているアプリのプロトタイピングツールを兼ねたデザインファイルの一括変換ツールとなる。

    【1】モックアップ用に作ったUIを、デザイナーがレイヤー構造を調整した上でAdobe Illustratorのファイルに
    【2】『ビュージェネレーター(仮)』でAIファイルを独自の中間フォーマットに変換
    【3】さらにその後、Androidアプリの実装用にJavaファイルに変換

    というのが基本機能だ。

    【2】と【3】が自動化されることで、プログラマーは端末ごとのガイドラインに準じたUI実装が必要だったところから、ワンソースで柔軟に調整作業ができるようになる。

    「エンジニア目線で言うと、『機能が同じか?』はチェックできるけれど、端末ごとに『デザインが同じか?』はなかなか判断できないものです。例えばボタンの大きさが端末ごとに微妙に変わってしまうといったような点までは、実装段階で確認し切れない。そこでこの『ビュージェネレーター(仮)』を使うことで、よりプログラマブルにデザイン調整ができるようにしました」(柳瀬氏)

    現在、柳瀬氏と同じプロジェクトで実装業務に当たっているソフトウェアエンジニアの久野雄一郎氏は、「ファイル構造がシンプルになるため、コードの可読性が飛躍的に上がった」とメリットを語る。顧客要望でデザイン修正が入った時も、該当する箇所のAIファイルを変更(またはリサイズ)すれば、後は『ビュージェネレーター(仮)』がAndroid端末それぞれの“クセ”に合わせてJavaファイルを生成してくれるため、実装~テスト時の手間は格段に減ったそうだ。

    『ビュージェネレーター(仮)』導入後の作業工数減について話す久野氏と岩野さん

    『ビュージェネレーター(仮)』導入後のメリットについて話す久野氏と岩野さん

    プランナーからしてみても、顧客にプレゼンしたUIがほぼそのまま表現できるという点で重宝するツールだろう。同社の岩野真理子さんはこう言う。

    「最近は、インタラクティブなアプリを求めるお客さまが増えているので、グラフィカルでアニメーションをふんだんに使ったUIをご提案することも多くなっています。

    従来のプロトタイプツールでは、予定していたUIが一部のAndroid端末で再現できないといったようなこともありましたが、柳瀬がこのツールを開発してくれたおかげで、企画通りに動くプロトタイプを作成して実機を見せながらご提案できるようになりました」(岩野さん)

    「それは自分の仕事じゃない」とだけは言いたくない

    ゆめみ社内における“技術面の取締役会”のメンバーでもある柳瀬氏(写真中央)

    ゆめみ社内における“技術面の取締役会”のメンバーでもある柳瀬氏(写真中央)

    もともとゆめみはデジタルマーケティング領域に精通した技術者集団で、その技術力とUI・UX設計の力量を買われて大手企業のアプリ開発を請け負う機会が増えていた。だからこそ、品質管理は最重要項目となっており、「特定のAndroid端末では狙ったUXを提供できない」という逃げ口上は許されない。

    また、新しいユーザー体験を求める企業ほど、岩野さんの言う「インタラクティブなUI」を望み、多くのステークホルダーがデザインへの要望を出してくるものだ。そのため、開発プロセスにおける手戻りコストの解消は、ゆめみにとって死活問題となっていた。

    そこで同社の「技術推進委員会(技術面についての取締役会のような組織)」の一員である柳瀬氏は『ビュージェネレーター(仮)』の開発を考案。おりしもアプリ開発の世界で重要度合いを高めている「開発とデザイン業務の融合」を、ツール一つで解消する形になった。

    結果的に、それまでは端末ごとのクセを知った上で対応していくノウハウが属人的にしか蓄積されてこなかったという問題も解決した。

    今回、初めてアプリデザインをしたという木村昌代さんは、この恩恵を享受した1人だ。

    ゆめみが進める「アプリ開発チームの強化」に伴ってWebデザイナーに転身した木村さん(写真左)

    ゆめみが進める「アプリ開発チームの強化」に伴ってWebデザイナーに転身した木村さん(写真左)

    「私が受講したデザイン研修では、業務の中で一番大変なのはエンジニアとのやりとりで、『デザイナーがプロジェクトに参加するエンジニアの人数分ガイドラインを作ったりすることもある』と聞きました。でも、『ビュージェネレーター(仮)』があればそのような手間も省けるので、空いた時間をUIのブラッシュアップやユーザー体験の向上に向けた施策検討に充てることができます。私のように初めてアプリのデザインをする人にとっては、とてもありがたいですね」(木村さん)

    こうして、エンジニアのみならず開発に関わるチームメンバーすべての不満と不安を取り除いた『ビュージェネレーター(仮)』。名前に(仮)が付いている理由を柳瀬氏に尋ねると、「今後もいろんな案件の中で使いながら、細かな部分をチューニングしていかなければならないから」と説明する。いわば永遠のβ版として、改善に取り組んでいくという気持ちの表れだ。

    さらに、将来的にはiPhoneアプリ向けにSwift版ビュージェネレーターも開発し、共に商品化を視野に入れていきたいと意気込みを語る。

    自らも複数の受託案件をこなしながら、こうした社内ツールの開発に時間を費やす原動力はどこにあるのか。岩野さんによる柳瀬氏評が、そのヒントになるだろう。

    「前に柳瀬が『それは自分の仕事じゃない、とだけは言いたくない』と話していて、頼りになるなぁと。こういう不文律は、リーダーの柳瀬だけでなく開発チーム全体に浸透しているように感じています」(岩野さん)

    己の技術力とアイデアで、チーム全体をHackする。理想論で終わってしまいがちなことを、日々の業務でコツコツ実践している人が1人でもいる開発会社は強い。

    取材・文/伊藤健吾(編集部) 撮影/竹井俊晴

    Xをフォローしよう

    この記事をシェア

    RELATED関連記事

    RANKING人気記事ランキング

    JOB BOARD編集部オススメ求人特集





    サイトマップ