エンジニアtype - エンジニアのシゴト人生を考えるWebマガジン
  • TOP
  • キーパーソン
  • 旬ネタ
  • コラボ
  • ノウハウ
  • 女子部
  • キャリア

大幅リニューアルを敢行した『カメリオ』が、元スターバックスの店員にUIデザイン刷新を託した理由

タグ : カメリオ, デザイン, 柴田暁, 田名網早紀, 白ヤギコーポレーション 公開

 

2014年8月25日、白ヤギコーポレーションが2月にリリースしたフォローメディアアプリ『カメリオ』が全面リニューアルされた。

リニューアルに際し、コピーも「あなた色に染まる キュレーションアプリ」に

リニューアルに際し、コピーも「あなた色に染まる キュレーションアプリ」に

同時に従来のiOS版に加えてAndroid版・Web版が登場。マルチプラットフォーム化も実現した。

『カメリオ』が他のニュースアプリと一線を画していたのは、ユーザー個々人が気になるテーマやカテゴリーからこだわり情報を選び、「フォロー」するだけで、ネット上にある関連情報を自動で「深追い」できる点。同社CEOのシバタアキラ氏は、リリースから約6か月が経過しての今回のリニューアルで大きく変わったのは

【1】こだわり情報を探さなくても見つけられるメディアへの進化
【2】UIデザインの変更

だという。

【1】については、既存ユーザーの『カメリオ』の使い方を検証していった結果、より利用しやすく、きめ細かな情報にアクセスできるようにする必要性を強く感じたからだとシバタ氏は語る。

「ユーザーが検索や登録に使うキーワードを検証してみると、単純に『サッカー』とか『相撲』といった抽象的で漠然としたものが多かったんですね。最初に我々が想定していたのは、チーム名とか個人名などもっと細かい単語単位での検索でした。でも、そういう使い方をしているユーザーは少なかった。つまり、自分が深く知りたいものを知らないユーザーが多かったんです」(シバタ氏)

リリース後、半年が経過して『カメリオ』が想定していた使われ方と違うことが分かったと話す柴田氏

リリース後、半年が経過して『カメリオ』が本来想定していた使われ方と違うことが分かったと話すシバタ氏

そこで、ユーザーに対して「そもそも知りたい情報が何か」から気付かせるようにしたのが、リニューアルのポイントだ。

具体的には、新たに「特集ページ」を設けることで、同社の編集部が日々話題になっているテーマを人力でセレクト。TwitterやFacebookのアカウントとも連携することによって、ユーザーの関心がある情報が表示される。

これまで100万あったテーマ数も3倍増の300万へと大幅アップし、よりニッチな情報までフォローアップすることが可能になった。

「ユーザーが知りたい情報に確実にアクセスできるよう、マッチングの精度を高めるためにキーワード1つ1つを試しながらアルゴリズムの修正を行いました。よりテーマやキーワードに沿った関連度の高いニュースや情報を提供できるようになったと思います」(シバタ氏)

この変更に伴って【2】のUI刷新を行ったのだが、驚くのは主担当を務めた女性デザイナーが約2か月前までスターバックスでアルバイトをしていたということ。

今回のデザインリニューアルへと至った背景や、今後の方向性などについて、シバタ氏とデザインを手がけた田名網早紀さんに聞いた。

リーン・スタートアップが生んだほころび

(写真左から)白ヤギコーポレーションのデザイナー田名網早紀さん、同社CEOの柴田暁氏

(写真左から)白ヤギコーポレーションのデザイナー田名網早紀さん、同社CEOのシバタアキラ氏

今年2月のリリース以降、『カメリオ』は延べ30回以上ものアップデートを重ねてきた。その背景には、ユーザーの動向を常にウォッチしながら、サービスを日々より良いものへと進化させていく手法=“リーン・スタートアップ”があったとシバタ氏は話す。

「弊社ではアプリ改善の手法として、短いサイクルで実装と検証を繰り返すリーンスタートアップのスタイルを取ってきました。しかし、アップデートを繰り返していくうち、いつの間にか整合性がとれないところが出てきたんですね」(シバタ氏)

そこで、部分最適ではなく全体最適を志向したUIデザインのリニューアルを行うことにしたシバタ氏が、デザイナーとして起用したのが田名網さんだった。彼女はそれまで、“UI/UXデザイン見習い”として白ヤギコーポレーションに在籍。しかも、社員ではなくアルバイトとしての雇用だったのだ。

「彼女は社員の紹介で入社してもらったんですが、学生時代に建築デザインを学んでいたり、Web関連のデザインの経験もあったので、アプリの中の不整合性に気付くことができたのだと思います」(シバタ氏)

新人デザイナーがこだわった「ブランディング」と「統一感」の大切さ

今回のリニューアルにあたって、田名網さんが最もこだわったのがデザインとカラーリングに統一感をもたらすことだった。ライトグリーンを基調に、どの遷移画面でも表示される文字の大きさやラインの1本1本にまで修正を加えていったと話す。

