DogooBaco Loading

2016.02.08

CurryBuのおはなし

web

こんにちは!暖冬かと思われていた矢先の毎日の極寒に布団を着て出社したい思いを毎日胸に抱いて生きています。

みなさんいかがお過ごしでしょうか^^

 

今回はプライベートで、エンジニアの@chocobyさんと制作・運用をしているカレー投稿サイト「CurryBu」の、2014年にリニューアルした際のことをしっぽりと書きたいと思います!

リニューアル当時のことは開発ブログの「新しい CurryBu をリリースしました!」でchocobyさんが書いてくださっていますが、当時のことを思い出しつつもう少し掘り下げて書いてみます。もう2年の前のことなので(リリースまでには1年かかったので実質3年…!)ちょっとお恥ずかしい部分がありますが勢いで振り返ります!

 

先に書いておくと、それはそれは長い記事になりました^^^^ご興味にある箇所だけも読んでいただけたら嬉しいです。

やったこと

もともとCurryBuはchocobyさんが2012年から運用をされていたサイトで、カレーを投稿することがメイン機能のサイトでした。

2014年のリニューアルでは、さらに「カレー共有サイト」ととしての役割を強化していきたい!ということで、私の方では以下のことを行いサイトの充実を図りました。

ざざっとまとめると以上のことを担当させていただきました!

サイトの問題点あぶり出し、目標設定

img_currybu2014_1

2012年段階でリリースから約1年、お陰様で登録ユーザー・登録店舗数・投稿数が着々と増え、カレー情報が充実したサイトになってきたところでした。そろそろ次のステップを〜と思っていた時にふと見たのが「Googleアナリティクス」のCurryBuユーザーの行動等の解析データでした。

 

img_currybu2014_2

 

そこで見たのが、「直帰率」が 53 .02% という数字。約半分のユーザーが初回にアクセスしたページから他ページを回遊することなく離脱しているということです。 また、「訪問時の平均滞在時間(平均 2 分 26 秒)」というデータからも、ほぼ1ページ分のみを見て、離脱しているのではないだろうかということが予測されました。

これはとても悲しい…!!ということで、まずは以下をリニューアルの目的として定めました。

  • 訪問ユーザーの滞在時間の長期化
  • ユーザーの訪問率増加

そしてどうせリニューアルをするなら!と欲張って、下記もリニューアル目的として設定をしました。

  • 新規ユーザーの獲得
  • ヘビー(アクティブ)ユーザーからのさらなる質の高い情報の獲得

ターゲットの設定

img_currybu2014_3

ではその目標を達成するためには、どんな人が使っている場面を思えばよいのか、またどんな人にどんな機能が喜んでもらえるのかを具体化するため、ターゲットユーザーを設定しました。

メインターゲット:
カレー大好き ! 色んなカレーを探したい!知りたい!

  • よくカレー屋に食べに行き、カレーにはそれなりのこだわりを持っているが、ブログなどで公開・記録はしていない。
    →公開・シェアすることで、カレー好きと情報交換したい
  • いろいろなカレー屋を開拓したいと思っている。
    →カレーが食べたい時にカレー情報を検索するが、特定のカレー好きのブログなどはチェックしていない。
  • 旅行先でもぐるなびや食べログなどでカレー屋をチェックし、食べにいく。

という特性をもったユーザーです。

サブターゲット1:
カレーのことなら任せろ!カレーマニアさん

  • 身辺のカレー屋情報に詳しく、カレー知識豊富でそれをブログなどで公開している。
  • 色々な場所へ足を運び(旅行先でも)カレー屋開拓をしている。
  • 日々、カレー好きの人のブログなどでカレー情報をチェックしている。また、カレーブロガーと交流している。

という特性をもったユーザーです。彼らはよりコアで濃厚なカレー情報を求めているのでは?と想定しました。

サブターゲット2:
あ〜今日はカレーの気分だな~。閲覧さん

  • たまにカレーが食べたくなる。
  • とくにカレーにこだわりはないで、近くのチェーン店によく行く。安くてボリューム重視な人が多いかも。
  • でも食べられるなら別のカレー屋のカレーを食べてみたい

という特性をもったユーザーです。彼らは自身からの希望はこれといってないため、自身にあった情報を提供して欲しい(受動的)と思っているのでは?と想定しました。

 

