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

Today Fortkle Learned.

知らないことの方が多いので今更調べています。さらに一歩先に行けたら嬉しいです。

UI Crunch #1 に行ってきた

イベントレポート

「UI Crunch」というイベントに参加して、UIに関するスピーチ&パネルディスカッションを聞いてきました。社内に共有した資料を転記しておきます。

イベント概要

2014/10/15(wed) 19:00-21:30 ヒカリエで開催されたUICrunchに行ってきたのでメモを共有します。

アジェンダ

  • 坪田 朋「開発現場におけるデザイナーの生存戦略
  • 貫井 伸隆「基準について知る」
  • 増田 直生「AfterEffectsを使ったインタラクションデザイン」
  • 藤井 幹大「誰のためのUI?」
  • 沖津 貴智「XCode6/iOS8 デザイナーが知っておくと便利なTips」
  • 小林 幸弘「Prottのデザインプロセス」

開発現場におけるデザイナーの生存戦略 - 坪田さん(DeNA デザイン戦略室)

スライド

http://www.slideshare.net/tsubotax/uicrunchtsubota

内容

ちょっと前にWEBデザイナー不要論が書かれたブログ記事がバズったが、その実態はどうか。肌感覚として、Bootstrapの台頭やクラウドソーシングの活用などで、たしかにかつてデザイナーが担当していた領域は他の職種(主にエンジニア)に侵食されつつある。 その中で、デザイナーが目指すキャリアとはなにか。それは、「プロダクト全体のデザイン」だと考える。近年のプロトタイプ開発手法が主流の開発現場の中で、デザイナーはアウトソース可能なCSSコーディングやグラフィックの作成ではなく、Sketch3, AfterEffects, Prott等を活用してプロダクト全体のUI/UXを設計できるデザイナーになろう。

参考資料

http://www.slideshare.net/tsubotax/y-37051702
http://ja.ishibashihideto.net/blog/web-designer-survival/

メモ

はじめに

ウェブデザイナーの仕事がエンジニアに奪われてきている ・Bootstrapでいいじゃないか説

これらが言われているけど、実際どうなのか話をする。

実態

  • エンジニアはインハウス(デザインは限定してない)
  • フルスタックエンジニアが増えてる感?
  • クラウドソーシング使ってる => 結構合ってる

何故か

  • bootstrapとかクラウドソーシングが伸びてきている

でも本当に求められているのは?

  • 最近はプロトタイプを作ることが多い
  • その中で、プロダクト全体を設計出来る人が求められている

デザイン業務の二極化

  • UI設計とGraphicの2極化。
  • Graphicは外部に出せる

開発現場のプロトタイプ化

  • webならbootstrap、appならprottなど。

「UI設計」=プロトタイプが伸びる?

  • デザイナーの価値が下がるんじゃなくて、プロトタイプを作れる人材の価値が高まっている
  • だからUI設計、UX設計にちゃんと注力しよう。がんばろう

まとめ

  • なろう。プロトタイプ型に。
    • Sketch3, AfterEffects, Prott使えるようになろっ。

基準について知る - 貫井さん(Goodpatch Chief UI Designer)

スライド

未公開

内容

建築家の巨匠ル・コルビュジエは、黄金比を適用させたモジュロールという建築物の基準尺度を作った。例えば、国立西洋美術館はモジュロールを使って天井の高さなどの建物全体がデザインされている。これら基準という考え方はハードウェアだけでなく、ソフトウェアにも使われる。例えば、AppleiPhoneには「44pxが人の指が押せる最小のサイズ」という基準があった。その基準を元に初期のiPhoneは全てのボタンやヘッダーの幅などのデザインがなされている。 このような基準は大切だが、いまiPhoneでさえ様々な解像度を持つようになり、@1x, @2x, @3xと全てのサイズに対応するのはデザイナーにとっても大変になってきている。今後デザイナーは解像度非依存のデザインへ進むべきだろう。個別に対応するUserInterfaceから全てのデバイスに対応できるUniversalInterfaceへ。

メモ

建築家 ル・コルビュジエ

  • 建築家の巨匠らしい。

モジュロール

初期のiPhone

  • 「44pxが人の指が押せる最小のサイズ」という基準があった。
  • 指のサイズを元にiPhoneの設定画面のデザインなどが作られていった。

iPhoneの解像度の種類が増える

  • 解像度非依存のデザインへ。
  • フラットデザインへ。

次のUI

  • User Interface DesignからUniversal Interface Designへ

AfterEffectsを使ったインタラクションデザイン - 増田さん( DeNA IPプラットフォーム事業部)

スライド

未公開

内容

アニメーションやインタラクションが豊富なアプリなどの場合、デザイナーがそれらの動きをエンジニアに伝えるのは意外と難しい。そこでおすすめしたいのがAfterEffectsを使って動きのプロトタイプを作ることだ。プロトタイプを作るぐらいであればそこまで難しくない。 AfterEffectsを使うと、たしかにデザイナーの仕事は増えるが、プロダクト全体で統一的なUIが作れるだけでなく、エンジニアと良いコミュニケーションが取れるようになり生産性が上がり、結果としてプロダクトの品質が上がる。

