デザイン力、効率化が向上、さらに制作プロセスにも変化が 3/25研究会セミナー「CSS3で変わるWebデザインとワークフロー」報告

CSS3の登場によって変わったこととは、デザイン面である程度CSSで完結できるようになったことと、従来型ワークフローからブラウザベースの制作へのシフトが起こりつつあること。

2010年3月25日、JAGATではクロスメディア研究会セミナー「CSS3で変わるWebデザインとワークフロー」が開催されました。

Mozilla Japan　テクニカルアドバイザ 加藤　誠氏

前半は、Mozilla Japan　加藤　誠氏よりCSS3で実装された新機能のうち代表的なものをデモを交えて紹介いただきました。取り上げていただいたのは次の5項目。

・Media Query：表示するデバイスによってCSSを切り替える
・CSS Background ＆ Borders：背景と枠線に関する
・CSS Gradient：2色以上の色でグラデーション指定ができる
・CSS Transitions：文字をだんだん大きくさせたり、時間経過によってオブジェクトの色を変化させるなどCSSで動的な振る舞いをさせることができる
・CSS Fonts：ユーザー環境にないフォントでWebが表示できる。3.6では新たにWOFFフォントをサポート

CSS3の登場によりWeb制作で何が変わるか

CSS3の新機能を使うことで、Web制作者にとって何が変わるのか。ひとつめは、Media Queryの登場により、いままでユーザーエージェントやJavaScriptの知識が必要であったものをデザイナ側で制御できるようになったこと。ふたつめは、複数画像の背景指定や角丸、グラデーションなどに加えフォントを用意できるようになったことで、いっそうデザインの可能性が広がったこと。

そして、いままでFlashやJavaScriptでつくっていた動きやPhotoshopでつくっていたボタン要素をCSSによって実現できるようになって、制作がシンプルになる、かつ手間が減らせること。

デモもたくさん見せていただきました。モジラさんのCSS Articles（http://hacks.mozilla.org/category/css/ ）でも背景指定やグラデーション、CSS3でつくるボタン などを見ることができます。特にブラウザのウィンドウサイズによってカラム数や色が変化するデモ はとてもおもしろいのでぜひお試しください。

Web Directions East LLC 菊池　崇氏

後半は、Web Directions East LLC 菊池　崇氏より、新しいWeb制作ワークフローについてお話いただきました。自身でもWeb制作を手がけられる同氏は、CSS3の普及（ブラウザ側のサポートや制作者のスキル）、さまざまなデバイスに対応しなくてはいけない状況、ブラウザごとにWebの見た目が異なること、などにより、新しい制作スタイルにシフトしています。

具体的にどのように進めているか？

菊池氏は、（X）HTML＋CSS＋ブラウザをツールとして考えます。まず打合せをしてからベースとなる素のHTMLをつくります。そしてなんのスタイルもデザインも施されていない状態でクライアントに確認してもらいます。これは上から下へ重要なことが並んでいるかどうかの確認になるほか、スマートフォン用のビジュアルとして相手に理解してもらいます。

次のステップでは、レイアウトを整えます。この段階では色指定はせず白黒状態です。この段階でもクライアントに確認してもらい理解いただきます。いちばん主観的であいまいな要素である色については最後に指定し、変更があってもすぐに対応できるようにします。

大切なのは見た目より中身

従来型の制作フローでは、まずデザイン案（以下、デザインカンプ）をPhotoshopやFireworksで制作し、印刷物やPDFとしてクライアントに納品します。（菊池氏の知り合いでは、ブラウザごと、デバイスごとにカンプを作成、提出するため１０数種類も制作するとこともあるとのこと。）

しかし、この方法ではデザインが変わるごとにカンプを作り直す必要が生じる、動的な動きなどを確認することができないなどの問題点もあります。さらに提出物＝完成品、という認識を相手に与えがちです。

「必要なのは情報とサービス」と菊池氏は言います。例えばtwitterでCSS3が使われていても気づく人が少ないように、大切なのはサービスであり内容です。そのため、ブラウザをツールとして使いクライアントと一緒に作り上げていくことで、よりよいWebサイトになっていきます。同氏は、「海外では既に10％程度はこの方法でおこなわれており、今後は日本でもこのようなワークフローが一般的になっていくと思う。」 と述べていました。

※本セミナーの詳しい内容については、後日クロスメディア研究会のページにて掲載予定です。

＊＊＊

クロスメディア研究会では、4月16日（金）にデジタルメディアを取り巻く最新動向を解説する特別セミナー「印刷業界視点でみるコンテンツ流通・情報通信の最新動向」、4月23日（金）にはマーケティングを体系的に学ぶ「Webマーケティング分野の基本を学ぶ 」を開催します。 ご興味がありましたらぜひご参加ください。