以上のユーザーをターゲットと想定し、以下をCurryBuというサービスのコンセプトとして機能・企画を立案しました!


全国の色々なカレーを食べたい !カレー屋さん情報を求めているカレー好きさんたちに、
カレー好きの人々と、その人たちが持っているカレー情報の集まる場、
また彼らのそれぞれが持っているカレー情報を記録する場を提供することで、
CurryBu をみれば、いつでもどこでも、ほしいカレーの情報が得られる!

目的とターゲットから、機能・企画の立案

img_currybu2014_18

 

前述したことから、以下の2点を企画の軸としました。

  • デザインリニューアル
  • 機能充実

デザインリニューアル

デザインリニューアルは、下記を担保します。

  • 訪問ユーザーの滞在時間の長期化
    →より見やすいように画面レイアウトの整理を行う
    →美しい、長い時間見ていたいと思えるようなビジュアルデザインを提供
  • ユーザーの訪問率増加
    →デザインを加える事で、愛着を持ってもらい、何度も来てもらえるサイトにする
  • 新規ユーザーの獲得
    →ブランディングをすることで、個性を出し、ビジュアル面から閲覧の意欲を誘発する

CurryBuというサービスに愛着をもってもらい、普段のツールとして使用するものとして気に入ってもらえるようなビジュアルにし、ユーザーの思考・希望を意識したUI設計を行います。

機能充実

機能充実は、下記を担保します。

  • 訪問ユーザーの滞在時間の長期化
    →1ページのみをみて離脱してしまわないよう、回遊率を高めるような機能を追加する
  • ヘビー(アクティブ)ユーザーからのさらなる質の高い情報の獲得
    →投稿をしやすく、細かくより上質な情報を投稿できるようにする。

サイトの中での固定の「自分」の居場所(ページ)を用意することで、ユーザーの訪問率をアップさせることを目標とします。
掲載される情報をより詳細な設定までできるようにすることで、より質の高い情報を集められるようにし、収集意欲を刺激します。
ゲーミフィケーション要素を持った、続けたくなるような機能を用意することで訪問率・リピート率をアップします。

具体的な機能案

上記の「機能充実」での具体的な機能案を設定しました。

 

img_currybu2014_7

■活動日誌(カレンダー機能) / リリース済み
これは「ゲーミフィケーション」を意識した機能で、主にユーザーの再訪問率アップを意識した機能案です。
ユーザーの投稿の記録をカレンダーで記録することで、ユーザーはより視覚的に自身の投稿を記録し振り返ることができるようになります。
これにより、投稿をしないユーザーにも記録の確認等のために訪問を促すことができるのではと考えました。また、各ユーザーのカレンダーだけでなく、「カレー部」としてのカレンダーも用意をすることで、「部活動」の「日誌」のような役割を持たせ、より部活のようなサービスとしての個性、部活仲間とのカレー情報の交換の場、というようなイメージの象徴としました。

 

 

img_currybu2014_9

■Myページ / リリース済み
これはユーザーの居場所・拠り所確保を確保させ、また自分の記録をわかりやすく見せることで ユーザーの日課の中に組み込んでもらえることを狙いとした機能です。

その名前の通り、各ユーザーに関する詳細情報が記されたページです。

 

img_currybu2014_10

■投稿機能拡張 / リリース済み
もともと投稿情報はカレーの名前、カレーの写真、コメント、値段くらいであったところを、

カレーの種類、トッピング、タグなどの情報を付けられるようにします。

より詳細な情報を投稿してもらうことで、投稿をみたユーザーにより上質なカレー情報を持って帰ってもらうことを狙いました。より上質な情報がそろうことで、こういった情報を欲しているユーザーの収集意欲を刺激します。

 

 

img_currybu2014_8

■検索 / 一部リリース済み

カレーの名前、お店の名前を入力、タグやカテゴリーでの検索、位置情報からの店舗検索をさせる機能です。

ユーザーにより自身の好みに合ったカレーを提示することができます。

現在キーワード検索・位置情報からの店舗検索はリリース済みですが、タグ・カテゴリー検索は現在追加対応中です!

 

 

img_currybu2014_6

