完全再現！きゃんちがWebクリエイターのイロハを学ぶ

Webクリエイターのアイデアやスキルを全世界にアピールできる「Web Creator's Contest “Q the 2nd”」。HTML5、CSS、JavaScriptなどの得意スキルを活かして「夏を涼しくする」作品をつくるコンテストにきゃんちも挑戦！さて、結果はいかに!?

（取材・文／総研スタッフ宮みゆき　撮影／佐藤聡）作成日：12.08.10

　エンジニアのみなさん、こんにちは！　テックハニーきゃんちです☆
Webクリエイターのためのアイデア＆スキルコンテスト「Web Creator's Contest “Q the 2nd”」に挑戦してきました！　HTML5、CSS、JavaScriptなど得意スキルを活かしてお題にチャレンジするコンテストで、今回のお題は「夏を涼しくする」表現なんだとか。

　暑い夏をひんやり涼しくするようなアイデアは浮かぶけど、制作スキルのない私。そこで先日、私の先生を募集したところ、デジタルハリウッドの講師で現役Webデザイナーの小藤貴之さんが名乗りでてくれました♪　さらに、Webデザインとグラフィックの最新情報を伝える「MdN Design Interactive」「web creators」編集長の成田圭秀さんもアドバイザーで参加してくれることに！　成田編集長、小藤先生、よろしくお願いします☆

テックハニー“きゃんち”こと、喜屋武ちあき

Ｔｅｃｈ総研公認レポーター。アニメやゲームをこよなく愛するかたわら、自らブログやSNSを使いこなす高いネットスキルの持ち主。最新の技術情報にも関心が高く、エンジニアという職業を深く尊敬している。10代の頃に自分のHPをつくり、自作の小説を載せていた経験がある。風男塾＆中野風女子シスターズのメンバーとして活動中。

デザイナー　アートディレクター
小藤貴之さん

デザイン事務所にて主に印刷媒体の広告・企画制作に携わる。2001年よりフリーランスとして活動。同時期よりアーティストのWebサイトの企画制作等も開始し、活動の場を広げる。さらにロゴデザインやパッケージ、エディトリアルデザインなど幅広く手掛けているほか、デジタルハリウッドの講師として教育に従事。

株式会社エムディエヌコーポレーション
MdN Design Interactive/web creators
編集長成田圭秀さん

Webデザイナーやグラフィックデザイナー向けにWebデザインとグラフィックの情報を毎日更新する「MdN Design Interactive」と、デザイン現場の目線で追いかけるWebクリエイティブ総合情報サイト「web creators」の編集長を兼任。Webクリエイティブの最新技術やトレンドをタイムリーに発信している。

きゃ：	ということで、今日は東京・銀座7丁目のビルの地下にあるMTLカフェでレクチャーを受けています！　Webデザインのイロハを教えてもらう前に、まずはお二人にいろいろインタビュー。早速ですが小藤先生、Webデザインのキャリアはどうやって身に付けてきたんですか？
小藤：	僕は元々デザイン事務所でパンフレットやチラシなど、紙媒体の広告をつくっていました。でも世の中にWeb媒体が出始めてきた頃に、某アーティストのデザインを頼まれたことがきっかけで本格的に勉強を始めたんです。仕事をしながら独学で覚えていきましたね。
きゃ：	その仕事はどのくらいでつくったんですか？
小藤：	3カ月くらいかかったかな。
きゃ：	3カ月でできるなんて天才じゃないですか！　すごーい！

成田：	小藤さんがWebデザインを始めた2001年当時は、基本的なスキルを自分で身に付けて仕事を始める人が多かったですね。最近では、Webデザインの専門学校などで基本概念から学ぶ人が増えています。授業として取り入れている美術大学も多くなっていますよ。
きゃ：	Webデザインを学校で勉強する人が増えているんですね！　実は私、あまりデザインに自信がないんですけど、デザインを上達させるコツってありますか？
小藤：	プロのつくった広告や作品をたくさん見るといいですよ。いい広告のデザインはすっと入ってきます。眺めているだけでなく、参考にしてつくってみるともっと上達します。
きゃ：	どういう広告のデザインがすっと入ってくるんですか？
小藤：	例えば屋外のポスターは目に入っても見るのはせいぜい2～3秒くらい。だから大事なことだけ伝えればいい。でもチラシは手にとって見てもらうものだから、できるだけ情報を散りばめる。Webの場合は興味をもったものだけを見る人が多いから、どう伝えるかは考えることが大事。人によって見る部分が違うから、ターゲットが何に興味をもって、どう見るかをよく考えてつくることが重要です。
きゃ：	はい、見てくれる人の気持ちになってつくらなきゃですね！　では、早速Webデザインのイロハ、教えてください♪

