メインコンテンツまでスキップ

すべてが詰まったアプリを支えるFigmaという基盤

LINEヤフー株式会社は、LINEとヤフーの経営統合によって2023年に誕生した、国内最大級のテクノロジーカンパニーです。メッセージングアプリ「LINE」、ポータルサイト「Yahoo! JAPAN」をはじめ、検索、ニュース、ショッピング、金融など、ユーザーの生活に深く根ざした多様なサービスを展開しています。

Yahoo! JAPANアプリ担当のしゅーぞー氏と井石氏Yahoo! JAPANアプリ担当のしゅーぞー氏と井石氏

今回お話を聞いたのは、Yahoo! JAPANアプリのAndroidエンジニアであり、UI/UXデザインにも深く関わっている高橋 柊蔵(ハンドルネーム:しゅーぞー)氏と、ヤフートップページのUI/UXデザイナーの井石 萌佑理氏。両者が携わるYahoo! JAPANアプリは、検索、天気、ニュース、トレンドから生活情報まで、あらゆる情報が詰まった日本最大級のポータルアプリです。

しゅーぞー氏「エンターテインメント性の高いコンテンツを提供するだけではなく、災害情報などの重要な情報をいち早く正しく提供する必要があり、守らなくてはいけない部分もある。そんな幅広さと社会的責任を持つのがこのサービスならではの特徴です」

「ツールが変わった」ではなく「UIデザインの概念が変わった」

Yahoo! JAPANアプリでFigmaの本格導入が始まったのは2021〜2022年頃のこと。しゅーぞー氏はちょうどその移行期に立ち会った一人です。

しゅーぞー氏「当時はみんな、デザインツールのスタンダードが切り替わったくらいの認識が多かったと思うんです。でも本質はそこじゃない。そもそもUIデザインというのは、『ユーザーのアクションとともに変化する状態を画面ごとに表すもの』ですが、それを表せるツールは今までありませんでした。実装でしか表せなかったものが、Figmaを使うことで表せるようになった。Figmaへの移行は、デザインという仕事そのものの考え方が変わったフェーズだったと思っています」

しかしその価値を周囲に広めることは、簡単ではありませんでした。

しゅーぞー氏「ツールが変わっただけじゃなく、UIデザインの作り方そのものが変わるんだということを伝えていくのがなかなか難しかった。デザイナーといっても、広告や紙のデザイン出身の人からUI/UXリサーチャーまで、バックグラウンドは多種多様です。Figmaデータ構造が最終的なプロダクトの品質に直結するため、その重要性を伝えようとしても、本質ではないことにこだわっているように見えてしまうこともあって。そうではなく、データの構造がそのまま成果物の品質に直結するんだということを、時間をかけて徐々に広めていきました」

一方、2023年入社の井石氏にとって、Figmaはすでに当たり前のツールとして存在していました。

井石氏「私が入社したときにはすでにFigmaがスタンダードになっていたんですが、しゅーぞー氏からFigmaがいかに画期的なのか、という熱い想いを語ってもらったのを覚えています(笑)」

職種をつなぐFigma、広がる活用とその現在地

今日では、LINEヤフーにおけるFigmaの活用は特定の職種にとどまりません。編集権限はデザイナーと開発者が中心ですが、企画など他の職種のメンバーも閲覧権限を持ち、共通のプラットフォームとして機能しています。デザイン制作にはFigma Design、実装確認にはDev Modeと、プロジェクトのスタートからゴールまでを一気通貫でカバーできるFigmaの利点を余すことなく活用しています。

さらに最近では、Figma Makeの活用も広がりつつあります。

井石氏「企画の方にコンセプトを見せるときに、Figma Makeでプロトタイプをさっと作って共有するようにしています。テキストだけの企画書をもとに頭の中でイメージしながら話していた頃と比べると、職種を越えてコンセプトを素早く共有できるようになったのは大きな変化です」

Figma Makeの活用について語る井石氏Figma Makeの活用について語る井石氏

2025年11月にFigmaが実施した屋外広告プロモーションへの参加は、Figma Makeへの理解をさらに深めるきっかけになりました。これはFigma Makeを使って制作した広告映像を、渋谷スクランブル交差点の大型ビジョンで放映するプロジェクトです。

しゅーぞー氏「Figma Makeだけで広告を作るという縛りの中で向き合い続け、結果的に740回までバージョンを重ねました。ここまでやりこんだことは、可能性と限界を両方見極めるよい機会になりましたね」

一方で、その位置づけを冷静に見つめています。

しゅーぞー氏「Makeはアイデア出しやコンセプト共有のためのツールとしては非常に優秀です。ただ、実プロダクトに落とし込もうとすると、出力がブラックボックスになっている点があって、品質のコントロールが難しい。数千万人が使うYahoo! JAPANアプリにおいては、この部分は慎重に扱わないといけない課題が残っています」

デザインと実装のギャップをAIで埋める

Figmaを活用するうえでの課題はそのほかにも。UIを構造的に表現できるFigmaだからこそ、デザインから適切なコードを生成するためには、デザインデータの品質が重要です。デザインデータの構造が正確であれば実装との差は限りなく小さくなりますが、そうでない場合、手戻りやコミュニケーションコストが発生します。さらに言えば、ユーザーに届くアプリの品質にも影響しかねません。

