はじめまして、ドワンゴデザイナーのFJNです。簡単に自己紹介します。
FJNは旧姓から子音を抜いたものですが、よく考えると「F」は「ふ」Jは「じ」しかないじゃん。ということで、お察しの通りフジノです。
ちなみに藤じゃなく富士山の富士、で富士野です。日本に400人ほどしかいないそうです。
趣味は旅行と美味しいものを食べることで、最近はクルーズ旅行にハマっています。
またの機会にご紹介しますね。

ドワンゴでは、niconicoトップページやリアルイベント系のサイトを担当するチームに所属しています。

ニコニコ超会議について

ドワンゴが開催するリアルイベントは、超会議の前身となる大会議にはじまり、いまや超会議を筆頭に、町会議、超パーティー、闘会議など、一年を通してたくさんあります。
昨年には、某新聞で「IT企業」ではなく「イベント企業」のドワンゴと紹介されるほどまでに立派なイベント企業になりました。

ニコニコ超会議は2012年からはじまり、次回の「ニコニコ超会議2016」が5回目の開催となります。年々規模を拡大し、2015年から超パーティーと別開催になり、いよいよ幕張メッセ全体が超会議会場に。IT企業が単独で開催する大規模イベントは今までに例がなかったので、企画運営チームも制作チームも最初は手探りから始まり、少しずつノウハウをためてきました。

今回は、超会議のサイトの変遷を追いながら、大規模イベントサイトの作り方についてお話させていただきます。コーディングや運用にも言及したいのですが、長くなってしまうのでデザイン決定までとします。

「ニコニコ超会議」「ニコニコ超会議2」のサイトデザイン

3回目の開催であるニコニコ超会議3から、サイト制作を私達のチームで担当しています。
それ以前の過去2回のデザインを順を追って見てみましょう。

ニコニコ超会議（2012年）

ニコニコ超会議2（2013年）

この時点ではまだ正式なロゴタイプも、キーカラーも決まっていませんでした。情報がうまくカテゴライズされずサイト内に散らばっていたり、画像をうまく使えていなかったり、更新情報が伝わりづらかったり、改善点はたくさんありました。まさに手探りで超会議を作っている創世記です。

ここから、2014年、2015年のサイトをどのように作ったのかをご説明します。

サイトデザイン制作にあたっての5ステップ

サイトデザイン制作に着手する前に、5つのステップを設けました。

では順を追って見てみましょう。超会議サイトの制作では、以下のように定義しました。

1. ターゲットユーザーとコンバージョンを定義する

ターゲットユーザー

• ニコニコユーザーもそうでない人も、年代性別問わずサブカルチャーやお祭りが好きな人

コンバージョン

• 会場に来場してもらう
• 生放送を視聴してもらう

2. コンバージョン達成のために必要なことを定義する

全員に向けて

• ニコニコを知っている人にも知らない人にも興味を持ってもらう
  • 「その人に刺さる情報」をキャッチできる
  • 何をやっていて誰が出るイベントなのかがわかりやすい
  • 何か面白そう、というワクワク感の演出

来場者に向けて

• 概要・アクセス・入場券の情報がわかりやすい

生放送視聴者に向けて

• 生放送の情報やタイムテーブルがわかりやすい

3. 過去のサイトの反省点を洗い出す

なるべくたくさんの人に意見を聞き、出てきた項目に優先順位をつけます。
運営目線、ユーザー目線それぞれの改善点を書き出します。
「超会議　サイト」で検索したネット上の意見も書き溜めておきます。

4. サイトマップを作りなおす

2013年までのサイトでは、開催概要の中にツアー情報が入っているなど情報が整理されていなかったり、別フォーマットで開くページが多かったりと、ユーザビリティが良いとはいえませんでした。一度すべての必要情報を洗い出し、サイトマップを再構築した結果、このようになりました。

サイトマップを制作する時点で、各ページの構成要素と、ある程度のワイヤーフレームを頭の中に描いておくと、後々の修正が少なくなり効率的です。

5. その年のコンセプトとメインビジュアルを元に、デザインの方向を決める

各年のメインビジュアルとキャッチコピーはこちらです。
制作本部で決まったものが共有されます。
それぞれに特色があり、そこからコンセプトを読み取ることができますね。

