CSSでデザインしよう!

Date : category :

私は普段お仕事ではCSSでデザインをしていて(デザイニング・イン・ザ・ブラウザ)、PhotoshopやIllustratorでのカンプ制作を行わないことが多いです。
CSSでデザインをするようになってから2年ほどでしょうか?とても便利で気にいっています。多くのデザイナーさんにお勧めしたいと思っています。

デザイニング・イン・ザ・ブラウザ、実感しているメリット

とにかく早い!

 画像を作ってコーディングをして、となると同じような作業を2回しなければいけません。ボタンなどはデザインデータからCSSが生成されるソフトを使っているなら二度手間ではないかもしれませんが、それでもmarginやpaddingを画像ソフトで指定してCSSでも指定して、と重複する作業が多いように思えます。
 また修正作業もPhotoshopで修正して、クライアントに確認してもらい、HTMLに反映するなど手間が多く、間違いも出やすくなる気がします。ソースを触っての修正であれば1度の作業で済むので「静止画だと反映されていたけどHTMLだと反映されていないよ」とか「なんか静止画のときと違う」ということが起こらなくなります。

データの共有が楽

 共同作業をする場合、Photoshopデータを共有してそれぞれ作業をする〜という場面も多いのではないかと思いますが、CSSでデザインをするようになってから「こんな重いデータを皆で共有するなんて」と思うようになりました。
 他の人が作ったデータで「フォントがないんだけど…」というのもWeb fontでは起こらないことだったり、「元データが見当たらなくて修正できない!」というのもCSSでデザインをしていると少なくなるのではないかと思います。
 もちろん手のこんだ背景画像をPhotoshopで作ったなどの場合はCSSでデザインしていても元データがないと修正できませんが、SVG形式の画像であればサーバー上のものを修正するだけでOKですね。

レスポンシブWebデザインに強い!

 例えばPhotoshopでスマートフォンのサイトのデザインをするとなると、よく見るのが640pxの横幅でのカンプ制作です。640pxというのは320px幅のデバイスを想定したものだと思うのですが、320px幅のスマートフォンを今使っている人はそんなにいるのかな?と密かに思っていたりします。
 横向きにしたときの見え方は?320pxよりワイドなスマートフォンでの見え方は?というのも静止画での画像カンプではコーディングするまでどう見えるのか実際わからないのではないかと思います。
デザイニング・イン・ザ・ブラウザではすぐに様々なデバイスで確認ができ、確認しながら修正もできるので、マルチデバイス対応に最適です。

モジュール化で量産しやすく、共同作業もしやすく

 今年後半からスタイルガイドの制作を取り入れました。
Style guideについてはこちら(スタイルガイドの例も沢山載っています)
 スタイルガイドを共有することで、共同作業をするときにスムーズで、デザイナー以外の人でもページを作ることができるようになり、なおかつスタイルの統一が可能なので、よいなと思いました。
 まだまだ勉強中で、上手にモジュール化できていなかったり、より使いやすいstyleの書き方などを今後もっと経験をつんで改善していければと思っています。

パフォーマンスやアクセシビリティなどにも配慮しやすい

 Photoshopでデザイン制作をしていると、ソースを触っているのとは違いあまりパフォーマンスを気にすることがありませんでした。ソースを触って制作をするようになってから、パフォーマンス、アクセシビリティ、セマンティックなどをこれまで以上に気にしながら制作するようになりました。
 分業制で作られたサイトをPageSpeed Insightsにかけると真っ赤だったりするのも何度か目にしています。デザイナーだから見た目しか気にしないのではなく、軽さやアクセスしやすさもWebの重要な要素なので考慮しながら制作しないといけないのではないかと思います。

その他にも例えばGitでバージョン管理ができるとか、色違いなどを試すのにもCSSで検索&置換だけで実施可能、アニメーションなどの動きなども早い段階で確認できる、CMSも早めに導入できているかも?!など個人的にはメリットを沢山実感しています。

最近CSSの勉強はあまりしていないのですが、CSSの勉強をすればするほど制作の幅が広がったり、効率化に繋がるなぁと思っています。
私はとってもCSSでのデザインを楽しくやれていて、効率的だと感じています。
まだ画像ソフトでデザインしているWebデザイナーのみなさんにもぜひ一度試しに導入してみていただきたいと思っています。
本当におすすめです。