しゅーぞー氏「できるだけ開発の上流で品質を担保できる仕組みが必要だと思っていました。しかし画面数が膨大なYahoo! JAPANアプリでは、デザインデータが正しく作られているかを一つひとつチェックするのは負担が大きい。Figmaをちゃんと理解している人が時間をかけて見なければならず、人力では限界がありました」

アプリ開発をリードするしゅーぞー氏アプリ開発をリードするしゅーぞー氏

そこでしゅーぞー氏が取り組んだのが、AIを使ったデザインデータの自動チェックの仕組みです。FigmaのMCPから取得できるデータはAI向けに変換されたものであり、自分たちのデザインルールと照らし合わせるには精度が足りないと判断。FigmaのAPIから生データを取得し、必要な情報だけに整形した上でAIに渡すというアプローチを選びました。

しゅーぞー氏「自分たちのデザインシステムやガイドラインと照らし合わせるには、ブレのない正確なデータが必要です。FigmaのAPIを直接叩いてコード上で解析し、必要な情報だけに整形した上でAIに渡す。最終的にはFigmaのデータURLを貼るだけで問題点と修正提案が返ってくるAIエージェントとして仕上げました。『フレーム名がおかしいですよ』とか、『このコンポーネントの使い方が間違っています、実装するとこういう問題が起きるので、こう直してください』という提案まで出てくる。現在はデザインシステムのチーム内で展開していて、今後は全社に広げていきたいと思っています」

このチャットエージェントの開発過程では、職種の境界線が自然と溶けていく場面もありました。機能と画面の実装の一部を担当したのは、デザイナーである井石氏だったのです。

井石氏「Figmaの構造とコードの構造が同じなんです。言葉がちょこちょこ変わっているだけで、やっていることは一緒だなという感覚でした」

しゅーぞー氏「Figmaの構造を正しく理解してデザインデータをきれいに作れる人は、実装もできるはずだと思い井石さんにお願いしました。職種の境界線を越えたというより、もともとそこに壁はなかったのかもしれません」

チャットエージェントの実装まで手掛けた経験を語る井石氏チャットエージェントの実装まで手掛けた経験を語る井石氏

さらにしゅーぞー氏は、Figmaの活用をもう一段階先へ進めるため、現在部内で新たな技術検証も進めています。アプリのリリースなしに画面を更新できるSDUI(サーバードリブンUI)の実現性を探るなかで、FigmaからそのUIレイアウト構造を自動出力する仕組みの開発に取り組んでいます。

しゅーぞー氏「アプリを更新するには通常リリースが必要で、時間がかかります。SDUIはサーバー側の制御で画面を変える仕組みですが、その複雑なレイアウト構造を毎回手動で実装するのは現実的ではありません。だったら、Figmaのデータからレイアウト構造を自動で変換してしまおうと考えました。Figmaから抽出した構造をバックエンドに渡し、そこで実際のデータと組み合わせて配信する仕組みを作って検証しています。ここの変換はAIには任せていません。Figmaのデータがそのまま本番プロダクトに直結する構造になるため、AIの推測による出力のブレは許容できないからです。Figmaのプロパティ構造からSDUIの構造へ確実に変換できるよう設計した上で、プログラムでガチガチに変換ロジックを書いています。人力の実装に頼らず、かつ安定した品質で自動化を実現するためには、この確実な変換の仕組み作りが必要だったんです」

これらの取り組みはいずれも、現場発信で「これがあったらいいな」と自ら動き出したものです。大規模サービスを支えているのは、こうしたボトムアップの挑戦と、それを形にしていく力なのかもしれません。

Figmaがインフラになる未来へ

こうした一連の取り組みを通じて、しゅーぞー氏はFigmaの可能性をさらに広く捉えるようになったといいます。

しゅーぞー氏「コミュニケーションツールとしてだけでなく、プロダクトを届けるためのインフラとしてFigmaを使っていきたい。そのためにも、FigmaのデータをAPIやMCPを通じて外部のツールやエージェントと連携しやすい形でオープンにしてほしい。それがFigmaへの一番の期待です。データをオープンにしても、Figmaの価値は揺るがないと信じています」

Figmaへの信頼と期待を語るしゅーぞー氏Figmaへの信頼と期待を語るしゅーぞー氏

井石氏「もっといろんな職種の人がFigmaの環境に入ってくれば、ツールを挟まないコミュニケーションがさらに取りやすくなると思っています。職種を越えて同じプラットフォームで動けるようになれば、プロダクトの品質もスピードも上がっていくはずです」

Yahoo! JAPANアプリの進化は、Figmaとともにまだ続いています。

Figmaを活用してデザインの規模を拡大するには

優れたデザインは、製品やブランドを差別化する可能性を秘めています。しかし、偉大なものは一人では作れません。Figmaは、製品チームを迅速かつ包括的なデザインワークフローで結びつけます。

企業がFigmaを活用してデザインの規模を拡大する方法の詳細については、当社までお問合せください。

Figmaの主な特長:

  • デザインのアイデア出しから、作成、構築までデザインプロセスにおけるすべてのステップを1カ所に集約
  • 全社共有のデザインシステムでデザインワークフローを加速
  • Webベースでアクセスしやすく、使い勝手に優れた製品で、製品チームのプロセスにおける包括性を促進

当社チームへのお問い合わせ

[送信]をクリックすることにより、お客様は当社の TOSおよびプライバシーポリシーに同意したことになります。