以上を踏まえて、ワイヤーフレーム制作、デザインカンプ制作を進めます。
次の項目にて、2014年、2015年のサイト制作を振り返ってみましょう。

実際のデザイン

2014年の振り返り

担当デザイナーは3人アサインされました。
企画ともアイディアを出しあいながら、トップページのワイヤーフレームとデザインカンプはデザイナーそれぞれで制作し、何案か提出します。

トップページのワイヤーフレームはこんな感じで作りました。
私は手描きしながらイメージしていく派です。

それをもとにデザインカンプを制作します。
ベースデザイン決定後のページ制作は担当を割り振りながら進めました。

ニコニコ超会議3（2014年）

2014年のキャッチコピー「全員主役。」をテーマに、「みんなで作る感」「参加したくなる感」を打ち出しました。
トップページと各ブース詳細ページには、みなさんのツイートが吹き出しで読み込まれる演出を入れたり、ツイート誘導の文言を定期的に更新したりして、シェア数増加を狙いました。

その他の改善施策

• 打ち文字のロゴではなく、毎年使えるロゴタイプを作り、テーマカラーを決めて、「ニコニコ超会議」をきちんとブランディングする
• トップページで最新情報をキャッチできる構造に
• どきどき、わくわく、お祭りに参加したくなるような楽しいデザインに
• スマホ・PCそれぞれに最適化したコンテンツ構成に
• ページ構成を見直し、適切な箇所に適切な情報をまとめる
• 出演者ページを新設する

2015年の振り返り

続いて、2015年のサイト制作を振り返ってみましょう。
要素は2014年をベースにしているのでワイヤーフレームは省略しています。

ニコニコ超会議2015（2015年）

2015年のテーマは「日本の文化祭」でした。富士山の入ったメインビジュアルに合わせて、トップページの背景に和柄を取り入れています。
ターゲットごとに適切な情報が出せる、パラメーターで出し分ける枠を用意したり、運営からのお知らせという受動的な見せ方ではなく、「どんな楽しみ方をするか」の目的ごとに情報が探せる枠を用意したり、よりパーソナライズした構成になりました。

その他の改善施策

• 過度な装飾や演出をそぎ落とし、見やすくフラットなデザインに
• 運用コストを抑えつつより魅力的なサイトに
  • バナーサイズを統一する
  • 画像比率を下げてテキストのみでも成り立つ構成に

コンバージョン

通常、サイトではアクセス解析を行い、「PV」「滞在時間」「直帰率」などの数値目標を立ててコンバージョンを測ります。もちろん私達も分析して反省会を行っておりますが、このサイトの最終的なコンバージョンは「来場者数」「視聴者数」なので、その2つの結果をご報告します。
2012年から2015年のリアル来場者数（会場への来場者数）とネット来場者数（生放送視聴者数）の比較です。
※2014年までは同時開催していたニコニコ超パーティーの来場者数を含みます。

というわけで、ともに右肩上がりの理想的なグラフになりました！
もちろん、サイト制作のみならず運営一丸となって、よいイベントにしようと努力した結果です。
超会議のサイトはまだまだ発展途上です。時間の都合でできなかったことや課題も残しています。
今年は更にパワーアップしたサイトになる予定ですので、是非見に来てくださいね！

最後に

超会議のサイト制作を例にお話させていただきました。
イベントサイトにかぎらず、ニコニコはエンドユーザーとの距離が近いので、良い反応も悪い反応もダイレクトに返ってきます。BtoBではなかなか体験できないことです。とてもありがたいことですし、デザイナーとしてやりがいにつながっています。

ネットでの反応もさることながら、社員全員が超会議の現地でスタッフをしているので、リアルにユーザーさんの顔が見られます。ユーザーさんのたくさんの笑顔に触れたときが、この仕事をしててよかったなぁ…！と報われる瞬間です。
ドワンゴデザイナーに興味をお持ちの方は、ぜひ採用サイトを見てみてくださいね。

さて、ニコニコ超会議2016は4/29（金・祝）・30（土）に幕張メッセにて開催です！毎年土日開催でしたが、今年は金土になりますのでお間違えなきよう。
その前に、1/30（土）・1/31（日）ゲームの祭典「闘会議2016」が同じく幕張メッセにて開催されますよ。

皆さんにお会いできる日を楽しみにしています。