“閉じた制作”から“共有する制作”への転換点

株式会社カプコンでは、コーポレートサイトや一部のゲームタイトルサイト、キャンペーンサイトなど、同社が手掛けるWebサイト制作全般でFigmaを活用しています。加えて、社内外のプロジェクトで共通利用できるデザインシステムの構築にも取り組み、現在はその基盤となるデザイン資産の整理や標準化を進めている段階です。一部のゲーム関連Webサイトやプロモーション施策では、外部制作パートナーとの共同作業プラットフォームとしてもFigmaを活用しています。

カプコンがFigmaを採用したのは2024年3月頃。プロダクション部 WEBプロダクション室 WEBマネジメントチームでWebディレクターとして活躍する藤本庸介氏と金澤慧氏、そして同室 WEB制作チーム Webデザイナーの井上貞高氏が中心となって導入を推進し、わずか1年で制作スタイルに大きな変革をもたらしました。藤本氏は、その背景について次のように語ります。

「ちょうど組織再編の時期で、私の所属部門も転換期にありました。東京と大阪のチームでより緊密な連携が求められるなかで、共通のルールや認識を整える必要があったんです。当時の制作現場では、デスクトップアプリのデザインツールを使っており、機密性の高さもあって閉じた環境で作業するのが当たり前でした。デザインファイルをほとんど共有できず、フィードバックも拠点内だけ。振り返ると、“見せられない”理由は特にないのに、慣習でそうなっていたんです。さらに、一部のプロダクトではウォーターフォール型の開発フローが残っており、デザイナーとエンジニアの間に共通言語がない状態。現場からも“もっと柔軟に対応したい”という声が上がっていましたし、デザインプロセスやワークフローを見直す必要性を強く感じていました。前職での経験から、この“コラボレーション”という課題に最も合うツールはFigmaだと確信し、一部プロジェクトで試験的に導入したのが始まりです」

しかし導入にはさまざまなハードルがありました。当時の苦労について次のように振り返っています。

藤本氏「まず大きな課題だったのは、担当業務ごとのワークフローの違いです。大阪のタイトルサイト制作チームと東京のキャンペーン用アンケートサイト制作チームでは、サイトの性質や必要なスキルが異なり、担当範囲や進め方にも差がありました。例えばプロジェクトによってはワイヤーフレームを作らないケースもあり、こうした“差”をどう吸収するかが最初の壁でした」

さらに、デザイナーの業務量が一時的に増加するといった影響や、ツールの移行による心理的な負荷もあったようです。

藤本氏「導入直後は、コンポーネント調整やバリアント追加、バリアブル登録などの作業が増え、これまで感覚的に行っていた業務に加えて“デザインの管理”といった左脳的な作業も必要になりました。ツール習得の学習コストも大きく、慣れない操作や既存ツールとの違いに戸惑うメンバーも。こうした習熟度の差は作業スピードや品質にも影響し、設計やコーディング理解が不足するとデザインファイルのばらつきが生じやすく、教育面でも課題だと感じました。そこで、あえて小規模での検証から始め、まずは“見た目を移植する”程度の低いハードル設定にし、作業中にすぐ指摘するのではなく自由に触る時間を確保しました。さらに、社内Wikiに短いチュートリアル動画を作成し、いつでも参照できるようナレッジを蓄積。100本を目指し、現時点で50本ほどアップしています」

「そしてもう1つ、全体最適を目指して標準化を進める過程では、作業範囲の曖昧さや権限管理、情報共有の方法など新たな課題が次々に顕在化しました。チーム間での調整は不可欠で、全体を見ながら柔軟に、時間をかけて進める必要がありました。とくに役割や責任範囲の明確化は難航し、細かなルールづくりが求められ、現場からマネージャー層まで幅広い調整に多くの時間を費やしたと感じています。仕組みを一から整える作業をたった数名で推し進めるのは苦労しましたが、それでもFigmaを選んだのは、漠然とした“信頼”があったからです。Figmaなら、変化を起こせるはず。クローズドだったデザイン領域に、職種を越えて皆が関わり『こんな使い方があるのか』と、自分自身が感動した経験も背中を押しました」

約50％の工数削減でスピードアップを実現

カプコンのWeb制作体制において、Figmaはどの程度インパクトを与えたのでしょうか。以下は実運用をリードした藤本氏の証言です。

「定性的には、コミュニケーションが明らかに活性化しました。以前はテキスト中心のやり取りで、細かな仕様や要望が後から出てくることが多かったのですが、Figma導入後は“その場でデザインを見ながら”話せるようになり、ちょっとした見落としや『ここはこうしたい』といった要望もリアルタイムで解消できます。その結果、手戻りや小さな不満がぐっと減りましたし、Figmaを習得したいというメンバーも増えて会話量自体も増えました。定量面でも効果は大きく、リリース前テストの修正は数十件から数件へと減り、修正項目を約70％削減できています。制作から開発までの実作業工数も40～50％削減し、リリーススケジュールは案件によって1～2週間短縮できました。単に“手を動かす量が減った”だけでなく、調整や説明のためのミーティング、社内Wiki用の資料作成といった“仕事のための仕事”を見直せたことで、ワークフローそのものを最適化できたのが大きいです。さらに、非デザイン部門である企画やマーケティングの担当者も、閲覧とコメント機能、そしてプロトタイプを活用することで、チャットやメール、資料化の手間が減り、動きや画面遷移を含めた完成イメージを直感的に共有できるようになりました。その結果、『思っていたのと違う』というズレが大きく減り、企画段階から細部までの把握がスムーズになっています。最終的には、こうしたシンプルな機能が従来と比べて最も大きなメリットだと感じています」

