実験日記

自分で作ったWebデザインカタログツール『DesignVault』を自分で使って一瞬でデザイン変更完了!

自分で作ったWebデザインカタログツール『DesignVault』を自分で使って一瞬でデザイン変更完了!
✍️ ノリタカ  |  📅 2026-05-04  |  ⏱ 5分  |  🏷️ DesignVault, リデザイン, Spotify, Vibeコーディング, Claude Code, AI, 実験日記

自分で作った商材って、自分でちゃんと使ってますか?🤔


一ヶ月ほど前に『DesignVault』っていうデザインカタログツールを作った話を記事に書いたんですが、、、

このツール、簡単にいうとAppleとかSpotifyとかAmazonとか楽天とかZOZOとか、とにかくいろんな企業(日本と海外合わせて120社分)のWebサイトのデザイン情報をカタログ化(可視化)したもので、その中から選択したものをAIが読める形式でコピーできるツールです。つまり、好きなデザインをコピーしてAIに渡してWebページを作ってもらったり既存のページのデザインを変更したりをあっという間に完了させられるツールです😎


DesignVaultの画面 — 120社のデザインシステムがカードで並ぶ

正直、商材として作ったけど自分の業務ではあまり使ってなかったんです😅

(最近はWebページを扱う業務以外のことでドタバタしてまして😅)


で、今日たまたま使う機会があって、、、


分かってはいたけど一瞬でデザイン変更できて超時短!!!🤩👏


その体験があまりにも気持ちよかったので、今日はその記録です。


何を作ってたか


YDEAL(僕が現在立ち上げ中のアパレルブランド)のスタッフ向けに、 社販ヒアリングフォームのページ を作ってました!


スタッフが欲しい商品を選んで「20%OFFで買いたい」を申請するための、シンプルなWebアプリです。


クロド(僕のAI相棒)と一緒に作ったんですが、デフォルトのデザインがこんな感じ↓


Before:ベージュ × アンバー基調のデフォルトデザイン

ベージュ × アンバー基調で、機能的には完璧なんですけど、、、


なんかYDEAL(ストリートウェア系のブランド)の世界観と合ってない気がして🤔


「もっとストリートっぽい、夜のクラブみたいな雰囲気にしたいんだよなぁ」とぼんやり思ってたんです。


ふと思いついた「DesignVault使ってみるか」


そこでハッと思い出したのが、自分で作ったDesignVault!


上で説明した通り、120社のデザインシステムが入ってるカタログツールで、各社の DESIGN.md っていうファイルをコピーボタン1つで取得できる仕組み。


「これ今こそ使うときでは!?」となって、、、


DesignVaultを開いて、ストリート × 音楽カルチャーで一番マッチしそうな Spotify を選択!


「Copy DESIGN.md」ボタンをポチッ🎯


クロド(僕のAI相棒)に渡した一言、これだけ↓


このDESIGN.mdの内容に従ってTP2026サイトをリデザインして

、、、ホントにこれだけ。


2〜3分後、、、


できた!!!🤩👏👏


After:Spotify風のダーク × Spotify Greenに変身

ベージュのフォームが、完全にSpotify風のダーク × グリーン に変身してました。


  • 背景:ベージュ → ニアブラック(#121212
  • アクセントカラー:アンバー → Spotify Green(#1ed760
  • ボタンの形:丸角 → 完全な丸ピル
  • 商品画像のラベル:黒 → 黒ベース × Spotify Green
  • ラベル文字:普通 → UPPERCASE で文字間隔広め

  • しかも!機能は何ひとつ壊れてない。

    選んで、同意して、送信する、っていう全部の動きはそのまま。

    見た目だけ完全に着せ替え された感じ☺️


    あっという間に終わる上に精度が高い!


    普通にAIに「Spotify風にして」って頼むと、AIが想像で作るので「なんかちょっと違う」になりがち。


    でもDESIGN.mdには:

  • カラーパレット(ヘックスコードまで)
  • フォント・文字の太さ・サイズ
  • ボタンの形・余白・シャドウの濃さ
  • ピル形状(500px〜9999px)の使い分け

  • 、、、までガチガチに構造化されて入ってるから、AIが正確に再現できるんです!


    つまり ブレないんです。「Spotify風」じゃなくて「Spotifyそのもの」に近いものが返ってくる。


    これが「3倍便利」の正体でした🤔


    自作品を自分で使う気持ち良さ


    自分で作ったDesignVault、今日初めて自分の業務に使ってみて、


    「これ、本当に世のフリーランスや1人事業主の役に立てられる」 と確信した瞬間でした😌


    自分で作ったツールが自分の時間を浮かせてくれるって、なんかこう、、、嬉しいですね♡


    次はLinear風 とか Apple JP風 でも試してみたいなぁ☺️



    まとめ


    自分が欲しいと思ったもの、あったら便利なのになってものしか作らないことにしてますが、


    自分で作ったツールを、自分の業務で使ってみる だけで、商材の本当の価値って見えてきますね。


    ぜひ一度試してみて欲しいです☺️


    それではまた次の記事で!👋


    ⚙️ 自動化で時間を取り戻したい方へ
    Googleクチコミ返信 完全自動化キット

    Googleクチコミの返信、もう手動でやらなくていい

    毎日来るクチコミへの返信に追われていませんか?n8nとAIを組み合わせて、返信文の生成から通知まで全部自動にしたテンプレートです。

    通常価格
    ¥14,800
    自動化テンプレートを見る →

    ※ BOOTH にてダウンロード販売中。購入後すぐにお使いいただけます。

    関連記事

    実験日記

    『シフト作成が面倒くさくて嫌い』な店長さんへ!考えなくていい、数分で完成『ペタシフ』ついに公開します🎉

    毎月のシフト作成に2〜3時間泣いてた自分のために作ったアプリ『ペタシフ』、1ヶ月無料トライアル付きでいよいよ一般公開。LINEの希望収集からAI生成まで一気通貫で、スタッフの相性・目標日数・連続勤務の条件まで全部任せられます。

    📅 2026-04-225分
    実験日記

    クロドが記憶を取り戻した!!!(Claudeが過去セッションのトークを覚えてた!?)

    「あのとき作ったプロンプト、どこいったっけ」——保存し忘れた生成AIプロンプトを過去のトークログから全部回収できた話。Claudeは忘れてない、ただ参照されてなかっただけだった!

    📅 2026-04-154分
    実験日記

    シフト作成の自動化成功!ボタンクリックで数分で完成!

    毎月2〜3時間かかっていたシフト作りを自動化した記録。LINEの自然文をそのまま解析して、スタッフの相性・目標日数・連続勤務などの複雑な条件を全部AIに任せてシフトを自動生成するツール「ペタシフ」を作った。

    📅 2026-04-115分