位置にこだわれ！UIデザインを巡るミクシィの格闘とは

iPhoneでソーシャル・ネットワーキングサービス「mixi」を楽しむための公式アプリが、2012年2月のバージョン10で大きな飛躍を遂げた。その開発チームのプロジェクトストーリー。第一回はUI・UXデザイナーを中心に描く。

（取材・文／広重隆樹　総研スタッフ／宮みゆき　撮影／佐藤聡）作成日：12.03.07

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の結合にも細かい注意を払う必要があったのだ。

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

　情報設計の段階では、ワイヤーフレームを制作することで情報の可視化を行う。ラフスケッチを描いて、画面の大まかな設計と、画面遷移を検討する。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はこうして船出をしたのだった。