【Vue.js】WEBデザイン用色合わせパレット

【Vue.js】WEBデザイン用色合わせパレット

https://yourbrand.mondbrand.net/page/tool/tone-manner/

直感的に選んだ色の
コードと配色を動的に生成

制作背景

カラーピッカーで選んだ色が
ブラウザ上で反映されるデモサイト。

たくさんの色を扱うデザイナーさんであれば、
カラーピッカーにカーソルを持って行く一手間も、積もり積もって大きなもの。

起動の重いデザインソフトを立ち上げたり
ダミーの図形を描画する必要なく、
少ない手数で、WEBサイトに反映した時の配色バランスを
直感的に確かめられるツールを作りました。

コンセプト

jQueryとVue.jsを使用。
カラーピッカーをクリックし、好きな色を選ぶと
動的にスタイルが書き代わり、デモサイトの配色が変わります。
(カラーピッカーの見た目・挙動はブラウザに依存します)

フォントも明朝・ゴシックのフォント切り替えで
サイト全体のフォントも変わります。

選んだ色のカラーコードも自動生成されますので
コピーしてエディタに貼り付けることができます。
SCSS変数とCSS変数用のスタイル指定文も生成されます。

積み重なると意外と大きい、些細な手間を省くことにより
手間とストレスを削減し
コアな制作作業により効率的に打ち込むためのツールです。

Gallery

Detail

サイト名
トンマナパレット
制作日
2021年08月
使用ツール
HTML5, CSS3, jQuery・Javascript, Vue.js
ご依頼者様
自身のサイト・自主制作サンプル
URL
https://yourbrand.mondbrand.net/page/tool/tone-manner/
担当箇所
ディレクション・設計, デザイン, コーディング

パスワード保護しております実績は、
個人で受注したものではなく、会社経由にて受注した案件です。

他の制作事例を見る


先頭へ戻る