生産性の高いCSSインブラウザデザイン！Photoshopでのデザインラフはもう終わりにしよう

IEの旧バージョンが次々にサポート終了となり、CSS3がどんどん便利になってきた昨今、どんどん生産性が上がって幸せを実感しているWeb屋の山崎レモンサワーです。

昔はCSSハックなる技術で四苦八苦したものですｗ
特にIE6はひどすぎた・・・わかる人いるのかな。若い人は知らないかな。

今日はデザインラフを作成する際に、PhotoshopやIllustratorで一枚画像としてラフを作らず、いきなりブラウザ上でデザインを行う「インブラウザデザイン」をオススメする記事を書きたいと思います。

インブラウザデザインのメリット

CSS3の再利用性の高さ

やはりインブラウザデザインを採用しだしてからのデザイン工程の圧倒的なスピード感がメリットとしてあげられます。

もちろん過去に行ったPhotoshopでのデザインデータなどもある程度、再利用はできると思いますが、CSSの再利用性には勝てません。

Chromeの要素検証にて、動的にレイアウトやカラーを変更できるのも超絶便利です。
もはやChrome、Firefoxはオーサリングツールと言っても過言ではありません。

インブラウザデザインを行う上でさらに効率性・再利用性を高める工夫

とはいえ、パーツパーツではどうしてもバナーなど、クリエイティブのデザインが必要になってきます。

ただ、ここでも極力写真画像などは画質調整だけにとどめ、テキストや装飾自体をのせて画像として書き出さないようにしています。
テキストはあくまでデバイスフォント、現在だとフォントもWebフォントも利用でき、昔とは比較にならないくらいデバイスフォントでもキレイな表現が可能です。
装飾も一つの画像に重ねず、別―パーツとしてCSSで重ねます。

何故こうしておくかというと、修正・保守がめちゃめちゃ短時間で済み簡単だからです。
さらに別の案件で「再利用」もできるからです。

インブラウザデザインはインタラクティブ効果にも強い

例えばマウスホバー時の効果や、スクロール時のフェードイン、スライドインなどのインタラクティブ効果は、Photoshopで再現するのがそもそも苦手で、フロントエンドエンジニアに伝える為に必要だとしても、レイヤーを変えて装飾を施し、説明のテキストまで添えるなんて、もう考えただけで、時間と労力の無駄です。

そういう意味ではデザイナーがマークアップもこなしてブラウザ内でデザインする方が生産性がめちゃくちゃ高いと思います。

非効率的なな分業体制をしいているWeb制作会社はこれを期に見直してみるとよいでしょう。