こんにちは。
先日「BizVektor」の新バージョンが配布され、新テーマの「Calmly」が新たに追加されました！
そのデザインを担当したスタッフのクノウです。

「BizVektor」といえば、初心者でも簡単にサイトが作れるレスポンシブに対応した無料テーマで、本当に無料なのか疑ってしまうほどの素晴らしさですね！

今回、新たに追加された「Calmly」について、こだわった点などを書いていきたいと思います！

余白スペースを使用

ご覧頂くとわかるとおり、従来のデフォルトテーマに比べて、全体的に余白をつけてすっきりしたデザインに仕上げました。

新デフォルトテーマ Calmly

新デフォルトテーマ
Calmly

ボーダーやグラデーションを、白に近い色で設定してシンプルさを意識しつつ、シャドウをうっすら入れてリッチな雰囲気も出してみました。

ボタンやタイトルも必要以上に装飾しないよう、余白のバランスをとりながらデザインしました。

グローバルメニュー

グローバルメニュー部分は薄くグラデーションを入れて、デザインが引き締まるように下にボーダーを引きました。さらに上下に余白を入れて見やすくし、メニューが引き立つよう工夫しました。

グローバルナビゲーション

グローバルナビゲーション

h2～h6までの見出し部分

見出しも、h6までデザインしてあります！(ブラウザによって若干異なる場合があります…IE8とかIE8とか…)

見出しデザイン

見出しデザイン

ちょっとしたこだわり

選択したテキストの背景色

テキストを選択（ドラック）した時の背景色を、キーカラーと同じ色にしてあります。デフォルトだと水色ですが、色を変えることで文字の可視性がアップします。
でもIE8は非対応です(>_<)

選択したテキストの背景色

選択したテキストの背景色

アラート（警告）の吹き出しデザイン

フォームに未入力項目があるときに出てくるアラート（警告）のデザインを、cssで吹き出しのデザインにしてみました。どこの箇所を指しているのか一目で分かりやすくなりました。
こちらもIE8は非対応です(>_<)

アラートの吹き出しデザイン

アラートの吹き出しデザイン

ブラウザ確認してる時、別のブラウザとIEで見たときの違いにショックを受けることが多々あります…。
ちょっとしたこだわり部分はIE8だと対応していなかったりするので、“ちょっとした”とつけました。

あと、ここからはデザインとは違うお話ですが、やっぱりキーカラーの変更が自由に出来るのと、WordPress3.4から実装された新機能「テーマカスタマイザー」に対応しているのは大きなポイントだと思います！

簡単にキーカラーが変えられるのは本当に良いですよね！さらにテーマカスタマイザーで実際のページを見ながら編集も出来るので、サイトの雰囲気を数分でガラッとかえれます！

さいごに

今回、デザインを手がけてみて、余白って大事だなと改めて思いました。
私自身シンプルなデザイン制作になれておらず、結構苦労した点が多かったので…。orz
ごまかしがきかない分、ただ装飾を無くしただけだと物足りないし…かといって装飾すると従来のデザインとかぶってしまう…(涙)
うーん、ほんと難しかったです…。

上手に余白を使ってるサイトを参考にして、研究させていただきました。(´Д｀)

結果、かなりいい感じの新テーマができたなと思っております。(･∀･)
使用してくださってるサイトも拝見しましたが…

かなり良いです!!おしゃれです!!!!

ほんとに無料なんて信じられないくらいの機能と使いやすさ！！！

みなさんも、よければダウンロードして使用してもらって、友達や知り合いに宣伝なんかしてもらえると幸せです♪

↓ダウンロードはこちらから↓

BizVektor

この記事を書いた人

kunou
スタッフのクノウです。
ワードプレス勉強中です！phpは苦手です…。
好きなことは絵をかくこと、お酒を飲むこと、カラオケです。よろしくお願いします。

スポンサーリンク
投稿タグ