これはNFLaboratories Advent Calendar 2025 8日目の記事です。

はじめに

こんにちは、研究開発担当の林です！本稿では、先日行われたFFRI × NFLabs. Cybersecurity Challenge 2025のために開発した「Purple Flair CTF」のUI/UX奮闘記を紹介します。

うちのチームにはデザイナーがいません

うちのチームにはデザイナーがいません。厳密にはそもそも弊社にデザイナーがいません... (自分がメンターしてるデザイナー枠のインターン生はいます。こちらのシステム開発インターンシップ業務内容紹介 (デザイナー編)もぜひ読んでね。)

そうなると困ることが色々と出てきます。例えば、

非デザイナーのプロダクトオーナー(以下、PO)が、欲しいデザインを言語化するのが難しい。
非デザイナーの開発者が、非デザイナーのPOによってなんとなく言語化されたデザインを汲み取ってUIに落とし込むのが難しい。
高品質なグラフィックを作れない。

結果として、どうしても単調で、よくあるテンプレート的なデザインにしかならない、という事態が生じます。

「よくあるテンプレート」が決して悪いわけではありませんが、こと「CTF」のような盛り上がりが大事なイベントでは、UI/UXの良し悪しが参加者のモチベーションやイベントの満足度に直結します。UI/UXが悪かったから試合に負けた、実力が出せなかった、となったら更に問題です。また、広報や営業の観点から見ても、テンプレート的なデザインより、目を惹くユニークで洗練されたデザインが欲しいところです。

そしたらやっぱりデザイナーが必要じゃん、となりますが、そう簡単にこの業界のドメイン知識を十分に持ったデザイナーを採用できるわけもなく、スクラムチーム内で奮闘することになるのです...

じゃあどうするの？

デザイナーがいないからといって、UI/UXに妥協していいと言うことにはなりません。そこは工夫と気合で乗り切りましょう。

AIデザインツールの導入

まず、POによるデザインの言語化の難しさ、それを開発陣に伝達する難しさ、開発陣がそれを正しく理解する難しさに対処しなければ始まりません。

僕らはVercel v0を導入することにしました。v0は自然言語でWebデザインを作成することができるAIツールです。 v0を使えばデザインが分からなくても"ある程度"はなんとかなります。また、Next.jsのコードをそのまま出力してくれるのも便利な点です。

実際にどんなデザインが出力されたか見てみましょう。

パッと見、それっぽいデザインですよね。でもよく見ると情報が重複していたり、情報の優先度が定まってなかったり、視線・動線が考慮されてなかったり、そもそも機能が足りてなかったり... と、正直これだけではProduction Readyではありません。

また、この画像には少ないですが、枠や線がやたらと多い、カードの左ボーダーだけ色を付ける、みたいな独特なAI生成臭さも気になりました。

これらはv0に問題があるというより、「デザインを言語化してプロンプトとして正しくLLMに理解させるスキル」の難しさに起因しています。

それでも言語によるコミュニケーションより視覚によるコミュニケーションの方がロスが少なく、叩き台としては大いに活用できました。

v0については、開発陣全員での勉強会・ハンズオンも行っており、今後も活躍の場があるかもしれません。

スプリントレビュー

僕らは2週間の間隔(スプリント)でスクラム開発を行っています。各スプリントの最終日にはスプリントレビューと呼ばれる、ステークホルダーにそのスプリントの成果物をデモし、フィードバックを受けるというイベントがあります。スプリントレビューにはCTFを運営する企画メンバーや、公私問わず様々なCTFにプレイヤーとして参加しているメンバーがたくさん参加しています。ここでドラフトデザインを見せながら、様々な意見を収集することができます。

例えばこんな意見がもらえます。

問題に集中したいから、リーダーボードは視界に入らない方がいい。
ペンテストなどの問題カテゴリごとに進捗が分かる方がいい。
トップにあまり食い込まない自分は、トップランキングではなく、自分があと何点獲得すればランクが上がるかを見たい。

もちろんどのメンバーもデザイン経験はないので専門的なデザインレビューはありませんが、UXという観点では、メンバーの多くがCTF経験者のため生々しい意見がたくさん出てきます。(そもそもスプリントレビューというイベント自体がデザインレビューする場ではないので趣旨通りであるんですが。)

ありがたいことに、あまりにたくさんの意見が出てくるので、初回のレビューでは心が折れかけました...

ということで、デザイナーがいなくても、スクラムという仕組みを通してUXを高めることはできそうです。

社内トライアル(ユーザフィードバック)

スプリントレビューに参加できないメンバーもいますし、じっくり触ってからじゃないと意見できない、ということもあります。僕らは本番リハーサルも兼ねて、1~2週間の社内トライアルを複数回実施して、アンケートを収集しました。

こちらもたくさんのご意見をいただき、UXの更なる改善に繋がりました。

気合でなんとかしてること

お察しの通り、ここまではUX改善が全てでした。ではUIはどうしたのか、というのが問題ですね。結局、情報設計やグラフィカルなデザイン実装は自分が気合でなんとかしています。

既存のCTFのサービスのWebUIを眺めたり、色々なWebデザインを眺めたり、デザイン系のイベントに参加したり、デザインの勉強したり...

と、まあ畑違いのことをコツコツやってました。

最終的にできたもの

試行錯誤の末、以下のようなデザインに至りました。

問題を解くのに特化した画面と、コンテストの進捗を可視化する画面に要素を整理
問題カテゴリ、問題一覧、問題詳細の階層化
攻略に使うVMのシームレスな起動・アクセス
解き進めるのがワクワクする & 達成感を得られるような遊び心あるデザインや演出

まだまだ改善の余地があるので、これからもしっかりとユーザヒアリングを進めたいと思います。

開発者がデザインをやるメリット

本来UI/UXはUIデザイナー・UXデザイナーという個別のポジションがあるくらい専門的な知識やノウハウ・スキルが必要です。専門職ではない開発者がデザインをやることは完全にネガティブなことなのでしょうか？

開発者にはデザイナーにはないスキルやノウハウがあります。開発者であればデザインしながらこんな思考ができます。

既存のAPIから取得されるデータをどう加工すれば、どういう表やグラフが表示できるか。
このデザインを実装するには、追加でどれだけのAPIを開発する必要があるか。
このデザインを実装するためのコストはどれくらいで、そこまでコストをかける価値はあるか。
このデザインを実装した時に発生するAPIリクエストはどれくらいで、DBへの負荷はどれくらいか。

もちろんデザインの品質は本職デザイナーには敵いませんが、既存のコードベースを熟知している開発者だからこそ、実装を考慮した手戻りが少ないデザインを作れる、というメリットがあります。今後はデザインの社内勉強会などを開催して、「デザインが分かる・デザインに興味が持てる開発者」を増やしていければと思います。