プロジェクト Projects

  • プロジェクトトップへ戻る

mixiの未来を指し示す新しいUIを生み出すために ―mixi Touchプロジェクト

瀧本晋也 UX統括部

企画フェーズ

2009年5月、iPhoneユーザーが急激に増加していったことも踏まえ、スマートフォン用のウェブ閲覧に最適化したmixi Touchを提供当時、「シンプルな機能をいかにスピーディに実装するか?」に集中してつくられたそのmixi Touchは、今年2011年5月、「スマートフォンでの快適なコミュニケーションとは?」を概念から考え直し、リニューアルした。

中心となるチームメンバーは、エンジニアの滝本、そしてデザイナー兼インフォメーションアーキテクト担当者。PCで利用できる機能は基本的に全部利用可能にすることとなったが、そこで重要となったのはUI(UserInterface)だった。

これからのソーシャルサービスとしてスマートフォンユーザーが利用するのがmixi Touchです。今までのmixi体験から、さらに一歩先を行くユーザー体験を実現するにはどうしたらいいのか?ユーザーがどのようなコミュニケーションをしていきたいのかを常にイメージしながら、その時の体験を表現するUIが必要と感じていました。だから、エンジニアもデザイナーも、最初から一緒になって徹底的に議論をしていくことが必要だとおもいました。そうしなければ良いものは生まれない。

「今までのmixiユーザーは、『日記を使う』『ボイスを使う』など、それぞれのサービスを個別に使う状況になっていました。『日記だけのユーザー』『ボイスだけのユーザー』という状態では、それぞれのユーザーが分かりあえないんです。だから、彼らのポストがクロスするようなコミュニケーションに変えていきたいと考えていました。

瀧本は、mixi Touchのホーム画面のつくり方で、この考えを実現できると確信していた。同じ投稿画面で、ボイスや日記などさまざまな種類の投稿を自由に行えるようにしていく。異なる機能からの投稿内容が、ホーム画面でタイムラインとして混ざりあい、ユーザーの目に流れていく。それによって、今までのmixiとは違う新しいコミュニケーションに変えられるのではないか?そんな設計を行うことで、瀧本たちは今後のmixiが進むべき方向を指し示したのであった。

開発フェーズ

新しいmixi TouchのUIを実装するためには、JSを活用してウェブアプリ的な実装をする必要がありました。少ないタップでさまざまな投稿がすぐに行えるインターフェース、ユーザーの待ち時間を減らす仕掛けなど、使いやすさと新しさの両立を目指した実装を工夫しています。また、JSを使ったUIのフレームワークやライブラリを作るなど、開発のしやすさにも気を配りました。また、デザインに関しても同様に、コンポーネント化を意識しています。PCの機能を全て調査して、コンポーネント化したデザインパーツに落としこんでいます。それにより、利用しやすいデザインパーツとなるだけでなく、全ての画面・機能で綺麗に統一された分かりやすいデザインにすることができています。

ホーム画面のタイムラインUIのためには、裏側で新しい仕組みのDBが必要になった。難しい開発ではあったが、たんぽぽグループの廣木がそこを手伝ってくれたことで無事実現、リリースに漕ぎ着けることができた。

運用フェーズ

mixi Touchで気をつけなければならない点は、マルチデバイス対応だった。ウェブだからこそiPhoneやAndroidなど複数のデバイスに対応できる利点はあるが、逆に、端末ごとの違いを吸収していかなければならない。Androidでは、キャリアや端末によって動かないことがある。そのあたりの調査、対応をすることにはかなりコストがかかったが、知見は溜まっていった。

得られた知見は勉強会やブログなどでどんどんアウトプットしていきたいと考えています。ブラウザの新しい仕様やバージョンが出てきたらテストをしていき、そこで得られたノウハウはオープンにしていきます。それらを囲い込んでも勿体無いですよね。知見やノウハウはオープンにして多くの開発者と共有していきます。そしてビジネスレイヤーでは戦っていく。そういう関係をつくることができればよいと考えています。

mixi Touchをよりよいものにしていくために、ABテストやエスノグラフィ調査などで、ユーザーからのフィードバックを受けてトライ&エラーできる状況を作っていきたいと瀧本は言う。新しいUX/UIを実現しつづけていきたいからこそ、ユーザーに向きあったモノづくりを実践していこうとしている。

「スマートフォン用mixiアプリを利用するユーザーも増えてきている中、ウェブとしてどうあるべきなのか?」
「タブレットやChromeOSなども見据えながら、ウェブアプリとして、生活の中で友人を体感するコミュニケーションをうみだすにはどうすればいいか?」

デバイスやインフラが揃ってきた状況の中で、やりたいことができるようになってきたことにワクワクしています。

彼は、さまざまなデバイス、シチュエーションからアクセスしてくるユーザーたちの、タッチポイントの最適化を実現していきたいと考えている。

スマートフォン用のウェブ版mixiとして開発されたmixi Touchには、様々なUIのアイデアが盛り込まれている。

完成したmixi Touch

ページの先頭へ