Yakaze Tech Studio、自社で育てたUI基盤をOSS化──Laravel用UIライブラリ「Pinion UI」をMITライセンスで無償公開

AIに「もっと落ち着いた雰囲気に」と頼むと、画面ごとにそれっぽい答えが返る。単体では正しいのに、並べると揃わない。Pinion UIは色と形を＜html＞の2属性にまとめ、全画面を一度に揃えます

Yakaze Tech Studio

2026年7月28日 12時15分

Yakaze Tech Studio株式会社（本社：東京都中央区、代表取締役：高井昭彦）は、Web アプリの外観を HTML 属性2つに集約した UI コンポーネントライブラリ「Pinion UI」を、MIT ライセンスで無償公開しました。受託開発と自社サービス、両方の現場で磨いてきた UI 基盤の OSS 化で、AI でプロダクトを開発する少人数チームでの利用を主に想定しています。

■ 生成されたコードは、単体では正しい。並べると揃わない

「もっと落ち着いた雰囲気に」と AI に頼むと、画面ごとにそれっぽい答えが返ってきます。1枚ずつ見ればどれも正しい。並べると揃わない。余白が、角丸が、同じはずの青が、画面をまたぐと少しずつずれ、直させても次の画面でまた別のずれが出ます。AI は意図をくむことに長けている一方、何十画面にわたって同じ判断を貫くことが構造的に苦手だからです。こうして外観の変更は、「決める」だけの作業のはずが、毎回コストのかかる「実装」になっていました。

■ <html> の2属性で、全画面を一括でスタイルチェンジ

Pinion UI は、そこを <html> の属性2つにまとめました。

・data-theme が色 … 39テーマ(各テーマ light / dark 対応)

・data-tune が形 … 余白・角丸・タイプスケール・影の 11チューン

2軸は独立して自由に組み合わせられ、39テーマ × 11チューン × light/dark = 858通りの外観をマークアップ一行変えずに切り替えられます。ボタン・フォーム・テーブルなど 56コンポーネントすべてが同じ2軸に追従するため、属性値を1つ変えた瞬間に全画面が揃います。ずれる余地がそもそもありません。「もう少し柔らかく」も「もっと硬派に」も、指示のし直しではなく属性値の変更になります。

以下の動画は、実際に2属性を打ち替えてアプリ全体の外観が切り替わる様子です。

■ なぜ開発スタジオが、これを無償で公開するのか

当社は、受託開発と自社サービスを両輪とする開発スタジオです。どちらの現場でも、創業者が描いたビジョンが〝100%の精度〟で世に出ることを当たり前にするため、動く実物を最短1〜2週間周期で触りながら育てる開発手法「ビジョン駆動開発(VDD)」を実践しています。事業の方向が変われば見た目も一緒に変わる手法であり、「外観の変更が実装になる」ことが検証サイクルの速度の上限でした。Pinion UI はその上限を外すために社内で育ててきました。

当社の商品は検証サイクルの速さそのものです。UI 基盤は囲い込んでも価値が増えず、多くの環境で使われ鍛えられるほうが、当社にも利用者にも得だと判断しました。

■ 抜けられる設計にした(ロックインなし)

OSS 採用のいちばんの障壁は「あとで抜けられなくなること」です。Pinion UI の出力は独自記法ではなく素の Tailwind CSS クラスで、php artisan ui:eject で依存を外して通常の Tailwind 実装に戻せます。無償公開の信頼は、機能ではなくこの出口で担保しています。

導入は2コマンドです。

composer require sparrowhawk-labs/pinion-ui

php artisan ui:install --ai

--ai を付けると AI エージェント向けの指示ファイルが設置され、AI 自身がアプリに合うテーマを選べます。選ぶのは AI、全画面で外さず実行するのはライブラリという切り分けです。

■ 代表コメント

「AI でプロダクト開発をする小さなチームにこそ、使ってほしいと思っています。

少人数のチームに、デザイナーがいつも横にいるわけではありません。それでも見た目の一貫性は、最初のリリースから問われます。AI は『こういう雰囲気にしたい』という意図までは連れて行ってくれますが、それを何十画面で貫くところで必ず取りこぼしが出る。そこを人の気合いではなく、ライブラリの側で構造的になくしたかった。属性を2つ書けば全画面が揃う。少人数のまま、見た目の質を落とさず前へ進めます。私たち自身が毎日そうやって使っています」

(Yakaze Tech Studio株式会社代表取締役・高井昭彦)

■ 発信について

英語圏には、Laravel 専門の英語技術メディア「Laravel News」に代表・高井が執筆した解説記事を出稿しました(2026年7月28日公開)。国内へは技術記事と本リリースで発信します。

掲載記事: https://laravel-news.com/pinion-ui-restyle-an-entire-laravel-app-by-changing-two-html-attributes