こんにちは！デザイナーのタニグチです。
今週はWEBサイト制作でデザインを表現するために重要な要素の一つ、CSSの記事を書きます。
普段コーディングをやらないデザイン専業の方もCSSでできることを知れば、デザインの幅が広がると思います。一緒に勉強しましょう。
CSSとは
CSSとはCascading Style Sheet(カスケーディングスタイルシート)の略で、スタイルシート言語の１つです。スタイルシートはWebページのデザインやレイアウトを定義するもの。CSSを使うと様々なものに色を付けたり、枠を付けたりデザインすることができます。
…よくわからないけど画像で切り出せばHTMLだけでもなんでも表示できるでしょ？と、思ったあなた！考え直しましょう！
サイト内で画像が増えれば増えるほど、当然ですがサイトは重くなります。特にレスポンシブデザインで画像を多く使うと、モバイル端末はPCに比べて回線速度が遅いため、読み込み時間が長くなってしまいます。
みなさん、読み込みの遅いサイト上に長居できますか？僕は待ちきれなくなってブラウザバックします。
画像ではなくCSSで表現可能なものはどんどん代替していったほうがいいでしょう！
CSSで表現できるもの
単純な色、形、CSS3ならグラデーションや角丸の表現もできるので、簡単なアイコンやボタンなど、極めれば本当にさまざまなものを画像を一切使わずに表現できます。その可能性は無限大。宇宙です。
CSSジェネレーターなるサイトを見つけました。↓
CSS3プロパティジェネレーター
このサイトは操作性がPhotoshopに少し似ている？ので、コーディングに精通していないデザイナーでも直感的にボタンなどが作れる優れたサイトです。
また、CSSは「動きの表現」も可能。オシャレなアニメーションをディレクターに口頭で提案する技術と気力さえあれば動きで他のサイトと差をつけることができます。
参考サイトを紹介します↓
少しおもしろい動きをするマウスオーバーエフェクトを表現するサイトです。ワンポイントで使うと「おっ」と思わせられるかも。
Sexy Image effect like Flash in Pure CSS3
画像のエフェクトです。動画を埋め込んだり、Flashを使わなくてもここまでの表現ができます。
CSSの注意点
ここまでで万能かのように書きましたがもちろん表現できないものもあります。
- ベクトルマスクをかける
- 乗算描画でレイヤーを重ねる
- あまりにも複雑なレイヤースタイル、形
上記以外にもあると思います。また、CSS3を使用する場合はブラウザ対応の問題もあります。
コーダーさんにとって古いブラウザは親の仇より憎いそうです。
CSSのまとめ
普段デザイン専業でコーディングをやらない方も、興味を持ってもらえたのではないでしょうか？CSSで表現できること、使用するうえでの注意点を知っていれば、初稿で提案するデザインの形も変わってくるような気がします。
脱！画像ゴテゴテサイト！
