写真を好きな形に切り抜くための無料の道具「clip-path メーカー」を作りました。KAKERUデザインの無料の道具「KAKERU TOOLS」の1本目です。

写真の上に点を打って形を作ると、その形で切り抜くためのCSS（clip-path）が、その場で出てきます。登録もダウンロードもいりません。

できること

• 写真の上をクリックして点を打つと、その形で切り抜かれる。点はドラッグで動かせる
• ひな形から始められる（円・三角・六角形・星・吹き出し・矢印・ななめ）
• 写真の比率を選べる（写真のまま・正方形・横長・縦長）
• 自分の写真でも試せる。写真はどこにも送られず、パソコンやスマホの中だけで使う
• コードは「CSS」「HTML」「AIに頼むなら」の3種類。ボタン1つでコピーできる

なぜ作ったのか

きっかけは、KAKERU Designingの連載「WEBの技術」で、丸い画像・好きな形の画像をCSSで作るという記事を書いたことでした。

円や六角形なら、記事のコードをコピーすれば足ります。でも、自分の写真に合わせた「好きな形」となると、形の角になる点の位置を、1つずつ数字で書かないといけません。これは、仕事でWEBを作っている人でも面倒な作業です。

Illustratorのペンツールのように、好きな形を作って、それがそのまま切り抜きになる。そんな道具があれば、かなり使ってもらえると思いました。

作るときに決めたこと

記事に埋め込まず、道具として独立したページに

記事の中に入れる案もありましたが、道具だけのページにしました。道具そのものを探している人に検索で見つけてもらいやすく、仕事で何度も使う人にはブックマークしてもらいやすいからです。記事と道具は、お互いにリンクでつないでいます。

「広告を見ないと使えない」はやめた

無料の道具なので、広告を見てから使える形にする案も考えました。でも、使うたびに待たされるのは、使い勝手が悪い。無料で、気持ちよく、すぐ使えるほうを選びました。

写真は送らない・スマホでも使える

• 写真は、使っている人のパソコンやスマホの中だけで扱い、サーバーには送りません
• スマホでも、指で点を動かして形を作れます
• コードの数字は％で出すので、画面の幅が変わっても形が崩れません
• どの機能がよく使われているかを、アクセス解析で見られるようにしました

判断と設計はトミー、組み立てはClaude

この道具は、AIのClaudeと一緒に作りました。

何を作るか、どこに置くか、広告をどうするか、画面をどう見せるか。こうした判断と設計は僕がして、プログラムの組み立てはClaudeが担当しています。まず見た目の見本（カンプ）を作って確認し、それから実際に動く試作に進みました。触ってみて「ボタンが押せる感じがしない」と気づいたところを直して、公開しています。

思いついてから公開するまで、1日でした。

AIを使えば何でも簡単、というわけではありません。「誰が、どんな場面で使うか」を決めることと、触ってみて違和感に気づくことは、人の仕事です。そこを先に決めたから、早く形にできました。

こんな道具も作れます

clip-path メーカーと同じように、ブラウザで動く小さな道具を作ることができます。たとえば、こんなものです。

こんな会社に向いています

• お客さまに「自分で試せる」体験を用意したい会社
• 料金や商品選びの問い合わせが多く、先に目安を見てもらいたい会社
• 社内で毎回手作業していることを、少しでも楽にしたい会社
• 大きなシステムを入れるほどではないけれど、小さな道具がほしい会社

大がかりなシステムではなく、1つの目的に絞った小さな道具を、早く形にするのが得意です。「こんなことできる？」くらいの段階でも、お気軽にご相談ください。