ウェブページとは限られた画面で、いかに見た人に情報を伝えるかが重要!
誰もが、心地よく情報を得られる視覚的工夫について考えていきましょう!

天気のいい日は、おにぎりを持ってピクニックに行きたくなりますね。
小さい時から、おにぎりの美味しそうな作り方には定評があります。はい、カオツです!

おにぎりを美味しそうに見せるカオツが、ウェブページの情報も美味しそうに魅せることができるのでしょうか!?

では本題にいきたいと思います。

その1.「カーブは柔らかく」

「うちのサイトなんか堅苦しいなぁ。。。」
「私は可愛いのに、私のサイトはイマイチ可愛くないのよね。。。」

っと思っているそこのあなた!!

border-radius

efo-button01

上の画像をご覧頂いて分かるように、角を丸く変形させるCSSです。

今までは角丸の要素を作ろうと思ったら、画像を作り直さなくてはいけなかったり、画像を作り直したことでCSSやHTMLも変更しなくてはならなかったりと、作業工数を要していたと思います。

しかし、CSS3が登場してからはCSSを一行追加するだけで、簡単にできるようになりました。

記述は簡単、「border-radius: ◯px;」と書くだけ。

CSS3は、ブラウザによって効かないこともあるので、ベンダープレフィックス(下記※参照)を付けて対応しましょう。

※ベンダープレフィックスとは
新しいCSSが開発された際、ブラウザごとに先行実装したものは、通常のCSS記述の先頭に「ベンダープレフィックス」を付けなければなりません。
ベンダープレフィックスを付けることにより、ブラウザに向けて「これは拡張機能ですよ」と明示し、通常のCSSと同様の動作をしてくれます。
主要なブラウザのベンダープレフィックスとして「-webkit-」「-moz-」「-ms-」「-o-」等があります。

ベンダープレフィックスを付けた書き方は以下のようになります。
border-radius: ◯px;
-webkit-border-radius: ◯px;
-moz-border-radius: ◯px;
-o-border-radius: ◯px;
-ms-border-radius: ◯px;

その他、詳しい書き方は「border-radius …… 角丸をまとめて指定する」(HTMLリファレンス)をご参照ください。

その2.「立体感で強調する」

「タイトルなのに目立たないなぁ。。。」
「ボタンをもっと実物の様に見せられないかなぁ。。。」

そんなあなたに!!

box-shadow

efo-button02

上の画像の様に、要素に影を付けるCSSです。

書き方は、「box-shadow: ◯px ◯px ◯px rgba(0,0,0,0.x); 」と書きます。rgbaはrgbが色(RGB)で、aがアルファチャネル(透過度)を意味します。

その1と同様、画像編集で作ったものと大差ない影を付けることができ、手間はCSSを追加するだけ。
とても簡単に影を付ける事ができる優れものです。こちらもベンダープレフィックスがあります。

影を付けることで存在感がアップし、サイト全体の雰囲気に重みを加え、立体感のあるサイトになります。

ボタンの場合は、よりクリックされやすくなるため、ページ自体のユーザビリティも改善するでしょう。さらに言えば、サイト全体の好感度向上に一役買ってくれることは間違いなし!

その他、詳しい書き方は「box-shadow …… ボックスに影をつける」(HTMLリファレンス)をご参照ください。

その3.「サイトに光を差し込む」

「サイトが全体的にノペ~っとしてて重いイメージなんだよなぁ。。。」
「サイトの雰囲気がどうしても古臭いのよねぇ。。。」

そんなお悩みには!!

linear-gradient()

efo-button03

「linear-gradient()」は少しコツのいるCSSではありますが、要素の背景にグラデーションを入れることができる優れものです。

注意点としては各ベンダープレフィックスによって書き方が異なるので、お気をつけください。

グラデーションを入れることによってサイト内に光が差したように見え、サイトが明るく感じるでしょう。
ベタ塗りの背景と比較してみるとサイトの雰囲気が上品になり、しかも清潔感がある様に見えるのは明らかだと思います。

その他、詳しい書き方は「linear-gradient() …… 線形グラデーションを指定する」(HTMLリファレンス)をご参照ください。

便利なサイト

直感的なツールでCSSを生成するツールもあります。これらを使ってしまうと、まったくコードを覚えなくなってしまう困り者の便利ツールです。

● border-radiusとbox-shadowを直感的に操作するツール
CSS3 Generator
http://css3generator.com/

CSS 3.0 Maker
http://www.css3maker.com/index.html

● linear-gradientを直感的に操作するツール
Ultimate CSS Gradient Generator
http://www.colorzilla.com/gradient-editor/

まとめ

いかがでしょうか!?

CSS3を使ってサイトの模様替えをしたくなりませんか?

訪問していただいたお客様をおもてなしするためには、まずサイトに興味を持っていただかなければなりません。

美味しそうなおにぎりと、マズそうなおにぎり。見た目ですべてを判断してはいけませんが、実際に食べたことのない人は間違いなく美味しそうなおにぎりを選びますよね?

あなたのサイトが古くてマズそうなおにぎりにならない様に、魅力的なページに修正しましょう!

/* Onigiri CSS */

#wrap {
    margin: 0 auto;
    width: 250px;
    text-align: center;
}
.outer {
    width: 252px;
    overflow: hidden;
}
.nori {
    width: 100px;
    height: 103px;
    background: black;
    margin: 100px auto 0;
}
.onigiri {
    margin: 0 auto;
    position: absolute;
    width: 250px;
    height: 200px;
    border: 2px solid gray;
    border-radius: 125px 125px 60px 60px/160px 160px 40px 40px;
    text-align: center;
}