4kaku design

マーケティングを勉強しているWebデザイナーのノート

デザイナーのためのJavaScript(と、開発者ツールの話)

WCAN Autumn株式会社ワンダーズ山田悠矢さんのセッション「ディレクター、デザイナー向けのJavaScriptの話」を聞いてきました。
Web系エンジニアさんがデザイナー(ディレクター)に求める知識と姿勢がメインのお話でした。感想と開発者ツールの簡単な使い方もまじえて、セッションの内容をまとめます。

エンジニアさんとJSの話をするために必要なこと

JSで実装をする!というよりは、JSを担当するエンジニアさんとより円滑に情報共有するためにどういう勉強をすべきか、が主な内容でした。

  • JSでできることできないことを知る
  • 書く人と一緒に何か作るには、どんなことを知っておくべきか知る
  • どのように切り分け、分担すべきか知る

JavaScriptでできること・できないことを知る

「開発者ツール」という名前に騙されて、エンジニアのためのものだと思い込むのはもったいない!エンジニア以外でも絶対に使えるようになるべき。

JSだけでなく、Webの構成要素を知るためには、開発者ツールを使いこなすのが必要不可欠。
以前アルバイトをしていたシステム開発の会社では、コーディングより何より先にFirebugとブラウザチェック用にF12開発者ツールの使い方を教わりました。エディター上でCSSの試行錯誤をするよりぐっと時間を短縮できるので、HTMLとCSSを勉強し始めたばかりの人には特におすすめしたいです。

今回のセミナーでサンプルとして上げられていたのが、2012年10月15日Googleロゴ「夢の国のリトルニモ」。
インタラクティブなGoogleホリデーロゴの傑作ですが、山田さんがデザイナーに着目してほしい点はソースコードよりも画像の使い方だそうです。
パラパラ漫画のように、たくさんの画像がひとつのファイルにまとめられ、CSSスプライトとJavaScriptでアニメーション化しています。(これは、ブラウザが一度に読み込める画像ファイル数に限りがある=パフォーマンス面を考慮した設計とのこと)

転載するとGoogleさんに怒られるので、デベロッパーツールでどうすれば画像を確認できるかをまとめておきます。




PCサイトでは横割り、スマートフォンサイトでは縦割りウインドウで使っています。ディスプレイ複数使いなら別窓も有りかも?


開発者ツールで前述のGoogleロゴや色々なWebサイトの内側を覗くとわかるんですが、アニメーションでも実際に動かしているのはCSSのbackground-position等だったりします。jQueryのanimate機能も同様。
リッチなWeb表現においても、意外にHTMLとCSSの果たす役割は大きいようです。

書く人と一緒に何か作るには、どんなことを知っておくべきか知る

JavaScript書けなくても、書ける人と会話できればいいじゃない!

システム開発会社時代に、同じ学生バイトのプログラマー組を(勉強不足で)散々困らせたのでとても耳が痛い内容でした…。

↑で紹介した開発者ツールの使い方はあくまで最低限。ある程度コードの知識がないと、読み取った内容を正確に解釈することはできません。
開発者ツールを使いこなすために、最低限勉強しなければならないこととして山田さんから以下のポイントがあげられました。

  • HTTPの基本的な仕組み(Webの基本!いわばハコについて知るということ)
  • HTMLとCSSでできること(これについては前述の通り)

ブラウザでWebを表示するために、サーバーとクライアント(私たちユーザー)間ではファイル単位でリクエスト・レスポンスが行われています。
「このファイルくださーい」「どうぞー」のやりとりがあって、初めてWebページが表示されるわけです。
また、リロード(ページ読み込み)を伴わないデータのやり取り(ページ内のタブ切り替え等が代表的ですね)は「Ajax」というJavaScriptのHTTP機能を使っています。

セキュリティ面で欠かせない同一生成元ポリシーについても勉強しておくべきだそうです。

HTTPについては以下の記事がとてもわかりやすかったのでおすすめです。
ホームページの仕組み | 総務省 国民のための情報セキュリティサイト
Webサイト高速化に必要なHTTPの仕組みを理解する これから身につけるWebサイト高速化テクニック

どのように切り分け、分担すべきか知る

  • できることはわかったら、誰が何をやるか考えよう
  • 組織・案件ごとに最適解は異なる

Googleロゴ「かいじゅうたちのいるところ」を例に、登壇者の山田さんが考える制作フローをご紹介いただきました。

  1. 絵コンテが得意な人がシーンごとに書く
  2. それをもとに、どの部分がどう動くかパーツを洗い出す
  3. デザイナーはパーツ単位で切り出せるデザインを、同時進行でエンジニアはダミーで先に大まかな実装

このフローで制作をするために必要なのは、デザイナーにも(書けなくてもいいから)JSでの実装の知識があること。パフォーマンスについて考えるのはエンジニアの専門分野かもしれませんが、仕組みを知ることで最終成果物のクオリティが上げられる、チーム全体で把握すべきことだと思います。

ちなみにこのロゴ、JSで動的なコンテンツが作れる「Canvas」で動いているそうです。ニモ以上に画像の作りが面白いのでぜひ開発者ツールで見てみてください。

まとめと感想

  • JavaScript以外にも勉強することはいっぱい
  • 最新の技術にもアンテナを張っておく
  • 常日頃から興味のあるコンテンツの内側を見る癖をつける

協業の経験が浅い身ですが、エンジニアさんとのコミュニケーションでは苦い経験があれこれあるのでもっと早く聞いておきたい内容でした。
現在Webアプリケーション制作のために改めてHTML5とJavaScriptの勉強をし直しているので、作品が完成したあともデザインだけでなく技術系の情報にもアンテナを張り続けておきます。