CodeIQ MAGAZINECodeIQ MAGAZINE

月間600万PVの「LIGブログ」1日編集長になれるハッカソンが、9月12日に開催!#LIG #E2D3

2015.09.08 Category:勉強会・イベント Tag: , , ,

  • 11
  • このエントリーをはてなブックマークに追加
LIG-E2D3

ミッションは、LIGブログ上でバズる記事を作ること。LIGとE2D3.orgが主催する「LIGブログの勝手に1日編集長ハッカソン」が9月12日に開催される。

それに先駆けて9月4日に開催されたオリエンテーションでは、LIG秘伝の「コンテンツ企画術」や、「E2D3の可視化テンプレートの作り方」講座などが行われた。
by 馬場美由紀 (CodeIQ中の人)

「LIGブログの勝手に1日編集長ハッカソン」とは

データだけでは伝わりにくい情報を、テクノロジーとビジュアルで分かりやすく伝える技術として注目されている「E2D3」。

この技術を「おもしろ」「わくわく」のために使ってほしいというのが、このハッカソン「LIGブログの勝手に1日編集長ハッカソン」の目的だ。

「おもしろコンテンツ」で大人気を博すLIGとタッグを組み、「コンテンツ企画×データ可視化インフラ」という新しいコンテンツのカタチを生み出そうとしている。

▲E2D3は、Excelのデータをd3.jsというライブラリを使って、プログラムでしか書けないようなグラフを作ることができるビジュアライゼーションツール

9月12日に開催されるハッカソンでは、エンジニア・デザイナー・ライター・カメラマンでチームを組み、E2D3を使って、月間600万PVを誇る「LIGブログ」でバズる記事を作成することがゴールとなる。優秀な作品はLIGブログに正式掲載される。

「今からでも参加してみたい!」という人のために、9月4日に行われたオリエンテーションから、LIG秘伝の「おもしろワクワクするコンテンツ企画術」とE2D3の「可視化テンプレートの作り方」を紹介しよう。

LIG秘伝の「おもしろワクワクするコンテンツ企画術」

まずはLIGを支える3つの事業について、CTOである林優一さんから紹介があった。

  1. 【CREATIVE】Web制作の受託や自社コンテンツ制作
  2. 【MEDIA RPMOTION】LIGブログを使った広告
  3. 【Life is Good】シェアオフィスやゲストハウスなど

▲株式会社LIG CTO 林優一さん

LIGブログは600万PV、230万UU、3.6万いいね!という驚異的な数字を誇る。
9/1にリニューアルしたばかりで、以前に比べてカテゴリも増えており、今後もコンテンツを増強していくという。

今回のハッカソン会場である「いいオフィス」もLIGのシェアオフィス。奥にマンガもあるし、キッチンやWifiなど、設備も充実している。

続いては、LIGの三代目広報を務めたメディアディレクター・ヨシキさんからの「おもしろワクワクするコンテンツの企画術」講座。

▲株式会社LIG メディアディレクター 森川ヨシキさん

意外なことに、LIGブログの構成は「真面目なお役立ち情報」が9割近くで、「どうでもいいネタ情報」は1割だけだという。

だが、世間の印象は、「真面目<面白」

「マジメな記事より、面白記事のほうが心が動かしたからと考えている。心を動かすためには、ファンになってもらうのが一番」とヨシキさんは言う。

「心が動く」記事はどうしたら作れるのだろうか。LIGは「笑い」を得意とするが、人は、悲しみ、怒り、驚きなどいろんな感情で動く。

「認知されても無関心」というのは避けたいし、プラスの感情で心を動かすほうが理想的だが、マイナスの感情でも記憶に残る。プラスかマイナス、どちらかに触れたほうが、コンテンツとしては有効なのである。

PVを獲るだけなら広告という手段もあるが、目指すのは心に残る物語だ。

普通のことを言い続けても人の心は動かない。だから、普通ではないものを見せてあげなくてはならない。「当たり前のことから何かをズラすことが大切」だとヨシキ氏は言う。

1) メッセージや気づきなどの当たり前からズラす
  ↓
2) 感動のギャップが生まれる
  ↓
3) 自分の心が「想定から外れることで心が動く

実際にLIGブログで掲載された「心が動く」事例が紹介された。

【事例1】部下の部屋でビーチ音楽祭を開催したら、大変なことになりました。

