Tap App Seminar に行ってきました #tapapp
TapAppプロジェクトの一貫として実施されたTap App Seminarに行ってきました。
どこで知ったのか覚えてないんだけど、受付票見たらどうも8番目に応募していたらしい。
TapAppプロジェクトは、雑誌Web Designingでの全4回の連載、今回のセミナー、1/15応募締切のアワードが云々で、詳しくはTap App Awardsのサイトを見てください。
セミナーは、PARTYの中村洋基さんの基調講演に始まり、
- スマートフォンWebアプリ最適化”３つの極意”
- スマホコミュニティサービスの創りかた
- アドビがオススメしたいWeb技術のスマホアプリ開発
- WebアプリのUIレシピ
で、最後に懇親会という流れでした。
以下、メモと感想。
インタラクティブ基調講演 ～アプリアイデアとの正しい出会い方～
中村洋基さんの基調講演。最近どんな仕事をしたかとか、どのようにアイデアを生み出すかという話。
スマートフォンWebアプリ最適化”３つの極意” ーストレスフリーのスマホコーディング術ー
石本光司(@t32k)さんによるパフォーマンスの話。そのうちスライド公開されるかなーと思ってあまりメモ取ってない。
なぜパフォーマンス？
- アンドロイドデザイン原則
- Make important things fast
- apple human interface guidelines
- Flow ( http://ja.wikipedia.org/wiki/%E3%83%95%E3%83%AD%E3%83%BC )
- 5. 直接的で即座な反応（活動の過程における成功と失敗が明確で、行動が必要に応じて調節される）
- 7. 状況や活動を自分で制御している感覚。
- 目標は0.1秒
- 何をしたらいいかはyahooとかgoogleのアレをみればいい
- 数を減らす（ネットワークとのやりとりの回数など）
- 量を減らす（ダウンロード量など）
- 無駄を減らす（レンダリングの効率化など）
- Fast is better than slow
パフォーマンスをあげるためのツール
スマホコミュニティサービスの創りかた ーユーザをハマらせるためのサービスデザインー
サイバーエージェントの開発者4人（下山航平、熊切剛、鬼石広海、見上楓）によるパネルディスカッション的なやつ。リアルタイム意訳しながらのメモなので間違えていたらごめんなさい。
あと敬称略です。
コアターゲット層に合わせた世界観の作りこみ
- 下山
- パシャペはどんなターゲット？
- 熊切
- ペット飼っている人がターゲット。20から35歳の女性がメインだったが、少し上の方にも使ってもらっている。また、ITリテラシーが高くないというのも意識している → きっちりと説明をしてあげる
- 見上
- ガールズトークは、20代後半から30代。18歳未満は利用不可。仕事も恋愛もやってきた女性がターゲット。割と普通の女性。
- 下山
- UIでこだわった部分は？
- 見上
- ヘッダーの色は、何色も並べて検討した。流行りの色は廃れたらダメなので省いたり、女性だからといってキラキラといったイメージも取っ払った。「みんなに打ち明ける」ドロドロしたものを打ち明けて欲しいので、「投稿」とかにはしなかった。聞く側は「共感」。
- 鬼石
- ゴラクログは、10代から30代の男女で幅広い。そのため、デザインもプレーンなインターフェース。画像を引き立たせるために、それ以外はシンプルにデザインした。
- 下山
- 友達年鑑は、スプラッシュ画面に、こんな人に使って欲しいという意味を込めて写真を置いた。
- 熊切
- デザインだけでなく、言葉も大切。
「継続性」と「回遊性」と「ユーザループ」
- 下山
- ゴラクログだとどんなふうに意識している？
- 鬼石
- 継続性でいうと、毎日コツコツログを残してもらいたいため、マイページをカレンダーっぽいデザインにした。縦型のカレンダー形式にして、空きが気にならないインターフェースにした。ユーザループでは、感想を書くと、全体のフィードに感想が流れて、パチパチ（イイネみたいなやつ）を目立たせて、親指で押しやすい場所にした。また、パチパチをすると、相手にお知らせが行く。お知らせに「ありがとう」というボタンがあり、コミュニケーションのハードルを下げた。
- 熊切
- パシャペの場合は、写真の上にいいねボタンがある。最初は小さくしたが、調査したところ、あげた日にいいねがつくと、次の日93％、7日後68％の継続率。これがユーザループ。さらにいいね数が4,5倍になった。マイページのアクセスがほとんどなので、タブを使わなくてもマイページからいろいろな情報が見れるようにした
- 下山
- 詰め込み過ぎない、というのはよく言われるが、回遊性を考えて色々なリンクを貼る、ということもある。
- 見上
- ガールズトークでは、トップページの一番上にカテゴリ一覧があるが、その下に更新されたトークを載せるようにした。自分が書くとトップページに乗るので、書いた人はテンションがあがる。見る側は、カテゴリに行かなくても、更新されたトークにすぐいける。回遊に関しては、トークの詳細ページから、同カテゴリのトーク一覧や人気一覧に飛べるようにした。
変えていくデザイン
- 下山
- 内製なので変えやすい。パシャペはどんなことを？
- 熊切
- 最低でも週に一回は変えている。たとえば、お知らせ欄で、写真を大きくしたり、リンク先をユーザのページではなく、写真のページにしていいねをすぐしやすくした。ペットメインなので、ユーザのアイコンだけでなく、ペットのアイコンも表示するようにした。
- 下山
- 他にも何か変えてましたよね？
- 熊切
- これはつい最近なのですが、カレンダー形式の表示から変更した。理由は、最初がすっからかんになってしまうのと回遊性が悪くなってしまうため。カレンダー形式だと、ユーザは埋めようとしてくれるので7日間だけ残して、その下は回遊枠にした。
- 下山
- ゴラクログは？
- 鬼石
- ゴラクログではネガティブチェック（ネガティブな意見をひたすら言ってもらう）を行なっている最中。会員登録前にオールフィードが見れるが、興味がないゴラクが表示されると離脱してしまうのではないか？と考え、話題のゴラクとしてユーザが知ってそうなゴラクを表示。
最後に一言
- 鬼石
- 半年前に転職したばかり。以前は広告でコンシューマ向けは初めて。革新的なインターフェースを作ろう！みたいなこだわりがあるとユーザが置いてきぼりになる。標準のデザインを参考にして、自分なりのデザインを加えていくのが大事。
- 熊切
- 同じく半年前に転職。ユーザがストレスなく使えるか、というところに気をつけないとどんどん離れてしまう。MTGに役員や社長、他のチームも来てかなりオープンにやっている。アメーバのユーザをつかってユーザテストも行えて面白い。
- 見上
- ユーザがどんなシーンで使うかが大事。捨てることも大事。
質問
- 質問者
- 前の会社との違いは？
- 熊切
- 前の会社だとクライアントがいて、社長がどうたらというのはなかった。風通しがよい。ユーザ目線でのチェックを経営陣がやってくれる。スピード感はかなり早いので改修がしやすい
- 質問者
- AかBかなやんでるけど明日リリースみたいなときはどうする？
- 熊切
- リリース前ならとことん話し合うので、明日リリースであってもとことん話し合う。リリース後だと、データを見て判断する。
- 質問者
- スマホならではのコミュニケーションスタイルがあると思うが、PCとのデザインやってた人から見るとハードルが高いのでは？
- 鬼石
- ぼくは昔PCばかりやっていたが、うーん、縦長というのが大きいですね。スクロールはあまり気にならない。PCはファーストビューを気にするが、スマホはそこまで気にならない。ただ、基本的なところは変わらないのでは？
- 質問者
- マネタイズとUI設計の関係について
- 下山
- マネタイズはアメーバ全体で考える。我々のコミュニティサービスはどれだけ人を集められるか。
アドビがオススメしたいWeb技術のスマホアプリ開発 ーマルチプラットフォームを実現しやすい、PhoneGapでのスマホアプリ開発ー
轟啓介さんによるPhoneGapのススメ。Adobeを知るには http://html.adobe.com/jp/ を見てね、とのこと。
PhoneGapはいくつかの勉強会の抱き合わせ的な発表で何度か聞いてはいたんだけど、この発表聞いてすごい触りたくなった。というか触る。
とにかくすごいなー触りたいなーと思わせてくれる発表だった。
背景
- Flashが得意な人はFlashで作ってもらって、そうでない人はぜひPhoneGapを使ってWEB標準で開発してほしい
- 複数プラットフォームに対応するには、たくさんの言語を覚えないといけない
- ひとつのコードで対応できたら素敵
PhoneGapとは
ツール
build.phonegap.com
emulate.phonegap.com
- ベータ版だけどそこそこ使える
- デバイス動かしたりもできる
debug.phonegap.com
- build使ってなくてもここでデバッグできるよ
Edge Code
- タグ上でCtrl+E押すと対応するCSSの記述がその場に展開されてそのまま書き換えられる
- とかとか。すごかった。触りたい。
WebアプリのUIレシピ
サイバーエージェントの開発者5人（神谷尚志、河合拓也、筒井豊、櫻井瑶子、平木聡）による発表。それぞれのアプリのUIでどんなことを工夫したかという話。
スライドが印刷されて配布されていたのでメモは少なめ。すごい良い資料だったので公開されるといいな。
ストレスを軽減する（天空のクリスタリア）
右下に三角形上に3つのボタンが配置されていておもしろいなーと思っていたゲーム。
- ユーザの使用環境を把握
- ターゲット、利用状況
- 分かりやすいUI
- ボタンは40-50px。Androidはずれるので余白を取る
- ユーザが迷わない
- 次のアクションを伝える、欲しい情報を提供
- カード所持数とかでやりこみ度を判断して見せ方を変更している
- 次のアクションを伝える、欲しい情報を提供
質問
- わくわく感を、いろいろなユーザにどう見せるか
- ファーストビューに詰め込めばいいというわけではない。良いカードを見せたり、ヘビーユーザの場合は、自分のイベントのステータスがわくわくポイントなのでランキングとか仲間が負けた情報を表示してあげる。
- 細かいんですね
- ヘビーとライトに大きく分けたが、もっと細かく分けられる。初めてすぐの人とか2,3週間の人とか。
動的に変更されるUIのコツ（アルティメットレーサー）
スマートフォンUIのアニメーションについて｜1 pixel｜サイバーエージェント公式クリエイターズブログ
上の記事を読んでおもしろいなーと思っていたので話聞けて良かった。
運良くデザイナの方と懇親会で同じテーブルになって、質問しまくった。ありがとうございます。エンジニアの方ともお話したかったけど、タイミングがあわずに話せなくて残念。
- 多くの情報を見せるには
- 1ページに全部のせると、ごちゃごちゃしてライトユーザが離脱してしまう
- 各情報を細かく分けると遷移が多すぎて迷子になる
- やった施策
- ぱっと見の印象をシンプルに
- 色をしぼってユーザに注目して欲しいところは赤色で
- どう軽くするか
- 重くなるJSの書き方はしない
- liではなくulでイベントハンドリングする（delegateを使う）
- HTML、CSSでできることはJSでやらない
- そもそもデザインを簡略化する
- デザイナさんに、ちょっと要素多いんでなくしませんか
- 重くなるJSの書き方はしない
質問
- 実装可能だけど実装する/しないの判断について
- 動きと速さの両立。良いアニメーションでも、まず考える。ユーザの利益になるなら頑張るが、そこまで必要じゃないかな？と思えば別の技術を使う。
- デザイナさんはかっこいいデザインやりたいですよね？
- デザイナ側でサンプルアニメーションを作って、こんなの作れない？と開発に渡す。デザイナは細かいところにこだわってしまうが、開発側にそれはちょっと、と言われるのでお互いに落とし所を話しあう。
動的に変更されるUIのコツ（天下統一クロニクル）
面白くてメモるの忘れてしまった。マイページのファーストビューのデザインの変遷、みたいな話。
何度もデザインを変更していたのでどんな感じに決定しているのかなーと思って懇親会で聞いてみたら、毎週社長レビュー的なものがあって、その結果でデザインを変更したりするらしい。
よりよいUIのためのデバッグ方法（あそんではぐぺっと）
- とにかく実機でさわる
- 手に持って指を置いたときに気づくことも多い
- 言葉に気をつける
- ひらがな、漢字の与える印象とか
- 感想や意見を集める
- ユーザテスト5人
- 思考発話法
- 制作サイクルをたくさんまわす
質問
- ユーザテストはどのタイミングでどんな人？
- 新機能追加前にチーム内で触る。
- リリースされていないゲームだと、部署全体で触る会がある。
- 外部のユーザを読んで触ってもらうことは？
- 身内の人に触ってもらうとかはある。
スライド
は、見あたらなかった（一瞬slideshareにアップされてすぐ消されてる）けど、似たような内容の記事があった。
スマホアプリ開発の最前線で使われている、UIデザインメソッド20
2012/11/30追記 スライド発見。
