LPの制作にフリーランス人材を活用|課題ドリブンなチームに採用された人材とは

※本記事は2020年1月に公開された内容です。
Webマーケティングにおいて重要な役割を果たすLPについて、「Reverse Design(リバースデザイン)」という独自の技術を活用し、サブスクリプション型で制作を代行するサービス「AIR Design」。

今回はその実態や開発環境に加え、FLEXYからフルリモート稼働中のフロントエンジニアメンバーについて、株式会社ガラパゴス取締役の細羽啓司さんにお伺いしました。

エンジニア組織と募集背景【エンジニア組織のフェーズ】 サービスのリリース後、さらにシェアを広げていくにあたり、チームに不足していたエンジニア人材を採用して、よりプロダクトの強化を図っていきたいフェーズです。【募集背景】 開発チームに必要なフロントエンドエンジニアとして、Vue.js、Nuxt.jsを使った開発ができる人材を求めていました。

FLEXYからご紹介した方 フロントエンドエンジニア
案件概略 プロダクトにおけるフロント開発
スキル要件 Vue.js、Nuxt.js
稼働頻度 週2日、16時間
働き方 フルリモート(Slackでやりとり)

リバースデザインAIを活用した、サブスク型LP制作代行サービス

本日はFLEXYからご紹介した方がどのような働き方をしているかなど、お伺いできればと思います!まずは、組織概要を教えていただけますでしょうか?

細羽啓司さん(以下、細羽):『プロセスを変え、デザインを変え、世界を変える』というビジョンのもと、デザイン産業革命の実現を目指して活動しているチームです。

3年ほど前から新規事業としてAIを活用したデザイン自動化に関する研究を開始し、2019年7月に「AIR Design」というサービスをリリース。その開発チームに、FLEXYを通じてフロントエンドエンジニアの方をお迎えしました。 「AIR Design」はどのようなプロダクトなのでしょうか?

細羽:ざっくり説明すると、サブスクリプション型のLP制作代行サービスです。毎月定額料金をお支払い頂き、その料金内で数本のLPを弊社内のデザインチームで制作・提供します。

消費者はバナーやリスティング広告からLPへ流入した後、LPの内容を見て商品の購買の可否を決めますよね。LPはWebマーケティング上、CVRを左右するとても大事なクリエイティブですが、制作には時間もコストもかかるため、困っている企業の方も多いんです。

「A/Bテストで色々なLPを試してCVRを上げたい」と思ってもなかなか難しいのが現状でもあります。その課題に対して、弊社が毎月料金を頂く代わりにLPを数本作成・提供するのがこの「AIR Design」です。

これだけだとよくある制作サービスなのですが、特徴的なのは、社内で開発している「Reverse Design(リバースデザイン)」という技術を活用している点です。過去のLP画像を解析してデータ化することで、データドリブンなデザインプロセスを構築し、高いQCDレベルを実現しています。

「Reverse Design」は、1枚のクリエイティブ画像から色・レイアウト・フォント・テキストなど、デザインに関する様々なデータを抽出し、特徴量エンジニアリングを行うための技術群です。「Reverse Design」で過去事例を解析して得たデータや特徴量は、様々な形で制作支援に利用されます。

例えばライティング面では、世の中に公開されているLPのデータを集めてOCRでテキスト情報を抽出して自然言語処理で解析することで、「どんな構成で、どんな位置に、どんなワードを盛り込んだらいいか」という分析に使ったり。デザイン面では、「ファーストビューにどんな写真をどんなレイアウトで配置すべきか」という分析や、ストック画像をAIで独自にタグ付けすることで、時間のかかる写真素材選びを楽にしたりしています。

AIを活用するプロダクトを選んだのはなぜですか?

細羽:最初は単純に技術的な興味からスタートしました。ディープラーニングの技術でGANという手法があって、そのニュースを見たことがきっかけです。

GANは、例えばこの世に存在しない人物の写真を作り出せるような、敵対的生成ネットワークの技術です。「これは面白い。AIとデザインは相性良さそう」という話になり、まずはAIによるロゴ自動生成の研究を始めました。

