WEBデザイナーが教えるクリエイティブ系への転職情報サイト「WEBデザイナーズナビ」

Webデザイナーズナビ 〜デザイナーの転職・スキルアップ情報 〜

CSS3で画像を使用しないコーディングはWEBデザイナーの必須スキル

CSS3を使用したコーディング

今からWEBデザインの勉強を始める人はCSS3を当たり前のように使うと思いますが、その背景を理解しておくとWEBサイトを作る上で大切なことがわかります。それは【軽量化】です。

本来画像を使用していたもの、Javascriptで表示していたものをCSS3で表示することやレイアウトを組むことが可能になったため、WEBデザイナーのコーディングの範囲が広くなりました。

WEBサービス開発やスマホサイトのコーディングでは必須といえる知識なのでアルバイトよりも上のレベルのWEBデザイナーを目指している人はデザイン業界におけるCSS3の使い方と、現場で多用されるプロパティを覚えましょう。

CSS3を使う最大の理由は軽量化

WEBデザインのコーディングの歴史は軽量化との戦いでもあります。画像を大量に使用してグラフィカルなWEBデザインが流行した時期もありましたが、月間数千万PVのウェブサイトではサーバーに負荷がかかりすぎてしまうため、インターネットビジネスが発展していくにつれてユーザビリティ重視で軽量化されたものへと変化していきました。

CSSスプライト

CSSスプライト

軽量化を突き詰めていった結果、グラデーションを使用した背景やボタンなどは画像を使用せざるを得ませんでした。画像サイズとしては数キロバイトの集まりなので、サーバーの転送量に負荷がかかることはありません。問題になるのはリクエスト数です。それだけ高速の回線であっても転送するファイルサイズが大量にあると表示速度が遅くなります。

それを解決するために、ボタンや背景画像を1枚の画像にし、packground-positionを使用してすべてのボタン・背景を表示するCSSスプライトという技術が浸透しました。しかし管理や保守の面で問題が多発しデザイナーの作業工数を圧迫する嫌われ者でした。

プログレッシブ・エンハンスメント

プログレッシブ・エンハンスメント

CSS3の過渡期、使えるブラウザと使えないブラウザの両方でレイアウトが崩れないようにするため複雑なCSSを書く時期がありました。開発会社ごとにCSS3の定義が違ったため、適切に読み込ませるベンダープレフィックスと、CSS3が使えない旧ブラウザで通常のCSSを読み込ませるという両方のコーディングを行うプログレッシブ・エンハンスメントと呼ばれる技術を使用しました。

このように書くブラウザに合わせて同じプロパティを何回も記述します。現在でも旧ブラウザ対応をするWEBデザインではCSS3を使用する場合、このようなCSSを書きます。これだけ複雑な開発工数をかけてもCSS3を新ブラウザで使用する価値があるということです。

CSS3の正式使用へ

css3の採用

windowsXPから7にユーザーの環境が切り替わったことをきっかけに多くのWEBデザイン現場がCSS3をメインとしたコーディングに切り替えました。しかし覚えておいて欲しいのはCSS3はグラデーションやアニメーションやインタラクティブな表現が可能になったということだけではなく、WEBサイトの軽量化と高速化目当てに使用されることが多いということです。

特に回線速度が不安定なスマホサイトデザイン、数キロバイトの画像が原因で表示速度が遅くなり運利上げ損失につながるWEBサービスにおいてCSS3の役目は軽量化です。

CSS3のサポート状況

http://fmbip.com/litmus

覚えておくべき基本のCSS3

WEBデザイナーが一番最初に覚えるべきCSS3は、従来なら画像でしか表現できなかったものです。まずはそれを覚えましょう。

角丸(border-radius)

角丸

border-radiusを使用した角丸の生成です。従来のコーディングでは直角の四角しか作れなかったため、角丸ボタンはすべて画像を使用していました。CSS3を使用することでボタン内のテキストを始め、角丸の丸みもコーディグのみで編集することが可能になったため、開発速度と保守性が向上しました。

画像を円で切り抜く(border-radius)

画像の切り抜き

