Baidu×MdN スペシャルトーク
SimejiのUIデザイン開発に見る
これからのWebデザイナー像
取材・文:久保靖資 / 写真:佐藤弘樹
山口: 矢野さんは、どうしてSimejiの開発に携わるようになったのですか。
矢野: 実はSimejiの開発者である足立昌彦と、日本Androidの会を通じて以前から知り合いだったんですよ。足立がIMEを開発していて、そのUIデザインを手伝ってくれないかと誘っていただいたのがきっかけですね。
山口: いわゆるグラフィックデザインとは違って、アプリのUIデザインは機能をデザインするという側面があると思いますが、基本的な部分からデザインしていったという感じですか。
矢野: おっしゃるようにアプリですから、まずはエンジニアリングとして実現したい機能があります。SimejiはIME(日本語入力メソッド)ですから、機能も限定的です。UIも基本的なフレームワークはすでにできあがっていますから、最初のうちは細々とした情報の最適化をしていた感じですね。たとえば「半角カナ」ボタンをアイコン化するとか、マイナーチェンジですね。
山口: 特にIMEだと、すでに世間的なお作法というか、誰もが使い慣れている今のUIから大きく離れることはできず、ある意味デザイナーとしての腕の振るいどころがないのかな。
矢野: ただ、今回のバージョン6.0ではメジャーバージョンアップということで、フルモデルチェンジではないですけど、かなり大幅なUIデザインの改良を行っていますよ。その際、ユーザーの振る舞いを知るというのは大事なことです。Simejiはユーザーの操作ログを記録する機能を実装しています。タップされたポイントやその回数といった数値をログとして記録し、それを解析することで、ユーザーの振る舞いを知り、UIデザインを考えるうえでの指針というか、方針を立てることができるんです。
山口: メニューパネルがスライドして出てくるやつですね。
矢野: 前バージョンまでは、いろいろなアイテムを使い分けるために複数の操作ステップが必要で、しかもタップする場所があっちこちにあったりと操作性が少し煩雑でした。そこで導線をまとめようという話になったんです。スマホ版のFacebookとか、もうそろそろドロワーというUIは多くの人が使い慣れはじめているだろうと想定して、キーボードの裏にいろいろなアイテムメニューなどを隠しておき、マッシュルームボタンでスライド表示させるというところに落ち着きました。
山口: メニュー部分は縦スクロールするから、メニューの拡張性も兼ねてますよね。こういったUIデザインは矢野さんが?
矢野: 今は開発チーム体制を敷いているので、私一人で考えるわけじゃないです。UIデザインチームで意見を出し合い、議論して決めていく。ドロワー自体もそういった議論の中で生まれたものです。
山口: ただ最終的な意思決定はするわけですよね。
矢野: ええ。そこは私が(笑)。というか、そういう仕組みになっている。決まりごとというか、チーム内でそういうコンセンサスが自然にできるのがいいんですけどね。でも、製品として出している限り、これだけ大胆なUI変更をしたわけで、いろいろなユーザーのご意見ありますし、誰かが矢面に立つ必要もある。そういう役目ですかね(笑)。
[記事リンク]
>>> 第1話 大胆にUIを変更したSimejiの開発とは
>>> 第2話 数字に振り回されない分析とユーザーの声
>>> 第3話 これからのWebデザインとWebデザイナー
●関連記事
【ニコニコ超会議2】Event Report2
「しめじェクションマッピング」はこちら
[プロフィール]
SimejiのUIデザイン開発に見る
これからのWebデザイナー像
Android向けの日本語IMEとして人気のSimejiがスライドUIを実装するなど、バージョン6.0では大幅なUI改良が行われた。そのSimejiのUIデザインを担当するのが、バイドゥでモバイルプロダクト事業部マネージャーの矢野りんさん。Webをはじめとした数々のデザインワークやデザイン関連書籍の執筆でも著名な矢野さんと月刊MdNなどの編集長を歴任した弊社山口がWebデザインについて語り合った。
取材・文:久保靖資 / 写真:佐藤弘樹
第1話 大胆にUIを変更したSimejiの開発とは
―― 日本語IMEとしての機能性をデザインする
(写真をクリックすると拡大します) |
矢野: 実はSimejiの開発者である足立昌彦と、日本Androidの会を通じて以前から知り合いだったんですよ。足立がIMEを開発していて、そのUIデザインを手伝ってくれないかと誘っていただいたのがきっかけですね。
山口: いわゆるグラフィックデザインとは違って、アプリのUIデザインは機能をデザインするという側面があると思いますが、基本的な部分からデザインしていったという感じですか。
矢野: おっしゃるようにアプリですから、まずはエンジニアリングとして実現したい機能があります。SimejiはIME(日本語入力メソッド)ですから、機能も限定的です。UIも基本的なフレームワークはすでにできあがっていますから、最初のうちは細々とした情報の最適化をしていた感じですね。たとえば「半角カナ」ボタンをアイコン化するとか、マイナーチェンジですね。
山口: 特にIMEだと、すでに世間的なお作法というか、誰もが使い慣れている今のUIから大きく離れることはできず、ある意味デザイナーとしての腕の振るいどころがないのかな。
矢野: ただ、今回のバージョン6.0ではメジャーバージョンアップということで、フルモデルチェンジではないですけど、かなり大幅なUIデザインの改良を行っていますよ。その際、ユーザーの振る舞いを知るというのは大事なことです。Simejiはユーザーの操作ログを記録する機能を実装しています。タップされたポイントやその回数といった数値をログとして記録し、それを解析することで、ユーザーの振る舞いを知り、UIデザインを考えるうえでの指針というか、方針を立てることができるんです。
―― ユーザー動向を踏まえたUIの改良
(写真をクリックすると拡大します) |
矢野: 前バージョンまでは、いろいろなアイテムを使い分けるために複数の操作ステップが必要で、しかもタップする場所があっちこちにあったりと操作性が少し煩雑でした。そこで導線をまとめようという話になったんです。スマホ版のFacebookとか、もうそろそろドロワーというUIは多くの人が使い慣れはじめているだろうと想定して、キーボードの裏にいろいろなアイテムメニューなどを隠しておき、マッシュルームボタンでスライド表示させるというところに落ち着きました。
山口: メニュー部分は縦スクロールするから、メニューの拡張性も兼ねてますよね。こういったUIデザインは矢野さんが?
(写真をクリックすると拡大します) |
山口: ただ最終的な意思決定はするわけですよね。
矢野: ええ。そこは私が(笑)。というか、そういう仕組みになっている。決まりごとというか、チーム内でそういうコンセンサスが自然にできるのがいいんですけどね。でも、製品として出している限り、これだけ大胆なUI変更をしたわけで、いろいろなユーザーのご意見ありますし、誰かが矢面に立つ必要もある。そういう役目ですかね(笑)。
[記事リンク]
>>> 第1話 大胆にUIを変更したSimejiの開発とは
>>> 第2話 数字に振り回されない分析とユーザーの声
>>> 第3話 これからのWebデザインとWebデザイナー
●関連記事
【ニコニコ超会議2】Event Report2
「しめじェクションマッピング」はこちら
[プロフィール]
バイドゥ株式会社 モバイルプロダクト事業部マネージャー 矢野りん ●デザイナーとして数々のWebサイト制作やデザイン関連書籍・記事執筆などで活躍するほか、Android女子部などIT周りのコミュニティなどでも積極的な活動を続ける。現在はバイドゥ(株)にてSimejiなどのUX/UIデザインを手掛けている。 ●Simeji url.http://simeji.me/ |
(株)エムディエヌコーポレーション 第二書籍編集部 編集長 山口康夫 ●グラフィックデザイナー向けの専門誌、月刊MdNの編集長に就任後、月刊web creatorsを創刊し編集長に。現在は、書籍部門の編集長として従事し、Webデザインをはじめとする数々のデザイン関連書籍を手掛ける。 |