• はてなブックマークに追加
  • Yahoo!ブックマークに登録
mixiのiPhoneアプリ・リニューアルプロジェクト<デザイナー編>
位置にこだわれ!UIデザインを巡るミクシィの格闘とは
iPhoneでソーシャル・ネットワーキングサービス「mixi」を楽しむための公式アプリが、2012年2月のバージョン10で大きな飛躍を遂げた。その開発チームのプロジェクトストーリー。第一回はUI・UXデザイナーを中心に描く。
(取材・文/広重隆樹 総研スタッフ/宮みゆき 撮影/佐藤聡)作成日:12.03.07
誰もが投稿したくなるボタン──バージョン10に込めたもの
永尾 正史氏
UX統括部デザイングループ
永尾 正史氏
佐々木 りの氏
UX統括部 デザイングループ
佐々木 りの氏

 ミクシィは2012年2月に、iPhoneからソーシャル・ネットワーキングサービス「mixi」を楽しむための公式アプリ「mixi」のバージョン10.0をリリースした(2012年2月27日現在は10.1にアップデートされている)。スマートフォンの本格的な普及に伴い、アプリ開発がリスタートしたのは2010年暮れから。2011年3月に、バージョン2.0.0がリリースされると、その後の改修作業は急ピッチで進む。年内だけで16回に及ぶアップデートが行われ、瞬く間にバージョンは9.2までアップした。

 2012年2月の10.0に向けた改修作業は、今まで以上に大幅なものとなった。機能的にもインタフェースデザイン的にもアプリケーションは完全に生まれ変わったといってもよいだろう。デザインチームを率いたのは、2010年中途入社の永尾正史氏だ。
「2.0の時点からこのアプリのUI・UXデザインに関わっていますが、10.0はかなり大きな飛躍でした。ユーザーのコミュニケーションのしやすさに最重点を置き、全体を決めていきました」

 デザインで特に注力したのは、片手での操作に留意した「投稿」のUIだ。利き腕にかかわらず操作しやすいように「投稿」ボタンを画面下の中央に置いた。ボタンをタップすると「つぶやく」「日記を書く」「写真アップロード」「チェックイン」の4つの選択肢が出てくる。テキスト・写真・位置情報など、投稿したいというユーザーのモチベーションを上手くとらえたい。「投稿」ボタンが最も押しやすい位置にあれば、ユーザーが必要な動作にスムーズに入っていけると考えた。

 iPhoneの標準的なUIから違和感なく入っていけるような工夫もしている。
「スマートフォンに対するリテラシーが高くないユーザーでも、簡単に操作できることにこだわりました。そのためにUIを複雑にすることは、避けなければなりませんでした。iPhoneを購入したばかりのユーザーが自然にmixiのスマートフォンアプリを使えるようになることが理想です」

 ただ、一部に関しては、mixiならではのUIを採用する必要もあった。AppleにはiPhoneアプリのUI設計やプログラミングにおける基本的なガイドラインがあり、ベーシックとなるインタフェースデザインを推奨するともに、ルールを設けているルールに反すると、App Storeへ申請時にリジェクトされることもある。

 つまり、iPhoneの標準的なUIコンポーネントを用いて、mixiに最適化されたUIを設計する必要がある。ガイドライン遵守し、Appleの文化を守りつつ、いかにmixiを使いやすくするかも改修のポイントだった。標準UIとカスタムUIの結合にも細かい注意を払う必要があったのだ。

公式アプリ「mixi」バージョン 10.1 の新機能
mixiらしい温かみや優しい印象を生み出すためのルック&フィール

 ここであらためて、ミクシィ社内で使われている「デザイン」という言葉の定義を振り返ってみよう。デザインは大きく分けて「情報設計」と、「ビジュアルデザイン」の工程がある。ここでいう情報設計は、アプリ全体が何を達成するものであるかという機能要件をベースに、画面のどのエリアに何を置くかを考え、タップやフリック動作によって、どのように画面が遷移するのかを設計する作業だ。

 情報設計の段階では、ワイヤーフレームを制作することで情報の可視化を行う。ラフスケッチを描いて、画面の大まかな設計と、画面遷移を検討する。Webサイトの設計と基本的には同じだ。アプリ開発におけるこの作業は「UXフロー」と呼ばれることもある。検討段階でさまざまなアイデアがひらめく。ホワイトボードに思いついたアイデアを書き出しながら、設計を詰めていく。

 こうして固まった全体の仕様を個別の機能に反映させ、さらに画像に落としていくのが「ビジュアルデザイン」だ。今回のプロジェクトで、ビジュアルデザインを担当したのが、佐々木りの氏。2011年度の中途入社だが、mixiのPCサイトのデザインにも関わっており、mixiのことはよく理解している。ただ、iPhoneアプリに関わるのは今回のバージョン10.0が初めてだった。
「アプリ全体の枠組みはできていたので、プロフィールページなど個別の機能をデザインしました。A4コピー紙にiPhoneの形を描き、それを何枚もコピーして、手書きで画面のラフスケッチを描いていきます。そこである程度固まると、PhotoshopやIllustratorで絵を起こす。これをiPhoneの実機に取り込んでチェックします。その繰り返しでした」

土戸 錬氏
UX統括部
ソーシャルクライアント企画チーム
サービスディレクター
土戸 錬氏

 永尾氏から言われていたのは、「オフィシャルのアプリとして、mixiらしい温かみや優しい印象を表現して欲しい。罫線ひとつとっても暗すぎず、淡すぎないように」という微妙な注文だ。むろん、こうした要求は口頭だけではうまく伝わらない。デザイナーだけでなく、エンジニアにも守ってもらう基本的なレギュレーションを、永尾氏は作成した。
「使用する色のカラーコード、罫線の太さ、書体に至るまで細かい利用規則を作ったのです。佐々木にはそれをベースに絵を描いてもらう。画像をそのまま使う場合だけでなく、プログラミングで全体の表情を演出することもあります。そのために、このレギュレーションはエンジニアにも共有します」

 永尾氏は、昨年のミクシィのコーポレートロゴの変更にも関わったデザイナー。企業ポリシーをいかにデザインに反映させるかについては強いこだわりを持っていた。iPhoneアプリではmixiのPCサイトと“ルック&フィール”を少し変更している。mixiらしさ保ちつつ、iOSのインタフェースデザインに則した提案すべきだと思ったからだ。そのあたりの柔軟性も、永尾氏らしいところかもしれない。

ボタンを巡る、デザイナーとエンジニアのディスカッション
衣川 憲治氏
UX統括部 開発グループ
ソーシャルクライアント開発チーム
衣川 憲治氏

 デザインの進行とエンジニアによるプログラム実装は並行して行われる。エンジニアチームをまとめていたのは衣川憲治氏だ。
「最初にデザイナーから見せられるのは、ホーム画面のざっくりとした絵ですね。この段階で、そのデザインや機能がそもそもプログラミング的に実現可能かどうかをチェックします。どんなによいデザインでも、実装できなければ意味がない。ここはこうしたほうが作りやすいねとか、こういう作りだとコストがかかりすぎるとか、デザイナーと議論します」

 衣川氏は、iPad専用アプリの開発にも関わってきた。iPhoneアプリのデザインは、iPadアプリと比較しても違和感がなく、いい出来映えだと思った。実装的にも問題ない。となれば、さくっと実装してしまうのがミクシィのエンジニアだ。

 ところで、エンジニアが頭を抱えるデザインとは、どういうものか。
「OSやデバイス側の標準インターフェイスからあまりにもかけ離れすぎていると、実装には時間がかかります。ですから、納期までにここまでは可能だが、これ以上は次のバージョンでの課題にしたほうがいい、というような時間軸での検討も必要。そのあたりも、デザイナーとのディスカッションのテーマですね」(衣川氏)

 実は、バージョン10.0の投稿ボタンは、やや特殊な位置にある。標準的なiPhoneアプリの場合、右上に主要なボタンが置かれるのが一般的である。
「つい押してみたくなる、つい使いたくなるというようなボタンにしたかったんです。例えば、画面の右上に投稿ボタンがあると、片手で操作したいとき親指を大きく伸ばさないといけない。とりわけmixiは女性ユーザーが多い。日本女性の小さな手には右上のボタンは押しやすくはないんです」(永尾氏)

 このボタンの位置を巡って、エンジニアとデザイナーの間に、実は長い議論が交わされていたのだった。