今まではpng画像を使用しないと不可能であったjpeg画像を透明度を維持したまま丸く切り抜くことが可能になりました。正確には画像をborder-radiudで丸くして、はみ出た部分をoverflow:hiddenで隠す複合技です。このCSS3がメジャーになってから丸型のサムネイルが増えました。

グラデーション( background: linear-gradient )

グラデーション

background: linear-gradientを使用してグラデーションを表現することができます。こちらも従来では画像でしか表現できないものでしががCSS3が実用可能になってからは多くのWEB開発現場がこぞってグラデーション部分をCSS3に変更しました。

ベンダープレフィックスを交えたコードは記述ミスが多くなるため、グラデーションのジェネレーターを使用してコードを取得することをおすすめします。

http://www.colorzilla.com/gradient-editor/

透明度(opacity)

透明度

多くのWEBデザイナーがリンクボタンのhoverで使用するCSS3のプロパティです。UIやUXでは【ボタンはボタンとして機能すること】ということでオンマウスでそのボタンがクリックできることを誰にでもわかるようにする必要があります。

しかしボタンの色をいちいち変えることは作業の時間が増えてしまったり、トンマナ(トーンアンドマナーというWEBサイトの使用色のルール)がない現場ではWEBデザイナーの感性に委ねられてしまいます。その為カラーをいじることなボタンであることを強調できる透明度はWEBデザインの現場では重宝されています。

シャドウドロップ(box-shadow)

シャドウドロップ

ブロック要素にほんのりとシャドウをつけるCSSです。これも以前はシャドウ部分をPhotoshopで作成して、backgroundで一番下に表示するなどしていました。CSS3になりボックスの内側にも、外側にもシャドウをつけることが可能になりました。

直感的に影のつけ具合を数値化するのは難しいのでジェネレーターを使用することをおすすめします。

http://www.bad-company.jp/box-shadow/

ボックスサイズの取得方法指定(box-sizing)

多くのWEBデザイナーが感動のあまり涙を流したと言われるCSSのプロパティ。ボックスの数値のとり方を指定することができます。例えば従来だと横300pxのボックスでpaddingを上下に10px取ろうとした場合、width280px padding: 0 10pxと指定しなければなりませんでした。このめんどくさい仕様のせいでデスクの横に電卓を置きコーディグするデザイナーが多数いました。

しかしbox-sizing:border-boxを使用すると、width:300px padding:0 10pxと指定しても自動でwidthを280pxに調整してくれます。またpaddingだけではなくborderにも対応しているため、全体の横幅や縦幅を決めてbox-sizing:border-boxを指定して上げればレイアウト崩れがおきなくなります。

便利なCSSであるがゆえに、すべての要素に使用するWEBデザイナーもいます。

アニメーション(transition)

WEBデザインの動作にちょっとしたエッセンスを加えるanimation。ガッツリと要素を動かすことも可能ですが多くのWEBデザインではボタンのオンオフの切り替えにアニメーションが使われるようになりました。

CSS3を意識したWEBデザインが出来ればWEBサービス開発でも即戦力レベル

ご紹介したプロパティがWEBデザインの現場で多用されるCSS3です。ランディングページなどのグラフィックによりユーザーの購入意欲を換気させるWEBページでは軽量化ではなくインタラクティブに要素を動かすためにも使用されます。

CSS3を実装できるWEBデザイナーはPhotoshopでWEBサイトのデザインを起こしている段階で、どの部分がCSSで実装できるのかを考えて軽量化と開発スピードの効率化を考えます。

基礎のHTMLとCSS、全体を通してのWEBサイト構築の経験がないとできないことです。このように本当の意味でCSS3を使えるWEBデザイナーは既にアルバイトレベルの領域ではありません。

もしアルバイトでWEBデザイナーをしていて、このレベルまで技術が成長しているのでしたら、現在の給料の2倍は期待できWEBデザイナーとして1人前レベルの派遣WEBデザイナーを目指す段階にいます。

スポンサーリンク

Desingers Navigator

アルバイトWEBデザイナーから始まり派遣WEBデザイナーを経て、大手企業正社員WEBデザイナーへ。その後WEBディレクターになりUI・UXの専門に。現在はフリーランスのWEBデザイナー / ディレクターをしています。

関連記事 / RELATED POST