読者です 読者をやめる 読者になる 読者になる

@thorikiriのてょりっき

@thorikiriがWebとかAndroidとかの技術ネタや本を読んだブログです

スマートフォンUXの最前線 #webcat に行ってきました

event mobile

職場が近いってもんじゃないので遅刻してません(キリッ
いつも通りメモ的なものを書き残しておきます。

iOSデバイスの進化に伴うアプリ開発とデザインの変遷

受託開発のスタイルで60以上ものiOSアプリを開発していて、月に1アプリ以上のペース。本日はiOSアプリのUX、受託スタイルについて、技術者として経営者としての話。

iOSアプリのUX
  • 初期の事例
    • Moved
    • Apple iPhone3G ad ekitan Japanese - YouTube
    • ミニマムなUIになるように気を使った
    • ゴテゴテにせずシンプルに、その画面に必然性のあまり無いものは隠すようにした。
    • 昔は日本語キーボードが重かったので、キーボード入力をさせない作りにした。ListViewでドリルダウンする感じ。た→と→東京 みたいな。
    • 縦横で画面を切り替える。普段は縦で必要な情報を出し、横画面にすると付加的な情報を表示するようにする。
    • 横向きにフリックした場合は検索軸を変える。縦向きにフリックした場合には時間軸を変えることに統一感を持たせた。
      • これによって、ユーザのメンタルモデルが形成され、縦軸横軸のイメージを持つので使い方がわかりやすくなる。迷わなくなる。
    • いきなりUIが完成するわけではない
    • メンタルモデルが確率することと、技術的課題を解決していくことでUIが練り上がる。
    • 技術者はNOと言うな。Yesと言ってから後でやりかたや代替手段を考える。
  • UXを考える
    • Mandal-Art
    • すでにMac版(古い時代の)、Windows版、Palm版があった。
    • 機能としては完成されているものの移植なので、UXに重点を当てて考えた。
    • UXの大事なことは3つ
      • アピアランス ・・・ 見た目、質感、色、テクスチャ
      • レイアウト ・・・ ボタンの配置やツールバーの配置などなど
      • ビヘイビア ・・・ 操作時の動き
    • アピアランスとレイアウトについては紙媒体でもあるものなので、アプリとしての特徴を出せるのはビヘイビア。
    • セルをタップした時の挙動は、タップされたものがターゲットセルとなって中央に縮小しながら移動する。と同時に元のものは拡大しながら表示されなくなる。ターゲットセルの下から時計回りに出現しながら配置される。(言葉じゃイメージ伝わらない)
    • ユーザを適切にガイドする。つまり、マニュアルやヘルプが無くても良いようにする。
  • デジタル大辞泉
    • デジタル大辞泉
    • データの集合である。
    • ツリー構造は通常TableViewインタフェースで表現されることが多い
    • ツリー構造を同心円状に配置し、惑星っぽくし、回転させた。選択すると拡大していく。
    • 論理と直感を合わせて。
    • QA:お客様へどうやって説明したの?
      • 2〜3年お付き合いのある顧客だったので、お任せしてもらうことが出来た。
      • 次は新しいインタフェースで!と言う話はしていた。
      • 「言葉の宇宙」と言うイメージを伝えておいて、あとはプロトタイプを作って動くものを見せた。
受託開発について
  • 基本方針は、来た玉は打ち返す
    • 成功も失敗もするが、その中から得られるものは必ずあるはずだと言う信念。
    • QA:どんな案件がよく来たりこなかったりするの?
      • ゲーム系はあんまり来ない。Unityとかが得意な分野なので。IT系の分野の所からよりは、あんまり関係ない、少しお固いようなところから話が来る。もしくは、デザインに特化している人たちから。
    • 受託開発について、下請け的なネガティブなイメージもあるが、プロ同士のコラボだと捉えている。
      • ○○のプロである顧客と、アプリ開発のプロである自分達がコラボレーションして良いものを創り上げていく。
    • 受託開発で独自色をつけるには、仕様をあらかた理解したらプロトタイプを作ってしまい、その中に独自色のものを組み込んでいく。実際に動く物を見せることで主導権を握ってしまう。
    • QA:プロトタイプは何で作るの?
      • コードを書きます。紙ベースもやってたこともあるが、紙ベースではコピペが出来ないので難しい。Cocoaで作ります。紙より早いレベルになっている。
  • 皇帝モデル
    • 俺様モデル:開発に民主主義は要らない。一番分かっている人に全権を委任する。そして、決定権を持つ。
    • 決定権が曖昧な場合にはうまくいかない。
  • MoneyTron
    • MoneyTron
    • チャンピョンスクリーン:1枚のスクリーンショットだけで、アプリの本質がわかるものを用意し、これに対してカスタマイズを加えていく
    • カスタマイズは、UI部品をそれぞれ個別にカスタマイズしていくので、デザイナにとっても、デベロッパにとっても大変。
    • 強制は常に正しい。開発者はめんどくさいと嫌がるが、皇帝モデルでやらせる。正しい判断となる。
経営者として
  • 人を育てる組織運営。
    • 一人で出来ることの限界が見えてきた
    • 一流のプログラマと初心者のプログラマでは10倍、20倍の生産性の差がある。逆に言うならば、20倍の事までしか一人で出来ない。
    • 20名程度の技術者集団。これ以上になると全員を把握出来なくなり、何をやってるのかわからない人が出てきてしまう。
  • 育て方
    • 俺になれ!
    • 自分の経験と知識の暗黙知形式知とした。つまり本を出した。
    • 4人のiOS未経験者に対して、5日程度の講義と、本を読ませ、1ヶ月程度で現場で活躍出来るレベルにまでなった。
  • iOS開発におけるパターンによるオートマティズム
    • 各種パターンとして纏まっていて、それぞれのパターンを組み合わせることでオートマティックに開発出来るようになるらしい。(非常に興味深そう)
    • HMDT BOOKS:Overview
      • iOSの専門雑誌。

iOS開発におけるパターンによるオートマティズム

iOS開発におけるパターンによるオートマティズム

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

UXについて
  • ニコニコ動画アプリのバージョンアップ
    • ver1.0 iPhoneニコニコ動画を見れるようにするために作った。ガラケーと同じ画質で荒い。UITableView。
    • ver2.0 一部の画質が良くなった。アイコンや動画のプレーヤーを変更した
    • ver3.0 さらに画質を改善し、mp4が多くなった。UIをHTML/CSSに変更した部分がある。
    • ver4.0 ひと通り機能が揃ったので、UXを改善した
  • UXの設計
  • 使いやすさ、探しやすい、アクセスしやすい
    • 以前は画面の向きの縦横切替で表示するものを変えていた
    • 利用シーン毎に縱横を考えた結果、両方に対応するようにした
      • 電車の中では横向きにすることはあんまりしたくはないので、縦画面でも動画がちゃんと見れるように
    • タブバーは廃止した
      • 画面の表示領域が狭くなってしまう。広告が入ると尚更。収益を得ないとダメなので、無料会員では広告を入れる必要がある
      • 引っ張り出すようなメニューにすることにした。
      • 個人的メモ:タブの時は下のタブの上に広告があったけど、上から引っ張り出すメニューの場合は引っ張り出す下に広告を表示していて、誤タップしやすそうで、ごにょごにょごにょ。
  • 2ペインのスタック構造
    • 横向き画面を活かす
      • スタック自体はUIWebViewを利用し、WebViewの中身はHTML/CSSで作っている。
      • 画面を切り替えるわけではないので、HTMLの読み込みが頻繁に発生しない。
  • 新しい動画視聴スタイル
    • ながら見とダラ見
    • 動画を探して、再生してから、読み込むまでの時間が申し訳なかった
  • ながら見
    • 動画を見ながら他の動画を探せたり出来るようにした
      • 動画視聴のためのハードルを下げる、読み込み待ちを嫌がるのを避ける
      • 動画が気に入らない時も、取り敢えず見ながら他の動画を探せる
      • 探しやすく、テレビを観ている時と同じ感覚になる
  • ダラ見
    • 利用シーンを分析すると、夕食後から就寝前の時間帯が多い
    • だらだらしながら見てる事が多い
    • あなたチャンネル
      • リコメンド(すでにニコニコ動画にあった視聴履歴から)
      • SNSのタイムラインから拾って
      • ニコレポから
  • ver4.0のUI刷新
    • 見た目はやっぱり重要である
    • ユーザに飽きられないように、定期的にリニューアルしている
    • 今回はクールでかっこいい感じに仕上げた。ニコファーレをイメージし、サイバーなイメージで。
    • デザイン VS パフォーマンス
      • デザインを凝るとレンダリングに負担がかかって、パフォーマンス劣化する可能性がある
      • 特に、古い機種だと問題が大きい
  • リニューアルの反応
    • 概ね上々であった
    • iPadの横画面での2ペインは良かった
    • 予期せぬところでのツッコミがあった
    • 既存の文化を壊さないこと
      • 表示する項目を絞りこむのも良いが、必要なものも削らない
      • ニコニコ動画では、再生回数、コメント数、マイリス数を動画の判断基準にする文化があるが、それを一覧表示から削ってしまった。後に復活した。
  • 標準のUIが常に良いとは限らない
    • 中高生がメインターゲットの場合、標準が通用しないケースがある
    • 加速度センサーに従った縦画面、横画面の自動切換えとか
マネタイズについて
  • 混雑している場合に画質を劣化させたり、ニコ生で視聴者数が多いときに無料ユーザを追い出したりと、課金への導線とした。
  • アプリ内からリンクで支払い画面へSafariを起動させる仕組み
    • しかし、Appleの規約変更でリジェクトされるハメになった
  • アプリ内課金だと、Appleに30%払うことになるので、値上げしなければならなかった
    • 自動継続課金と非自動継続課金があるが、自動継続は審査が厳しく、新聞や雑誌的なものでしか通用しないっぽいので、非自動課金にした。2000円で3ヶ月のチケット方式を採用。
    • 結果、課金回数がガクッと落ちた。けど、会社に怒られるレベルではなかった。
  • 経理周り
    • 1ヶ月後に出るAppleの売上速報値
    • 2ヵ月後に出るレポート
    • この2つで数値が異なる。クレジット決済などの都合らしいが、トータルすると問題ないとAppleから回答があった。
  • 広告について
    • 各広告会社のSDKを入れるのだと制御が難しい
    • 端末識別番号を送信している問題のある広告SDKが判明した場合も、iOSだと外してリリースしても審査があるので、即時対応が出来ない
    • タイミングによって各会社の単価が変動するので、最も儲かる広告を出したいが制御出来ない。
    • 広告配信サーバを準備して、アプリはiframeを介してサーバにアクセスする。サーバ側でどの広告会社のSDKを利用するかを判断するようにしている
技術的要素について
  • HTML5ニコニコ動画
    • iPhoneSafariだと、動画の上にコメントを表示させることが出来ない
    • 今後可能になったら移していきたいが、現状はアプリで頑張る
  • UIWebView
    • 骨組みはiOS SDKのUIViewを使って制御する。
    • コンテンツについては、UIWebViewの中でHTML/CSSで表示する
    • 細かい修正はリリースのタイムラグ無しに対応出来る。イベントとかの対応もしやすい。
    • ネイティブで組むより描画が弱いのがデメリット
  • URLスキーマ
    • HTMLにURLスキーマを作ったもののリンクを入れてアプリの機能を呼び出す
      • href="niconico://play/sm9" のような形式
  • UIWebViewの注意点
    • Safariとイコールではない。Safariよりレンダリングが遅い
    • CSSSafariと同じにならないものがある
    • アプリのバージョンアップでlocalStorageが壊れることがある
  • ニコ生のストリーミングについて
    • PC版などはRTMPプロトコルで配信している
    • Appleでは、HLS(Http Live Streaming)を使わないとダメでリジェクトされる
      • 10秒毎の動画ファイルデータと、今どのファイルなのかを定義しているものを読み込む形式
      • 10秒の動画の細切れなので、一気に読み込まないので帯域を圧迫しない
      • HTTPサーバだけで良い
      • HTTPなので、クライアントもHTTPに対応したものであれば良い
      • ただし、つねに10秒以上の遅延が発生してしまう

LT

  • 以前はざっくりとした職種の区分だったけど、最近は細分化して、特化したスキルになってるよ
  • ひと通りモバイル対応してきた段階なので、コンテンツをただ作るのではなくて、どうすればもっと良い物になるのかを考えられる人が求められてるよ

仕事に戻ったので、懇親会は出ていない