Snyk VS Code拡張機能のUI/UXを改善
2023年11月21日
0 分で読めますSnykでは、さまざまなプロジェクトに携わり、多くのチームのデザイン業務を支援できることを幸運に思っています。とてもやりがいを感じています。これまでの職務経験も同じようなパターンだったので、多様なプロジェクトに取り組むことは私のDNAの一部です。Snykerになって間もない頃、開発者エクスペリエンスに関するプロジェクトの一環として、VS Code向けSnyk IDEインターフェース、JetBrains IDE、Visual Studioのデザインを担当しました。
私たちの目標は、Snykのセキュリティ検出結果をIDEのUI上に正しく表示し、目立たせることでした。それだけでなく、見た目にも優れたデザインを作り、アプリケーションセキュリティに関する重要な情報を開発者が簡単に確認できるようにしたいと考えていました。
拡張機能の初期バージョンの開発を進める中で、さまざまな課題に直面しました。たとえば、IDEベンダーごとに独自のUIデザインガイドラインがありましたが、必ずしも明確で十分な説明があるとは限りませんでした。Snyk側では、さまざまな種類のセキュリティ検出結果を表示するプラグインが1つあり、さらに開発者向けの機能も増え続けており、それらも追加したいと考えていました。その結果、ユーザビリティ、脆弱性データ、レイアウト、デザインなど、さまざまな領域で開発上の負債が徐々に蓄積していきました。
現在、VS Codeの開発環境は大きく変わりました。優れたデザインガイドラインや役立つリソースが整い、ChatGPTによる学習体験も得られます。私自身もVS Code拡張機能の開発に慣れてきたため、お客様からのフィードバックや社内でのツール利用を踏まえ、拡張機能のいくつかの問題を解決することにしました。具体的には、次のような点です。
Snyk Codeの脆弱性に適切なタイトルがなかった（命名の一貫性と認知負荷）
レイアウトと脆弱性データに一貫性がなかった（認知負荷）
現在のIDEテーマへの適応性が不足していた（視覚的ノイズ）
UIに使う楽しさが足りなかった
Snykのプロダクトデザイナーとして、これらの課題にどのように取り組んだかをご紹介します。
余白と視覚的階層
デザイン要素の中でも、余白は最も過小評価されがちなものの1つです。雑然としたレイアウトを、整理された使いやすいインターフェースに変える力があります。UI要素を適切に配置することで、脆弱性情報を読みやすく、明確な構造で提示できます。余白の基本単位を8pxと定め、コンテンツに応じて異なる倍率を適用しました。
異なるSnyk製品に共通のレイアウト
もう1つ改善したかったのは、Snyk Open SourceとSnyk Codeのパネル間にあるレイアウトの不一致と、他のSnykインターフェースにおけるデータ表示方法の違いです。この不一致を解消するため、Snyk Codeの詳細に情報を追加し、複数の環境で共通して使えるヘッダーセクションを作成しました。対象となる環境は、Webアプリ、IDE、CLIです。
独自コードの削減
IDEのテーマ（ダーク／ライト）にかかわらず拡張機能が適切に表示されるよう、多くのハードコードされた色を取り除き、標準で用意されている色を使うようにしました。たとえば、当初、Snyk Codeの説明に表示されるマーカーには、脆弱性の深刻度に応じて個別に色がハードコードされていました。これは自社UI向けに定めたSnykのデザインガイドラインに沿ったものでした。しかし、テーマが個人の好みに大きく左右されるIDEでは、これらの色が適切な視覚的手がかりになるとは限りませんでした。そこで、マーカーの表示にはCSSのカラー変数を使い、テーマのカスタマイズに従うようにしました。
これにより、どのテーマを選んでも、拡張機能が自然になじむようになりました。
VS Codeのデザインシステムに準拠
脆弱性データは複雑です。テキスト、コードスニペット、リスト、表など、さまざまな形式で表示されます。コードから直接アクセスできる要素もあれば、直接制御できない形で取り込まれる要素もありました。
こうした制約を踏まえ、IDEと同じ美しさに調和するUIをデザインしました。タイポグラフィはVS Codeのスタイルに合わせ、ボタンには同じアウトラインアイコンとホバー効果を採用しました。これらの変更によって認知負荷が軽減され、拡張機能をより使い慣れた見た目にできます。
最後のさりげない仕上げ
全体をまとめ、拡張機能の見た目をさらに磨き上げるため、各カスタムパネルに製品アイコンを追加しました。全体のデザインが際立つだけでなく、拡張機能に独自のビジュアルアイデンティティを加えることができます。
コードのセキュリティ態勢を改善するため、シームレスな体験を提供することを目指しています。今回の変更を気に入っていただけたら幸いです。ぜひ引き続きフィードバックやご提案をお寄せください。