ホームページの配色や装飾を、狙い通りにチェンジ。

直感的な操作でサイトの色やフォントを自在に変更できます。

サイトの雰囲気をガラッと変えたい、色やフォントをパッと変更したい、細部にこだわって美しく仕上げたい…そんな時に活躍するのが、配色や文字、余白などを簡単に設定できる「Dress」です。

Dressで何ができる? 色や装飾の変更が簡単!

Dressは、本来はプロのデザイナーでなければ難しいサイトのデザインを簡単に変更できるように作られた機能です。デザインのセンスやCSSなどの知識がなくても、Webデザインを左右する要素を狙い通りに変更して、サイトのデザインを一括管理できます。
 

Dressのデザイン編集イメージ

驚くほどカンタンに、サイトの色を一気に変更!

例えば、会社のコーポレートカラーに近い色をメインとしたテンプレートがあったとしても、全く同じ色でなければ、ロゴの色と異なり統一感が崩れてしまいます。そんなときに便利なのがDressカラー。色を選ぶだけで、テンプレートのボタンの色や背景色も含めたすべての色を一気に変更、配色をコントロールできます。

テンプレートの色変更があっという間

Dressカラーを設定
 

テンプレートに使いたい色のデザインがなくても、あらかじめエリアに配色が定義されているので、色を選ぶだけで好きな配色のテンプレートを作成できます。

定義された箇所の一括変更が可能

Dressカラーを変更
 

対応テンプレートなら、定義された箇所はすべて一括で変えられるので、手動でひとつひとつ変更する必要はありません。

色選びは直感的にも、細かくも指定可能

Dressカラーを調整
 

Dressカラーは、カラーピッカーで直感的に選ぶことも、カラーコードを指定して設定することもできます。

配色で悩んだらカラーパレットにおまかせ

Dressカラーの参考
 

イメージを左右するサイトの配色も、カラーパレットで色の組み合わせを提案するので、配色の知識がなくてもOK。

ページ全体の雰囲気をDressテーマ(テンプレート)で気軽に変更

配色だけでなく、書体や余白のバランス、装飾などもまとめてイメージをガラッと変えたい。そんなときはDressテーマ。サイトのテンプレートで使われている異なる雰囲気のデザイン要素を、作成中のサイトに当てはめて、ページ全体のデザインを変更できます。

好みのテンプレートを選んで一括でデザインチェンジ

Before

変更前のサイト

テンプレート Beppe Italiano

Dressテンプレート

Dress「Come On-A My House / Rosewood」を適用

After

Dressを変更したサイト

背景色のほか、書体もゴシックから明朝系に変更。ガラリと別印象に

アルバムやタブなどのデザインパーツを楽々チェンジ

ワンパターンになりがちだった、アルバムやタブ、アコーディオンなどのデザインが、新搭載のブロックDressのテーマで簡単に変更できるようになりました。動きが目を惹くトレンドのデザインをすぐにサイトに取り込めます。

ブロックDressのデザイン編集イメージ

デザインが選べる動く新アルバム

 

マウスオーバー時に写真が動くアルバム、丸枠で切り取られたアルバムなど、目立たせたい箇所で活用できます。

ギミックが豊富なタブとアコーディオン

 

マウスオーバーで見出し部分の背景が伸びたり色が変わったり、タブとアコーディオンには押したくなる仕掛けが満載です。

フレームで手軽に雰囲気をチェンジ

 

ブロックにフレームを追加して、ブロック自体を目立たせることもできます。フレームのテーマははシャドウタイプや角丸タイプも用意しています。


Webデザインの理想をカタチにしたCSSの扱いやすさ

Dressは、サイトの、デザインを司るCSSの知識がなくても色や余白など美しいデザインに欠かせないサイトのデザインルールを一括で設定できます。狙い通りのデザインを一元管理できるので、こだわり派のデザイナーにもうれしい、他にはない機能です。

直感的な操作で変更箇所を見つけ出せる

設定項目をクリックして選択

 
プレビュー画面で項目を選ぶだけで、その項目のCSSの設定箇所が抽出されるので、目的の箇所のデザインを間違えずに変更できます。

絞り込み機能が充実していて、探しやすい

設定済み項目の絞り込み

 
CSSの設定箇所は膨大になりがちですが、キーワードや入力フォームなど、検索機能が充実しているのでスムーズに探せます。

設定項目は自由に追加・削除可能

設定項目の削除

 
各サイトのCSSの設定項目をDressで一覧表示して管理できるほか、追加・削除などのカスタマイズも可能です。

どこまでもこだわれる! Dressでのデザイン変更例

無料で使えるサイト作成サービスなどでは自由に変更できない仕様になっていることが多い、細部のデザイン調整。Dressを使って行間や字間・リンク設定など、細部までこだわって、自分好みのページをデザインしましょう。

カラー

Dressでカラー変更

補色と類似色でカラー変更した場合

Webフォント

Dressでフォント変更

ゴシック系と明朝系で比較

行間と字間

Dressで行間や字間を変更

広いと狭いで比較

背景

Dressで背景色を変更

黒系・白系で比較

余白

Dressで余白変更

詰まったものと広いもので比較

リンク設定

Dressでリンクカラー変更

リンクのカラーを設定

BiNDupロゴ
BiNDupをはじめよう

サーバー込のサイト制作が 最大30日間無料!

半角英数字6~16文字。記号は _ - のみ

今すぐ、はじめる