CSSの扱いやすさは唯一無二！新Dressを触ったデザイナーが推しポイントを紹介！

こんにちは！
BiNDupで、テンプレートのデザインディレクターをしている、デザイナーのオモトです。

年明けを予定している大型アップデートでは、ブログ機能「BiND Press」が、２回めの大幅機能アップ。プレビュー機能や、ブログトップの自動挿入、タグ一覧の出力可能と更に便利になります。
そして…皆さんお待ちかね！デザイン編集機能「Dress」がまるっと新しくなりますよ！
それに伴い、BiNDupから搭載された新作テンプレート9種（Sitebox・ボーナステンプレートも含めると14種）を、新しくなったPress・Dressが扱えるようにバージョンアップ。
BiNDupをお使いの皆さまは、登場したらぜひぜひ触ってみてください。

CSSの扱いやすさはもしかしたら世界一？！触ってみて！

私は、新Dressの開発の過程で、使い心地を改善すべく、とにかく触って触って、触り倒しました！
その経験を活かし、今回は、バージョンアップしたテンプレートを使って、どれぐらい使いやすくなったのか、デザイナー視点で使い方をご紹介します。もちろんデザイナーでなくても、BiNDでテンプレートを使ってカスタマイズするすべての方にうれしい内容です。

新しいDressはここがすごい

何より新しいDressで感動したのは、デザインが楽しくできるようになっていること！
新しいUIでは、プロがサイトを作るときに作成するデザインのガイドラインを示した「スタイルガイド」のように、カラーパレットやデザインコンポーネントを整理整頓。
以前のUIと比較して、直感的にサイト内のデザインに関わるCSSや、デザインルールを、管理しやすくなっています。

• デザインに関わるCSSやデザインルールを管理しやすい

Dressカラーが最高

一番の推しポイントがDressカラー。Dress内の色に加え、リンクボタンやブロックの背景色も一括で色変換してくれる大変便利な機能となりました。
例えば、赤は赤だけど、自社のコーポレートカラーの赤とはちょっと違うんだよな…というとき、ありますよね？
そんなときは、Dressカラーに定義された赤色（メインカラー）の色をちょちょっと変更すれば、SiGN（画像内の色）を除く、サイト内のすべての色が変わります！

（以前は、手動ですべての色の指定箇所を変えないといけなかったなんて、、もうあの頃には戻りたくない。。）
しかも、色選びに悩んだときには、カラーパレットから、サイトの配色ルールを選べちゃうんです！！構築しながら色を考えるなんてことも簡単に。
メインカラーは、これの色がいいなってなんとなく決まってるんだけど、他の色決まってないな〜〜どうしたらいいんだろ〜〜って時に大変重宝する機能となりました。

また、私は普段サイトを作成する時、カラーパレット作成サービスをよく使っているのですが、作成した色を実際のデザイン上に入れてみるとなんかちがうな。。なんて思うこともことも多く、色選びに時間がかかっていました。。が、これからは、実際の画面上で色選びができるので、無駄なプロセスが減り、直感的な意思決定がしやすくなりました。

Dressカラーについて詳しくは、こちらの記事で解説しています。↓
Dressカラーを使ってサイトの色を管理する

• サイト内の色を一括管理！
• メインカラーに合う、サイトの配色ルールも自動で提案

選択した項目に関連した指定箇所をサジェスト

「Dressは、どこに設定したらいいのかわかりにくい！」
この問題をフォローすべく、今までBiND CAMPでもオカベセンセイが装飾王への道シリーズでDressの攻略法を解説、シリーズ3作目の「装飾王への道・３」では、「質問に答えて行くと、Dressのどこを設定していいか教えてくれる」特製ツールを作ったり手を尽くしてきましたが……根本的に解決です！！

今までのDressは、自分で設定箇所を一つ一つプルダウンから選ばないといけない関係で狙った設定箇所に設定できなかったり、項目によってちょっと複雑かなぁという設定パターンがあったり、（それゆえ人によって設定の仕方がバラバラだったり…）慣れが必要なツールでした。それが新Dressでは、押せば選択項目の設定候補が出る仕様に進化。
「基本設定」には指定できる場所をサジェスト、「詳細設定」にはすでにある指定がリストアップされます。
わざわざ設定箇所を選ぶ手間や間違えることもなくなり、とっても便利。

検索機能が超便利

左側のプレビューエリアをクリックすれば、選択した要素の設定が表示される便利機能は健在。
それに加えて入力フォームや、昇順・降順など、設定箇所の絞り込み機能が大変充実しました！

例えば、入力フォームに「タイトル」と入力すれば、タイトル関連の設定がズラッとリスト表示。
また、新しいUIでは、メニューやヘッダーでの検索がしやすくなりました。
よく変更したくなる「文字色」「文字サイズ」などは、わざわざ入力フォームに打ち込まなくても、絞り込み用のキーワードボタンがすでに用意されているので、押すだけで簡単に絞り込めます。
探す手間が減り、デザインするのがとても楽です！

• 絞り込み機能が機能アップ
• キーワード検索で、要素の絞り込みが簡単に
• 登録が新しい順に表示

気持ちいい！いらない指定の一括削除

今までのDressではできなかった、設定箇所の削除ができるように。
操作は簡単で、ちょんちょんちょんとチェックしてゴミ箱に入れるだけ。
きちっときれいにCSSを管理したい人には必須の機能が搭載されました。

• 設定の削除機能が追加

構造が丸わかり！ラベル表示

今までは、どこに「ページタイトル（h1）」が使われてるんだろ…と探したい時は一つ一つブロック編集画面を開いて確認するしかなく、非効率でした。
これからはDressさえ開けば、どこに、どれが設定されてるのか俯瞰して見ることができます。
また、ラベル表示は、「パーツ」「ブロックスタイル」「エリア」「ウィジェット」ごとに切り替え可能。
左右違いどこで使ってたっけな〜と、わからなくなった時は、ラベル表示を「ブロックスタイル」に切り替えていただくと、わかるようになってます。

• ラベル表示で、パーツ名やブロックスタイル名が表示されるように

より直感的にデザインを編集できるツールへ

いかがでしたでしょうか？
新Dressは、サイト上のデザインを一括管理するツールに進化、テンプレートのデザイン編集がより簡単になりました。
Dressカラーに、ブランドカラーを設定しておけば、リンクボタンや、背景色、ブロックDressなど、BiND上のあらゆるカラーパレットにDressカラーが出てきてくれるので、いちいち手入力せずに済んで便利ですよ。

出たてで、UXの改善の余地はまだまだありますが、これまでよりも格段に使いやすくなっています。
とりあえず、テンプレートをダウンロードして、ブランドカラーに変えてみて作りたいイメージ合うかどうか見る…なんてファッション感覚でテンプレを選ぶこともできるようになりました。
新しいDressは、BiNDupに新搭載のテンプレートに対応していますので、触るの怖いなーと思っていた方も、この機会に触っていただけたらと思います。

BiNDupについて詳しくみる