■カレーMAP / 未リリース
新規の店舗が投稿されると、その店舗の県のカレー屋として登録され、 地図上に表示されている県の数字が増えていくようなものを想定しており、全国各地で食べたカレーをたくさんのユーザーに 投稿してもらうことで、会員(部員)みんなで 日本全国のカレー MAP を作っていこう!というモチベーションの助長、ゲーミフィケーション性をもたせた機能です。
以上が機能・企画でした。

 

この機能をもとに、サイト設計、WF作成を行います。

サイト設計(WF作成・サイトマップ作成)

上記で企画した機能を実際のwebサイトとしてどうみせるか、どのようにサイト上に配置をしていくかをサイトマップ、WFを作成しながら検討します。

 

この時はサイトマップ、WF、ページ一覧の作成にはillustratorを使用しました…

現在であれば「prott」を使用してつくるところですが、なにせ3年前、、かなりアナログな制作をしましたw(Cacooも試しては見たのですが、個人的にはillustratorで作成しているのとそんなに違いがない感覚でした。)pdfで書きだして共有をしていました。

 

こちらがまずサイトマップです。シンプル

 

img_currybu2014_11

 

これを下記のようにディレクトリごとに必要なページを洗い出していきました。

 

img_currybu2014_12

ページごとにIDを振ってあります。めちゃくちゃ地道です。

 

そしていよいよWF!リリースしたいページの構成・要素を考えながら各ページの設計をしていきます。

超大量のpdfを生成することになりました。

 

img_currybu2014_13

 

なんとか全ページの構成ができました!次はいよいよデザインに入っていきます…!

ブランディング(ロゴ作成・webサイトグランドデザイン)

WFもできたし、やっとwebサイトのデザインをするぞー!と行きたいところですが、その前にそもそもCurryBuってどういうふうに見せていきたいサービスなの??サービスのロゴは??

 

というところで、webサイトを作る前に、CurryBuのブランドデザインをします!

ロゴのデザイン

 

img_currybu2014_14

■ロゴタイプ

  • CurryBu の各文字の隙間をうめているオブジェクトをカレーに見立て、CurryBu というサイトがカレーで満たされていること、「カレーでいっぱい!」をコンセプトのロゴタイプデザインです。
  • 「CurryBu でつながる」ことを表現するため、文字同士が波のような形でつながったデザインになっています。
  • 「Bu」の「u」の上のハネのアクセントは、「CurryBu を使って、部員みんなが” ペロリ” と美味しくカレーを食べている」場面をイメージした、「舌」をモチーフとしています。
  • カレーを扱うサイトなので、カレーを直感的にイメージしやすい「黄色」をアクセントカラーとして使用。

 

 

img_currybu2014_15

■ロゴマーク

  • CurryBu の頭文字である「C」と「B」をモチーフにしています。
  • 「C(curry)」の中に(下に)集まった「B( 部員 )」を表しています。
  • CurryBu というサイトはまだ未完成であり、部員みんなが情報を投稿していくことで作られていく、ということを手書きでラフに書いたようなデザインで表現しています。
  • カレーを食べたあとに、紙ナプキンで口を拭った際紙についた唇のあとのようにもみえるようにもなっています。紙ナプキンのデザインを合わせることでより強調されます。

 

ロゴができましたっ!と同時にサイトの全体的なコンセプトが出来上がって参りました…!
いよいよいよwebデザインに入っていきます!

 

img_currybu2014_16

スッとデザインしたように見えますが、実際は上の画像のような感じで何度も書いたり消したりの繰り返しでした。

とても汚い字で書きなぐってあるのがわかります。

webサイトグランドデザイン

いよいよWFをもとに、webページのデザインを作っていきます!

 

デザインカンプ作成ツールはなんとこの時は「FireWorks」で作成をしていました…!現在はすっかりphotoshopで作成するようになっていますが、当時はwebといえばFireWorksに決まっているであろうというスタンスでした。web業界に入ってFireWorks勉強したな〜青春のFWです。CCには置いて行かれてしまったFWですが仕事では大変お世話になったツールです。さようならFW。

話がそれましたが、3年前はFWでデザインを作っていたのでした。

(確認したらスマホ版のデザインはphotoshopで作成されてました。個人的過渡期だったようです)

デザインカンプはPC版、スマホ版あわせて37枚を作りました。他ページはコーディング上でデザインをしました。

 