最初はGANだけでロゴを作ろうとしていましたが、精度の問題で断念しました。でもその過程で、ロゴデザイナーさんの思考や作業のプロセスを分単位のレベルで細分化することができました。それら1つ1つの思考や作業を整理しなおして、AIで支援したり自動化することで、かなりの効率化が図れるのではという気づきが得られました。

それからは「人とAIの協調」という考えに切り替えて研究を進め、「Reverse Design」の概念が生まれ、最終的に1つのロゴを15秒ほどで作れるようになりました。今でも、アルバイトの方4~5人で月間20,000個ほどのロゴを作り、世界中のロゴコンペに提案しています。実は経験の浅いデザイナーさんよりもコンペでの勝率は高く、結果を出しているんです。「AIR Design」のロゴも、このシステムで作りました。

AIで制作した「AIR Design」ロゴ ロゴ

エンジニア中心の「プロセスチーム」が社内の製作を支える

「AIR Design」のチームはどのような構成ですか?

細羽:LP制作を担当するクリエイティブチーム、営業や人材採用、カスタマーサクセスを担うチームがそれぞれあります。正社員やアルバイト、リモートなどさまざまな勤務形態の方が十数人いる状態です。

加えて、エンジニア中心の「プロセスチーム」が存在します。コストや時間がかかって普通は非効率なLP制作を、業務改善やソフトウェアの力で効率化するチームです。私を含めたエンジニアもこのプロセスチームに属していて、Reverse Designの研究開発や、研究開発の成果をデザインプロセスに還元するためのツールの開発を行っています。

プロセスチームのエンジニアはどのような構成なのでしょうか?

細羽:技術の軸で分けると、要素技術・バックエンド・フロントエンドの3つに分かれます。

要素技術のメンバーは、画像やテキストの特徴量エンジニアリング、得られた特徴量を使った分析や機械学習モデルの構築、レコメンドエンジンの開発などをしています。

言語は基本Pythonで、画像解析にはOpenCVをよく使います。深層学習が有用なケースではTensorFlowやKerasを使うこともありますが、最近はGoogleのAutoMLやAzureのCustom Visionを使うことが多いです。全て自前で作るというよりは、基本はツールやサービスに任せ、大事なところだけ自分たちで深堀りしようという方針です。

バックエンドのメンバーは、要素技術の成果をLP制作に活用できるよう、APIとしてサービス化するのが主なミッションです。言語は主にKotlinを使っていますが、ちょっとしたAPIは他の言語でServerlessで作ることも多いです。Reverse Designの技術はLPに限らずバナーやチラシなど、さまざまなデザイン領域に応用がきくと思っています。

横展開を考えたときにマイクロサービス化は避けては通れないと考え、最近はgRPCの導入といったマイクロサービス基盤の整備に積極的に取り組んでいます。

フロントエンドのメンバーは、バックエンドで整備されたサービスを使ってLP制作を効率化するための社内Webサービスを開発しています。ちょうどFLEXY経由でご紹介頂いた方になります。Vue.js、Nuxt.jsを使っていて、言語はTypeScriptを使っています。

株式会社ガラパゴス 取締役 最高技術責任者 細羽啓司さん 東京大学を卒業後、前職を経て2009年3月に創業メンバーとして参画。もともとはスマートフォンアプリ開発事業に携わっていたが、2年ほど前よりAIR Designの立ち上げに従事。

FLEXYからの声がけがきっかけで、欲しかったフロントエンドを採用

FLEXYを知ったきっかけを教えてください。

細羽:野谷さんから、Facebookでお声がけ頂いたのがきっかけです。

ちょうどフロントエンドのエンジニアが欲しいと考えていたタイミングでした。別の企業様とのお付き合いやご提案もあったのですが、イニシャルコストが高くコスト的に厳しいと思っていたので、FLEXYさんのお話を聞いてみようと思いました。

ガラパゴス社を担当しているFLEXY野谷
野谷 氏
株式会社サーキュレーション FLEXYコンサルタント/野谷 勤

