Decopi — いいデザイン、コピペで。
色・角丸・速さをその場で調整して、そのまま貼れるHTML/CSSパーツ集。全60カテゴリ・1015パーツ、登録不要・依存ライブラリなし。コードだけでなく「AIに渡す日本語プロンプト」ごとコピーできる出口まで設計し、企画からUI設計・生成の仕組みづくり・公開までを一人でかたちにしました。
コピペ体験の終点をどこに置くか。コードだけでなく「AIに渡す日本語プロンプト」ごとコピーできる出口を設計しました。AIを前提にした体験設計の実例です。
調整してから、持ち帰れるパーツ集。
Decopi（デコピ）は、ボタン・見出し装飾・カード・料金表・キネティックタイポなど、全60カテゴリ・1015種類のHTML/CSSパーツを収録したWebツールです。登録も、依存ライブラリもいりません。
ふつうのパーツ集と違うのは、コピーする前に調整できること。色・角丸・文字サイズ・アニメーションの速さをスライダーで動かすと、プレビューに即反映されます。「サンプルの色のまま持ち帰って、自分のサイトで書き換える」という手間を、ツールの側で先に済ませる設計です。
コピペの「あと」に、手間が残っていた。
パーツ集やスニペット集は世の中にたくさんあります。けれど実際に使うと、コピーしたあとに自分のサイトの色へ直し、角丸を合わせ、サイズを調整する。「コピペのあとの手直し」が毎回発生します。CSSに慣れていない人ほど、ここでつまずきます。
もうひとつ気になっていたのは、AIとの距離です。いまは「ChatGPTやClaudeに作ってもらう」人が増えたのに、見た目の希望を言葉で正確に伝えるのは案外むずかしい。見本を選んで、調整して、その状態をAIに渡せたら。コピペで終わる人にも、AIで続きを作る人にも効くツールになる。そう思って作りはじめました。
考えたこと、決めたこと。
出口を2つ、設計する。
「コード」を貼って終わる人と、「プロンプト」をAIに渡して続きを作る人。プロンプトには調整後のコードと日本語の指示文を同梱し、貼り付けるだけでAIがそのまま作れる形にしました。コピペ体験の終点を、AI時代に合わせて一段先へ延ばしています。
貼るだけ派と、管理する派の両方に。
コードはstyle属性埋め込みの自己完結HTML（どこに貼っても崩れない）と、CSS+HTML分離形式（クラス名を自動採番）の2タブ。WordPressに1か所貼りたい人と、CSSを別管理したい人で、必要な形が違うためです。
全体は一括で、個別の意思は守る。
キーカラーを選ぶと1015パーツの主役色が一括で切り替わります。ただし個別に調整したパーツは追従から外し、勝手に上書きしない。「全体のトーンを先に決めて、細部を仕上げる」流れと、ユーザーの決定の尊重を両立させました。
かたちにしたもの。
ライブ調整
色・角丸・文字サイズ・速さをスライダーで調整。プレビューに即反映されます。
2形式のコードコピー
自己完結HTMLと、CSS+HTML分離形式。表示中のタブの内容をそのままコピーできます。
プロンプトをコピー
調整後のコード＋日本語の指示文をセットでコピー。ChatGPTやClaudeに貼るだけで続きを頼めます。
キーカラー
選んだ色を全パーツの主役色へ一括適用。個別調整したパーツは追従から外れます。
お気に入り・横断検索
気になるパーツに星をつけて集約。1015パーツを横断する検索も用意しました。
登録不要・依存なし
アカウントも外部ライブラリも不要。各パーツはそれだけで完結するコードです。
つくり方。
1015個のパーツを1つずつ手書きするのではなく、「パーツを定義すれば、ページが生成される」仕組みを先に作りました。各パーツは「プレースホルダを持つテンプレート＋調整コントロールの定義」で宣言し、Pythonのジェネレーターが全ページを静的生成。ブラウザ側のJSがコントロールの値をテンプレートに流し込んで、プレビュー・コード・プロンプトを組み立てます。
「コピペのあとの手直し」を起点にする
既存パーツ集の使いにくさと、AIに見た目を伝えにくい問題。2つを「調整してから持ち帰る」の一点で解くことに絞りました。
テンプレート＋コントロールの宣言的な定義
パーツを増やすほど効く形を優先。色・スライダー・文字入力のコントロールを部品化し、絵文字を使わず線アイコンで統一するなど、量産しても質が揃う運用ルールを文書化しました。
Python静的生成 × 素のJSで、AIと並走して開発
ジェネレーターとパーツ定義はAIとペアで拡充。フロントはフレームワークなしの素のJS。ライブ調整・2形式のコード生成・プロンプト組み立て・キーカラー連動を、AIに書かせて組み上げました。
Cloudflare Workers へワンコマンドデプロイ
生成物を静的アセットとして配信。再生成からデプロイまでをスクリプト1本にまとめ、パーツ追加→公開の往復を軽くしています。
体験は、コピーの先まで続いている。
この制作でいちばん考えたのは、パーツの数ではなく「コピーしたあと、その人がどうするか」でした。貼るだけで終わりたい人、CSSを分けて管理したい人、AIに続きを頼みたい人。出口を分けて設計したことで、同じ1つのパーツが、違う使い方をする人にそれぞれ役立つ形になりました。
もうひとつの収穫は、1015個を「作る」のではなく「生成される仕組みを作る」と決めたことです。定義の書式と運用ルールさえ整えば、量を増やしても質が崩れない。UIデザインの仕事で大切にしている「一貫性は仕組みで守る」を、個人開発の規模で実践した一つになりました。