「デザインと言語」がつながるDev Mode

同社では、Dev Modeも導入しています。その効果について、まずデザイナー視点で藤本氏はこう語ります。

「Dev Modeでデザインデータから直接コードや仕様を参照できるようになったことで、エンジニアとのやり取りがスムーズになりました。質問が減り、説明にかける時間も大幅に短縮。細かい意図を伝えるためにわざわざミーティングを開く必要も減りました」

さらに、バリアブルの活用によって、デザイナーがエンジニアに依頼することなく、UI変更や多言語展開までを自分たちで完結できる仕組みを構築しました。

藤本氏「例えばアンケート項目を増やしたい、ラジオボタンを追加したいといった要望にも、Figma上でバリアブルを組み込めばデザイナー側で即時対応できます。バリアブルの構造はエンジニアが必要とするYAMLファイルや変数形式とあらかじめ揃えているため、そのまま反映可能です。さらにバリアブルのモードを切り替えるだけで、画面を日本語から英語、その他多数の言語に展開できます。マーケティング部門から届くExcelやCSV形式の設問データも、プラグインでバリアブルに取り込み、JSON形式でプッシュすれば完了。複数言語への翻訳作業もまとめて適用できるので、以前は数日かかっていた対応が大幅に短縮できています。開発工程への依存度が減り、スケジュールの短縮とリソースの最適化に大きく貢献していると感じます」

金澤氏「エンジニア視点では、Dev Modeでデザインから直接CSSプロパティを確認でき、バリアブルやCode Connectを併用することでデザインと実装のズレが大幅に減りました。アノテーションなど既定機能も有効で、CSSの判断が一目でできる瞬間が増え、デザインの意図が瞬時に伝わるのも良いところ。結果としてコミュニケーションコストや調整仕事が減り、開発環境整備など本来業務に時間を振り向けられるようになりました。実際、品質面の安定も感じています。Figmaは他のツールと比べても、デザイナーとエンジニアの“中間言語”としての機能が秀逸です。極端に言えば、Figmaがあればエンジニアがデザインまで担える未来もあり得る──そんな可能性を感じています」

デザインシステムで制作効率と一貫性を両立

現在では、2026年3月の完成を目指し、デザインシステムの構築を推し進めているといいます。

藤本氏「横断的なデザインシステムは現在構築段階ですが、プロジェクト単位ではすでに簡易的なシステムやスタイルガイドを用意し、バリアブル管理やコンポーネント化でページの雛形を運用しています。その結果、“車輪の再発明”が減り、過去資産の再利用が進んで制作効率が上がりました。あらかじめ雛形があることで合意形成も速くなり、作業コスト削減と公開スケジュールの短縮にもつながっています。適用範囲はコーポレートサイトを軸にしつつ、将来的にはタイトルサイトや社内資料にも展開できる“最もプリミティブ”な設計を志向しています。各タイトル固有の世界観を阻害しないよう、システム自体にはキャラクター性を持たせず、適用しきれない部分が出る場合でもコンポーネント単位で抽出・活用できるようにしていきます」

Figmaを“共通の土台”に──現場から広げる次の一手

カプコンのWeb制作現場では、Figmaを「デザインする場所」から「皆が同じ作法で考え、試し、共有する土台」へ育てていく動きが進んでいます。現場の学びを横展開しつつ、タイトル側との共創を深めるのがこれからのテーマです。

井上氏は、日々の実務から得た“型”を仲間に広げていきたいと語ります。

「複数案件を並行しながら、ほぼ毎日Figmaを使っています。現在勉強中のメンバーには、良い構造のワイヤーをお手本に“要素を置く”から“どう組むか”へ視点を上げる練習をサポートしています。拠点をまたぐと質問しづらい場面もありますが、Figma上での質疑は以前よりぐっと増え、浸透していることを実感しますね。デスクトップアプリを使っていた時代はボタンの色違いを全部作っていましたが、Figmaならコンポーネントのインスタンスで済む。秘匿性が高く本番画像が使えない案件でも、後から1つコンポーネントを差し替えるだけで全ページに反映されるのは本当に便利です。まずは“真似したくなる型”を見せることから、現場の底上げにつなげたいです」

一方、藤本氏は、Figmaを“共通言語のハブ”として定着させていく考えです。「私たちのビジョンは“遊文化を創造し、世界中の人々に笑顔や感動を届ける”ことです。そのためには、ストーリーやキャラクターにまで踏み込んだ高品質な表現を、多職種が緊密に連携して実現する必要がある。Figmaはリアルタイム共同編集やプロトタイピングで部署間のやり取りを滑らかにし、蓄積したデザイン資産の共有・再利用を促進することで、ブランド価値や世界観を保ちながら効率化できる点が私たちの事業には非常にフィットしていると感じます。今後は未習熟メンバーへの啓蒙を続けつつ活用を広げ、各自の業務に合う範囲から自然に慣れてもらえる環境を整備します。Figmaを単なる“仕様伝達の場”ではなく、言葉だけでは伝わりにくいニュアンスまで共有できるコミュニケーションの場として位置づけ、ナレッジを段階的に展開していきたい。最終的には、Webという1チャネルの貢献にとどまらず、Figmaやデザインシステムを軸に依頼元と早期から目的や体験価値を共有し、“依頼に応える”から“ともに創る”関係へのシフトを加速したいと考えています」