「当社はまだスタートアップですから、まだまだCI(コーポレート・アイデンティティ)がしっかり固まっていません。会社としては、まだそれでもいいのかもしれませんが、提供するアプリにはしっかりとしたアイデンティティが必要だと前々から思っていました」(田名網さん)

スターバックスでの4年間がデザインの軸のズレを気付かせてくれたと話す田名網さん

スターバックスでの4年間がデザインの軸のズレを気付かせてくれたと話す田名網さん

スターバックスという企業ブランドが確立された世界規模のコーヒーチェーンで計4年間働いていた経験が、「アイデンティティの必要性」を、スタートアップならではのほころびを見つけられた理由だと田名網さんは考えている。

「スターバックスでカウンター内の黒板の手書きメニューをずっと担当していて、知らず知らずのうちに企業ブランディングの大切さが身についていたのかもしれません。だから、柴田さんから『カメリオ』のアイデンティティからズレた改善をお願いされても、断固としてハネつけたこともありましたね」(田名網さん)

対してシバタ氏は、「私がちょっと思いついたことを『やってよ』とか言うと、『デザインはデコレーションじゃないんです!』って怒るんですよ」と苦笑する。

これまでのような、ブランディングや統一感に影響を与えかねない“思いつき”を一旦冷静に俯瞰できる姿勢が、リーン・スタートアップの弱点を補う薬となった。

矢印型のアイコンに込められた“進化”への思い

リリース以来となる今回の全面リニューアルで、同社が実現を目指すのが、現在の2倍の定着率だ。

「これまでも細かなアップグレードを繰り返してきて定着率はリリース時の3.5倍くらいにはなってきたんですが、これをさらに今の2倍にはしたいですね」(シバタ氏)

『カメリオ』が目指すのは“没入型”のアプリだという。これまでは機会があれば立ち上げて、一通り目を通すアプリだったものを毎日アクセスする頻度や閲覧時間の多いツールへと進化させていきたいと話す。

連載記事でも紹介していますが、1週間で50%のユーザーがまた使うアプリにしていくのが今の目標です。アクセスするたびに新しくて、より詳しい情報や記事を提供できるようになったと思うのでぜひ1度使ってみてほしいですね」(シバタ氏)

今回、リニューアルされたのはアプリ内のデザインだけではない。アプリの顔とも言える、アイコンも大幅に変更されている。田名網さんが50以上もの案を出したというこのアイコンからは、同社の強い思いが感じ取れる。

新しいアイコン(右)は矢印の形をベースに、亀らしさも残している

新しいアイコン(右)は矢印の形をベースに、亀らしさも残している

「矢印をかたどったアイコンには“進化”の意味を込めています。ユーザーが『カメリオ』を使うことで、新しい興味や関心を発見して次のステップへ進化して欲しいと考えています」(シバタ氏)

現在はiPad向けに特化したアプリを開発中で、早ければ9月に予定されているiOS8の登場とともにリリースしたいという。

「ユーザーがこだわるテーマに沿ってより深く、より詳しい情報や記事を提供できるのでスマホではなくてiPadなどでじっくり閲覧してもらうスタイルを目指しています」(シバタ氏)

今回、デザインをはじめ機能面も大幅なリニューアルとなった『カメリオ』だが、「深く知ることで、生きることを豊かに」というミッションはまったくブレていない。この本質をしっかり踏まえた上でのリニューアルを経て、『カメリオ』は次のステージへと進む。

取材・文/浦野孝嗣 撮影/竹井俊晴




人気のタグ
業界有名人 スタートアップ 開発 SE 転職 エンジニア プログラマー Web スキルアップ ソーシャル アプリ シリコンバレー キャリア プログラミング Android 起業 えふしん スマートフォン アプリ開発 SIer 技術者 UI btrax Webサービス クラウド Apple スペシャリスト CTO Twitter Brandon K. Hill ギーク 英語 村上福之 Facebook Google デザイン IoT SNS ツイキャス 世良耕太 モイめし IT 30代 採用 赤松洋介 コーディング 20代 UX 勉強会 プロジェクトマネジメント Ruby ITイベント Webエンジニア 中島聡 ビッグデータ 法林浩之 ウエアラブル iOS 五十嵐悠紀 LINE ドワンゴ ひがやすを ロボット 受託開発 モノづくり IT業界 コミュニケーション イノベーション ハードウエア MAKERS tips ゲーム 女性 ソーシャルゲーム Webアプリ SI インフラ iPhone 女性技術者 高須正和 マイクロソフト 研究者 UI/UX トヨタ 自動車 ノウハウ チームラボ 息抜き システム ソニー プラットフォーム Java メイカームーブメント オープンソース 和田卓人 エンジン グローバル 開発者 教育 イベント サイバーエージェント ソフトウェア 女子会 コミュニティ メーカー 家入一真 スーパーギーク 増井雄一郎 GitHub 人工知能 IPA 40代 日産 テスト駆動開発 ソフトウエア 音楽 TDD ニュース モバイル PHP TechLION

タグ一覧を見る