個人開発で、抽象図形ライブラリ「MOYO」を作って npm に公開しました。
着想から公開まで、だいたい2日です。
この記事では何を作ったのか、どうやって思いついたのか、具体的どう行動したのかを整理します。
- npm: @ikg-systems/moyo / @ikg-systems/moyo-vue
- デモ: https://yoseiikegami.github.io/moyo/
- GitHub: https://github.com/YoseiIkegami/moyo
対象読者
- 個人開発で npm 公開を一度やってみたい人
- 「ライブラリってどう世に出すの？」が気になっている人
- Vue で余白やローディングに動きを足したい人
1. きっかけ：MDI の逆を行きたくなった
Material Design Icons（MDI）を眺めていて、ふと思いました。
並んでいるのは、当たり前ですが、ぜんぶ 形に意味がある アイコンです。
じゃあ、「抽象的なアイコン」があってもいいのでは？
npm でコード1行で呼べたら面白いかも、と。
そういえば Claude のローディングアイコンも、意味を決めない有機的な動きでした。
「なんだかわからないけど、生きてる塊」を余白に置けるライブラリが欲しくなりました。
2. 作ったもの：MOYO
作ったのが MOYO です。
- コンセプトは「動きが主役、形は容れ物」
- 名前の由来は「模様」＋「モヨっ」の響き
- Vue なら
MoyoBlobを1行置くだけで動く - 動きに愛着が生まれる思想で設計した
<script setup>
// Vue 3 ならこれだけ
import { MoyoBlob } from "@ikg-systems/moyo-vue";
</script>
<template>
<MoyoBlob base="wander" color="#5436DA" :size="160" />
</template>
デモはここです。スライダーで触って、Copy Vue でコードをコピーできます。
👉 https://yoseiikegami.github.io/moyo/
3. 使えそうな場面を4つ作ってみた
抽象的だからこそ、用途を決めつけにくい。
LT用に、画面イメージを4つ作りました。
キービジュアル
感情・ムード
ローディング
入力中…
ヒーローにも、モヤモヤにも、入力中にもなる。
形に意味を持たせていないので、コピーやUIとぶつかりにくいです。
4. こだわったこと
どんな形にしても、カクカクしない
制御点を Catmull-Rom スプラインでベジェに変換しています。
complexity を上げても、トゲや自己交差のない閉曲線になるようにしました。
動きを、3つの「性格」に分けた
強さの違いではなく、質の違いです。
base |
どんな感じ | どう動く |
|---|---|---|
breathe |
穏やかに呼吸する | 輪郭全体が、そろって膨らんだり縮んだりする |
wander |
ゆったり流れる | へこみと出っぱりが、縁をぐるっと一周する |
churn |
いきいき暴れる | 各点がバラバラのリズムで、押し引きする |
scaleUp みたいな無機質な名前ではなく、「呼吸」「かき混ぜる」と付けました。
使う側が演出を選べるようにしたかったからです。
複数の塊が、くっついたり離れたり
MoyoCluster は群れです。SVGの gooey フィルタで、塊同士がニュルッと融合します。
<script setup>
import { MoyoCluster } from "@ikg-systems/moyo-vue";
</script>
<template>
<!-- count と spread で群れの様子を調整 -->
<MoyoCluster base="wander" :count="6" :spread="0.5" :spin-speed="0.3" color="#5436DA" />
</template>
seed で形を固定できる
毎回ランダムだとロゴ用途に使いにくいので、同じ seed なら同じ形になるようにしました。
<!-- ブランドマーク想定：seed で形を固定 -->
<MoyoBlob
base="breathe"
color="#D94A1E"
:size="120"
:complexity="14"
:edge="0.5"
:spike="0.4"
seed="site-logo"
/>
パッケージを2層に分けた
| パッケージ | 役割 |
|---|---|
@ikg-systems/moyo |
SVGパスを生成するコア（framework非依存） |
@ikg-systems/moyo-vue |
Vue 3 のコンポーネント |
「計算」と「描画」を分けておくと、あとで React などに広げやすいです。
Vueユーザーは moyo-vue を入れるだけで足ります。
# Vue ならこちら
npm install @ikg-systems/moyo-vue
# コアだけ使いたい場合
npm install @ikg-systems/moyo
5. AI を工程で使い分けた
作るときは、AIを工程ごとに分けました。
| 工程 | 道具 | やったこと |
|---|---|---|
| 思想・壁打ち | Gemini | 「MDIの逆」を一緒に転がす |
| 設計・レビュー | Claude | モノレポ構成、責務分割の相談 |
| 実装 | Cursor | 設計を渡して一気にコード化 |
| 公開 | 自分 | npm・デモ・GitHub Pages |
Gemini で「何を作るか」を固め、Claude で「どう組むか」を固め、Cursor で形にする。
考える → 設計する → 書く、を道具ごとに分けた感覚です。
モノレポの参照設定みたいな面倒なところも、設計を渡して「このまま実装して」で通ることが多かったです。
公開まわり（アカウント、スコープ、package.json、publish）は自分で進めました。
6. npm 公開は、思ったより簡単だった
初めての公開でやったことは、だいたいこれです。
-
名前を確保 —
moyoは取られていたので@ikg-systems/moyo（スコープ）にした -
package.jsonを整える —exports/files/publishConfig - 2FA を設定 — publish には必須。メールでの認証を行いました。
-
pnpm -r publish --access public— スコープ公開は--access publicを忘れずに
パッケージ名が空いているかは、最初に確認した方がいいです。取られていたら @your-name/pkg にするのが早いです。自分は確認不足でこのタイミングで気づきました（笑）
あわせて GitHub と、デモの GitHub Pages も公開しました。
ここまで含めて、着想からだいたい2日でした。
7. 正直な弱点
公開してから見えた課題もあります。
-
常時アニメーションが回り続ける —
prefers-reduced-motionや画面外での自動停止（IntersectionObserver）はまだない - すぐ使えるのは今のところ Vue だけ — React / Svelte はコアから自分で組む必要がある
- バージョンはまだ 0.1.x — 初期版らしい粗さが残っている
公開して人に見せる前提に立って、初めて「直さなきゃ」と気づけた部分です。
8. パフォーマンスの目安
装飾用途なら、体感では気になりにくい軽さです。
- 配布サイズ：gzip で core + vue 合わせて 約 4KB（依存ゼロ）
- 単一 blob：CPU 占有 約 1.2%
- 検証環境でCPU を6倍遅くした端末でも、数個〜50個なら 60fps 超
| 条件 | 素の性能 | CPU 6倍遅い端末 |
|---|---|---|
| 単一 blob | 120fps | 120fps |
| 50個 | 120fps | 111fps |
| 100個 | 120fps | 54fps |
依存ゼロで gzip 約4KBなので、装飾として気軽に足しやすいです。
Lottie 系と比べると、ランタイム＋JSONアセットが要らないぶん軽いです。
9. まとめ
- MDI の逆をいく、抽象的な図形を作った
- AI を工程で使い分けて、着想から2日で公開した
- npm 公開自体は、思ったより簡単だった
- 使い方はユーザー次第。ヒーローにも待機表示にも使える
リンクはこちらです。
気になった方は、デモで触ってみてください。
余談：npm は、誰でも公開できる
個人でもここまで出せる、というのは素直に嬉しいです。
一方で、品質を問わず誰でも公開できる、という面もあります。
使う側としては、次のような目線が大事だなと、作ってみて実感しました。
- メンテされているか
- 依存は安全か
- 自分で読める規模か
初めての公開で手探りだったからこそ、普段使っているライブラリへの親近感も湧きました。
やりたいアイデアがまだあるので、これからも続けます。