ブログを読む

部下の部屋に砂を撒き、帰ってきたらミュージシャンが歌いだすというドッキリ企画。「普通の人は、部屋で勝手にビーチ音楽祭を開催されない」というズラし。

【事例2】会社で仕事中に寝ていたらどうなるの?実際にやってみた

ブログを読む

就業中に寝てみたらどうなるか、誰もやったことがない企画。やったら怒られるという当たり前のことで、誰もやらないことをあえてやってみることで心を動かす。

【事例3】至高のTシャツ「OUKY」をタイで仕入れて、STORES.jpで販売

ブログを読む

タイでTシャツを仕入れようと思わないし、それをネットで販売しようとも思わないが、それを実行したことが心を動かしたのだという。

ちなみに、会場の後ろではその至高のTシャツ「OUKY」が売られていた。

ショップの店長は、なんと入社して3ヶ月で、40日間アメリカ大陸を横断したという野田クラクションべべーさん!帰国後、店長に任命されたのだそう。

店内では、通常2980円のTシャツが2000円で購入できる。この看板はべべさんが4時間かけて作ったそうだ。

ヨシキさんは「世の中の広告の大半は、『低料金』『高品質』『何でも対応』をそれぞれの手法で言ってるだけ。常識をズラせば、心を動かす」と語る。

LIGがブログをやっている理由には、ファンを作るという目的がある。会社には社員がいるが、普通はあまり表に出ないことが多い。

だからLIGは社長以外にも多くの社員を売り出し、「こういうことを考えているんですよ」と伝えていった。人は知っている人からモノを買うと安心できる。社員のファンが増えれば、「知っている人」から買いたくなることにつながるからだという。

最後にヨシキさんは、心を動かす4つのポイントを挙げた。

  1. 一目でわかるビジュアルをつくる
  2. 一言で伝わるキャッチコピー
  3. 世界観をつくる
  4. 何かをズラす

一目でおかしなことをしているのがわかる写真など、ビジュアルで目を引き、キャッチコピーで伝えるのはLIGの得意とするところ。

さらにLIGの社員は当然役者ではなく素人なので、演技をしすぎると嘘っぽくなる。そのため、なるべくリアルベースでやることで、リアリティを創り出している。

何かをズラすというのは、ここまで例を挙げてきたように当たり前や普通じゃない組み合わせをすることなどで、実現できる。

E2D3の可視化テンプレートを作ってみる

続いては、E2D3.orgからE2D3の可視化テンプレートの作り方について。

E2D3とは、Excel to D3.jsの略で、オープンソースで公開されているOSSプロジェクト。

GitHubにグラフのコードを投稿(Pull Request)すると、E2D3.orgがMicrosoftのOneDriveで承認し、ユーザーがExcelのアプリからダウンロードできるという仕組みとなっている。

それを取りまとめて管理し、啓蒙しているのがE2D3.orgだ。

▲E2D3エバンジェリスト 壹岐 崇さん

E2D3エバンジェリストの山本優氏は、「データの可視化を作り上げるのはとっても大変。見かけたものを使ってみたいと思ってもノンプログラマには絶対無理。E2D3はデータの中身を書き替えるだけでグラフができるテンプレートを作れるので、ノンプログラマでも使いやすい世界を目指している」と語る。

ハッカソンでは、データ可視化のテンプレートにExcelからデータを流し込めるテンプレートをエンジニアに作ってほしいと呼びかけた。

▲E2D3エバンジェリスト 山本優さん

そのテンプレート開発に必要なものはこちら。

  • Node.js vs.12x

まずは、サーバーアプリケーションをインストールする必要がある。ローカルにない場合は、nodebrew(for MacOSX)もしくはnodest(for Windows)を使ってインストールする。

  • Git

GitHubですべてのソースが公開されているため、Gitが使える環境が必要となる。

  • Google Chrome

Chrome以外に、FireFoxなど、他のブラウザでも可能とのこと。

  • Microsoft Excel Online

Microsoftアカウントを作れば無料で使えるので、登録しておこう。

  • Atom

Atomでなくても、開発用のテキストは自分の好きなものでOK。

さらに、E2D3コマンドをNPM経由でインストール。

$ npm install -g e2d3

E2D3-CONTRIBレポジトリをクローン。

$ git clone git@github.com:e2d3/e2d3-contrib.git

