スマートフォンUXの最前線 に参加してきた #webcat

勉強会 iOS iPhone UX


(写真：会場を含む高層ビルを、雨の中東京駅と併せて。)

スマホ＆UIという、個人的に興味を引くキーワードな勉強会の情報をキャッチしたので、この日参加して来ました。

会場はグラントウキョウサウスタワー 41Fアカデミーホール＠東京駅。転職支援の『リクルートエージェント』さんのフロアになります。ビル自体は東京駅付近にある『八重洲ブックセンター』の、道路を挟んで対面に立つビルですね。

天候(雨)の都合もあり、5分ほど押した形で開始。以下メモです。

講演1：『iOSデバイスの進化に伴うアプリ開発とデザインの変遷』


  • 自己紹介：
    • OS X及びiOSアプリの開発
    • 2004年から始動
      • 2007年iPhoneが出て流れがガラッと変わった
    • 現在は10人程度
  • 『HDMT株式会社』の売り
    • 技術力
      • 世界トップレベルの技術があると自負！
    • デザイン力
    • HMDTの仕事
      • そのまま、iPhoneの歴史に重なる。
      • iPhone SDKの公開が大きかった。会社に大きな影響を与えた。
      • iPhone 3G/App Store 狂乱の風が吹き、今に至る。
      • 現在、60以上のアプリを公開中。毎月一本以上のペース
  • iPhoneアプリの黎明期
    • 駅探エクスプレス（乗り換え案内）
    • CMにも出てた。(iPhone 3G版)
    • （特徴）
      • ミニマムなユーザインタフェース
      • 不必要な情報は隠す。
      • キーボードレスの入力：最初のiPhoneが出た当時（iPod Touchが出た当時、日本語キーボードがとっても重い→極力キーボードを使わないように配慮）
      • 付加的な情報の見せ方
      • 検索結果が出た時に、複数ある場合横フリックで切り替えられるように。
      • 縦フリックの場合、前の電車／次の電車を探す、という前後検索も出来るように。
      • 横：並行世界、縦：時間軸を表すメンタルモデルの構築を目指した。
  • ユーザインタフェースの錬成
    • Before→Afterの変遷
      • ボタンの数がグッと減っている
      • 大きいボタンを並べている：3つのボタンが重要！
  • 何が起きたか？
    • メンタルモデルの確立
    • 技術的課題の確認と解決
      • どうやって解決したか？→『技術者はNOと言うな』Yesと言ってから、どうやって実現するか考える（任天堂社長：岩田さんの言葉らしい）
  • ユーザーエクスペリエンスを考える
    • iMandalArt（アプリ）…『マンダラート』をイメージ。発想を広げていくためのツール。
    • iMandalArt for iPhone | Mandal-Art
    • for Mac/Win/Palmそれぞれでリリース
    • 発想支援ツールなので、出掛けながら使うのが適していたと思われる。
    • UXデザイン
      • アピアランス(appearance)：見ため。
      • レイアウト(layout)：ボタンをどうやって配置するか。
      • ビヘイビア(behavior)：ユーザの操作をどういう感じで部品を動かすか。）
      • ※スマホのUXにとって大事なモノは、3つめの『ビヘイビア』が一番大事である。
      • iMandalArt基本ビヘイビア
        • 下層/上層マンダラそれぞれの動作に関する仕様を作成、ユーザを適切にガイドする。
      • 論理と直感
      • データ自体は論理的
      • それをどこかで直感的に切り替える。そこに面白い体験がある
  • 受託開発という仕事スタイル
    • 色々な所と仕事している。デザイン会社、広告会社、印刷会社…
    • 色んな話しが来る。ほぼ何でも仕事を受けた。
      • 来たボールはとにかく打ち返す。（by 糸井重里）
    • 受託開発とは、プロ同士のコラボレーション
    • 受託開発であっても、独自色を出すためには？
      • 『だいたい仕事は理解しました。プロトタイプを作成してご提案したいのですがいかがでしょう？』…仕様は満たすけど、こっそりやりたい事も入れ込む。
    • 皇帝（エンペラー）モデル
      • 民主主義的な考えは要らん！
      • よりよい皇帝がいると、プロジェクトは上手く回る。
    • プロジェクトのゴールがはっきりしている場合、皇帝は自分の言ったことに責任を持たせる。
    • デザインありき
      • MoneyTron（webtron）：小遣い帳アプリ。
      • 『チャンピオンスクリーン』が大切
        • アプリを決定づける、1枚のスクリーンショット。
        • デザイナと仕事するときは、まずこれを決めていく。
        • アップルはこれを作るのがとても上手。
    • フルカスタマイズ
      • iOSのアプリは基本、流用可能。
      • でも、デザイン性を高めていく程、この作業が必要になってくる。
      • 画像なども想像以上に必要となった。


  • 人を育てる／組織を運営して行く
    • 経歴の紹介
      • 工学部情報工学科専攻、修士課程修了
      • 24歳で家電メーカー
      • 29歳で独立
      • 32歳で会社設立
      • 今年で38歳
    • 組織作り
      • 1人で出来る事の限界が見えてきた
      • 開発作業は生産効率が個人に依存する。
      • エキスパートプログラマ1人で、凡庸なプログラマ20人分に相当。
    • 理想の組織
      • 20人程度の技術者集団（これ以上だと把握出来なくなる）
      • 代表兼営業兼広報兼エースプログラマが俺
    • 人の育て方
      • 『俺になれ』
      • 書籍を書いた。：iOS開発におけるパターンによるオートマティズム
        • スタイルを確立。
        • iOSアプリを作り上げる短いソースコード群をパターンとして定義
        • これらを組み合わせることで、オートマティックにアプリを作成
      • 成果
        • 2011/11にiOSプログラミング未経験者を4人採用、5日程度の研修の後本を読ませ、（1〜2ヶ月後）実践配置して問題無し。
        • 今は、自分が得た知識を明文化して、他の人に理解させ、チームを作ることが楽しみに。
    • (質疑応答)
    • Q：駅探アプリ：PCをイメージした画像があった。その画像になったきっかけがあれば。
      • アプリに於いて、何が一番大切か？
      • 3つのボタンを強調して行くべきだ、という議論に。
  • Q：大辞泉UI、お客さんに説明したときの苦労などあれば。
    • 小学館とは長い付き合い。ある程度お任せさせてもらった。
    • 『言葉の宇宙です』
    • 次にこんな面白いモノをやりたい。当初の時点でイメージは出来てた。後は詰めるのみ。
  • Q：プロトタイプは何で作ってる？紙？Flash？
    • いきなりアプリを作ってます。そっちの方が早い。
  • Q：来た球を打ち返す：一番多い種類の球はなに？
    • ゲーム関連は少ない。
    • やっぱり来るのはユーティリティ系。スマホに関わって無かったような所から来る。
      • Web制作するような所からはあんま来ない。むしろ全然別物なところから。
      • iOS、ココアフレームワークを使いたい思いが強い。