グランドデザインのコンセプトはロゴのところでお話をしたことと共通はしているのですが、まとめると以下のようなものになります!

  • 「カレーのある食卓」を想起させるため、ランチョンマットの布のようなテクスチャ素材を使用
  • 「みんなで作る部活動日誌」をコンセプトに、みんなで手作りをしたようなイメージを表現するため、ボタンのデザイン、アイコン、線やパーツのディティールに手書き感のある線を使用
  • 活動記録(カレンダー)に、投稿したカレーがシールのように貼られていくイメージにするため、投稿一覧のカレーを円で切り抜いた形に
  • 「カレー」のイメージを直感的に伝えるよう、黄色を基調としたデザイン
  • 楽しさ、賑わっているイメージにするため、ポップで明るい「キリギリス」をメインのフォントとして使用しました
  • サイトが階層深くなるにつれて、「日誌」の中身ページのようなデザインになっています

 

img_currybu2014_17

 

以上をグランドデザインのコンセプト・ディティールへの展開としてデザインをしました。

これでメインのページのデザインを作ったので、いよいよコーディングです!

コーディング(html/css/js)

コーディングツールはこのときは「Coda」を使用しました。しかしこの時は結局うまく使いこなせなかったなー…今は「Sublime Text」を好きで使っています。最近職場でAdobeをCC2015にアップデートしていただいて「Dreamweaver」もCC2105になったので使ってみたのですが、案外使い勝手が良いです^^

 

htmlコーディングはこの時は「haml」で行いました!CurryBuは「Ruby」で開発されており、よりrubyと親和性が高いhamlが採用されたと記憶しています…!(違うかもしれない)

閉じタグがないのも、インデントがネストになるのも、idやclassを「#id名」「.class名」で書けるというところも効率的で私は好きです^^

 

cssは「sass」でコーディングしました。この時初めてsassを使った記憶があります…!

色やフォントなどを変数にする、一部パーツ(clearfix、ボタンのデザインなど…)をmixinにして使いました。基本的な使い方しかしていませんが、やっぱり{}が不要だったりネストでcssの継承ができるのは便利ですよね〜

jsは私は得意ではないのですが…簡単なものはjs書いたり、プラグインを入れたりしました…!

実装後、@chocobyさんの方で、CoffeeScriptに一部書き換えをしてくださりました。

マージ・テスト・調整

私のhtmlコーディングが終わったら、chocobyさんにシステムマージをしてもらいます。
そしていよいよ作った機能が動くようになり、webサイトとして使えるようになりました!

色んなブラウザ(IE9以上、FF、Chrome最新版)でちゃんと動くかを確認をしつつ実際に使ってみます。

ここで使ってみて初めて分かる、「やっぱりこうしたほうが使いやすくない??」を解消していきます。
実際に使って見ながらできるところまで(気力が持つまで)サイトをブラッシュアップします…!!

そして…

リリース!!!

img_currybu2014_19

2014年1月26日、無事新生CurryBuをリリースしました!

一番最初の問題点あぶり出しから、ちょうど1年くらいかけての(2103年のお正月に実家のこたつでノートに企画案を書きなぐっていた日を思い出します。)リリースとなりました。
何よりも、考えて考えてかなり試行錯誤して作ったものが動くようになって、web上でいつでも色んな人が見られる状態になっていて、今の今まで動き続けて、ありがたいことにユーザーさんがカレーを投稿してくださっていることが本当に嬉しくてありがたいです。

そして、気がつけばリリースからさらに2年が経ってしまいました…!
2015年は初期リリースでは一旦見送りにした「検索機能」のワード検索部分をリリースしました。

しかしまだまだやりたいことはたくさんあります!カレー好きのみなさんのカレーライフを支える一端を担いたいのです^^そして私自身がカレー好きの皆さんが食べた、美味しいカレーを知りたいです!

 

現在CurryBuはひっそりと再度リニューアルプロジェクトが動いています!
カレー好きのみなさんがより楽しくスマートに使っていただけ、みなさんのカレー探しの相棒になれるよう、また我々も作るのを楽しみながら、CurryBuは邁進していこうと思います!
とてもとても長い記事になりました!!自己記録更新です。
これからも私tashi共々、CurryBuを何卒よろしくお願いいたします!!

 

あっっあけましておめでとうございます!!!新年初の投稿でした。