MENU

「Visual LANSA UI Kit」 ~Figmaでデザインした画面をVisual LANSAで効率的に実装するための無料ツール

高感度なUI/UXを
Visual LANSAで効率的に実装

ランサ・ジャパンは今年1月、「Visual LANSA UI Kit」(日本語版)をリリースした。これはWebデザインツールであるFigmaの部品群を、Visual LANSAユーザー向けにパッケージ化した無料ツールである。

FigmaはWebデザインに特化した人気ツールだ。Webデザインに関しては、今最も人気のあるツールの1つと言ってよい。SaaSによりブラウザで利用することも、ソフトウェアをインストールしてオフラインで利用することも可能。Adobe PhotoShopなどと同じような感覚で、UI/UXを作画していけるのが特徴である。

ただしUI/UXのデザイン担当者と、画面を実装する開発者が別々である場合、Figmaでいくら高感度な画面をデザインしても、実装の段階になると、開発が難しかったり、多くの工数を要したりで、デザイン変更などの手戻りを生じさせるケースがある。

そこでVisual LANSAが保有しているデザインテンプレートをFigma側にも搭載し、使用可能にしたのがVisual LANSA UI Kitである。

これを使えば、Visual LANSAが提供するUI/UXコンポーネントを用いたデザインが可能になる。デザイナーはVisual LANSAで実装可能なUI/UXコンポーネントを用いて、統一感のあるモダンな画面を作成できる。

以前は、基幹システムやそれに関連するシステムにUI/UXデザインの概念を持ち込むケースは少なかったが、モバイルも普及した今、それは重要な課題になりつつある。デザイナーとアプリケーション開発者が協業して、操作性および視認性に優れたUI/UXデザインを実現する方式が多く採用されている。

そしてリリースされたのが、Visual LANSA UI Kitである。対象はVisual LANSAのユーザーであり、デザイナーと開発者が別々で、かつチームとして協業しているようなケースだ。

Visual LANSA UI Kitを利用するには、以下の3つのステップがある。

まずFigmaの利用環境を整えること。Figmaのサイトにアクセスし、アカウントを作成し、ブラウザを使ってオンラインで利用するか、もしくはソフトウェアをダウンロードしてオフラインで利用するかを選ぶ。

次にランサ・ジャパンのサイトにアクセスし、申し込みを行ってから、Visual LANSA UI Kit(無料)をダウンロードする。

そしてFigmaにVisual LANSA UI Kitをインポートする。

あとはFigmaで画面をデザインし、そのイメージに沿って開発者がVisual LANSAで実装を進める。Figma側ではVisual LANSA UI Kitで用意されたデザインテンプレートを使用するので、自然にVisual LANSAで実装しやすい画面が出来上がるというわけだ。

Visual LANSA UI Kitは、IBM iアプリケーションの開発に、UI/UXの概念を取り入れるための起爆剤になるかもしれない。

図表1 Visual LANSA UI Kitのコンポーネント

 

[i Magazine 2025 Spring号掲載]

新着