はじめまして、グルメイヤーでデザイン担当をしている新卒1年目の茂木 栞です。
今回は10月に大幅にコンセプト変更をしてリニューアルしたグルメイヤーの改修の仕方を説明させて頂きたいと思います。
FacebookやTwitterの友達と繋がることができ、友達の食べたものをフィードで見ることも出来ます。
![$1 pixel|サイバーエージェント公式クリエイターズブログ](https://stat.ameba.jp/user_images/20131124/03/ca-1pixel/36/7a/j/t02200071_0600019312758990190.jpg?caw=800)
それではリニューアルに至るまでの過程を説明させていただきます。
![$1 pixel|サイバーエージェント公式クリエイターズブログ](https://stat.ameba.jp/user_images/20131123/19/ca-1pixel/b0/5b/j/t02200114_0600031112758510406.jpg?caw=800)
下記の通り、機能が大分削られています。
無くなった機能
・メイヤーを競ってメダルを勝ち取る
・オススメのお店を「グルメカードデッキ」として登録できる
・ジャンルやエリアで嗜好分析をして図にしてくれるグルメ分析機能
追加された機能
・フォロー/フォロワー機能
次に、シンプルにすることを意識したデザインの説明をしたいと思います。
ということは、存在する機能をどれほど際立たせるかが重要になるということになります。
改修された画面のうち、3つを例にして説明させて頂きたいと思います。
1、チェックイン画面
こちらはフローからの改修でした。
フォースクエアのように場所を検索→写真を選ぶ・コメント入力→投稿の順から、お店/写真/コメントが並列して埋められる画面へ。
チームで話し合い、どこを記入するかのブロックが分かりやすい画面になるよう仕上げました。
→ ![$1 pixel|サイバーエージェント公式クリエイターズブログ](https://stat.ameba.jp/user_images/20131123/19/ca-1pixel/2b/42/j/t02200392_0280049912758494799.jpg?caw=800)
このフロー変更は「お店からだと後からチェックインする時に思い出せないこともあるので、カメラロールで写真を選んでからお店を選びたい」というユーザーの声を参考にさせていただきました。チェックインはその場でしなければならないというイメージが強いですが、グルメイヤーは「外食を記録するアプリ」としても多く使われていたことからこの画面に反映されました。
2、フォローしている人のフィード
フォローしているユーザーはお気に入りのユーザーor友達というフィードなので、ユーザーの情報を第一に、次いで料理写真を極力大きく見せました。
![$1 pixel|サイバーエージェント公式クリエイターズブログ](https://stat.ameba.jp/user_images/20131124/02/ca-1pixel/61/df/j/t02200714_0640207812758966475.jpg?caw=800)
情報の順は下記のようになっています。
ー①ユーザー
ー②ユーザーに紐づくコメント
ー③料理写真
ー④お店/いいね数や人からのコメント
ここでも必要最低限の情報のみをだしてシンプルに。いいねボタンを大きく設置し、押しやすさにもこだわりました。
3、マイグルメ
グルメイヤーでは自分のページ(マイページ)のことをマイグルメと呼んでいます。
ここではユーザーのチェックイン一覧・フォロー/フォロワー・ブックマークしたお店を見ることができます。
このページで一番重要なログ要素であるチェックイン一覧に注目してみましょう。
チェックインの一覧を画像のみ/フィード形式/月別リストの3つの形式で見ることが出来ます。
フィード形式は上記したフォローフィードと同じ形式なので割愛し、画像とリストの2つの形式を紹介します。
![1 pixel|サイバーエージェント公式クリエイターズブログ](https://stat.ameba.jp/user_images/20131124/02/ca-1pixel/db/69/j/t02200629_0280080112758979451.jpg?caw=800)
表示している内容は同じですが、自分の好みの形式で見られるようにデザインを改修しました。この画面を実装したところ、定着率がアップしました。
土台作りが終わった今、「骨に肉付けをする時期」として機能追加を進めています。
リニューアル前の機能を改善して再度復活させたり、1からの新機能を追加したりと、今後もチームで強力して良いサービスにしていきますので、よろしくお願いいたします!
↓食べることが好きな方はぜひ、日々の外食を記録してみてください♪↓
![$1 pixel|サイバーエージェント公式クリエイターズブログ](https://stat.ameba.jp/user_images/20131124/03/ca-1pixel/36/7a/j/t02200071_0600019312758990190.jpg?caw=800)
今回は10月に大幅にコンセプト変更をしてリニューアルしたグルメイヤーの改修の仕方を説明させて頂きたいと思います。
グルメイヤーとは
「グルメイヤー」とは、外食したお店をチェックインで記録し、「いいね!」や「コメント」で盛り上がるグルメサービスです。FacebookやTwitterの友達と繋がることができ、友達の食べたものをフィードで見ることも出来ます。
![$1 pixel|サイバーエージェント公式クリエイターズブログ](https://stat.ameba.jp/user_images/20131124/03/ca-1pixel/36/7a/j/t02200071_0600019312758990190.jpg?caw=800)
それではリニューアルに至るまでの過程を説明させていただきます。
コンセプトの変更
配属されていた当初はコンセプトが既に決まっていたのですが、リニューアルの前にあったチェックインをしてメダルを取り合う機能等がなくなり、「お気に入りのお店の常連になってチェックイン数を競う」というコンセプトから、「日々の外食を記録して友達と盛り上がるサービス」へと変更することになりました。![$1 pixel|サイバーエージェント公式クリエイターズブログ](https://stat.ameba.jp/user_images/20131123/19/ca-1pixel/b0/5b/j/t02200114_0600031112758510406.jpg?caw=800)
機能面での変更
リニューアルリリース時点での目的は、新コンセプトにそってこれから運用していくための土台作り。つまり「機能を一旦、極々シンプルに」しました。下記の通り、機能が大分削られています。
無くなった機能
・メイヤーを競ってメダルを勝ち取る
・オススメのお店を「グルメカードデッキ」として登録できる
・ジャンルやエリアで嗜好分析をして図にしてくれるグルメ分析機能
追加された機能
・フォロー/フォロワー機能
次に、シンプルにすることを意識したデザインの説明をしたいと思います。
デザイン
極々シンプルにすると言いつつも、アプリとしてしっかり楽しんでもらえる洗練されたものを出さなければならないので半端なものは作れません。ということは、存在する機能をどれほど際立たせるかが重要になるということになります。
改修された画面のうち、3つを例にして説明させて頂きたいと思います。
1、チェックイン画面
こちらはフローからの改修でした。
フォースクエアのように場所を検索→写真を選ぶ・コメント入力→投稿の順から、お店/写真/コメントが並列して埋められる画面へ。
チームで話し合い、どこを記入するかのブロックが分かりやすい画面になるよう仕上げました。
![1 pixel|サイバーエージェント公式クリエイターズブログ](https://stat.ameba.jp/user_images/20131123/19/ca-1pixel/30/e8/j/t02200392_0280049912758487434.jpg?caw=800)
![$1 pixel|サイバーエージェント公式クリエイターズブログ](https://stat.ameba.jp/user_images/20131123/19/ca-1pixel/2b/42/j/t02200392_0280049912758494799.jpg?caw=800)
このフロー変更は「お店からだと後からチェックインする時に思い出せないこともあるので、カメラロールで写真を選んでからお店を選びたい」というユーザーの声を参考にさせていただきました。チェックインはその場でしなければならないというイメージが強いですが、グルメイヤーは「外食を記録するアプリ」としても多く使われていたことからこの画面に反映されました。
2、フォローしている人のフィード
フォローしているユーザーはお気に入りのユーザーor友達というフィードなので、ユーザーの情報を第一に、次いで料理写真を極力大きく見せました。
![1 pixel|サイバーエージェント公式クリエイターズブログ](https://stat.ameba.jp/user_images/20131123/20/ca-1pixel/81/27/j/t02200714_0280090912758565467.jpg?caw=800)
![$1 pixel|サイバーエージェント公式クリエイターズブログ](https://stat.ameba.jp/user_images/20131124/02/ca-1pixel/61/df/j/t02200714_0640207812758966475.jpg?caw=800)
情報の順は下記のようになっています。
ー①ユーザー
ー②ユーザーに紐づくコメント
ー③料理写真
ー④お店/いいね数や人からのコメント
ここでも必要最低限の情報のみをだしてシンプルに。いいねボタンを大きく設置し、押しやすさにもこだわりました。
3、マイグルメ
グルメイヤーでは自分のページ(マイページ)のことをマイグルメと呼んでいます。
ここではユーザーのチェックイン一覧・フォロー/フォロワー・ブックマークしたお店を見ることができます。
このページで一番重要なログ要素であるチェックイン一覧に注目してみましょう。
チェックインの一覧を画像のみ/フィード形式/月別リストの3つの形式で見ることが出来ます。
フィード形式は上記したフォローフィードと同じ形式なので割愛し、画像とリストの2つの形式を紹介します。
![1 pixel|サイバーエージェント公式クリエイターズブログ](https://stat.ameba.jp/user_images/20131124/02/ca-1pixel/13/8a/j/t02200628_0280079912758979452.jpg?caw=800)
![1 pixel|サイバーエージェント公式クリエイターズブログ](https://stat.ameba.jp/user_images/20131124/02/ca-1pixel/db/69/j/t02200629_0280080112758979451.jpg?caw=800)
表示している内容は同じですが、自分の好みの形式で見られるようにデザインを改修しました。この画面を実装したところ、定着率がアップしました。
これから
主な画面のみの説明になりましたが、コンセプトが変更する大きなリニューアルでありながらも、シンプルに一点集中したグルメイヤーの改修がご参考になれば幸いです。土台作りが終わった今、「骨に肉付けをする時期」として機能追加を進めています。
リニューアル前の機能を改善して再度復活させたり、1からの新機能を追加したりと、今後もチームで強力して良いサービスにしていきますので、よろしくお願いいたします!
↓食べることが好きな方はぜひ、日々の外食を記録してみてください♪↓
![$1 pixel|サイバーエージェント公式クリエイターズブログ](https://stat.ameba.jp/user_images/20131124/03/ca-1pixel/36/7a/j/t02200071_0600019312758990190.jpg?caw=800)