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デザインの失敗にさようなら
| 「デザインハック」コーナーへ |
- 画像を美しく魅せる効果を加えるjQueryプラグイン3選 (2010/3/17)
2つ重ねて比較するBefore/After、部分ごとに切り替えるpanelGallery、ズーム/カーテンなどができるcycle - 現場の無駄な流血を止めるための「プロトタイプ」とは (2010/3/12)
サイトやWebアプリ/RIAの設計やデザインを効率良く進めるには、プロジェクト関係者の想定を一致させていくことが大事だが… - Flashを閃光のごとく高速化するための基礎知識 (2010/3/9)
Flash高速化のための基礎知識や実践的テクニックを紹介する連載。初回は“処理負荷”を調べる具体的な方法を解説します - Windows 7でどんだけ“おばか”なアプリが作れるの? (2010/3/4)
おばかの発想の源やアプリの作り方などについて、おばかアプリ選手権の歴戦の受賞者や、マイクロソフトの代表者に話を伺った。アイデアのご参考に
|
|
スキルアップ/キャリアアップ(JOB@IT)
スポンサーからのお知らせ
| 「いつかは壊れるサーバ」そんな故障に 迅速で安価に手軽に対応する方法とは? New! |
| 「特権ユーザー」の事件を防げ! 万能権限を持つユーザーの管理方法とは? New! |
| 仮想環境の構築とデータ保護の特効薬?! 実績と信頼性の高いパッケージで安心運用 |
| 仮想環境のバックアップもこれまでどおり 「まるごと取ってまるごと戻す」簡単運用 |
| おばかアプリ選手権、第4弾開催中!! ムダにカッコよくてくだらない作品求ム! |
| 社内ファイルサーバを“クラウド”に統合 VPN直結「クラウド型ストレージ」を紹介 |
| その数、なんと400台以上! グループ内 サーバの「統合管理」によるメリットは? |
| 美人!? まあまあ? 気になる いやし系!! PV急増で「美人時計」がとった手段とは? |
| 進化を続ける富士通ストレージETERNUS DX 製品開発者の自信を裏付けるものとは何か |
| 運用管理の課題を“2つの観点”から分析 ユーザー満足度の高い「仮想環境」とは? |
お勧め求人情報

**先週の人気講座ランキング**
〜CCNA編〜
| ◆ | TomcatやJBossなどAPサーバ環境に関する 情報を集約! “業務”用APサーバ大百科 New! |
| ◆ | 一気に解説! 最新のクラスタストレージ 「RAIDを超えたストレージ基準」……など New! |
| ◆ | クラウド的ユーザー体験の変化は脅威か? 仮想化技術を使いこなす運用管理術を紹介 New! |

| ◆ | 上司や部下、部署内メンバーとの情報共有 を“ガラッ”と変えるコラボツールとは? New! |
| ◆ | おばかアプリ選手権、第4弾開催中!! ムダにカッコよくてくだらない作品求ム! |
| ◆ | 社内ファイルサーバを“クラウド”に統合 VPN直結「クラウド型ストレージ」を紹介 |

| ◆ | Twitterのアカウントはなぜ突破された? メールによる新手の攻撃手法とその対策 |
| ◆ | もう仮想化のお試しフェイズは終わりだ! Hyper-V 2.0が基幹システムも仮想化 |
| ◆ | 美人!? まあまあ? 気になる いやし系!! PV急増で「美人時計」がとった手段とは? |

| ◆ | クライアント企業から求められる人材 ⇒IT技術と経営戦略を併せ持つ「戦略家」 |
| ◆ | .NET編集長が実践する「技術情報検索術」 サンプル・コードを簡単に探す“技”は? |
| ◆ | 業務効率と情報セキュリティ対策を両立! 手間なく確実に機密情報を守る方法とは? |

| ◆ | 進化を続ける富士通ストレージETERNUS DX 製品開発者の自信を裏付けるものとは何か |
| ◆ | 運用管理の課題を“2つの観点”から分析 ユーザー満足度の高い「仮想環境」とは? |

| ◆ | 【CTC事例】約30の基幹システムを統合! 膨大なバッジジョブを制御した方法は? |
| ◆ | 仮想化すればコストは削減できるか? 仮想化に必要な「3つの視点」を解説する |
| ◆ | その数、なんと400台以上! グループ内 サーバの「統合管理」によるメリットは? |








