FRONT-END.AIを使うことで業務がどう改善されるのか気になる方は多いでしょう。今回は先んじて利用してくださっている株式会社SEEC様に、その導入に関わるお話や、業務改善についてお話を伺いました。
今回インタビューさせてもらったのは株式会社SEECのデジタルマーケティング部セールスアーキテクト課主任の宮平 大海氏、エンジニアの儀間 哲明氏、そしてエンジニアの仲間 莉央氏になります。
ー 御社についてお聞かせください
宮平氏）株式会社SEECは2005年10月に設立し、今年で16年目になる企業です。現在は東京オフィスに加えて、沖縄オフィス、恵比寿 ラボの3拠点で活動しております。従業員数はシーク単体では197名、グループ全体では239名となります。事業内容としてはインターネット広告代理事業やインターネットメディア事業、旅行事業など様々な事業を展開しております。
ー 皆さんの所属されているセールスアーキテクト課と、そのミッションについてお聞かせください
宮平氏）セールスアーキテクト課は、インターネット広告代理事業のランディングページ制作に携わっています。ミッションは、クライアント企業の成果を最大化するためにランディングページのリリースにコミットし、より早く制作を行うことになります。
ー FRONT-END.AI導入前の御社の課題について、お聞かせください
宮平氏）エンジニアの成長する機会が少なく、チャレンジする時間を確保する目的でオフショア開発を導入しました。それによって制作件数は伸びたのですが、日本側のエンジニア業務がレビューのみになってしまい、成長機会については変わっていませんでした。
そこで、成長機会として業務時間外での社内勉強会を行ってみました。たとえばPHPやJavaScriptなどを熱かったですが、経験が浅い人たちはまだそういった言語に触れていなかったので。しかしレビュー 作業だと せっかく覚えても忘れてって ところがあって、それを維持するための勉強会に近いかも知れません。
しかし、業務に活かせずエンジニアのモチベーションが低下してしまい、あまり良い結果が出せませんでした。
ー FRONT-END.AIの最初の印象はいかがだったでしょう？
仲間氏）宮平の方から、FRONT-END.AIというツールがあるというのを聞いて。課内で実際、どんな感じなのかなって詳細を確認しましたね。結構いい感じだね、といったところで、私と儀間で話を伺ってみようかという流れでした。
儀間氏）正直なところ、最初は自分が1からコーディングした方が早いんじゃないか、という思うところはあったので導入には少し否定的でした。CSSは背景画像で、HTMLのみ出力されるということだったので、本当に作業効率が良くなるのか少し不安でした。ただ実際に触ってみると、AIで画像を検出してくれるだけでもありがたかったですね。
ー 導入決定した決め手はどこにありましたか？
仲間氏）デモを見る中で、割と自由度が高いと言うか、自分の好きなタグが設定できたり、画像解析を自動でやってくれるというところでしょうか。自分で組むのとあんまり変わりなく、自由に組める点が大きな決め手だったと思います。
ー 最初に使ってみたときのエピソードがあれば
儀間氏）最初の一か月はツールに慣れていなかったので、通常のコーディングよりも時間がかかっていたかも知れません。慣れるにつれて、効率が上がっていくのを身をもって実感することができました。これまでは盲目的にコーディングを行っていましたが、導入を機会にDOM構成の見直しやCSSパターンの作成などを行って、コーディング時間の短縮にもつながりました。
仲間氏）慣れてないから、それで遅くなっちゃうんじゃないかという不安がありました。実際の利用に関する詳細なイメージができてないので、その未知に対する不安があったかも知れないです。
ー 続けられた理由は？
仲間氏）操作性が直感的でシンプルで、複雑な操作がないからですね。反復でやっていったら、おそらく速くなるだろうっていう未来は見えていた気がします。その可能性があったので、続けていけるモチベーションになりました。
ー FRONT-END.AIの魅力に感じた点を教えていただけますでしょうか
宮平氏）オフショア導入前から自動コーディングツールの検討は行なっていたのですが、自由度はあまり高くありませんでした。例えば、提供されるテーマに沿ってデザインしないといけなかったり、アーキテクチャの選択に制限があったりします。FRONT-END.AIはテンプレートではなく、自動解析するのでデザイン制限がなかったり、生成されたデータをダウンロードして利用できるので、アーキテクチャの制限もないという部分が魅力的でした。
ー 自由度が一つのキーになりそうですね
宮平氏）私たちとしては、基本的にクライアントのイメージしてるデザインに近づけたい、という思いがあります。テンプレートやテーマだと、それが難しいです。画像はここに配置しないといけないといった制約があったりします。デザイナーもクライアントの要望に沿って作ろうと思うと、固定されたテーマでは表現しづらい部分がありました。
仲間氏）デザインという自由度もありますし、使えるタグの自由度も大事です。このタグの中に、あるタグを入れたという独自のルールもあったりします。そうしたフレキシブルな感じ、自由度の高さが重要でした。FRONT-END.AIのタグ要素をドラッグで動かしてネストしたコードが作れるといった仕組みはとても便利です。
ー 実際の導入効果はいかがでしょう
宮平氏）これまで制作に10営業日かかっていた経験の浅いメンバーが、5営業日で製作できたのは非常に驚きました。他のメンバーからも非常に使いやすいという声があったので、 地道に制作件数を伸ばすことでFRONT-END.AIの利用を定着させています。ビジネス的な効果で言うと、オフショア閉鎖に伴って10名体制から4名体制になり、最初の月は制作件数を大きく落としてしまいました。しかし、現在では10名体制の時とほぼ同等の制作件数に対応できております。オフショア開発時より年間1千万円程度のコスト削減につながっています。
儀間氏）最初はコード生成まで2〜3時間かかっていたのですが、現在は1時間ほどとなっています。導入前はコードが属人化しており、人によって書かれるコードが違いました。そのため、修正がしにくかったり、複雑なコードになっていました。導入によって作業効率が上がったことで、コーディング以外の業務、例えば他のメンバーをサポートすることもできるようになったので、結束力が以前よりも強くなってると思います。
仲間氏）今までは1営業日約8時間で組んでいた作業がFRONT-END.AIを利用することで、1〜1時間半ぐらいにまで短縮されています。
宮平氏）今までは制作時間が結構押していたので、ソースコードが属人化していました。その状態では、修正するのにも凄く時間がかかっていました。軽微な修正であっても、コードを理解するまでに時間がかかって修正に時間がかかってしまうのです。決まった構成を作ることによって、修正案件の改善速度が向上しています。
ー 今後に期待される点を教えてください
宮平氏）今後も継続して制作時間の短縮と新人教育での利用、後はランディングページだけではなくて中規模サイト構築などにも利用できるかなと考えております。そういった面をサポートしてくれるようになると良いですね。現状は生成されたコードをダウンロードする形ですが、今後はGitHubとの連携できると時間短縮につながると感じています。その他ｍコードが生成されると、それをトリガーにZappier経由でSlackに通知する機能があれば、マネジメントしやすいかなとも考えています。その他CMSのテンプレートカスタマイズにも対応すると、利用できるビジネスシーンが広がりそうです。
仲間氏）エンジニアからも見ても、使いやすいツールだと思うので、これから入社する新人や未経験の方にもとっつきやすいいツールではないかと思っています。未経験の方でもつかって、ある程度の生産性で速度が出せるような、教育の部分にも取り入れていきたいと思っています。
儀間氏）GitHub連携だったり、イメージにLazy Loadを付けられると便利だな思っています。当社のチームが目指してるのは速度改善と、コーディングのスピードになるので、そちらにコミットできる機能が追加されるとうれしいです。
まとめ
SEEC社ではオフショア開発を停止し、FRONT-END.AIを活用することで、年間約1,000万円レベルの経費削減と、生産性向上につながっています。SEEC社とは定期的にミーティングを行わせてもらっており、実際に利用している中で感じられるフィードバックと反映を繰り返しています。現場で使えるツールとして、FRONT-END.AIは常に磨きをかけています。
