mixiは徹底した社内コミュニケーションからできている
仲里淳2008/9/25
Webサイト制作の要となるエンジニアとデザイナのチームワーク。異なる者同士をつなぐトリックスターからヒントを探る。まずはmixiに聞いた(編集部)
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とタッチパネルインターフェイスに注目 |
[an error occurred while processing this directive]
「デザインハック」コーナーへ |
- GASで棒、円、折れ線など各種グラフを作成、変更、削除するための基本 (2017/7/12)
資料を作る際に、「グラフ」は必要不可欠な存在だ。今回は、「グラフの新規作成」「グラフの変更」「グラフの削除」について解説する - GET/POSTでフォームから送信された値をPHPで受け取る「定義済みの変数」【更新】 (2017/7/10)
HTMLのフォーム機能についておさらいし、get/postメソッドなどの内容を連想配列で格納するPHPの「定義済みの変数」の中身や、フォーム送信値の取り扱いにおける注意点について解説します【PHP 7.1含め2017年の情報に合うように更新】 - PHPのfor文&ループ脱出のbreak/スキップのcontinue【更新】 (2017/6/26)
素数判定のロジックからbreak文やcontinue文の利点と使い方を解説。for文を使ったループ処理の基本とwhile文との違い、無限ループなども併せて紹介します【PHP 7.1含め2017年の情報に合うように更新】 - Spreadsheetデータの選択、削除、挿入、コピー、移動、ソート (2017/6/12)
Spreadsheetデータの選択、挿入、削除、コピー、移動、ソートに使うメソッドの使い方などを解説する
|
|