Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
2013年11月20日GMOで行われたスマホUI勉強会のメモ

スマホUI勉強会

#UiCamp

ユーザーファーストってなんやねん

Yahoo!検索のデザイナー

あで検索すると「あで検索したあなたへ」という表示が出る。 これはiOS6でブラウザ開いたとき、真っ白なのでとりあえず「あ」で検索する人が多かったことからつけた。

ユーザーファースト??

= ユーザーのために。

「考える、つくる」がとにかく開発に必要 「つくる」は大体皆できる。「考える」にユーザーファーストを入れる。

150minでサイクルを回す

インタビュー・観察(30min)、分析・ブレスト(30min)、プロトタイピング(30min)、ユーザーテスト(30min)

インタビュー:隣の人もユーザー

僕たちはユーザーを知らない。遠くにいるユーザーよりすぐ近くにいるユーザーの好み、使い方をインタビューしてまず洗い出してみる。

分析・ブレスト:インタビュー直後に話す

すぐ話したらインタビュー直後だから頭が活性化していてアイディアがいっぱい出る。

プロトタイピング:得意なところだけやる

ペーパープロトタイピングでもいいし、フロントエンド開発してモック作っちゃってもいい。一番得意な方法でやっちゃう。

ユーザーテスト:仮説があったら5分

仮説があったら5分で作ったものがダメかどうか試してもらったらわかる。

モバイルUXデザイン、UIデザイン

GMOデザイナー

1つずつタスクに落としこむ

例:カメラアプリ

  1. カメラを起動
  2. 撮影対象にピントをあわせる
  3. シャッターを押す
  4. 撮った画像を確認する
  5. 更に取る場合は1.に戻る

開始があって完了がある。 タスクの流れをチェックすることで各タスクが滞りなく終えられているかがチェックできる。

活動の連続性を検討する

提供するサービスでの体験とユーザーの心の動きを記述する。(うちでやってるユーザーフロー) 画面をならべてユーザーのフローを作ってユーザーのエモーション(欲求)に対応した構造(遷移)になっているかどうかチェック。

  • 行動をサポートできているか?
  • 行き止まりを作っていないか?
  • 障害を作ってないか?

http://tech.gmo-media.jp/

スマホにSassを導入してフレームワーク化

リブセンス フロントエンドエンジニア

おもいっきりフロントエンドのエンジニアリングの話なので割愛 どのようにデザインすればフレームワーク化しやすいかはいずれまとめたい。

デザインガイドラインの話

GMO シニアクリエイター

各社のデザインガイドライン

デザインガイドラインを読もう Apple, Microsoft, Google

でも、実装との間でギャップが出てくる。

UIパターンとは

モバイルデザインパターン(オライリー)

使いやすさをデザインする

どんな優れた機能でも使いにくいものは使われない 0から生み出すのは難しい

UIをパターン化しよう

成功事例をいっぱいサンプリングしてパターン化(例:上位人気ゲーム10個のUIを抽出してパターン化) パターン化したら、自分のアプリのUIにとりあえずPhotoshopで適用してみる

  1. 比較検討できる
  2. 成功事例なので意思決定しやすい
  3. 成功確率が高い

デザインはセンスではなく理論 理論の上にセンスを載せよう

ピクセルパーフェクトとかそのへんについて調べてみた

リブセンス デザイナー

実装とデザインのギャップをなくそう

  • デザイン時点でHTML構造を考える
  • アイコンはベクターで作成(ウェブフォントにも対応可)

デザインのフレームワーク化とかやると、整理の過程で皆の頭にパーツが入っていくから良い

Twitterの#UiCampで検索してスライド写真を見よう

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment