神保町で働くカスタマーサクセス担当者のブログ

2017年秋からカスタマーサクセスに取り組んでます。気づいたことを殴り書き。

我が家のcookpad事情

この記事と、はてぶのコメントを妻に話してみました。

techlife.cookpad.com

前置き

妻(と私)は、かなりの頻度でcookpadで献立を決めてまして、私は「めっちゃ便利だな」と思っています。

妻は「料理を作るのは好きだけど、献立を決めるのが面倒」という人なので、cookpadは献立決めをアシストしてくれてるわけです。

*ちなみに私は皿洗い担当

なので、妻も当然「cookpadて便利よね」という印象を持っていると思っていましたが・・・

想定外の妻の答え

俺「cookpad、すごい便利じゃん?でも今、ネットのちょっとしたところで叩かれててね、レシピのソートだけで課金するなんて、って。」

妻「え〜便利なのにね」

って返ってくると思っていました。

ところが・・・

妻「そうだよ〜!(怒)

 cookpadなんて何もしてないじゃん。

 一般の人が投稿したレシピを整理しているだけでしょ?

 月400円なんて高い!みんな高いって言ってるよ。」

俺「え、じゃあなんで使うの?」

妻「見やすくて、料理を作りやすいんだよね。」

まさにUXが売上になってる、ってことでしょう。改めてcookpadすげーな、と。

でもやっぱり無料がいい?

俺「楽天レシピなら、無料だよ。」

妻「ほんと?じゃあ使ってみる。」

このあたりの設計は、非常に難しいけど考えていて面白いところだと思います。

楽天さんは、投稿を集めるエンジンとして50ポイント(50円)を配った。だから数は集まるんですよ。ここで投稿するレシピは、投稿するユーザーにとって50ポイントのレシピになってしまう。だから、どこまで行っても50ポイントだと思って投稿していくのだと思います。

hrnabi.com

マイページのUI

いろいろなサービスのマイページを調査して、 TOPページに関して気づいたことを整理しておきます。

ECサイトの場合、マイページTOPが重要ではない

ZOZO TOWNには、マイページTOPが存在しません。また、Amazonでは、アカウントサービスがマイページTOPに当たりますが リンクのINDEXに過ぎません。ECサイトには不要だから、無いんですね。

f:id:takazoom:20151122093202j:plain:w250

ちなみに・・・ 楽天は、myRakutenとして、閲覧履歴やブックマークやレコメンドが表示されています。 その他に、楽天トラベルやkobo、キャンペーンバナーのリンクもあり、てんこ盛りで楽天的、といえます。

ソーシャル機能がある場合、マイページTOPでは更新性を演出

他人からアクセスされた場合を考慮して、更新性がある見せ方になっています。

例えば、食べログでは「新着クチコミ」、cookpadの場合は「最近の投稿(レシピ、つくれぽ、ブログ)」を表示しています。

また、食べログのPC版には「おすすめレストラン」があったり、cookpadは表示をMasonryにするなど、工夫されています。

ぜひ真似して、一歩でも近づきたいところです。

f:id:takazoom:20151122092852p:plain:w250

スマホサイトの場合、マイページTOPにINDEX的な機能は不要

スマホではマイページアイコンをタップでスライドメニューが表示され、ダイレクトに各機能のページにアクセスできるので、TOPページにはINDEX的な機能は不要です。

食べログの「行きたい」お店や、cookpadの「Myフォルダ」「特売情報」は、TOPページには無くて、スライドメニューにあります。

f:id:takazoom:20151122092952p:plain:w250

PCのマイページの構成は2種類

1つは、コンテンツレイアウト型。もう1つは、ストリーム型。

前者は、マイページ内の重要なコンテンツをレイアウトしたタイプ。食べログcookpadもこれに当てはまります。サンプルキャプチャとしてはHOT PEPPAR Beautyを上げておきます。 f:id:takazoom:20151123183734p:plain:w400

後者は、twitter(やFacebook)のように、コンテンツをストリームで表示させるタイプ。 YelpやRettyがこれにあたります。

