Main menu

株式会社電通国際情報サービス  イノラボ サイトリニューアル

株式会社電通国際情報サービス  イノラボ サイトリニューアル

・ワークショップからインスピレーションを得て、イノラボの理念や活動を表現する型破りなデザインを提案
・コンテンツの背景や文字色を選べるなど、CMSの設計段階でサイト運用の楽しさまでデザイン
・サイトと併せて事業紹介パンフレットやサービスロゴ、リーフレット、広告、展示ブースなどクリエイティブをトータルで支援

イノラボをより広く、正しく、リアルに伝えるためには?をクリエイティブで追求

株式会社電通国際情報サービス(以下、ISID)が2011年4月に開設した「オープンイノベーション研究所(通称イノラボ)」は、プロトタイピング=ものづくりをミッションとし、世界のあちこちで生まれた先端技術を集め共有し、プロトタイピングした上で、その可能性を世に問う様々な実証実験を推進しています。

イノラボ | OPEN INNOVATION LAB.

そんなイノラボの“いま”を知る上で欠かせないのが、2013年2月にフルリニューアルしたWebサイト。組織の活動をより広く、正しく、リアルに伝えるために、既存サイトをどう再構築していったのか。イノラボ所長の渡邊信彦氏、同チーフプロデューサーの森田浩史氏、同 川本菜摘氏、ロフトワークのプロデューサー松井創、同クリエイティブディレクター重松佑の5名がプロジェクトを振り返ります。

松井(ロフトワーク):当社とのご縁は、森田さんと林千晶が出会ったところから始まりましたね。

株式会社電通国際情報サービス オープンイノベーション研究所長 渡邊信彦氏

渡邊(ISID): そうですね。MITメディアラボとそのスポンサー企業のセッションでお会いしたのがきっかけでした。林さんのお名前や、やっていることは以前から知っていて、いつかは一緒に仕事をしたいと思っていました。

大企業になると、何でも決定までのプロセスが遅く、稟議システムもありプロジェクトがなかなか立ち上がらない。立ち上がったとしても、世に出るまでプロジェクトがとてもクローズな状態で進んでいきます。我々ISIDもそのような状態でした。ロフトワークのようにプロジェクトの段階からオープンにして進めていくというような土壌が全くなかったんです。

しかし、決定までのプロセスの速さや、新しいものはまず受け入れてみる、プロトタイピングしてみるというロフトワークの姿勢や考え方は、我々がSIerとして向かおうとしている未来と同じでした。今回のサイトリニューアルが、一緒に仕事をするいい機会になりました。

株式会社電通国際情報サービス オープンイノベーション研究所 チーフプロデューサー 森田浩史氏

森田(ISID):渋谷の街を舞台にした”追いかけっこ”の実証実験の際、飛び込みでスポンサーをお願いしました。その際、非常にスピード感のある対応をしていただけたのが印象的でした。今回ロフトワークに依頼したのにはそんな背景があったんです。

FacebookやTwitterもやっていますが、イノラボを正しく理解してもらうためにも、スピード感とライブ感に溢れた元気のあるサイトにしたかったのです。ちょうどロフトワークのサイトがイメージにぴったりで、こんな感じで!とお願いしました。

”積み木”をヒントに型破りなデザイン提案!

ロフトワーク プロデューサー 松井創(左) クリエイティブディレクター 重松佑(右)

重松(ロフトワーク):既存サイトからは、面白いことをやっているのは伝わっても、何をやっているのかが見えてこない。実際には、街づくりやアイドルとのコラボ、アプリ開発、さらには街とつながる未来のクルマのコンセプトまで作っていて、「そもそもなぜそんなすごいことが出来るのか?」と考えていくうちに、イノラボに集まるヒトやモノこそが面白いのだと気付きました。つまり、集まったものが何にでもなれる場所がイノラボなのだと。これはワークショップやヒアリングを通じての気付きでした。

松井:イノラボのプロジェクトでもワークショップを数多くやってきたと思いますが、ロフトワークとのワークショップはいかがでしたか?

森田:クライアントに対してイノラボを説明する機会は多くても、フィードバックをもらうチャンスはほとんどありません。ワークショップを通じて我々が思いも寄らない意見をぶつけられたり、イノラボの組織像を議論をすることができ、我々の活動を客観的に眺められるとても有意義な時間でした。

渡邊:最初はWebサイトを作るのになぜワークショップが必要なの?と思いました。でも、やってみて思ったんですが、まず我々のフィロソフィーから理解してもらえていないと、プロジェクトはうまくいかないんですね。イノラボとはなにか、何をやっているのかを正しく理解してもらうと、以降の仕事がほんとうに楽なんです。松井さん、重松さんに海外展示会に使うイノラボの事業紹介パンフレット、リーフレット、ブースデザインなどをお願いする際も、とてもスムーズに仕事が進みました。

重松:イノラボとのワークショップでは、どうすれば正しい組織像がユーザに伝わるかを一緒に考え、そこで導き出されたものをデザイン提案に落とし込んでいきました。ワークショップを受けて、実際にサイトデザインを作る段階になってデザイナーとブレストするうちに、組み合わせでどんな形にもなるものとして「積み木」というモチーフが出てきたんです。モチーフを体現するために、パララックス効果とJSを使って全体が大胆に動くサイトを考えました。ただ、細かい動きや表現を説明するのが難しく、早い段階に開発環境でプロトタイピングして、3人に共有しました。当社のデザイン提案はどんな印象でしたか?

  • デザイナーとサイトデザインを作りあげていく過程を図解(重松メモ)
    デザイナーとサイトデザインを作りあげていく過程を図解(重松メモ)
  • デザイナーとのブレストで出てきたデザインの参考イメージ
    デザイナーとのブレストで出てきたデザインの参考イメージ
  • サイトデザイン案
    サイトデザイン案
  • サイトデザイン案
    サイトデザイン案
  • サイトデザイン案
    サイトデザイン案

