• はてなブックマークに追加
  • Yahoo!ブックマークに登録
HTML5、CSS、JavaScriptで「夏を涼しくする表現」を作っちゃった
完全再現!きゃんちがWebクリエイターのイロハを学ぶ
Webクリエイターのアイデアやスキルを全世界にアピールできる「Web Creator's Contest “Q the 2nd”」。HTML5、CSS、JavaScriptなどの得意スキルを活かして「夏を涼しくする」作品をつくるコンテストにきゃんちも挑戦!さて、結果はいかに!?
(取材・文/総研スタッフ 宮みゆき 撮影/佐藤聡)作成日:12.08.10
きゃんちが「夏を涼しくする」Webデザインにチャレンジ!

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

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

挑戦者

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

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

きゃんち
今回の講師

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

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

小藤 貴之さん
アドバイザー

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

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

成田 圭秀さん
Webクリエイターのキャリアはどうやって身に付ける?
きゃ

ということで、今日は東京・銀座7丁目のビルの地下にあるMTLカフェでレクチャーを受けています! Webデザインのイロハを教えてもらう前に、まずはお二人にいろいろインタビュー。早速ですが小藤先生、Webデザインのキャリアはどうやって身に付けてきたんですか?

小藤

僕は元々デザイン事務所でパンフレットやチラシなど、紙媒体の広告をつくっていました。でも世の中にWeb媒体が出始めてきた頃に、某アーティストのデザインを頼まれたことがきっかけで本格的に勉強を始めたんです。仕事をしながら独学で覚えていきましたね。

きゃ

その仕事はどのくらいでつくったんですか?

小藤

3カ月くらいかかったかな。

きゃ

3カ月でできるなんて天才じゃないですか! すごーい!

成田

小藤さんがWebデザインを始めた2001年当時は、基本的なスキルを自分で身に付けて仕事を始める人が多かったですね。最近では、Webデザインの専門学校などで基本概念から学ぶ人が増えています。授業として取り入れている美術大学も多くなっていますよ。

きゃ

Webデザインを学校で勉強する人が増えているんですね! 実は私、あまりデザインに自信がないんですけど、デザインを上達させるコツってありますか?

小藤

プロのつくった広告や作品をたくさん見るといいですよ。いい広告のデザインはすっと入ってきます。眺めているだけでなく、参考にしてつくってみるともっと上達します。

きゃ

どういう広告のデザインがすっと入ってくるんですか?

小藤

例えば屋外のポスターは目に入っても見るのはせいぜい2〜3秒くらい。だから大事なことだけ伝えればいい。でもチラシは手にとって見てもらうものだから、できるだけ情報を散りばめる。Webの場合は興味をもったものだけを見る人が多いから、どう伝えるかは考えることが大事。人によって見る部分が違うから、ターゲットが何に興味をもって、どう見るかをよく考えてつくることが重要です。

きゃ

はい、見てくれる人の気持ちになってつくらなきゃですね! では、早速Webデザインのイロハ、教えてください♪

HTMLは間取り、CSSは内装工事、JavaScriptは道具を動かすもの
小藤

今日はお題のサンプルを元に、アレンジをしながら覚えていってもらおうかなと。

きゃ

わ!スゴイ! これ、草や蛍ををどうやって動かしてるんですか?

小藤

実は画像で動かしているのではなく、プログラムで動かしてるんです。フォントの大きさや色、背景やシルエットなどもそうです。

きゃ

えっ、そうなんですか? 画像じゃないのに、そんなことができるなんて信じられない!

成田

最近は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クリエイターとして成長するためには、この試行錯誤と情報収集が欠かせないと思います。

おまけ

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

「Web Creator's Contest “Q the 2nd”」は、皆さんの挑戦もお待ちしています!

HTML5、JavaScript、CSSを駆使して、暑い夏をひんやり涼しくするような作品をつくってください。水が流れる作品や、風を感じる作品、花火などなど、どんな表現でも構いません。自由な発想をお待ちしています!
詳細はこちら → http://jsdo.it/event/q/2nd/vol1

スケジュール
作品投稿期間 審査期間 結果発表
7/26(木)〜8/22(水) 8/23(木)〜8/31(金) 9/4(火)
賞品
GOLD SILVER BRONZE
ルンバ780 Nintendo 3DS LL WebMoney 5,000円分
ルンバ780 Nintendo 3DS LL WebMoney 5,000円分
  • はてなブックマークに追加
  • Yahoo!ブックマークに登録
あなたを求める企業がある!
まずはリクナビNEXTの「スカウト」でチャンスを掴もう!
スカウトに登録する

このレポートを読んだあなたにオススメします

TechWave増田真樹、おれのそうび大沢香織、ガラパゴス細羽啓司

Tech女子とHTML5/CSS/JSを駆使してペアプログラミング

Webクリエイターのためのアイデア&スキルコンテスト「Web Creator's Contest “Q the 2nd…

Tech女子とHTML5/CSS/JSを駆使してペアプログラミング

テックハニー“きゃんち”の突撃☆会社訪問

笑いあり、ヒーローあり、ユーモアたっぷりの職場

テックハニー“きゃんち”の突撃☆会社訪問今回、訪問したテックハニーを待ち構えていたのは、ヒーロー風?のユニークなキャラクター。そしてそこで仕事をするエンジニアや職場も、…

笑いあり、ヒーローあり、ユーモアたっぷりの職場

テックハニー“きゃんち”の突撃☆会社訪問

学生も活躍!iPhoneアプリ開発で世界に挑む

テックハニー“きゃんち”の突撃☆会社訪問なぜかガレージのついたユニークな職場に足を踏み入れると、そこには学生をはじめ、若さと好奇心旺盛なエンジニアたちが生き生きと開発し…

学生も活躍!iPhoneアプリ開発で世界に挑む

テックハニー“きゃんち”の突撃☆会社訪問

レッツクッキング!料理とプログラムの共通点って何?

テックハニー“きゃんち”の突撃☆会社訪問テックハニーがキッチンで料理をしている……。でも、ここはれっきとしたエンジニアの職場。今回は、日本最大の料理サイトを運営する企業…

レッツクッキング!料理とプログラムの共通点って何?

テックハニー“きゃんち”の突撃☆会社訪問

アフロでエフェクト!?ユニーク開発する職場の魅力

テックハニー“きゃんち”の突撃☆会社訪問訪問したテックハニーを待ち構えていたのは、巨大アフロ!? ほかにも個性的なエンジニアがたくさんいる職場で日夜、開発されている技術…

アフロでエフェクト!?ユニーク開発する職場の魅力

スキルや経験はよさそうなのに…(涙)

人事が激白!悩んだ挙句、オファーを出さなかった理由

オファーが来る人、来ない人の差って何だろう?過去にスカウトを利用したことがある企業の採用担当者55人の声をもとに、「惜しいレジュメ」の特徴を…

人事が激白!悩んだ挙句、オファーを出さなかった理由

この記事どうだった?

あなたのメッセージがTech総研に載るかも

あなたの評価は?をクリック!(必須)

あなたのご意見お待ちしております

こちらもお答えください!(必須)

歳(半角数字)
(全角6文字まで)
  • RSS配信
  • twitter Tech総研公式アカウント
  • スカウト登録でオファーを待とう!
スマートグリッド、EV/HV、半導体、太陽電池、環境・エネルギー…電気・電子技術者向け特設サイト

PAGE TOP