誰のためのデザイン?

伊藤直也氏がプロダクトマネジャーの役割を学んだ良書5選と、適材を見極めるポイント - エンジニアtype

http://engineer.typemag.jp/article/naoya_pm

 
やっぱ読まないとだな...
何度か読もうとして、その度挫折してた。

【非・初心者向け】チームにプロトタイプ、UI/UXを定着させるときに読むスライドシェア まとめ

所属する会社ではレガシーなフローでサービスを構築・改修しているのですが、プロトタイピングであったりUI/UXの概念を定着させたいと思っています。

UX専任のポジションがない会社だと同じような悩みがあると思うのですが、チームメンバーにプロトタイプ・UI/UXを説明するときに役にたつスライドシェアをまとめました。

これをベースに「あーでもない、こーでもない」とディスカッションを重ねてチームに定着させようと考えています。

ペーパープロトタイピングの重要性がわかるスライドシェア(長谷川恭久氏)

プロトタイプのことに考えるとき、まずはじめに読むとよいと思います。とてもよくまとまっています。まだ自分の中で定着していないので、たまに見なおしてます。

プロトタイプはどんな課題を解決してくれるのか?がわかるスライドシェア(村越悟氏)

無料プロトタイピングツール「Pixate」の使い方セミナーの際のスライドシェア(THE GUILDさん)

プロトタイプのツールは各種ありますが、それぞれの特長・使いドコロがまとめられています。

セミナーに参加しましたが、このスライドでプロトタイピングの説明をいただいたあと、Pixateのレクチャーを受けました。

無料プロトタイピングツール「Pixate」の使い方のスライドシェア(吉武遼氏)

Pixateはわりとクセがあるツールです。(これバグだろ!?って思うような仕様がある)

他のツールは解説・レクチャーなしでやれちゃう人も、Pixateの場合は解説よんで触ったほうがイライラしなくてすみそうです。

UXの定義を考えるときに参考になるスライドシェア(村越悟氏)

UXって人によって解釈が違ってモヤっとしてると思います。そんなUXのアウトラインを示してくれている資料です。

Pixateの使い方セミナー

 GUILDさん主催のPixateの使い方を学ぶセミナーに参加してきました。

丁寧な説明で大変ありがたかったです。

以下、メモ代わりに。

 
  • プロトタイプの目的
    • 開発
      • デザイン前の検証
      • 手戻りをなくす
    • コミュニケーション
      • デザインチーム内
      • デザイナーエンジニア間
  • ツール
    • まず - マイナスをゼロにする
    • つぎに - ゼロからプラスに
      • 一画面の動きを作りこむ
      • 例:googleマテリアルデザイン
      • インタラクティブプロトタイピング
        • いままで、デザイン+エンジニアスキルが必要
        • 一人で完結できず、成果が出しづらい
      • origami(facebook)
        • 日本語ドキュメントがすくなく、UIもやや難解
        • 習得難易度が高い
      • principleプリンシパル(apple)
        • mac,iosでしか動作しない
      • pixate(google)
        • iOS,androidどちらもOK
        • 手触りの検証に特化(遷移はpopなど)

このあとPixateの使い方をレクチャーいただきました。

 

Macの売却

自宅のMacの動作が、あまりに遅すぎて、最近使ってませんでした。

2010のMacBook Proですから、遅くて当然。
 
買い換えるか、SSDにするか、どうしようかなと思って、ひとまず下取りの査定に出しました。
 
PCデポに持ち込んだんですが、査定価格は約四万円!
※ただしデポでMacを買い換える場合に限る。
 
結構いい値段!さすがApple
 
ちなみに自分でメモリ増設してましたが、査定には影響ないとのこと。
 
他ブログでは、メモリ増設してる場合は、元に戻したほうがよい、と指南されてるケースもありますが、必ずしもそうではないみたい。
売却する場合は、事前に確認したほうがいいですね。
 
査定が出たのが月曜なので、週末デポに行って新しいMacを買おうと思います。
中古のMacBook Airを狙っています。
 
