MD-Blog_Web Creative

「...あれ？　年越しで『笑ってはいけない』を見たのなんて、つい1ヶ月前くらいじゃなかったっけ？」

などという不毛な自問自答を毎年本気で繰り返す魔の季節。THE年の瀬。
嗚呼一体この1年、なにやってたんだか。。。

というわけで、今回は「MATOME 2013 〜MD Creator's Labノ篇〜」と題し、MONSTER DIVEの勉強会「Creators Lab」で「この1年なにやってきたか」についてご紹介します。

あ。そもそも「Creator's Lab」というのは、MONSTER DIVEのWebクリエイターチームで開いている社内勉強会のことで、毎月1回、その時々で、流行っているWebツールや新しい見せ方、キテる！技術！などをテーマに、「講義：1時間」「制作：1時間45分」「講評：45分」というスケジュールで、クリエイター陣のスキルアップを目指す時間を設けているのです。

で、そのCreator's Lab。
今月は、今年取り上げてきたテーマから用意された6つのお題（Mission）を、クリエイター陣が挙手制で奪い合い制作するという2013年の総まとめが行われ、「この1年なにやってきたか」を振り返る良い機会となりました。
各Missionの内容とともに、2013年のWebトレンドをさらりと振り返ってみましょう。

Mission A：「API」x 「流行のDesignをオーサリングせよ」

今秋リリースされたMovable Type 6で新しく提供された「DATA API」を使って、流行りのかんじでコンテンツ作っちゃいなよ！というMission。
今回、いち早くこのMissionに名乗りを挙げたRSK氏は、Google Maps APIと組み合わせることで、位置情報を取得しつつ記事の投稿ができる、DATA APIの真骨頂ともいえるWebアプリケーションを開発。
スマートフォンなどの端末で使えば、それはそのまま利用できそうなわけで！
いやはやさすがMTマスターです。

関連URL

• 使ってみよう！ MT6 DataAPIの基礎講座

Mission B：「自動化・効率化 #1」x 「流行のWebPageをDesignせよ」

今年潮流となった、SCSS（Sass）やBootstrapなどのWebページを効率よく制作するためのツールを導入しつつ、かっこいいWebPageをデザインすべしというこのMission。
担当となったKen.Otsukaは、フラットデザイン、Webフォント、videoタグでの動画埋め込みなど、まさに今年のトレンドを押さえた作品に落とし込んでいました。
コーディングにはSassとGruntを導入したとのことで、このMissionのポイントである「効率化」ももちろん忘れていません。

関連URL

• HTML/CSSを汎用化・部品化して効率UP！ "Design the MarkUp"
• Gruntを使ってSass(SCSS) / Compassをコンパイルしてみる

Mission C：「ソーシャルの海へ出よ」x 「API」

いまでは各Webページに当たり前のように設置されている、「いいね！」ボタンなどSNSへの連携ツール。
そのソーシャルボタンをその他のAPIとうまく組み合わせることで、単なるSNS連携から発展させたコンテンツ制作をしよう！というのがテーマだったこのMissionに、「検索（AmazonAPI）」×「投稿（DATA API）」×「ソーシャルボタン」という3段活用を組み込んだMio.Satoh。
その昔、Amazon APIの仕様変更に伴い閉店の憂き目に遭った弊社のWEBサービス「MD-SHOP」復活への布石としてこのMissionに取り組んだとのこと。
新たなWebサービス構築への可能性を感じるMissionとなりました。

関連URL

• ソーシャルの海へ出よ（ソーシャルボタン編）
  
• 使ってみよう！ MT6 DataAPIの基礎講座

Mission D「Tabletを意識せよ」x 「流行のDesignをオーサリングせよ」

普及率の拡大とともに、タブレット端末向けサイト制作のご依頼も増え、その需要を改めて実感することとなった2013年。
タブレットファーストのクールなWebページ制作がMissionだったわけですが、フラットデザインの採用、レスポンシブにコーディングして終了となってしまった今回（担当はTakizawa...つまり私です）。
タブレットの操作性を意識した、触りたくなるような動きをつけることが今後の課題となりました。

関連URL

• タブレットでキレイに見えるWebページデザインとは？
  
• PCからタブレット時代のWEBサイトコーディングの傾向と対策。

Mission E：「描く」x 「流行のDesignをオーサリングせよ」

HTML5でのCanvas APIのサポートに伴い、画像を用意しなくてもWeb上に「絵」が描ける時代がやってきました。
本物のキャンバスに絵を描くことはお手の物というデザイナーUSSYですが、今回のMissionでは画像を使ったデザイン作業を封印。
Canvas APIで描いた矩形モチーフをjQueryを使って動かし、ソール・バスのタイトルデザインのような、何かが始まりそうな予感漂うコンテンツを制作していました。
対応ブラウザは限られていますが、新しいことしたいときにCanvasってツカエル！のは言うまでもありません。

関連 URL

• HTML5 APIの代名詞！ canvasについて（基本編）

Mission F：「流行のWebPageをDesignせよ」 x 「Design the MarkUp」

2013年のデザイントレンドといえばやはり「フラットデザイン」。
シンプルだからこそ、ページの生成などには効率化を図って、UX/UI設計により一層の時間を掛けたいところ。
畑違いのMissionに苦戦したという技術系クリエイター Junichi Hondaですが、デザインやコーディングのポイントを押さえつつ、ナビゲーション部分にはJSを使ってなめらかな動きをさくっと実現していました。
ユーザーに心地よいアニメーションなどのUXは、ミニマル、フラットなデザインの中でさらに重要な要素となってきています。

関連URL

• フラットデザインの基礎知識
  
• HTML/CSSを汎用化・部品化して効率UP！ "Design the MarkUp"

MATOMEのまとめ

こうして振り返ってみると、2013年Creators Lab的トピックは、「フラットデザイン」、「API」、「効率化」あたりでしょうか。
ツールや方法の多様化に伴い、イメージした形をどう実現するか、何を削ぎ落とし、何に注力すべきか、そのアプローチはまさに千差万別となってきました。
クリエイター自身でできることが広がり、今後益々、アイデアとテクニックが問われる時代が訪れそうですね。

ぃやはや来年の今ごろは是非とも、「12ヶ月間」感とともに年末を迎えたいものです。
ではでは。皆さま、よいお年をお迎えください。