mixiは徹底した社内コミュニケーションからできている
仲里淳2008/9/25
Webサイト制作の要となるエンジニアとデザイナのチームワーク。異なる者同士をつなぐトリックスターからヒントを探る。まずはmixiに聞いた(編集部)
- - PR -
Webサイトやアプリケーション制作の成功の鍵を握るプロジェクトのチームワーク。エンジニアとデザイナ、またはクライアント企業やディレクタ、コーディング担当間のコラボレーション術に定石はあるだろうか? そのヒントを見付けるためのインタビューを試みる。風通しを良くするための「風穴」を開ける「トリックスター※」に聞く。
※ トリックスター……この連載でのトリックスターのイメージは、相反する2つの者同士が、別個に機能する共同体をつなぐ役目を果たす人。閉鎖的な空間に風穴を開けて風通しを良くする人。エンジニアとコーダー、デザイナの機能システムが組み合わさった緩やかな共同体を創造する人たちです。
多くのファンに支えられるmixiのUIデザインを探る
第1回目は、ユーザー数が1500万人を超え、いまや名実ともに日本最大のWebサービスといえるSNSの「mixi」。男性女性、若者から年配までそのユーザー層は幅広く、サービスを提供する側としてはターゲットが絞りにくい。
![]() |
| mixiのプロジェクトを支えるコミュニケーションフロア。フロア半分を使った社内休憩/交流スペースのコラボレーションスペース、通称「チャットハブ」。ドリンクや軽食、雑誌コーナーやマッサージチェア、卓球台やビリヤードなどが用意されている |
デザイン面においても、ユーザーの利用期間やスキルにも差があるため、正しい答えを見付けるのはなかなか難しい。mixiのUI(ユーザーインターフェイス)デザインやクライアントサイドの開発を担当するミクシィ開発部ウェブデザイングループの大形尚弘氏と馬場沙織氏に、企画の立ち上げから実際のサービスとして公開するまでのプロセスや、他部署とのコミュニケーションのために心掛けていることを聞いた。
学生時代からのコーディングとサービス設計
開発部ウェブデザイングループのコーディングチームに所属する大形氏は、大学在学時にWeb制作会社でのアルバイト経験を通してJavaScriptなどを習得。Web制作に限らない一般的なデザイン事務所にも勤めたこともあるが、自分に向いているのはコーディングだという結論に達した。「デザインよりもコーディングの方にずっと興味があり、そこでデザイナとお客さまとの間に立ってまとめるということをしていました。それが自分の一番やりたいことだなと思っていたら、ぴったりの環境があるよと誘われてミクシィに入ることになりました」(大形氏)。
| 大形尚弘(おおがた なおひろ)開発部/ウェブデザイングループ/コーディングチーム。慶應義塾大学環境情報学部卒。在学中にJavaScriptを用いたWebプロジェクトに参加し、以後デザイン制作プロダクションにてHTML/CSS/JavaScirpt/ActionScriptといったクライアントサイド全般の開発を行う。2008年5月、ミクシィに入社。mixiのマイミクシィ一覧やOpenIDをはじめ、コーディングにかかわるプロジェクト全般を担当。 |
同じく開発部ウェブデザイングループでデザインチームに所属する馬場氏は、大学卒業後にWeb制作会社に就職してWebサービスの仕組みや技術を学んだ。大学時代からデザインやメディア関係の研究を通してWebの技術にも親しんでいたが、サービスやそのUI設計といった分野に興味があったという。
「以前からデザインだけでなくサービスというものにも興味がありました。サービスを作ることにもかかわりながらデザインもできるような環境にいたいなと考え、縁あってミクシィに入社することになりました。大学ではデザインを学んでいましたが、グラフィックデザインのような平面に限らず、メディアとしてのデザインやサービスを前提としたデザインということを研究していました。ですから、いまの仕事もその延長線上にあるといえます」(馬場氏)。
デザイン担当者も参加するプロジェクトチームの議論
mixiにおける新サービスや広告企画、リニューアル企画のスタート地点となるのがサービス企画部と営業部。開発部に所属する大形氏と馬場氏の2人にとって、仕事上の重要なやりとりの多くがこのサービス企画部と営業部との間で発生する(図1)。
![]() |
| 図1 mixiの組織図 ウェブデザイングループは、サービス企画部や営業部、開発部のエンジニア、そしてユーザーとの間に位置する中心的な存在でハブとして機能することが求められる |
サービス企画部では、mixiの将来のあるべき姿を考え長期的な目標を設定し、それを実現するための企画を立てる。カテゴリごとにチームが分かれており、例えば「mixi Radio」はミュージック担当チームによる発案だという。
もう1つの営業部は、ある企業の公認コミュニティを作るといった企画を担当する。デザインや機能面でのリクエストがあれば開発部のデザイナやエンジニアとともに議論し、形にしていく。営業といっても1つのサービスを立ち上げることなので、一般的な企画部に近い存在だといえる(mixiの広告掲載営業は、社外の代理店を通して行う)。
まずサービス企画部や営業部の中で企画が承認されると、次は関係部署のスタッフも加えたプロジェクトチームを組織し、企画の核となる要素やどこまで実現するべきか議論を行う。このときに開発部からも、大形氏や馬場氏をはじめデザイナ、コーダー、アプリケーションエンジニアなどが参加する。
| 馬場沙織(ばば さおり)開発部/ウェブデザイングループ/デザインチーム。武蔵野美術大学造形学部視覚伝達デザイン学科卒業。大学卒業後は、Web制作会社にてサイト制作、サービス会社にてWebアプリのUIデザインに携わる。2007年10月にミクシィに入社。現在は、mixiのUIデザインおよびディレクション業務を担当。 |
「企画の概要を説明してもらい、どういうイメージにしていくかのディスカッションが始まります。mixiのデザインという仕事は幅が広く、企画段階から会議に参加して、どういう画面に落とし込めばそのサービスがユーザーに伝わるかというところから一緒に考えます。実際、そこでの要件定義と仕様決定にはかなりの時間を費やします」(馬場氏)。
| 1/2 |
| INDEX | ||
| WebとUIをつなぐトリックスター
(1) mixiは徹底した社内コミュニケーションからできている |
||
| Page1 多くのファンに支えられるmixiのUIデザインを探る 学生時代からのコーディングとサービス設計 デザイン担当者も参加するプロジェクトチームの議論 |
||
| Page2 全員の合意が得られるまで、とことん議論をし尽くす デザインの統一感は、スタッフの意識共有によって実現 数字だけにとらわれるのではなく、将来のあるべき姿を 手掛けたサービスはユーザーのもの HTML 5とタッチパネルインターフェイスに注目 |
||
WebとUIをつなぐトリックスター バックナンバー 連載インデックスへ»
- 第1回 mixiは徹底した社内コミュニケーションからできている
- 第2回 テレビでYahoo!―デバイスが変わればUIデザインも
- 第3回 画像とコードの触媒Flash Catalystについて語りますと
- 第4回 イラストSNS、ピクシブの「以心伝心」少人数メソッド
- 第5回 プロトタイピングでUIデザインの失敗にさようなら
| 「デザインハック」コーナーへ |
- いまさら聞けないTwitter超入門−@IT記事も対応なう (2010/2/4)
Twitterは最近話題のつぶやきツール。基本的な使い方から、iPhoneアプリの使い方、RTの解説、4人のご意見番の活用例や感想まで - HTML5は開発者側の都合。ユーザーには関係ない (2010/2/2)
3つのレンダリングエンジンを載せている“国産”ブラウザベンダは、HTML5やWeb/ブラウザの進化について何を語るのか - テキスト・フォント周りをキレイに見せるCSS、13選! (2010/1/29)
無数にあるCSSのプロパティを大まかに分類し、1つずつ紹介していく本連載。初回は、テキスト・フォント周りについて - OpenGL ESが大変な3Dアプリ開発を楽にするUnity (2010/1/27)
iPhoneゲーム開発に必須のOpenGL ES。そのコーディングに手こずっている方に有用なツールを紹介し簡単なサンプルを作成します
|
|
スキルアップ/キャリアアップ(JOB@IT)
スポンサーからのお知らせ
お勧め求人情報