詳しい資料は、こちらにアップされているので、参照しよう。

「E2D3で公開されたデータは簡単にブログに貼付けたり、Facebookでシェアすることができるシェア機能があるので活用してほしい」と言い、山本さんはセッションを締めた。

E2D3.orgのプロジェクトリーダーである五十嵐康伸さんからは、グラフ作成のヒントとなる表現でよく割り当てられる情報のまとめや、Date Driven Documentsのサイトなどが紹介された。

▲E2D3プロジェクトリーダー 五十嵐康伸さん

▲E2D3の表現でよく割り当てられる情報

▲左が「Bubbly Gunma」、右が「都道府県の散布図」例

9月12日のハッカソン当日は、アマナイメージズの画像が無料で使えたり(※会員登録が必要)、ドリンクスポンサーの野菜くらぶさんからレタスのクラフトビールがふるまわれたりするとのこと。

jThree開発者の松田さんのWeb3D/VRコンテンツ講座や、LIGのオリエンテーションの再演などもあるそうなので、興味のある方はぜひ参加してみてほしい。

イベントの概要

  • 2015年9月12日(土)10:00 – 21:00(9:30 受付開始)
  • 参加費:2000円(懇親会費:ピザ・ビール代含む。学生無料)
  • 会場:いいオフィス
  • 所在地:東京都台東区東上野2-18-7(共同ビル3F)
  • イベントの詳細はこちら

(撮影:延原優樹)
  • 11
  • このエントリーをはてなブックマークに追加

■関連記事

Webで簡単・効率的にアニメーションを実現できる最新フレームワーク・CSS3アニメーションを紹介... MozillaでWebアニメーションの機能の開発者が登壇 Webでアニメーションというと、数年前まではFlashコンテンツが当たり前に使われていた。 しかしスマートフォンの普及と共に、Webから駆逐され、今はHTML5でアニメーションを表すには、setInterval関数やrequestAnim...
「React.js × React Native」―メリット・デメリット、将来はどうなる?【後編】... LT1「Webpackを使ったReact Hot Loaderの導入」 パネルディスカッションの後は、LTタイムに。最初に登壇したのはISAOで社内SNS「Goalous」の開発を行っているフロントおよびサーバサイドエンジニアの吉田将之さん。テーマは「Webpackを使ったReact Hot Lo...
「React.js × React Native」―メリット・デメリット、将来はどうなる?【前編】... React・React Nativeをテーマにパネルディスカッション 3月16日、リクルートテクノロジーズで、React.js meetupとReact Native meetupによる合同勉強会が開催された。 今回の勉強会はWeb開発において急速に普及しつつあるReact、そしてその書き方をベ...
Webブラウザ技術で、直接モノを制御する!「Web×IoT メイカーズハッカソン」【1日目】... ハッカソンのテーマは「ブラウザからのハードウェア直接制御」 今回のハッカソンでは、「ハードウェアの制御をブラウザー技術だけでコントロールした作品づくり」というテーマが設定されました。 ブラウザといえば「PCやスマホからWebサイトを閲覧するためのもの」というイメージがあります。あまりハードウェア...
Webブラウザ技術で、直接モノを制御する!「Web×IoT メイカーズハッカソン」【2日目】... 2日目開始 翌日3月19日の朝。目黒は2日目も良い天気に恵まれました。本当によかった! 1日目の様子を振り返る ▲いよいよ最終日。目黒駅から会場に向かう途中に渡る目黒川の様子 この日のハックは10:00から。14:30からの成果発表までの4時間半が各チームに残された時間です。 ただ見学...
非エンジニアがハッカソンに出るモチベーション、チームビルディングについて考えてみた... なぜ、ハッカソンに参加するのか 私の本業はクリエーターのためのポートフォリオ作成サイトCOLET(コレット)を開発しているちょっと変わった事業相談が大好きな行政書士です。 ハッカソンに出るモチベーションやチームビルディングが、エンジニア以外のごくごく一般人の参加者によってあまり書かれることはなか...

今週のPickUPレポート

新着記事

週間ランキング

CodeIQとは

CodeIQ(コードアイキュー)とは、自分の実力を知りたいITエンジニア向けの、実務スキル評価サービスです。

CodeIQご利用にあたって
関連サイト
codeiq

リクルートグループサイトへ