ここが違う──ディレクターの目の付けどころ

 その議論をハンドリングしていたのは、ディレクターの土戸錬氏だ。
「議論の共通となる軸はユーザビリティです。ユーザーがどんなシーンで、どんな思いで、アプリを操作し、mixiを楽しむのか。それをベースとしつつ、エンジニアは実装性を、デザイナーはUIやグラフィックを重視する。共通認識の上で、互いがぶつかる争点がある。しかし、これはいいデザインといい実装をするために欠かすことのできないバトルなのです。それが深まれば自ずと解は出てくる。だから、共通認識や本質がぶれることなく、正しい議論になるようハンドリングを心掛けていました」

 もちろん、ディレクターとして意見を伝えることもある。デザイナーともエンジニアとも違う視点が彼にはあるのだ。
「ディレクターは、サービス提供者としてこのアプリにどの機能を組み込むべきなのか、ということを考えなくてはいけません。ユーザーに何を提供しようとしているのか、ということですね。さらに設計やデザインを変えることで、どれぐらいユーザーの利用しやすさにつながるかという試算も必要です。それから、App Store全体のトレンドも気になります。流行りの他アプリと比べて、mixiのアプリがどのようなデザイン的特性を持っており、どこまで学習コストを要するものかは、いつもチェックしています」

 プロダクトを世に送り出す決定は、最終的には事業判断だ。プロジェクトだけの枠には収まらない。そうした、社内の上層部や他部署との交渉は、土戸氏の役目になった。上下左右からの要望を採り入れたり、場合によっては既存のデザインを取り壊すほどの調整が必要な場合もある。iPhoneアプリの場合、流通マーケットを運営するアップル社との交渉も彼の仕事のひとつだった。デザイナー、エンジニア、ディレクター、三すくみの議論の中で、数ある選択肢がだんだん絞られてくる。デザインとプログラムの仕様が固まっていくのだ。

自分の殻にこもれば、進歩はない。それぞれのコミュニケーション・スタイル

「mixiは機能が豊富。分かりやすく迷わない、直感的な操作感を追求しました。そういう面では、まだ課題はあると思いますがいいものができたと思います」と、佐々木氏は満足げだ。

「永尾さんが作ったレギュレーションは大変有効でした。口頭ベースだったり、資料がなかったりすると、伝達が曖昧になるし、担当が途中で変わると、最初からやり直しです。レギュレーションのおかげで、プロジェクトはスムーズに進んだと思います」と、衣川氏も評価する。

「このプロジェクトだけに限りませんが、ミクシィの仕事は高度なチームワークによって支えられているということをあらためて実感しました。自分は、ここしかやらないとか、自分の考えは絶対だとか思い込むと、もうそれ以上の進歩はありません。時には、エンジニアが実装したものを見て僕が意見を言うこともあったし、エンジニアがつくったものを見て、新しい気付きを得ることもありました」と、永尾氏も振り返る。

 iPhoneアプリは今後もさらにバージョンアップを続ける。土戸氏は、「いつもながら永尾さんとじっくり話をしながら作り上げることができました」というが、チーム内ではそれが不思議な現象だったらしい。

「永尾さんはいつも忙しいので空き時間を見つけるのがむずかしいのですが、なぜか土戸さんだけは膝詰めでよく話していた」(佐々木氏)という証言もある。二人の相性がよかった、ということか。さまざまなスタイルのコミュニケーションの中で、揉まれ、磨かれていく。スマートフォン時代のmixiを支えるクライアント、バージョン10.0はこうして船出をしたのだった。

mixiのiPhoneアプリ・リニューアルプロジェクト<開発者編>に続く(3/15公開予定)
UX統括部 デザイングループ 佐々木 りの氏

販売職からwebデザイナーとしてHP制作会社に転職。ミクシィには1年間の派遣契約を経て、現在契約社員として勤務。PC版「mixi」、「mixi Touch」の新機能や改修案件などのデザインを担当。現在は、iPhoneアプリのバージョンアップに向けて、引き続きUI設計・デザインを担当。

UX統括部 ソーシャルクライアント 企画チーム サービスディレクター 土戸 錬氏