では。
 

Windowsの人から送られてきた共有サーバのパスを、Macで開く方法

ちょっと設定すれば、特殊なツールなどは不要です。

ちょーーー便利です。 (でも周りでこの設定している人がいない。なんでだろ。)

紹介するのはOS=Yosemiteの場合です。 Yosemiteじゃなくても同じような感じだと思います。

サービスの作成

Finder > アプリケーション > Automator.app を起動してサービスを選択。 f:id:takazoom:20151003133908p:plain f:id:takazoom:20151003134055p:plain

アクションの設定

ユーティリティ>シェルスクリプトを実行 を右側のエリアにドラッグ&ドロップ

シェル=「/bin/bash」、入力の引き渡し方法=「引数として」を設定。

以下をコピペ。

echo "$@" | sed 's/^\\<サーバ名>/\/Volumes/' | sed 's/\/\//g' | sed 's/ /\ /g' | xargs open

保存する。

名前は「WindowsのパスをMacで開く」「★開く★」などがおすすめ。

f:id:takazoom:20151003132756p:plain

使用方法

Windowの人から送られてきたパスを選択して右クリック(副ボタンのクリック)すると、先ほど保存したメニューが追加されています。

「★開く★」をクリックすれば、目的のフォルダが開きます。 f:id:takazoom:20151003133525p:plain

Tips

.workflowファイルはどこにあるか?

ここににあります。間違って作ってしまったファイルは消しましょう。

\Users\<ユーザ名>\Library\Services

右クリックで表示されるメニューの整理

環境設定>キーボード>ショートカット>サービス でできます。いらないメニューは消しましょう。 f:id:takazoom:20151003133651p:plain

ショートカットの設定

あとで。 2018.5.8追記 今までワークフローで作ってたけど、↓の方法ですごく簡単にできる! 【Automator】Mac OS Xでファイルのパスをコピーする方法 - Qiita

逆に、Macで共有サーバのパスを簡単にコピーする方法

あとで。

メモ

たまにうまく開けないケースがあり、調査中。

ログイン画面のデザインまとめ

ログインUIを調べてみました。

今回は集めたのは・・・

・サービスとは分離した「ログイン機能のみのシンプルなUI」

・ほかのまとめ記事にまとめられていない

・主に海外のWebサービス

です。

メジャーどこ

iCloud f:id:takazoom:20151003103122p:plain

Wunderlist | To-do list, Reminders, Errands - App of the Year! f:id:takazoom:20151003103232p:plain

音楽系

https://songdrop.com/ f:id:takazoom:20151003103310p:plain

Beatport: DJ & Dance Music, Tracks & Mixes f:id:takazoom:20151003103313p:plain

Webサイト構築ツール

Build a Website - Squarespace f:id:takazoom:20151003103516p:plain

How To Make Your Own Website - Best Website Builder | Strikingly f:id:takazoom:20151003103530p:plain

プロトタイプUI・ワイヤーフレーム 作成ツール

Pixate f:id:takazoom:20151003103731p:plain

Zeplin f:id:takazoom:20151003103747p:plain

Free Web & Mobile Prototyping (Web, iOS, Android) and UI Mockup Tool | InVision f:id:takazoom:20151003103751p:plain

POP - Prototyping on Paper | Mobile App Prototyping Made Easy f:id:takazoom:20151003103803p:plain

国内

LINE : Free Calls & Messages f:id:takazoom:20151003103835p:plain

無料グループウェア「アイポ」 f:id:takazoom:20151003103844p:plain

関連書籍

問題解決に効く「行為のデザイン」思考法

問題解決に効く「行為のデザイン」思考法

インタフェースデザインの心理学 ―ウェブやアプリに新たな視点をもたらす100の指針

インタフェースデザインの心理学 ―ウェブやアプリに新たな視点をもたらす100の指針

ほんとに使える「ユーザビリティ」 -より良いデザインへのシンプルなアプローチ

ほんとに使える「ユーザビリティ」 -より良いデザインへのシンプルなアプローチ