自らブログやSNSを使いこなす高いネットスキルの持ち主 “きゃんち”がWeb制作に挑戦！

Webクリエイターのアイディアやスキルを全世界にアピールできる「Web Creator's Contest “Q”」の第2弾が7月26日より開始された。HTML5、CSS、JavaScriptなど各クリエイターの得意スキルを活かしてさまざまな“お題”に挑戦するという同コンテストの新たなスタートを記念して、ヲタクアイドルの“きゃんち”こと喜屋武ちあきさんがWeb制作に挑戦！　現役Webデザイナーの小藤貴之さんを講師に迎えて、同コンテストのVol.1の課題に取り組んでみた。弊誌編集長・成田圭秀もアドバイザーとして参加したこのイベントの模様をレポートしよう。

取材・文＝片岡義明

■10年ぶりにWeb制作に挑戦！

　同イベントの会場となったのは銀座のリクルートアネックス1ビルにあるMTL（Media Technology Labs）カフェ。まずは講師（小藤さん）と生徒（きゃんちさん）によるお互いのプロフィール紹介から。「10年前くらいに自分でホームページなどを作ったことがあって、自作の小説などを載せていましたが、今の知識はあまりないので、今日はよろしくお願いします」ときゃんちさん。講師の小藤さんはもともとグラフィックデザイナーで、現在はWebデザインやモバイル系など幅広く取り組んでおり、アーティストのWebサイトなども手がけている。その延長線上で大学や専門学校で講師も活躍していると聞いて、きゃんちさんは「先生！ 頼りになります」とやる気全開。現役Webデザイナーである小藤さんに興味津々ということで、小藤さんへのインタビューを行った。

　最初の質問は小藤さんのWebデザイナーとしての経歴について。最初に某アーティストのWebサイト制作の仕事を受けたときに、師匠のアドバイスを受けながらも基本的には独学で、わずか3カ月でスキルを身に付けて作品を仕上げたという話を聞き、「天才ですね！」と驚くきゃんちさん。最初はHTMLの知識からスタートし、そこからスタイルシートやJavaScriptを学んでいったという小藤さんは、今はディレクターの立場に立つことが多く、保険会社のツールを作ったり、スキー場のサイトのロゴマークや地図を作成したりしている。また、ゲーム画面のUIなども手がけているという。

■作り手側の立場で作品を見ることが大事！

　ここで成田編集長が参考として、現在のWebクリエイターがどんなキャリアの積み方をしているのかを解説。「今の若い人は小藤さんの頃とは違い、Web専門のスクールに入られる方が多くて、スクールで基本的な技術を身に付けてWeb制作会社に入社するというパターンが多いですね。あと、Webデザイン以前に基本的なデザイン知識も必要なので、美術系大学から入られる方も多いです」と最近の傾向を詳しく説明した。その上で、スクールの課題をこなすだけでなく、自分なりに色々なWebサイトを参考にしながら、架空のコーポレートサイトやECサイトを作ってみることで経験を積むことが大切だと語った。

　さらに「デザインスキル向上のために日々勉強していることは？」というきゃんちさんの質問に対して、「勉強するための素材は、周りを見渡せばプロが作った広告やWebサイトに囲まれていて、山ほどあるわけです。大事なのはそれを作り手側の立場で見ることですね」と小藤さん。さらに「いいデザインはスッと入ってくるもの」と小藤さんが語ると、「すごい！ 変に目立ったりせず、当たり前のように入ってくるものが実はいいデザインなんですね」ときゃんちさんも納得。“悪目立ち”しないように作ることの大切さを学んだ。

■Web制作は家作りと同じ？！

　インタビュー後はいよいよレクチャーを開始！　まず小藤さんがWeb制作について、「家造りに例えると、HTMLは家の間取り、CSSは家の内装工事、JavaScriptは電気やガスなど道具を動かすためのもの」と例えると、きゃんちさんが「すごい！　わかりやすい！」と感動。さらに、魅力的なWebページを作るためのアイディアを得るためには、ターゲットを設定した上で、どんなシチュエーションで活用してもらいたいのかを想像することが大事だという小藤さんの教えに深々と頷いた。

■オンラインエディタでWeb制作に挑戦

　次にきゃんちさんが小藤さんのレクチャーを受けながら、実際に「Web Creator's Contest “Q”the 2nd」のVol.1の課題である「夏を涼しくする表現にチャレンジしてください」という課題に挑戦することに。題材となったのは、同コンテストのサイトでお手本として紹介されている、風で草が揺れ動く夏の夜に蛍が飛び交う幻想的なアニメーション。オンラインエディタの「jsdo.it」を利用してJavaSriptやHTML、CSSをそれぞれ書き換えてアレンジしてみた。

　スクリプトの中身の数値を書き換えて、草の高さや蛍のスピードを変えたり、タグを追加して新しい一文を追加したり、スタイルシートでは書体を変更したりと、色々と試行錯誤するきゃんちさん。「このGRASSというのは草の長さですね」「Webフォントも変えられるんですね」「色を変えるのは、このRGBだ！」とコードの中身について確認しながら、さまざまな要素を変更していき、ついに作品が完成！　「SUMMER NIGHT」というタイトルを入れつつ、きゃんちさんが所属するユニット「風男塾」が8月10日の神宮花火大会でのライブ告知を載せた作品ができあがった。

■Web技術の進化に驚き！

　最後に完成した作品を見ながら3人が本日のイベントを振り返った。

●きゃんちさん
「Webの技術がこんなに進化しているのかと驚きました。草を揺らしたりといった動きを画像を使わずにできるということが衝撃的でしたね。HTML、CSS、JavaScriptとこの3つをしっかり学んでいけば色々な可能性があるんだな、と思いました。今までは先入観で難しいと思っていたんですけど、解説があまりにもわかりやすかったので、基礎的なことをきちんと理解すれば、自分でもできるかもしれいないと思ったのですごくよかったです」

●小藤さん
「きゃんちさんは昔、自分でWebページを作っていたということで基本はわかっていますから、すごく楽な生徒さんでしたね（笑）。一口にWeb制作と言っても、今はHTML、CSS、JavaScript、デザインと色んな分野があるので、なにかに興味を少しでも持ってもらえれば、そこから広げていけるので、苦手と思わずに色んな人がどんどんWeb制作に取り組んでほしいと思います」

●成田編集長
「きゃんちさんが『草の長さをもっと短くしよう』とか『蛍の色をこれにしよう』とか試行錯誤されていましたけど、それがいわゆる“デザイン”だと思うんですね。そういう風に実際に手を動かして色々と考えながら学んでいくことが大事だと思います。あと、Webフォントなど新しい技術がWebの世界にはどんどん登場していますので、情報収集とトライ＆エラーしていくことが、Webクリエイターとして活躍するには重要だと思います」

完成した作品を前に、満足げな表情を浮かべるきゃんちさん。Webの最新技術をわかりやすく教えてもらったことにより、Web制作の奥深さに触れ、Webクリエイターの可能性を感じた一日となったようだ。

■問い合わせ先：
Web creator’s Contest Q
url. http://jsdo.it/event/q/
2012/08/01