大手人材紹介会社出身、自称、日本で1番CTOに会っているコンサルタント。新卒からIT人材サービスに携わり、現在はFLEXYにて数多くの企業とご登録いただくIT分野の専門家を繋いでいます。

CTO、技術顧問、エンジニアのご紹介は、FLEXYまでご相談ください。

FLEXYのサービスを見る

FLEXYを使うまでの背景を教えてください。

細羽:「AIR Design」をサービスとしてリリースしたのはここ半年のことですが、それまでは少人数で進めていました。

チームの人数が少なかったので、1人のエンジニアが機械学習の実験やバックエンドの開発、フロントエンドまで全てを担当していたんです。

これからサービスを広げていこうという時にこの体制では非効率だなと思い、各自の専門性を活かしながら進められるチーム体制に移行しようと決めました。

改めてチームの技術バランスと事業計画を照らし合わせてみると、ボトルネックだったのがフロントエンドだったんです。そこで、フロントエンドのエンジニアを募集することにしました。

FLEXYで募集をする際、どのように条件を提示されましたか?

細羽:前提として、Vue.jsやNuxt.jsを使って開発をしているので、その経験のある方ですね。そのうえで稼働者候補の方をご提案頂き、書類を見て良さそうだなと思った方と随時Webミーティングを行いました。その結果、フロントエンドエンジニアの方に1人来ていただいています。

フロントエンドの方はどのようなポイントで採用されましたか?

細羽:過去の実績も当然ありますが、お話をさせていただいて、技術ドリブンではなく課題ドリブンで物事を考えられる方であるというのが大きなポイントになりました。どんなサービス開発でもそうだと思うのですが、僕たちのチームでも、イシューからはじめること、課題設定を重要視しています。その点でチームにマッチしそうだなと思いました。

他には、当時チームが悩んでいたコンポーネントの設計方針やVuexとの付き合い方について、かなりの知見とノウハウを持っていた点や、フルリモートでも円滑にコミュニケーションが取れそうな感じだったのもポイントですね。

フルリモートでの稼働に問題を感じることはありますか?

細羽:特にありません。他にもう1人フルリモートのメンバーがいるからというのもありますね。ただ、会社としてはリモートにまだまだ不慣れな面があるので、よりよい開発プロセスを日々模索していますね。現状はフロントエンドの開発ボリュームはそれほど多くないこともあり、今は週2で16時間稼働にしてもらっています。仕事に慣れてもらったら、徐々に週3稼働にしていきたいですね。

稼働者への支援内容はどういった流れでしたか?

細羽:1日目は来社して頂き、事業のビジョンやチーム体制、ソースコードの構成などをいろいろ共有しました。2日目からは完全にリモートワークです。まだ始まって1ヶ月程度なので、タスクをアサインし、随時Slack上でやり取りしながら進めています。徐々に新しい機能の開発をお願いできればと思っています。

フリーランスとしてフロントエンドエンジニアの仕事に興味のある人は年収や案件の傾向も確認しておきましょう。

貴社の今後の展望を教えてください。

細羽:チームのミッションは『デザイン産業革命で、すべての人を幸せに』です。そのために、「AIR Design」をより強くし、より広めていきます。

より強くするためには、「Reverse Design」で解析するデータの質を高めていく必要があります。特に評価指標が紐付くデータは非常に有益で、質が高いと言えます。例えばLPだとCVRの実績値が紐付いていると有益ですね。今後はネット広告代理店のように有益なデータをお持ちの企業とアライアンスを組み、データをシェアして進めていくという戦略を考えています。

より広めるために、バナーやチラシのような他デザイン領域への横展開と海外展開を予定しています。また、このデータドリブンなデザインプロセスの仕組みを、より多くの人や組織に届けるために、SaaS 型のサービスをリリース予定です。私たちはこのSaaSのことを「DaaS(Design as a Service)」と命名し、企画と設計を進めています。

FLEXYとはABOUT FLEXY

『FLEXY』はエンジニア・デザイナー・CTO・技術顧問を中心に
週1~5日のさまざまな案件を紹介するサービスです