講演2：ニコ動iPhoneアプリの開発・運用あれこれ(仮)

  • 自己紹介
    • 2009/06中途入社
    • 前職は大手メーカー系Sierで研究開発
  • ニコ動・ニコ生アプリの概要
  • ニコ動アプリのUX
    • ニコニコ動アプリの進化：バージョンアップを30回以上繰り返してきた。
    • 【Ver1.0】
      • まずiPhoneでに鼓動が見れる
      • ガラケー向けに変換された動画を流用
      • UITableViewを使ったシンプルなUI
    • 【Ver2.0】
      • 画質の向上
      • Wifi接続時のみ、mp4で高画質再生
    • 【Ver3.0】
      • 更なる画質の向上
      • UIをHTML/CSSで実装、デザインの見直し
    • 【Ver4.0】
      • UXの再設計
      • 気温的な部分はVer3.0で完成
    • UXの再設計
      • UIの見直し
      • 使い易い
      • 探しやすい
      • 迷わない
      • 画面の向き
        • 現状：探すとき：縦固定、視聴するとき：横固定
        • 問題点：頻繁に端末をくるくると持ち帰る必要がある
      • 実際の利用シーン
        • 縦のケース、横のケース…
        • 状況毎に最適な画面の向きがある
          • 縦横両方に対応して、より使い易く
      • タブバーの廃止
        • 従来
          • 広告は表示したい
          • 画面領域は確保したい
        • 改善
          • タブバーによるメニューは廃止
          • 必要な時に『引っ張り出す』メニュー
      • コンテンツ領域を広く使えるようになった。
      • 2ペインスタック構造
        • 横向き画面を最大限活かすUI
        • 横フリックで戻る、進むが可能
        • ビュー自体はUIWebView
    • 新しい動画視聴スタイル…従来は『ながら見』、『ダラ見。
      • 『ながら見』
        • 動画を観ながら他の動画を探せる
          • 動画視聴までのハードルを下げる
          • テレビを見ているときと同じ感覚に。
      • 『ダラ見』
        • いつ、どういう状況でアプリが使われているか？
          • 可処分時間・就寝前
            • 夕食後〜寝るまでの間
            • 自宅でだらだらしている時間
            • TVのような垂れ流し感覚
          • あなたチャンネル機能
            • 興味ありそうな動画をリコメンド。


    • デザインの刷新
      • 見た目はやっぱり重要
        • 変わった感、ユーザに飽きられるのを防ぐ
      • ニコ動で、先進的・クールな感じ・未来感と言えば…
      • デザインvsパフォーマンス
        • 実装可能だが、レンダリングが激しく重くなった。適度な落としどころを模索。
        • [透過＋ブラー]→[透過のみ]に。
      • リリース後の反応
      • 狙っていた点についてはある程度の評価を得た
      • 特にipadのような大きな画面での利便性が高まった
      • 一方で、想定してなかった観点からの指摘もあった。
      • コメ数・視聴者数の表示
        • 動画一覧から削除したところ、
        • 『コメント数や視聴者数で動画を探していたので不便』という声。
        • UIを変更する際は、既存の文化を破壊しないように注意。
      • 画面の向き
        • 加速度センサで画面の向きを変更
          • ロック解除がめんどくさい
          • そもそもロック解除の方法が分からない
          • 明示的に設定出来るようにした。
        • iPhoneの標準UIに従った
          • 標準のUIが最良とは限らない。
  • マネタイズ
    • ニコ動iPhoneアプリのマネタイズ手段
      • プレミアム会員の入会導線
      • 広告収益
    • プレミアム会員
      • 月額525円で各種サービスを提供
    • iPhoneアプリでの導線
      • アプリ内の各所に導線を配置
      • リンクをタップするとSafariが起動して入会Webページに遷移
      • プレミアム入会導線としてのアプリ
    • 2011年11月事件発生
      • ニコ生アプリがリジェクト。理由：プレミアム入会ページへリンクするためのボタンをアプリ内に設置してはいけない
      • どうしよう…
        • アプリ内から入会導線を消す？
        • IAPを使って入会機能を実装？
        • 今回はニコ生アプリがリジェクトされたが…
          • ニコ動アプリも次回審査時にリジェクトされる事は間違い無し！
    • 2つの選択肢→2を選ぶ事に。
      • 1.ニコ動アプリ開発を凍結、放置して入会を維持
      • 2.素直にIAPを使ってプレミアム入会機能を追加
    • どのIAPプロダクトを選ぶか→非自動更新型を採択。
      • 購読型（自動更新）
        • 自動引き落としの月額課金が可能、審査が厳しい。
      • 購読型（非自動更新）
        • ユーザが継続手続き、審査は比較的緩い
    • 価格を幾らに設定するか
      • 要判断
        • 自動更新購読型ではない
        • 実はWebから入会してくれた方が嬉しい
        • チケット：2000円/3ヶ月を採用。→下がった...orz


        • 経理まわりの注意点
          • 速報値と数値が合わない！→『心配するな』by Apple
    • 広告収益
      • 広告周りの改善
      • これまで
        • アドネットワークの広告を表示
        • 各社提供のSDKをアプリに組み込み
      • 問題点
        • 新しいアドネットワークを追加する度に手間
        • UDID問題
      • 広告配信システム＋Webを採用
      • メリット
        • 一番儲かる広告を出せる。
      • ところで
        • アプリで稼ぐのは大変
        • アプリをやめて、webでやれば良いのでは？
        • →HTML5でニコ動
          • iPhoneのSafariでは動画にコメントを重ねられない！
          • iOSについてはしばらくはアプリがメイン
  • 技術的な話
    • UIWebViewを使ったUI
      • 骨組みはCocoa/Obj-C
      • 他はWebで
      • Web-アプリ間の連携
      • メリット
        • ちょっとした機能の追加、修正であれば審査不要
        • hTML/CSS/JSで開発可能
      • デメリット
        • 描画処理などネイティブアプリに劣る部分がある
        • JS/CSS圧縮、キャッシュ最適化など必須
      • UIWebView使用時の注意点
    • 動画再生の仕組み
      • 全動画を変換
      • osec形式？
    • 生放送の仕組み
      • RTMP形式で映像を配信しているが…Appleの規約に抵触。
      • AppleはHLSを採用
  • まとめ
    • UX
      • 使い易い、探しやすい、気持ち良いを追求
      • 作って壊して、ユーザの声を聞いて、消化
    • マネタイズ
      • Appleの審査は厳しいが受け入れる
      • 広告についてはチューニングし易い様に
    • 技術
    • ※最後に･･･人材募集してます！

