# 密かに進んでいた激アツプロジェクト🔥 みなさん、こんにちは。今回のインタビュアーを務めますVoicy採用広報の久喜です。 今日は、急遽社内で密かに進められていた激アツなプロジェクトについてお二人にお話を伺いたいと思います。 Uji先生、Kii君、よろしくお願いします。 それでは、自己紹介をUji先生からお願いします。 Voicyでエンジニアをやっている久保田と申します。 普段はバックエンドがメインなんですけれども、ウェブのフロントのところとかそういったところも開発をしています。 よろしくお願いします。 ありがとうございます。代表の尾形さんと共同創業者でいらっしゃるUji先生ですね。 続いて、Kii君、お願いします。 Kii君です。Voicyに4年前くらいに新卒で入社して、エンジニアをしています。 主にウェブをメインにやっています。ウェブのフロントエンジニアをメインにやっています。 最近はみんなで頑張って全部やっていこうとしています。 最近、アンドロイドが触られています。 iOS、アンドロイド、バックエンドを幅広くやっていこうとしています。 よろしくお願いします。 ありがとうございます。よろしくお願いします。 では、次のチャプターで激アツなプロジェクトについてつかぼりしていこうと思います。 # 放送を視覚化する「Voicy グラフィック」とは？ まずは今回のプロジェクトのきっかけから伺いたいのですが、 尾形さん、悠二先生、キー君の3人で集まって、 AIで何かやろうと突発的に始まっていましたよね。 そうですね。 まずはキー君にお伺いしたいのですが、 今回数時間で作り上げたプロダクトの概要を教えていただけますか。 そうですね。これはプロスタイプで、公開するかは決まっていないのですが、 Voicy Graphicsというのを使ってプロスタイプを作りましたね。 ちなみにそれってどういったものなんですか。 これはSNSのタイムラインみたいな感じで、 Voicyの放送のグラフィックレコーディング、 放送の内容を画像にしたものをタイムラインみたいな感じで見れるという ウェブのアプリケーションになりますね。 イメージでいうとXのタイムラインみたいな。 放送の内容を音声を聞く前に軽く画像で内容をざっくり見れたら、 放送も聞いてみたいというような感じになるんじゃないかというので、 画像をタイムラインでざっと流してみて、そこから放送に飛ぶみたいな ウェブページを作ってみたという感じです。 ありがとうございます。 その日、朝10時半くらいからやられていた記憶なんですけれども、 お昼頃までずっとアイデア出しされていましたかね。 そうですね。 それぞれ、悠二先生、キー君はどういった役割で動かれていましたか。 そうですね。僕は主に画像の生成側をやっていて、 熊本さんがガッツリウェブのアプリケーションをAIで爆速で開発していた感じになりますね。 僕はロードフォードを使って。 尾形さんは当日どんな感じだったんですか。 最初はみんなでアイデア出しをして、そもそも何を作るかも決まっていない状態からのスタートだったので、 何をやろうかというので、いくつかアイデアを出しながら、 最初は尾形さんがゼミニを画面に映しながらみんなで見て、 尾形さんがそこでこんなのを作りたいみたいなのをやって、 画面イメージを作ってもらって、ゼミニのほうに。 それを見ながら、ああでもない、こうでもないという話をしている中で、 グラデコとかをやってみたら面白いんじゃないという話が出て、 尾形さんがそれをやって、その画面イメージが出てきて、 それを見て、ああこれ面白そうだねとなって、 じゃあちょっと作ってみようという感じですね。 じゃあもうなんか事前に大予算目安をつけて、これを作りたいとかじゃなくて、 その日に本当に決めたという感じだったんですかね。 尾形さんが何かやりたいねんって言って、 やりたいねんなと思いました。 そのボイシーグラフィックに決定した理由としては、 どういったところから決めてというのもお伺いしていいですか。 そうですね。 AIでまずその画像とか作って、 なんかビジュアル的に、 これをこのアプリ作ったら良さそうだなみたいな、 感性系を見えてイメージしやすかったっていうのと、 あとボイシーはね、前から聞く前に、 中身が分かった方が良いんじゃないかみたいなところがあって、 画像で出したら良いんじゃないかみたいなところがあって、 このアプリケーションを作ったら良いんじゃないかというのに繋がったという感じです。 もともとようやくとかはあったから、 それがまたビジュアル的に出たら面白いんじゃないかっていう。 その画面を見たときは、 みんなワクワクした感じがあったのかなっていうところがあって、 これ良いんじゃないかっていうのがあった。 確かにもしだけでも分かりやすくはありますけど、 イラストといいますか、画像がある方がよりイメージがつきやすいですよね。 そうですね。 ありがとうございます。 次のチャプターで脅威の実装スピードについてお伺いしていこうと思います。 # 脅威の実装スピード！AIフル活用開発💻 ここからは開発といいますか裏側に迫っていきたいんですけれども とにかくスピードが驚異的ですよね 作業としてはお昼ご飯後ぐらいから始めてらっしゃいましたっけ? お昼ぐらい? 前ぐらいからちょっと作り始めて 霧のいいところでラーメンを食いに行くか ラーメンを食べに行くか でも夕方には外部公開できるくらいのレベルにまで? そうですね 作業といいますか 進められていく中で どういったAIをどう組み合わせて進められましたか? 最初は尾形さんがジェミニで画面のイメージを作って そこから僕らエンジニアが作ってみます 初めはクロードで2人とも画面を同じものを作ってみようという感じで進めていって 結果的にはほとんど同じような画面が出てきた 最初に尾形さんが作った画面イメージを読ませて これをプログラムを書いてって言って なんとなく2人とも同じような画面が出てきて それをいろいろ調整したら 尾形さんが画像を作る方をやりますって言ってくれたので 僕は画面を作る方をひたすらやっていて 最初は一枚のHTMLでまずはイメージを作って こんな感じでいいねってなってから フロントの方はアンギラーを使って作っているんですけど それをアンギラーに変えてって言ったら AIが全部変えてくれたっていう感じですね この辺とかも本当にプログラムのこともできたのを眺めはしたけど 自分から一切描かないようにして 全部なるべく指示をして直してもらうっていうのをやっています キー君からも何かありますか? 僕の方も画像先生もほとんど自分で描いたりはしなくて 見たやつに対してこうしてこうして クロードコードでやっていったらできたっていう感じで 割とスムーズにいってよかったなという感じですかね 最初は画面のイメージをキー君が作る前にやった時とかは クロードコードで作ったんですけど クロードコードで作った画像があまりにもセンスがなさすぎて 手書き風のいい感じの もともとジェミニーが作ったやつが 手書き風のあったかい感じのイラストだったので こんな感じで手書き風でって言ったら 本当に幼稚園児が描いた絵の方がまだうまいっていうぐらいの 某人間に丸と三角が出てくるみたいなやつが出てきたので ちょっとセンスないなと思ったので 画像先生だけちょっとジェミニーを使うようにしてって言ったら そのジェミニーとの連携するので だからこういうのを教えてくださいとか こういうことをやってくださいっていう指示がまた来たので それをポチポチとやって そこからもう画像先生はジェミニーになって やっぱりナノバナナがすごいなっていう センスがいいなっていうのをすごい実感しました そこで切り替わってからも ちゃんと綺麗な画像が出てきてくれた こんなにやっぱ プログラムを書くのはクロードコードがすごいっていう話がきて こんなにAIによって画像のセンスだけでも違うんだっていうのは すごい面白かったです ぜひぜひ放送にもその画像貼っておきますので クロードコードの幼稚園児のような画像をぜひ あれはあれでいいと思う 今のお話とかお伺いしていると AIが出てくる前の開発の常識だったら 考えられないスピード感ですとか そういったところなんですかね 画像を出してスクロールうまい感じでするのとかも 自分でも作れるけど 短時間で作れるかっていうとやっぱり やり方を調べて 細かいデザインのCSSとかも スペースを何ドット開けてとか いう調整をしながら作っていただろうから そこらへんとか全部いい感じでいきなり出てくるっていうのは さすがAIだなっていう感じです 僕も自分の画像生成のところを作るのは 結構時間かかりそうだなと思う 自分でやったら 裏側で実際ポジティブの放送の情報を取ってくるので PCのAPIを叩いて 実際の情報を取ってきて それをまた画像でAIに流していくところを キープをやっていたの 一応問題ないように社内の 高階ちゃんねるの 画像以外の部分で進めていて ここはちょっと苦労したな だったりありましたか そうですね 若干それは多分僕のプロンプトというか 手順が悪いのかもしれないですけど 思った通りにならないときも あったりしました でもやっぱり最近の やっぱりAI優秀なので こうじゃなくてこうっていったら 糸を組んでやったりくれたりしたので やっぱりすごいなと 技術の進歩を感じました 思ったのと違うぞと思っても 指示の出し方を変えたりすることで 割とすぐに解決したんですかね フロントの方だと いいねボタンとかをつくったんですけど いいねボタンを押したときに ちょっとアニメーションして ポコンってハートマークがつくと面白いなと思って アニメーションさせてって言ったんですけど アニメーションはするんだけど なんか画面切り替えたときでも 全部アニメーションし始めて うざいなと思ったんで 押したときだけアニメーションしてって言ったら 今度いいねを消したときにだけ アニメーションするようになったりとかして そういう細かい調整を 人間だったら言えば分かる そういう調整を色々したけど ただこういうときにこうなるから こうしてっていうのを 動かしたらちゃんと動いてくれたんで 最終的には結構簡単になったな という感じがあるんですけど 確かにAIって なんて言うんですか 天の尺じゃないですけど そうなるみたいなときありますもんね 僕らがアプリを触っているときに なんとなく知っている暗黙値というか そういったものとかまでが まだできていないところはあるな 使い方も大事というところですね 大事です ありがとうございます # Voicy社員のAI活用✨ 実際にVoicyグラフィックをやってみてお二人の手応えはどうですか? 普段の仕事でもちろんAIを扱っているんですけど 基本的には元々人が作ったというか自分たちが作ったものを さらにAIで直してもらうという感じ 本当にゼロからプロダクトを一個作らせるというところはあまりやっていなくて 本当に手元でコチコチと動かしたくらいのものしかないので みんなでちゃんと作るということはなかったので その辺ができたのはすごくよかったなと思うし これを複数人でやったらどう分担したらいいんだろうと思って 今回はフロントとバックエンドみたいな形で分担ができたけど 最後のフロントの開発をみんなでやろうと 複数人でやろうとなったら 分割の仕方が僕の中でまだどう分割したらいいかなと というのはちょっと悩みましたね いろんなファイルを触りそうで どのファイルを触るかも分からないし ゼロから作ったらファイルの中身をちゃんと把握していないまま 作り続けていたところではあるので時間がなかったから 実際は人同士でやれば画面ごとに分けて お互いの触り位置って大体分かるけど AIでやるとまた難しいのかなとか その辺はちょっと気分にはおったけど どうしたらいいかまでは考えていない ありがとうございます ちーくんどうでしたか 僕も同じことを思いました アイデア出しから実際に形になるもの実装まで 本当に短時間でできるんだというところを改めて思ったのと AIはすごいけどやっぱり久本さんはすごいなと 要件をちゃんとまとめてやる力はすごいなというのを 腹で感じました ありがとうございます ゆうじ先生ミーティングがあり退宿されたのですが きーくんこのままインタビューお願いします ボリシー全体的にエンジニア以外の社員も AI使ってますよね 社内AI活用を見られている ぜひぜひどういう感じで使っているか 具体例などお話いただいてもいいですか 最近で言うとちょっと前ですけど メイクっていうワークフロー 既存の例えばGoogleメールから 特定のファイルを保存するみたいなことが ワークフロー一連の流れを組んで それを実行できるってやつがあるんですけど それを使ってメイちゃんとかは Googleメールで飛んできた請求書とかを 特定のフォルダにまとめるみたいなことをやったりしていて それはやっぱ自動化進んでるなと思いました 確かに総務のメイちゃん その業務も活かせてますよね 僕とかファイルというよりは 自分で構築してたんで そこがすごいなと思いました キー君がすごく介入したというかは メイちゃん自身も ボリシー結構エンジニア以外も AI活用して業務の効率化ですとか 楽にしたりしてますよね 自分から積極的にしてるのがすごいなと思いました あともう一個ぐらいでお伺いしてもいいですか 最近だとクロードを出さないで活発で クロードデスクトップでアプリケーションを使って それで弊社のデータ基盤とかとつないで 自然言語プロンプトでデータ結びができるような仕組みを 作ったりしていて それが使ってもらっているという感じですね なのでこういうデータが知りたいとなったら クロードに聞けば分かるという そういったデータを使って どうすればより多くの方に聞いていただけるかとか そういった工夫をやっているというところですね より良いサービスのために ありがとうございます # 最後に🗣️ はい、では最後私の方で締めさせていただけたらと思います。 本当に数時間でここまでできるんだというワクワクが伝わってくるお話と、 VoicyエンジニアメンバーのAIフル活用とか、そもそものスキルの凄さが垣間見えるお話でしたね。 Voicyがこれからどう進化していくのか、ますます私も楽しみです。 はい、僕も楽しみです。 キー君、今日は本当にありがとうございました。 ありがとうございます。