ツクロアの事業内容

デザインフレームワーク「Jumpu UI」の開発

デザイナーの意図が反映されやすいフレームワークを目指して

Jumpu UIは「なるべくデザイナーの意図が反映されたUIデザインの実装を」という私たちの思いが基となってつくられたCSSフレームワークです。CSSフレームワークはCSS言語をつかって比較的簡単にルールに基づいたWebデザインを可能とするライブラリです。BulmaのようなJavaScript言語を必要としないフレームワークから、Bootstrapのように豊富なUIパーツを提供しているものもあり、幅広くWeb開発に利用されています。

npmやFigmaで公開をはじめました。

github npm Figma

一般的にフレームワークというと、導入するまでにそれ独自の設定やルールを学習することが必要です。しかし、このJumpu UIはTailwind CSSプラグインとして開発しています。世界中で多くのコーダー、デザイナーに親しまれているTailwind CSSというフレームワークの知見をそのまま活かすことができます。一方で、Jumpu UIはできるだけ独自のルールを排除することで、もっとデザイナーが意図した色や大きさや配置を簡単に実現したいと考えました。

Tailwind CSS自体、buttonのような機能は持っていません。そのため公式からTailwind UIという有償のUIコンポーネントが提供されています。しかし私たちは、もっと手軽にUIデザインを実践できるよう、必要最低限のコンポーネント（例えばbuttonやcard）を提供します。少しずつ必要に応じてコンポーネントを増やし、アップデートすることを考えています。

そのためJumpu UIはかなりミニマムで、他のCSSやUIと名前がつくフレームワークと比べると「お仕事で使えるのかな？」と思われるかもしれません。しかし、Tailwind CSSが補ってくれるのです。Jumpu UIそのものの学習コストを減らすことで、デザイナーやコーダーにも優しく、本来伝えたいビジネスの意図を明確に示しやすくすることを目標にしています。

Tailwind CSSをデザインシステムとして利用する

Jumpu UIはTailwind CSSのデザインシステムや設定（コンフィグ）に準ずるので、Tailwind CSSを理解している人には導入がしやすいと考えています。

多くのフレームワークはそれぞれ独自のデザインシステムに基づくルールが異なっています。プロジェクトごとに採用するフレームワークが違うと、なかなかデザインの意図を開発へ反映しにくいジレンマに度々悩まされました。

Tailwind CSSは、アプリデザイナーだけでなくWebサイトのコーダーといった幅広いWebデザインに関わる層が日頃つかっているものです。 Tailwind CSSのルールをそのままUIデザインに反映できるJumpu UIによって、多くのプロダクトのUIデザインがよりよく、さらにエンドユーザーに理解されやすくなることを期待しています。

これらの考え方によって、Jumpu UIは独自のデザインシステムをつくらずに、Tailwind CSSの知見を活かすことにしました。

バリアントを増やさない

多くのフレームワークの場合、ボタンの横幅をいっぱいにしたい場合、

<button class="button is-fullWidth">...</button>

のようなis-接頭辞を使ったりして独自のバリアントを提供しているため、私たちは都度、学習し理解する必要がありました。

このように独自のユーティリティクラスは独自のフレームワークによって設計されたものです。Jumpu UIではこのis-fullWidthのようなバリアントは原則排除しています。なぜならTailwind CSSにはw-fullのようなユーティリティがあるからです。

Jumpu UIでは慣れ親しんだTailwind CSSが提供するユーティリティでバリアントを構成します。

<button class="button w-full">...</button>

一般的なフレームワークでは、以下のようなバリアントを使ったときに急にサイズが大きくなり、デザインシステムを逸脱したサイズ感になることが起こりがちです。

<button class="button is-large">...</button>

なのでJumpu UIではTailwind CSSのユーティリティクラスよってデザインシステムに定められた大きさのみを使うことができます。

<button class="button text-2xl">...</button>

「ボタンくらい手軽に実装するだけでいい」という意見は当然あると思いますし、伝えたいエンドユーザーによっては、それで良い場合もあります。

ただ、多くのUIデザイン・アプリ開発を経験してきた私たちとしては、統一されたデザインシステムと、実装のしやすさ。これらのバランスがとれている開発スタイルへのアップデートを模索する必要があると考えています。

外観は必要最低限

他フレームワークでよく使われるcardコンポーネントの多くは、paddingなどの内部の余白がデフォルトで設定されていることがほとんどです。

しかしJumpu UIのcardコンポーネントでは、余白すら提供していません。

<div class="card">
  <img src="example.jpg" alt="card example" />
  <div class="px-4 py-3">// padding content area</div>
</div>

Jumpu UIでcardが提供するのは、カードの視覚的な境界線のみです。余白はデザインシステムのルールに基づいてカスタマイズしたいという考えがあります。

セマンティックなマークアップであること

コンポーネントは見た目だけではなく、セマンティック（意味付けされたHTMLマークアップ）な構造であることが大切だと考えています。

例えばaccordionコンポーネントでは「展開している状態」と「閉じている状態」という最低2通りのバリアントが存在します。他のフレームワークでは、is-openやis-collapseといった状態を示すクラスでバリアントを提供することがあります。しかし、前述の「バリアントを増やさない」で述べたとおり、コンポーネントに独自のバリアントがclass属性に付与されてしまい、状態とスタイルが混在してコードを複雑化してしまいます。

<div class="accordion is-open">...</div>

Jumpu UIではこの状態とスタイルを極力混在させず、さらにセマンティックなマークアップを実現したいと考えました。その結果、最新のHTMLの仕様および、WAI-ARIAの仕様をもとに、状態を意味するバリアントはclass属性を使わないようにしました。

以下の例ではWAI-ARIAの仕様をもとに、aria-expanded属性で、展開していたり閉じたりしている状態を管理しています。

<div class="accordion">
  <button type="button" aria-expanded="true" aria-controls="content-A">
    Accordion title
  </button>
  <div id="content-A" aria-hidden="false">// Accordion content ...</div>
</div>

WAI-ARIAの仕様に準じて、スタイルと機能が分離して意味づけされたマークアップを実現しています。

株式会社ツクロアでは、Jumpu UI を使った Web アプリケーション設計・開発のご依頼を受け付けています。
こちらのフォームにてまずはお問い合わせください。