生き残れるWebデザイナーは「デザインニング・イン・ザ・ブラウザ」ができなければならない！

注：この記事は、2013年にアップした記事をリライトしたものです

「デザインニング・イン・ザ・ブラウザ」とはブラウザの中でHTMLとCSSを利用してデザインまで組み上げていく手法です。RWDの広まりとともに昨今ではこの手法を実践するデザイナーが多くなってきています。

Webデザイナーの中には気づく人も出現

3年ぶりくらいに allWebクリエイター塾 の レスポンシブWebデザイン 基礎講座に参加されたWebデザイナーがいました。その方が単発講座からコースに切り替えて本格的に勉強しよう思いついたのは レスポンシブWebデザイン（以下RWD)講座を受講されてからです。

「どうしてコースに変更したいと思ったのか？」と伺ったところ、
「RWD講座で利用したサンプルにCSS3が使われている部分があって、どのような仕組みかわからなかった」という点と、
「RWDの作業ではPSDのカンプに限界があると感じてブラウザの中でデザインをすることの必要性を感じたから」だと言います。非常にいい気付きですね。RWDというのは柔軟性をもとめられます、その中でPSDの静的モックが合わないということを肌で実感したのでしょう。

「デザインニング・イン・ザ・ブラウザ」は新しい技術ではない

英国のAndy Clarkeが2009年の時点で「Walls Come Tumbling Down」というプレゼンテーションで説明しています。おそらく、これが最初の「デザインニング・イン・ザ・ブラウザ」という言葉のスタートではないでしょうか。当時はRWDがありませんでしたが、スマートフォンが普及しはじめ、Andy Clarkeもそれに気づいたのかもしれません

Andy Clarke が実際に「Walls Come Tumbling Down」の中であげていたポイントです

• 静的画面では柔軟性におとりフルードデザインをつたえきれない（RWDでよりそれは顕著になった）
• ブラウザ間の表示の差異を伝えるのがむずかしい（RWDではデバイス間の差異も）
• :hover,:active,:focus,:visited などの挙動を伝えるのが難しい
• アニメーションなどの動きを伝えられない

コードをあなたのデザインツールとする実践方法

紙の時代のワークフローやツールで、Webの世界はここまで成長してきました。そして、前述の Andy Clarke が列挙した点のように、近年のモバイルの普及でWebの柔軟性を改めて認識しました。そして私達はブラウザこそがウェブが表示される場所であり、ブラウザこそがツールであると認識する事が必要になってきました。ブラウザを利用して HTML と CSS で柔軟性を保ったデザインをつくり上げるのです。

Chromeを利用した制作手法

ご存知の方もいると思いますが、Google Chrome の Web Inspector では HTML と CSS の編集機能 があります。この機能は、Chrome の Web Inspector 内で要素や指定されているCSSを検証したり編集ができます。しかし、その記述はあくまで Chrome のWeb Inspector上で行われるもので、ローカル上のファイルに反映されませんでした。皆さんの中には、この記述がそのままローカルに反映されたら便利と思った方が何人いるでしょう。このGoogle Developersの動画では、なんとChromeの編集機能を利用した記述がローカルファイルに反映されています。

Google I/O 2013 - Chrome DevTools Revolutions 2013

Google DeveloperのAddy OsmaniのGoogle+に掲載されている手順

企業も「デザインニング・イン・ザ・ブラウザ」へ変革している

とある企業様に法人研修で「進化するデザインニング・イン・ザ・ブラウザ」をご紹介しました。そこの企業様では既にCSS3講座などデザイナーが受講して実装を試みています。今回、Andy Clarkeの上記のスライドを参考にしながら、なぜ「デザインニング・イン・ザ・ブラウザ」がいる理由や進化している理由について深くご紹介しました。数ヶ月たち、コーディングチームとデザイナーチームは同じ部署になっておりRWDの案件を中心に急成長をしています。

企業の場合は部署が分かれています、その場合はすぐにデザイナーがHTMLのコーディングができるようにするのは時間がかかります。そこで、組織変更をしました。これも１つの企業内での「デザインニング・イン・ザ・ブラウザ」を実践する方法でしょう。

HTMLもCSSも全くかけませんが「Webデザイナー」です

このような方は本当に稀だと思いますが、いらっしゃるかも知れません。そのような方はもしかしたら、肩書きをアートディレクター、デザイナー（Webなし）とするべきでしょう。肩書にウェブという言葉ついてればHTMLとCSSが記述できると思われる時代が近づいてきています。もし、今現在はHTMLとCSSが全く書けずともWeb制作に携わっている人は、今からでも少しずつでもHTMLとCSSについて勉強し習得すべき時代がきています。ブラウザを中心としたワークフローが普及しはじめると、紙のワークフローはウェブの中では利用されるのはワイヤーフレームなどの一部分になるでしょう。