Services

ツクロアの事業内容

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

Jumpu UI

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

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

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

github npm Figma

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

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

そのため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-openis-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 アプリケーション設計・開発のご依頼を受け付けています。
こちらのフォームにてまずはお問い合わせください。

無料相談受付中

ツクロアでは、UX/UIデザインと開発支援に関する無料相談を受け付けております。

要件が固まっていなくても、お困りごとベースでも構いません。 良い製品開発をご一緒できるように、私たちも親身になってご提案したいと考えております。

メールでのお問い合わせ

お問い合わせフォーム

お客様の声

お客様の声もご覧ください、私たちのお仕事の熱量を感じていただけたら嬉しく思います。