自分で作ったWebデザインカタログツール『DesignVault』を自分で使って一瞬でデザイン変更完了!
自分で作った商材って、自分でちゃんと使ってますか?🤔
一ヶ月ほど前に『DesignVault』っていうデザインカタログツールを作った話を記事に書いたんですが、、、
このツール、簡単にいうとAppleとかSpotifyとかAmazonとか楽天とかZOZOとか、とにかくいろんな企業(日本と海外合わせて120社分)のWebサイトのデザイン情報をカタログ化(可視化)したもので、その中から選択したものをAIが読める形式でコピーできるツールです。つまり、好きなデザインをコピーしてAIに渡してWebページを作ってもらったり既存のページのデザインを変更したりをあっという間に完了させられるツールです😎
正直、商材として作ったけど自分の業務ではあまり使ってなかったんです😅
(最近はWebページを扱う業務以外のことでドタバタしてまして😅)
で、今日たまたま使う機会があって、、、
分かってはいたけど一瞬でデザイン変更できて超時短!!!🤩👏
その体験があまりにも気持ちよかったので、今日はその記録です。
何を作ってたか
YDEAL(僕が現在立ち上げ中のアパレルブランド)のスタッフ向けに、 社販ヒアリングフォームのページ を作ってました!
スタッフが欲しい商品を選んで「20%OFFで買いたい」を申請するための、シンプルなWebアプリです。
クロド(僕のAI相棒)と一緒に作ったんですが、デフォルトのデザインがこんな感じ↓
ベージュ × アンバー基調で、機能的には完璧なんですけど、、、
なんかYDEAL(ストリートウェア系のブランド)の世界観と合ってない気がして🤔
「もっとストリートっぽい、夜のクラブみたいな雰囲気にしたいんだよなぁ」とぼんやり思ってたんです。
ふと思いついた「DesignVault使ってみるか」
そこでハッと思い出したのが、自分で作ったDesignVault!
上で説明した通り、120社のデザインシステムが入ってるカタログツールで、各社の DESIGN.md っていうファイルをコピーボタン1つで取得できる仕組み。
「これ今こそ使うときでは!?」となって、、、
DesignVaultを開いて、ストリート × 音楽カルチャーで一番マッチしそうな Spotify を選択!
「Copy DESIGN.md」ボタンをポチッ🎯
クロド(僕のAI相棒)に渡した一言、これだけ↓
このDESIGN.mdの内容に従ってTP2026サイトをリデザインして
、、、ホントにこれだけ。
2〜3分後、、、
できた!!!🤩👏👏
ベージュのフォームが、完全にSpotify風のダーク × グリーン に変身してました。
#121212)#1ed760)しかも!機能は何ひとつ壊れてない。
選んで、同意して、送信する、っていう全部の動きはそのまま。
見た目だけ完全に着せ替え された感じ☺️
あっという間に終わる上に精度が高い!
普通にAIに「Spotify風にして」って頼むと、AIが想像で作るので「なんかちょっと違う」になりがち。
でもDESIGN.mdには:
、、、までガチガチに構造化されて入ってるから、AIが正確に再現できるんです!
つまり ブレないんです。「Spotify風」じゃなくて「Spotifyそのもの」に近いものが返ってくる。
これが「3倍便利」の正体でした🤔
自作品を自分で使う気持ち良さ
自分で作ったDesignVault、今日初めて自分の業務に使ってみて、
「これ、本当に世のフリーランスや1人事業主の役に立てられる」 と確信した瞬間でした😌
自分で作ったツールが自分の時間を浮かせてくれるって、なんかこう、、、嬉しいですね♡
次はLinear風 とか Apple JP風 でも試してみたいなぁ☺️
まとめ
自分が欲しいと思ったもの、あったら便利なのになってものしか作らないことにしてますが、
自分で作ったツールを、自分の業務で使ってみる だけで、商材の本当の価値って見えてきますね。
ぜひ一度試してみて欲しいです☺️
それではまた次の記事で!👋