渡邊:スクロールの長いページが出てきて、正直長いなと(笑)でも、プロの言うことを否定するつもりはなく、それを受け入れたらどうなるかを考え、我々がいま一番言いたいことを表現するのにふさわしい手法だと判断しました。

運用の楽しさまでをデザイン、サイトは海外でも話題に

松井:Webサイトの反響はどうでしょう?

株式会社電通国際情報サービス オープンイノベーション研究所 川本菜摘氏

川本(ISID):Twitterなどを通じ、ワールドワイドで話題になっているのには驚きです。我々が今までアクセスできなかったところにインパクトを与えられたということでしょう。Webを見てください!と堂々と言えますし、ISID内部にも良い影響を与えています。

渡邊:順調な滑り出しで第一弾としては成功です。比較的サイトが重いのに一切苦情が出ないのも、それだけインパクトやメッセージ性が強い証拠だと捉えています。せっかく動きのあるものが出来たので、きちんと運用していきたいですね。

重松:楽しんで運用してもらえるよう、CMSの管理画面で背景色や文字色を選んでニュースページなどを更新が出来るように設計をしました。日々の運用は、担当者には意外と負担になるんですが、少しでも楽しみながら更新してもらえたら嬉しいです。

  • Wordpressの管理画面
    Wordpressの管理画面
  • 記事の背景・文字色を自由にカスタマイズできる
    記事の背景・文字色を自由にカスタマイズできる

パンフレットからサービスロゴまで、クリエイティブをトータルプロデュース

森田:今回は、国内と海外での展示会出展で大きく露出することになり、そこを1つのマイルストーンにサイトリニューアルを進めていました。併せて展示内容についてもきちんとメッセージングしていく必要があると考え、イノラボの事業紹介パンフレットやソーシャルシティ・プラットフォーム「+fooop!」のサービスロゴ、リーフレット、広告、展示ブースなども追加で依頼しました。

重松:海外の人相手にいきなりイノラボを理解せよと言っても難しいですから、展示会を意識して特に重視したのは、“人目を引く”インパクトです。

渡邊:単にWebサイトにテイストを合わせないと一貫性が保てないという理由だけでなく、ソーシャルシティの考え方ひとつをとっても、きちんと理解してもらえている前提でないと、すべての制作物が台無しです。その点、すでに多くの時間を共有していたロフトワークに不安はありませんでした。完成したツールは、海外で認知度の低い我々のフックになったと感じています。

事業紹介パンフレットは広げると星形になり、展示会場では人目を引くように積み上げることもできる

+fooop!のサービスロゴとリーフレットも合わせて制作した

松井:最後に、イノラボの今後の展開について教えてください。

渡邊:イノラボには、電通グループであることの強みを利用しつつ、すばやくプロトタイピングできる環境が整っていますから世の中をあっと言わせるような面白いことができるはずです。

森田:大事なのはスピード感。ビジネスプランを書く前にプロトタイピングしなくては、シリコンバレーで起きているようなイノベーションは期待できない。これが、インキュベーションでなくプロトタイピングをし続ける理由です。

松井:当社の考え方と非常に似ていますね。今回はご支援という形でしたが、今後は一緒にものづくりをするチャンスもありそうです。

内容やお客様情報、担当ディレクター情報は本記事公開時点のものです。現在は異なる可能性があります。

お客様の声

渡邊 信彦氏

株式会社電通国際情報サービス執行役員 オープンイノベーション研究所長
渡邊 信彦氏

最初はWebサイトを作るのになぜワークショップが必要なの?と思いました。でも、フィロソフィーから理解してもらえていないと、プロジェクトはうまくいかないんですね。次の機会にパンフレットの制作を依頼するとなった場合にも、一から説明する必要がなくスムーズです。リニューアル後は順調な滑り出しで第一弾としては成功です。比較的サイトが重いのに一切苦情が出ないのも、それだけインパクトやメッセージ性が強い証拠だと捉えています。

株式会社電通国際情報サービス チーフプロデューサー グループマネージャー 森田 浩史氏

株式会社電通国際情報サービスオープンイノベーション研究所 チーフプロデューサー
森田 浩史氏

クライアントに対してイノラボを説明する機会は多くても、フィードバックをもらうチャンスはほとんどありません。ワークショップを通じて我々が思いも寄らない意見をぶつけられたり、イノラボの組織像を議論をすることができ、我々の活動を客観的に眺められるとても有意義な時間でした。

株式会社電通国際情報サービス 研究員 川本 菜摘氏

株式会社電通国際情報サービスオープンイノベーション研究所 研究員
川本 菜摘氏

Twitterなどを通じ、ワールドワイドで話題になっているのには驚きです。我々が今までアクセスできなかったところにインパクトを与えられたということでしょう。Webを見てください!と堂々と言えますし、ISID内部にも良い影響を与えています。

制作チーム

このサービスに関するお問い合わせ

yu_shigematsu

クリエイティブDiv. シニアディレクター
重松 佑

イノラボとのワークショップでは、どうすれば正しい組織像がユーザに伝わるかを一緒に考え、そこで導き出されたものをデザイン提案に落とし込んでいきました。ワークショップを受けて、実際にサイトデザインを作る段階になってデザイナーとブレストするうちに、組み合わせでどんな形にもなるものとして「積み木」というモチーフが出てきたんです。モチーフを体現するために、パララックス効果とJSを使って全体が大胆に動くサイトを考えました。ただ、細かい動きや表現を説明するのが難しく、早い段階に開発環境でプロトタイピングして、3人に共有しました。

このプロジェクトのサービス