メモ

質問「アニメーションなどをエンジニア等にどう伝えているか?」

  • 言葉で、ニュアンスで伝えていることが多い
  • それだと何か違う、ということが起きがち。
  • そういうときにAfterEffectsが便利

AfterEffectsを使うと・・・

  • デザインからインタラクションまで統一感のあるUIを作れる
  • エンジニアやチームと良いコミュニケーションが取れる
  • 生産性が上がり、品質が上がる
  • しかも結構、簡単!

AfterEffectsの使い方へ・・・

AfterEffectsが使えると・・・

  • デザイナーの仕事は増える
  • 成果物の品質は非常に高くなる
  • 思わぬデザインの矛盾点に気がつく

まとめ

  • コミュニケーションが上がる
  • 品質の高いサービスが作れる
  • 生産性が上がる

誰のためのUI? - 藤井さん( Goodpatch Chief UX Designer )

スライド

http://www.slideshare.net/mikihirofujii/ui-40309294

内容

モノづくりには「ユーザーの体験」「ユーザーの行動」「存続可能性」「モノ」という4つのゴールがある。そして、それらは独立して存在するのではなく、実はお互いに関連し合い1つのサイクルとして存在している。「ユーザーの体験→ユーザーの行動→存続可能性→モノ→ユーザーの体験・・・」と続いてく。UIデザインとはこのサイクルをいかに多く回していくかのデザインに他ならない。 とはいえ、それら4つを1人で担当するのはあまり現実的ではない。そこで必要になるのは、それを実践していくために補完し合うチームを作ることである。4つのうちどの点をゴールとするかは個人によって様々。であれば、お互いに協力しあって補完し合ってサイクルを回せるチームを作っていこう。

メモ

モノづくりの4つのゴール

  • ユーザーの体験
  • ユーザーの行動
  • モノ
  • 存続可能性

=> あなたのゴールはどれ?

  • モノ
    • サービス
    • 機能
    • UI
  • ユーザーの体験
    • 価値
    • 感覚、気持ち
    • できごと
  • ユーザーの行動
    • 来店、購入、課金、登録
  • 存続可能性
    • 収益目標
    • ユーザー数
    • 問題解決

実はひとつのサイクル

  • ユーザーの体験→ユーザーの行動→存続可能性→モノ→ユーザーの体験・・・

=> サイクル全体のデザインが必要 = ものづくりのゴールを実現するフレームワーク

UIデザインの場合

  • UIデザイン → サイクルを回すUI

とはいえ

  • 自分のじゃないゴールは難しい・・・

じゃあどうするか

  • 質問「みなさんの最優先のゴールは?」
  • →結構バラバラ
  • 結論:
    • みんなそれぞれゴールを持っている
    • だから違うゴールを持つ人たちと一緒に良いモノを作ろう

まとめ

  • モノづくりには4つのゴール
  • 実はそれは1つのサイクル
  • それを実践していくためには補完し合うチームが必要

XCode6/iPhone6/iOS8: デザイナーが知っておくと便利なTips

沖津さん( DeNA iOS/Androidエンジニア )

スライド

https://speakerdeck.com/okitsutakatomo/ios8-dezainagazhi-tuteruto-bian-li-natips

内容

実践で使えるTipの紹介。具体案が多かったのでメモ参照。

メモ

Tips

  • 画像の話
    • XCode6でベクターデータ(pdf)を使えるようになったから、@1x,@2x,@3xのファイルを作る必要はない。
    • ただし、元になるpdfファイルは@1xサイズで作る必要がある。
  • スプラッシュ画面の話
    • 現状、最低4種類を用意する必要がある
    • XCode6からスプラッシュ画面を1つにまとめられるように(xibファイル)
  • iOS.zipの話
    • iOSアプリ申請時に必要な画像セットを1セットでDLできる
  • App Previewsの話
    • AppStoreに動画を登録できるように。
  • iPhone画面を動画で撮る話
    • 10月末リリースの時期OSXQuickTimeで公式サポート!

Prottのデザインプロセス - 小林さん( Goodpatch UI designer )

スライド

未公開

内容

GoodPatchはFlintoというプロトタイピングツールを使って大きくデザインプロセスが変わったが、若干Flintoに不満もあった。それを解決するためにProttを作ってしまった!! 「Prottとても良いので使って下さい~~!!」

メモ

最初

  • アプリエンジニアがいなかった・・・!
  • 動くものが作れない / 実装して触ってみたらなんか違う

そんな状況で出会った

でも問題もあった

  • Flintoは個人で使うには良かったが、複数人でコラボレーションすることは苦手だった
  • じゃあ作っちゃおう!

Prott の制作開始

  • invisionの中でプロトタイプツールを作るw
  • でも実際使ってみると「使いづらい」

=> リリース1ヶ月前にUIを全て作り変える。という感じでした。

iOS版prottも作成

  • 「他のどのツールよりも最小タップ数でプロトタイプが作れる」

Prott使ってね