**先週の人気講座ランキング**
〜CCNA編〜
| ◆ | 企業の仮想化に足りない“発想”とは? 仮想化運用管理のキモは意外なところに! New! |
| ◆ | 操作もマニュアルも分かりやすい! ユーザー視点で開発されたPC管理ツール New! |
| ◆ | 仮想化すればコストは削減できるか? 仮想化に必要な「3つの視点」を解説する |

| ◆ | セキュリティを知り尽くす上野氏が登壇! @ITメールソリューションLive! in Tokyo |
| ◆ | 運用管理の課題を“2つの観点”から分析 ユーザー満足度の高い「仮想環境」とは? |
| ◆ | 世界に通用するストレージの作り方とは? 製品に込めた思いを富士通の開発者に聞く |

| ◆ | OSSで手間も時間も、障害も減った―― 「マピオンの事例」オープンソース活用法 |
| ◆ | 「ノートPCの持ち出し禁止」で大丈夫? 情報漏えいを防ぐ管理手法とインフラは? |
| ◆ | 1日の処理を1秒に――MySQLの達人が語る 「コスト削減」できるチューニング |

| ◆ | ドキュメント作成を自動化して、SEの作業 効率を大幅アップ! Visio 2007の魅力 |
| ◆ | 急速に広がるHyper-Vでのサーバ仮想化 そのベストプラクティスをデルが解説 |
| ◆ | @IT主催セミナーで語られた、「担当者に 求められるセキュリティ対策」をレポート |

| ◆ | @IT「Windows 7」 特設サイトオープン! 最新情報・移行ノウハウを公開しています |