2002年韓国の高校を卒業し、来日。日本語学校での語学留学を経て、日本の情報系大学に進学し、基礎的なプログラミングを勉強。大学卒業後、09年の新卒としてミクシィに入社。

UX統括部 デザイングループ 永尾 正史氏

Web制作会社で大規模サイトの制作やブランディングに携わった後、2010年1月にミクシィに中途入社。新mixiロゴデザイン、mixi Touch、mixiチェック立ち上げなどを経て、現在はiPad、iPhoneアプリの情報設計・ビジュアルデザインを担当・監修している。

UX統括部 開発グループ ソーシャルクライアント 開発チーム 衣川 憲治氏

プログラミング歴は15歳から。電気通信大卒業。大手玩具メーカーに就職し、ロボットのプログラミング、回路設計に従事。退職後、IPAの2009年度下期「未踏IT人材発掘・育成事業」に応募し採用される。2010年11月にミクシィ入社。

  • はてなブックマークに追加
  • Yahoo!ブックマークに登録

このレポートに関連する企業情報です

◎インターネットメディア事業/ソーシャル・ネットワーキング サービス『mixi』  ◎インターネット求人広告事業/Webな人の転職サイト『Find Job !』(株式会社ミクシィ・リクルートメント提供)続きを見る

あなたを求める企業がある!
まずはリクナビNEXTの「スカウト」でチャンスを掴もう!
スカウトに登録する

このレポートの連載バックナンバー

人気企業の採用実態

あの人気企業はいま、どんな採用活動を行っているのか。大量採用?厳選採用?社長の狙い、社員の思いは?Tech総研が独自に取材、気になる実態を徹底レポート。

人気企業の採用実態

このレポートを読んだあなたにオススメします

mixiのiPhoneアプリ・リニューアルプロジェクト<エンジニア編>

全面リニューアルで機能改善!mixi公式アプリ開発秘話

人気企業の採用実態ソーシャル・ネットワーキングサービス『mixi』を楽しむためのiPhone版公式アプリが、2012年2月のバージョン10.0リリ…

全面リニューアルで機能改善!mixi公式アプリ開発秘話

来春には大阪、福岡に開発拠点を設置

サイバーエージェント、スマホ技術者の育成と採用強化

人気企業の採用実態サイバーエージェントのスマートフォン対応が急速に進んでいる。積極的な中途採用を展開してきたが、スマートフォン開発経験者はまだ市場…

サイバーエージェント、スマホ技術者の育成と採用強化

“シンプルかつリッチ”を目指すスマホ向け究極のブログサービス

Amebaの新スマホブログ「Simplog」開発秘話

サイバーエージェントがスマートフォン向けの新しいブログサービスを8月にリリースした。「Simplog」は“シンプルだけ…

Amebaの新スマホブログ「Simplog」開発秘話

予約受付システム開発から、新事業サービス提案まで

過去最大規模!iPhone5販売予約受付システム開発秘話

人気企業の採用実態ソフトバンクモバイルの情報システム部門で開発を行う社内SEの仕事は、iPhone5を販売する際の予約を受け付けるための…

過去最大規模!iPhone5販売予約受付システム開発秘話

ソーシャル時代を見据えた様々な仕掛けと舞台裏

ミクシィとバスキュール「mixi Xmas」開発3年間の軌跡

人気企業の採用実態「mixi」上で、クリスマスシーズンに実施しているソーシャル・キャンペーン企画「mixi Xmas」。この大規模なイベ…

ミクシィとバスキュール「mixi Xmas」開発3年間の軌跡

こんな時代に人事が欲しがる

年収1000万円超プレイヤーの自己投資術

不景気だから年収が下がるのは当たり前、と思ってはいませんか? 世の中には、こんな時代でも年収が上がり続ける「不況知らず…

年収1000万円超プレイヤーの自己投資術

この記事どうだった?

あなたのメッセージがTech総研に載るかも

あなたの評価は?をクリック!(必須)

あなたのご意見お待ちしております

こちらもお答えください!(必須)

歳(半角数字)
(全角6文字まで)
  • RSS配信
  • twitter Tech総研公式アカウント
  • スカウト登録でオファーを待とう!
スマートグリッド、EV/HV、半導体、太陽電池、環境・エネルギー…電気・電子技術者向け特設サイト

PAGE TOP