HTML1ファイルでLinktree代替を自作した話【Claude Code × 個人開発】
Linktreeの月額、地味に痛くないですか？
SNSを複数運用していると、プロフィールに貼るリンクまとめページがほぼ必須になる。Linktreeは定番だけど、無料プランだとデザインの自由度が低いし、Pro版は月額6ドル（年払いでも月5ドル）。年間で約1万円。
「たかがリンクページに毎月課金するの、なんか違うな」と思ったのがきっかけだった。
Claude Codeに丸投げしてみた
最近Claude Codeを触り始めて、ちょっとしたツールなら爆速で作れることがわかってきた。そこで試しにこう投げてみた。
プロフィールリンクページ作成ツールをHTML1ファイルで作って。
- 5種類のデザインテーマを切り替え可能
- カラーをカスタマイズできる
- 完成したページをHTMLファイルとしてダウンロードできる
- 外部ライブラリなし、完全スタンドアロン
返ってきたのは、ちゃんと動くHTML1ファイルだった。もちろん一発で完璧ではなく、何度かやり取りして調整したけど、トータルの作業時間は1〜2時間くらい。
5テーマ × カラーカスタマイズで実用レベルに
完成したツールはこんな感じの機能を持っている。
- 5種類のデザインテーマ: ミニマル、グラデーション、ダーク、ネオン、パステル
- カラーピッカー: 背景色・ボタン色・テキスト色を自由に変更
- リンクの追加・並び替え: ドラッグ&ドロップ対応
- プロフィール画像: アップロードしてBase64埋め込み
- HTMLダウンロード: 完成ページを1ファイルで書き出し
Linktreeの無料プランでできることは一通りカバーしつつ、デザインの自由度はむしろ高い。
技術的に一番こだわったポイント
このツールで一番工夫したのは、「生成されるHTMLもスタンドアロンで完結する」 という点。
ツール自体がHTML1ファイルなのは当然として、そこから書き出されるリンクページもHTML1ファイルで完結するようにした。CSSはインラインで埋め込み、画像はBase64エンコード、外部CDNへの依存ゼロ。
生成されたHTMLの構造:
├── <!DOCTYPE html>
├── <style> ... 全CSSをインライン埋め込み
├── <body>
│ ├── プロフィール画像（Base64）
│ ├── 名前・自己紹介
│ └── リンクボタン群
└── </html>
つまり、書き出したHTMLファイルをそのままNetlifyやGitHub Pagesにアップロードするだけで公開できる。サーバーサイドの処理は一切不要。Vercelにドラッグ&ドロップしても動く。
この「ツールも成果物も1ファイル完結」という設計は、配布する上でもかなり重要だった。使う人がNode.jsのインストールとか環境構築で詰まることがない。
ローカル完結の安心感
もうひとつ大事なのが、データが外部に送信されないこと。
Linktreeなどのサービスだと、自分のリンク情報やアクセスデータがサービス側のサーバーに保存される。このツールはブラウザ上で完結するので、入力したデータがどこかに送られることはない。プライバシーを気にする人にとってはここが結構なメリットになる。
BOOTHで販売してみた
せっかく実用的なものができたので、BOOTHに出品してみた。価格は980円。Linktreeの月額2ヶ月分以下で、一度買えばずっと使える買い切り型。
出品してみて思ったのは、「自分が不便だと思ったこと」は他の人も同じように感じていることが多いということ。Linktreeの代替を探している人は意外といる。
まとめ
- Linktreeの月額課金が気になるなら、自作するのもアリ
- Claude Codeを使えば、HTML/CSS/JSのツールは驚くほど速く作れる
- 「ツールも成果物も1ファイル完結」にこだわると配布しやすくなる
- 個人開発したものをBOOTHで売るハードルは思ったより低い
今回作ったツールは1ファイルで動くシンプルなものだけど、だからこそメンテナンスも楽だし、使い方で迷うこともない。AI時代の個人開発は「小さく作って、すぐ出す」が正解だと実感した。
今回紹介したBio Link Generatorを含む、SNS運用ツールはこちらで販売しています。