LT：キャリアの切り口から見た、スマホアプリUX

  • Web CAT Studio 山田氏


  • リクルートエージェントの御紹介
    • 転職エージェント事業
    • WEB/インターネット業界で約410社・6200求人
    • 月2〜3回ペースで、色々な領域の技術勉強会を実施
    • 理由
      • Web業界を盛り上げる為、
      • 転職を考えていない方にとっても有益な存在のため
    • コミュニティのご案内：Web CAT Studio
    • 職種別：有効求人倍率の変化
      • フロントエンド・企画の人も求められる事が増えてきた。


    • Webクリエイターとキャリアのこれから
      • 今の状況
        • エンジニアと同様にクリエイターの市場価値が高まっている
        • 多様性が進み、専門性を求められる時代へ
        • デザイン＋αのスキルを身に付ける
      • これからの展望
        • 今後はいかにユーザー目線での運用・改善が出来るか
        • クリエイターへの期待：サイト、コンテンツ制作ではなく、より使い易いサービスを企画する事へ。



･･･と言った形で、2時間ほぼノンストップで講演2つ＋LT1本終了。この後別会場で懇親会が催されていたのですが参加はせずそのまま帰途へ。

Web CAT Studioでは、メモにも書いたように定期的に勉強会を開催しているそうです。Twitterアカウントはこちら。
→Web CAT Studio(TwitterID:@webcatstudio)

FaceBookやUSTREAMのアカウント・ページも用意されているので気になる方は適宜チェックしてみてはいかがでしょうか。

環境的には今回のテーマ、iOS/iPhoneと、開発という点から見ると個人的には未着手な分野だったのですが、スマホアプリという視点で多いに勉強になる情報を得る事が出来ました。審査が厳しいという部分はありますが、開発環境としては統一されておりAndroidのあのバージョンアップ頻度・各バージョンや環境への諸対応の大変さからするとこちら(iOS/iPhone)の方がまだやり易いのかなぁ･･･という気がしなくもないなと感じた夜でした。

その他関連：