小藤：	今日はお題のサンプルを元に、アレンジをしながら覚えていってもらおうかなと。
きゃ：	わ！スゴイ！　これ、草や蛍ををどうやって動かしてるんですか？
小藤：	実は画像で動かしているのではなく、プログラムで動かしてるんです。フォントの大きさや色、背景やシルエットなどもそうです。
きゃ：	えっ、そうなんですか？　画像じゃないのに、そんなことができるなんて信じられない！
成田：	最近はFlashを使わなくても、それらしく動かすこともできるんです。
きゃ：	Webの世界は進化しているんですね。10年でこんなに進化しているなんて、浦島太郎の気分です。
小藤：	きゃんちも手を動かしてみましょう。家造りに例えると、HTMLは家の間取り、CSSは家の内装工事、JavaScriptは電気やガスなど道具を動かすためのものなんです。HTMLはこれです。
きゃ：	あれ、でも何行かしかないですよ！
小藤：	間取りは一画面しかないから、ひと部屋しかないので、これだけ（笑）。
きゃ：	こんな数行でこんなことができるんですか～すごい！
小藤：	次にキャンバスに描いていくためにスタイルシート（CSS）を指定します。CSSは位置の指定や、フォントの大きさなどを指示するもの。HTMLとCSSとJavaScriptの3つファイルがあって、同時に読み込んでるんです。蛍のプログラムを書き直してみましょうか。
きゃ：	蛍をめっちゃ飛ばそう！　あ、でもなんでここが蛍だってわかるんですか？
小藤：	ほら、ここにコメントで入れています。蛍の位置はCSSで決めて、JavaScriptで動かしています。
きゃ：	なるほど、コメントで入れてるのか～。スピードを変えたら、めっちゃ早くなっちゃった！　ちっともロマンチックじゃない（涙）。でも、遅すぎると粉雪みたいになっちゃいますね……。

完成したきゃんちの作品をチェック↓
http://jsdo.it/event/q/2nd/vol1#special

小藤：	次はWebフォントでフォントを選んでみましょう。
きゃ：	サーバーにフォントがあるからいつでも呼び出せるんですね！　いままではパソコンにないとできなかったのに、なんて便利になったんでしょう。えっと、これを選んでみよっと。わー！　ホラーになっちゃった！
小藤：	HTMLではGoogleでフォントを読み込んでくださいという指示をh1で指示します。さらにh1の下にcolorと書いてあるんですが、これで色を指示します。色は何色にしたいのかな？
きゃ：	え～、何色にしようかな。デザイン的には何色がいいですか？
小藤：	夜っぽいテイストなので、明るい色が映えますね。白とか黄色とか。
きゃ：	う～ん、じゃ白にしてみよう！
小藤：	marginで幅と高さを指定してみましょう。で、保存すると画面が変わります。昔は画像を使ってたのが、いまは指定だけでできたりします。
きゃ：	HTMLで何が書かかれてあるのかを記述、文字はCSS、動きはJavaScript。一日でこんなに理解できるなんて、小藤先生すごい！
成田：	一度覚えると広がりができてきますよね。
小藤：	HTMLに文章を入れていきましょう。夏らしい文章を書いてみてください。
きゃ：	「毎年火垂るの墓を見て泣いていますよね」、と。えっとどこまでがh1なんだろう。
小藤：	</h1>までですね。改行しておくと見やすいですよ。次は36行目に1/4と書いてありますが、数値をいじると草の高さを変更することができます。それを変えてみましょう。1/5や1/6だとすごく小さくなるし、大きくすることもできます。
きゃ：	あ、なんか雑草の生え具合が、人が住んでないみたいになっちゃった。
小藤：	RGBで色味を変えることができるし、蛍の数も変えられますよ。
きゃ：	わあ、変えてみたいです。プラスイコール2と……。小藤先生はこういう草の形や色はどうやって決めてるんですか？
小藤：	見た目の美しさで決めていることが多いかな。プログラマさんに頼むときは、モノで見せたほうが早いので、見本をつくったり探して見せています。プログラマは間違いのないように動きをつくるのが仕事なので、見た目の責任はこちらできっちりもたないとなんです。
きゃ：	デザインは目的意識がないと何をやっているのかわからなくなりますね。お題にこだわって、何をつくるのかをはっきりさせておかないと。あ、8月10日に神宮の花火大会に出るので、そのこと書いちゃおうかな～。よし、これで完成！
小藤：	はい、よくできました！

頑張れば人間国宝になれるチャンスもあるかも!?

きゃ：	私がWebサイトをつくっていたのは10年以上前だったので、草や蛍が画像を使わずに動かせる最近のHTML、CSS、JavaScriptなどのWebに進化に驚きました。先生の講義がとてもわかりやすかったので、初めてのHTML5、CSS、JavaScriptをさわった私でもいろいろできるんじゃないかって希望がもてました。基本をちゃんと理解して勉強したら、もっといろんなものがつくれるような気がします。今日はありがとうございました！

苦手意識をもたずに、いろいろチャレンジしてほしい

小藤：	きゃんちは基本がわかっていたので、とても教えやすかったですね。いまはHTML、CSS、JavaScriptだけではなく、いろんな分野があるので苦手意識をもたずにいろいろ試してみると楽しいと思う。たくさんの人に挑戦してほしいですね。

Webクリエイターとして成長する鍵は、試行錯誤と情報収集

成田：	きゃんちがフォントの大きさを120％にしたり、草の長さや蛍をどう動かすといいとか試行錯誤していましたが、まさにそれが「デザイン」するということ。実際に手を動かして自分なりのものをつくっていくことが大事です。そして、GoogleのWebフォントなど、手軽にさまざまなフォントが使えるというのは、情報収集をしなければ知らなかったことですよね。Webクリエイターとして成長するためには、この試行錯誤と情報収集が欠かせないと思います。

おまけ

今回の会場メディアテクノロジーラボのカフェは、とっても素敵なオープンスペースでした♪社外の方も招いてナイトセミナー形式で技術勉強会を開催することもあるそうです。ケーブルをクロスにつないで、ペアプログラミングすることもあるのだそうです。