ブログ

「デザイニング・イン・ザ・ブラウザ」時代に
求められる'Web'デザイナーとは?

デザイニング・イン・ザ・ブラウザでの制作に移行してから約2年たったのでいろいろ書いて見たいと思います。

そもそも、「なぜ」?デザイニング・イン・ザ・ブラウザで

そもそも、「なぜ」?デザイニング・イン・ザ・ブラウザで?という部分を語ってみます。

  • 「レスポンシブWebデザイン」。PhotoShopやIllustratorの画面ですべてのブレイクポイントを作るのですか?
  • 古いブラウザの退場。「窓から投げ捨てたいとか、親から見捨てられたとか、腐った牛乳とか言われたブラウザ」がようやくほぼ完全に退場しました。ブラウザも新しい世代が主役になっています。
  • 「CSS3」。PhotoShopやIllustratorを使わなくても、リッチな表現が可能です。最近は古いブラウザでは表現できない動きがいろいろなサイトで見られます。
  • 「JavaScript」。動きはPhotoShopやIllustratorでは表現できません。特に「UI」や「UX」が重視されるWebアプリやiOSアプリ(HTML5での制作)の場合には。また、プロトタイプツールでもその部分に関しては変わりません。
  • スピード。意思決定からリリースまで、スピードが求められます。特にサービスの案件。

では、「デザイニング・イン・ザ・ブラウザ」では何が必要?

それでは、「デザイニング・イン・ザ・ブラウザ」での制作にあたり、必要なものは何でしょうか?

  • HTMLとCSS。それも、普通の知識ではなく、CSS3を使ったリッチな表現をできる能力と知識。
  • JavaScript。CSSでできないことは彼らに。
  • フォントの知識。
  • 色の知識。

PhotoShopやIllustratorが無くても、これだけの知識があれば、リッチなWebが作れます。

「デザイニング・イン・ザ・ブラウザ」でクライアントにプレゼンするとクライアントへの説得力が違ってくる

先日、あるWeb制作会社のプロデューサーの人に呼ばれました。そこでの話で、「クライアントとの打ち合わせのときに、動きの部分などをその場で作って見せてしまうときがある」という話をしたら、驚いていらっしゃいました。

その会社さんは代理店案件がほとんどないECサイトがメインだそうです。「その場で動きなどを見せてしまえばクライアントさまへの説得力が違ってきますね」と言っておられました。

次代のWebデザイナーに必要な要素

Monte Ré
3D Transoformとパララックスを組み合わせてうまく表現しているMonte Réのサイト

そろそろ、PhotoshopやIllustratorだけで仕事している、HTMLもCSSも全くかけませんが「Webデザイナー」と言う人がたまにいます。そういう人はそろそろ肩書きを変えたほうがいいのでは、と思います。

Webサイトに求められるものは、もはやPhotoshopやIllustratorでできるものを超えてしまっています。

Webサイトのデザイン・見た目というものはどんどんシンプルになってきています。しかし、それに反してインタラクティブ・動き・振る舞いというものはどんどん進化・複雑なものが出てきています。

動き・振る舞いといった、インタラクティブな要素まで提案できるデザイナーが求められています。
動き・振る舞いとはアニメーションや「:hover,:active,:focus,:visited」といったものです。

たとえば、hover一つとっても最近ではたくさんの見せ方が出てきています。いくつか知っていて、このサイトでも3つほど組み込んでいますが、いずれもCSS3を知らないと提案できないものです。

jQueryもいらない?JavaScriptも書けると便利

Sparkbox
細かいパララックスを採用しているSparkboxのサイト

最近、jQuery/Zeptoを使うのを徐々にやめて、Vanilla JavaScriptに移行しつつあります。A List apartの記事「Choosing Vanilla JavaScript」を読んでからです。

Vanilla JavaScriptとは、要するに何もトッピングされていないバニラアイスクリームのように、jQueryなどのライブラリを使わない素のJavaScriptのことをいいます。

別に全部の案件でVanilla JavaScriptにする必要はありません。

システムが絡んだ案件ではjQuery、特にBootStrap系で使うカレンダーなどのスクリプトは便利です。案件に応じて使い分けるといいでしょう。

しかし、システムが複雑に絡まないサイト、シンプルではjQueryも使わないでVanilla JavaScriptのみで案件をこなせることが多くなってきています。

勉強の意味も兼ねてVanilla JavaScriptでパララックスのスクリプトを自作しましたが、やっぱり、ロジックとかは作らないとわからないものですね。

また、個人的にレスポンシブWebデザイン用のJavaScriptのコードは自作することが増えつつあります。

jQueryを使わない、JavaScriptのプラグインも少しずつ出てきています。いまからでもJavaScriptを勉強して損はありません。

こんなことができるデザイナーは重宝される

Monte Ré
Google Night Walkのサイト。いままでではみられなかったナビゲーションの見せ方も出てきている

打ち合わせの場所で、簡単な動きでいいので「こんな感じの動きができますよ〜」というインタラクティブな要素をちゃちゃっと作って提案ができるデザイナーになれれば最強です。
そうでなくても、案件途中の打ち合わせの場所で修正して「こんな感じですか?」と言えるだけでもクライアントの反応は全然違ってきます。

ただ、急にはできないのでそんなときには「こんなの使いたい」でもいいですが、そういうときに限って実装のときに苦労するのが相場だったします。

また、いろいろな事情で打ち合わせに出ないで案件をこなすことも稀にありますが、そんなときに限って苦労が増えたりするものです。

まとめ

PhotoshopやIllustratorで静的な見た目が作れればいいという時代は終わりました。Webに求められレベルはiPhone登場前よりはるかにあがっています。
当然ですが、すぐにデザイナーがHTMLやCSSのコーディングができるようにするのは時間がかかるでしょう。
しかし、今すぐ準備しないといけない時代になっちゃいました。

「デザインニング・イン・ザ・ブラウザ」がよくわからない、という人は菊池さんの記事を読めば少しは違うと思います。

おまけ

このサイトのあちこちでパララックスな動きを加えたりCSSアニメーションを加えたりしていたりして。。。(jQueryなんて使っていないですよ?)

ゆめいろデザインへのお問い合わせやお見積もり依頼はこちらから。
お客さまのニーズにあった提案を行い、パートナーとして共に成長することを目指しています。