UIのお手本を探すなら。Morphin・Viora UI・Tween UIを見てみた

画面に置くものは決まったけど、ボタンやメニューをどう見せようか。そんなとき、実際に動くお手本があると助かります。

KASUNさんのUI素材を紹介する投稿をきっかけに、リンク先の公式サイトを見てみました。今回はその中から、画面の参考を探せる「Morphin」と、動く部品を探せる「Viora UI」「Tween UI」の3つを紹介します。

いずれもサイトやデモを確認した範囲の紹介です。自分のアプリへ組み込んだレビューではありません。

画面の参考を探すならMorphin

Morphinは、実際のWebサイトやアプリ、ダッシュボードから、画面や操作、動きを集めたサイトです。

「Card」「Footer」「Pricing」など、作りたい部分から絞り込めます。「Minimal」「Editorial」といった見た目の方向や、「Page Transition」「Parallax」といった動きでも探せるのが便利。

たとえば料金表を作るなら、まず「Pricing」で例を見て、金額とプラン名がどの順に並んでいるか、申し込みボタンをどこに置いているかを比べられます。サイトを丸ごと眺めるより、いま作っている部分のお手本を探しやすいですね。

このサイトでは、部品の形だけでなく、前後の文章や余白との組み合わせも見たいところ。気に入った画面があったら、「見出しが大きい」「カード同士の間隔が広い」など、参考にしたい部分を言葉にしておくと、制作時に使いやすくなります。

Viora UIは、ReactとTailwind向けの部品を集めたサイト。Framer Motionを使うアニメーションも紹介しています。

トップページには、写真を切り替える「Minimal Carousel」、操作用の「Run Action Button」、サイドバーの「Bounce Sidebar」などが並んでいます。名前だけの一覧でなく、見た目や動きを確認してから部品の説明へ進める構成です。

ボタンひとつでも、押せることが伝わる形や、操作したあとの反応で印象が変わります。Viora UIは、そうした小さな部分のお手本を探すときに見ておきたいサイト。

公式サイトでは、各部品を1ファイルとしてCLIで追加する方式を案内しています。オープンソースの部品に加えてProや有料テンプレートもあるので、使いたいもののページで利用条件を確認してください。

Tween UIもReact向けの部品集で、GSAPとTailwind CSSを使っています。単純な動きにはCSSを使い、順番に動かす演出などにはGSAPを使う方針だそうです。

たとえば「Sliding Tabs」は、選んだタブを示す印が横へ動く部品。「FAQ Accordion」は質問を開くと回答が現れ、「Flip Card」はカードが裏返って説明を見せます。料金表やページ冒頭など、まとまった区画の例もあります。

GitHubのREADMEでは、CLIで部品の.tsxファイルを自分のプロジェクトへコピーする方式を説明しています。取り込んだソースを開いて、色や大きさ、アニメーションの時間を変更する使い方です。

READMEにあるタブ部品の追加例はこちら。

1
pnpm dlx shadcn@latest add @tween-ui/sliding-tabs

React 19、Tailwind CSS v4、TypeScript 5.xが要件として挙げられ、GSAPを使う部品ではGSAP 3.13以降が必要です。既存のReactプロジェクトへ取り込むときは、この組み合わせを先に確認しておくとよさそう。

また、公式サイトはprefers-reduced-motionへの対応を説明しています。端末で動きを減らす設定をしている人には、アニメーションの完了状態を表示する仕組みです。採用する部品の説明と実際の動きを、通常の設定と動きを減らした設定の両方で確かめたいですね。

3つのサイトは、次のように使い分けると探しやすそうです。

最初に「料金表を見やすくしたい」「選択中のタブをわかりやすくしたい」と決めてから見ると、参考にする箇所も絞れます。

React以外で作っているサイトでも、配置や操作の見せ方は参考になります。その場合はコードをそのまま取り込めないので、余白、文字の大きさ、選択状態の見せ方などを、使っている環境で作り直すことになります。

デモで気に入った動きがあったら、実際に載せる文章や画像を入れ、スマホでも確認してから採用する。お手本を自分の画面に合わせるところまで試したいですね。

この記事は GPT-6 が執筆しました。