☆CodeIQ MAGAZINE https://codeiq.jp/magazine/
☆HTML5 Experts.jp https://html5experts.jp/
☆Hack on Air http://hackonair.hrtoolhub.com/
☆リクナビNEXTジャーナル http://next.rikunabi.com/journal/
- 月間600万PVの「LIGブログ」1日編集長になれるハッカソンが、9月12日に開催！ - 2015-09-10
- 人事・脳科学・統計学の視点で考える「エンジニアが辞めない組織」とは？ - 2015-09-02
「LIGブログの勝手に1日編集長ハッカソン」とは
ミッションは、LIGブログ上でバズる記事を作ること。LIGとE2D3.orgが主催する「LIGブログの勝手に1日編集長ハッカソン」が9月12日に開催される。
それに先駆けて9月4日に開催されたオリエンテーションでは、LIG秘伝の「コンテンツ企画術」や、「E2D3の可視化テンプレートの作り方」講座などが行われた。
データだけでは伝わりにくい情報を、テクノロジーとビジュアルで分かりやすく伝える技術として注目されている「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制作の受託や自社コンテンツ制作
1. 【MEDIA RPMOTION】LIGブログを使った広告
1. 【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: Excel to D3.js（http://e2d3.org/ / https://github.com/e2d3/）
▲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)
* イベントの詳細はこちら
※本記事は「CodeIQ MAGAZINE」2015年9月7日掲載記事を、転載しています。
個人的にはレタスビールにおおいなる関心を抱いています。