♡ UI Kit · てづくり

コンポーネント図鑑

tezukuri ui kit — handmade components

もちラボで使っている、手づくりの部品たちを一箱にまとめました。
ボタンからカレンダーまで、40種類以上のパーツをどうぞ。

ボタン

押すと3pxだけふわっと浮かびます。

variants
sizes

バッジ・タグ

マスキングテープ色のバリエーション。

badges
default pink green purple yellow ink
準備中 公開中 おためし 終了

アバター

丸ゴシックのイニシャルで。

sizes
+3

区切り

手書きの波線と、破線。

dividers
~ そして ~

インプット

フォーカスすると黄色くほんわり。

text fields
お気軽にどうぞ
もう8文字以上にしてね

セレクト

ぶっきらぼうに見えて手づくり。

selects

チェック/スイッチ/ラジオ

チェックは ✓ でかわいらしく。

toggles
← 右がON

スライダー

丸いつまみがぽてっ。

range

ファイル

破線の箱にぽとり。

upload
♡ ここにぽとり
ファイルをドラッグ&ドロップしてください
song-01.mp3 2.4 MB photo.jpg 1.1 MB cover.png 880 KB

タブ

クラフト紙のインデックス。

tabs
選んで、さわって、しまう。手づくりのかんたん3ステップです。

パンくず

小道しるべ。

breadcrumb

ページネーション

ページめくりの目印。

pagination

ステッパー

順番にちょこちょこ。

stepper
1 読み込み
2 編集
3 保存
4 完了

セグメント

まるっと選ぶ。

segmented

アラート

やさしい色でお知らせ。

alerts
おしらせ新しいツールを追加しました。
ほぞん完了編集内容をzipで出力しました。
!
ちゅういファイルサイズが大きいので時間がかかります。
エラー対応していない形式です。MP3をお使いください。

トースト

ぴょこっと出てきて消えるお知らせ。

toasts
コピーしました
保存しました
共有リンクをつくったよ

ツールチップ

ホバーでそっと。

tooltip
やあ、こんにちは お気に入りに追加 くわしくはこちら

プログレス

斜めの縞でぐんぐん。

progress bars

ローダー

くるくる・ぴょんぴょん。

loaders
よみこみちゅう…

空状態

なにもないときの、ほっこり。

empty state

まだ何もありません

お気に入りに追加したどうぐが、ここに並びます。

カード

てっぺんにマスキングテープ。

work cards
♡ あそび No. 01

カードの例

sample card

マスキングテープと波線で、手づくり感のあるカードです。

samplecard
♪ どうぐ No. 02

もうひとつの例

another sample

テープの色とアイコンを変えるだけで別の表情に。

sampleanother

テーブル

ノートの罫線のように。

table
No.なまえカテゴリ公開日状態
01 いたずら猫と香りの記憶 あそび 2026.04 公開中
02 MP3タグエディター どうぐ 2025.08 公開中
03 画像トリミング どうぐ 2025.04 公開中
04 画像背景削除ツール どうぐ 2026.02 おためし

スタッツ

ちいさな数字たち。

stats
つくったもの
04
+1 今月
あそばれた回数
2,481
+18.2%
お気に入り
312
+7
おたより
27
-3

タイムライン

記録帳のように。

timeline
2026.02
画像背景削除ツールを公開しました。
2026.04
いたずら猫と香りの記憶を公開しました。
2025.08
MP3タグエディターを公開しました。
2025.04
画像トリミングを公開しました。もちラボ、はじまり。

レーティング

★印で気持ちを表現。

rating

カレンダー

ちっちゃな予定帳。

calendar
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4

チャット

ふきだしで、こそっと。

chat
こんにちは〜 ♡ もちラボへようこそ
画像トリミングってオフラインでも動きますか?
はい、ぜんぶブラウザで処理されます。安心してお使いくださいませ。
ありがとうございます!

アコーディオン

タップで開いてとじて。

accordion
データは外部に送られますか?
対応しているブラウザは?
商用利用はできますか?

めくれるカード

クリックで表裏がくるん。神経衰弱に。

flip cards

トランプ

スート付きのプレイングカード。

playing cards
A
A
K
K
Q
Q
J
J
10
10

トレーディングカード

属性付きのキャラクターカード。

trading cards
火 ♦HP 120
もえる いたずら龍
コンボで+5ダメージ。炎を吐いて相手を怯ませる。
水 ♦HP 90
しずかな 月の魚
夜のターンに回復+20。光る鱗で敵の攻撃をそらす。
葉 ♦HP 110
やんちゃ いたずら猫
場のカードをシャッフル。毛玉を転がして妨害。
星 ♦HP 80
きらり 流れ星
1ターンに1回、味方全員に+10HP。

ダイス

ころころ、ぽん。

dice

スロット

そろったら、キラリ。

slot

ライフ・コイン

いのちと、お金。

lives & coins
G S B G × 128

HP / MP / XP バー

ステータスの見える化。

status bars
HP
164 / 200
HP
36 / 200
MP
48 / 80
EXP 720 / 1000 (あと280でLv.Up)

スコア・コンボ

数字がはねるたのしさ。

score & combo
SCORE 2,840
HI SCORE 9,999
TIME 01:24
×5 COMBO! いいちょうし!

キャラクターカード

パーティメンバー一覧に。

character
Lv.24
望月のあ
クラフター
ATK 42DEF 31MAG 55
Lv.18
いたずら猫
トリックスター
ATK 28DEF 22SPD 78
Lv.30
月の魚
ヒーラー
HEAL 66MP 120

ダイアログ

ふきだし型のセリフ枠。

dialog box
♡ のあ
やあ、ちいさな冒険者さん。今日は どんな ひとときを つくりましょうか?
♪ ねこ
にゃあ。カードを ぜんぶ シャッフルしちゃうよ。かくご は できてる?

選択肢・ターン

RPG風のメニュー。

choices
  • たたかう
  • まほう
  • どうぐ
  • にげる
  • はい
  • いいえ
ターン 3 / 6
A決定/ Bもどる

ボード・ミニマップ

タイルとミニマップで世界観を。

tile board
S
¢
¢
¢
G

Dパッド・アクションボタン

コントローラー風の操作盤。

gamepad
SPACEジャンプ ESCポーズ

クエスト

目標リストとごほうび。

quest
▶ MAIN QUEST
香りの記憶をあつめる
  • 花のカードを3つ見つける
  • 月のカードを3つ見つける
  • 雨のカードを3つ見つける
♡ ごほうび: 星のかけら ×3
▶ SIDE QUEST
いたずら猫をなだめる
  • 猫カードを3回ひく
  • ミルクのアイテムをあげる
♡ ごほうび: 魚の骨 ×1

タイマー

のこり時間のドキドキ。

timer
00:42
00:05
18s
06s

インベントリ

もちものスロット。

inventory
12
3
1
1
8
5
コモン レア レジェンド 空スロット

アチーブメント

リボン付きのメダル。

achievements
はじめての
クリア
パーフェクト
記憶
いたずら猫
マスター
?
???
?
???

表情・リアクション

キャラの気持ちを。

reactions
◠‿◠ ·ᴗ· ◠︵◠ >﹏< -‿- ☆∀☆
やった! ざんねん クリア! LEVEL UP

スタート画面

タイトル + プッシュ・スタート。

title screen

いたずら猫と
香りの記憶

— itazura-neko —

GAME OVER

スコア: 2,840