25. アプリのデザインを手がけるUIデザイナーの話

Show Notes

今回のゲスト：Skrt さん

• スマートフォンアプリ（iOS、Android）の UI デザインを担当をしている
• サムネイルやバナーを作る仕事
• キャラクターを使ったイメージを作る仕事
• アニメーションを作る仕事

Pinterest

• skrt0132s - Pinterest
• 基本的にはデザインのネタだしの補助として使ってる
• 急に作ったことないものを作ってほしいって言われることが多い
• 自分の好きなものを集めておくと、デザインで困った時に助けられることが多い

Sketch

• Sketch - Professional Digital Design for Mac
• 日本語のテキストだとカーニングが上手くいかない
• データが重くなると、レッドがオレンジになる
• Sketch Mirror でプレビューしているときの色が変わる

1枚目がSketch、2枚目がMirror。
2枚目の方が正しい色なんだけど、なんか設定がおかしいのか？#sketch pic.twitter.com/STuBjkld7W

— Skrt (@r_sakai_IM) 2017年8月28日

ちなみにsketchはアートボードのサイズが3000px超えるとMirrorでプレビューできなくなる

— Skrt (@r_sakai_IM) 2017年8月28日

• プライベートだと学生時代に購入した CS4 がまだ現役で全然使えている

デザインの話

• ロゴのリデザイン ー なぜ Gap が失敗し Airbnb が受け入れられたのか - freshtrax - デザイン会社 btrax ブログ

  • しっかりとしたコンセプトがあればどんな反応が来てもブレる必要は全くない
  • これ時間しか解決方法がないからデザインを変える時に精神力が試される

• Google ニュース新デザインが不評の嵐。1 週間で苦情 880 件 (ギズモード・ジャパン) - LINE アカウントメディア

  • よいと思った UI に対して、「いいじゃないか」と反応する人は少ない
  • 機能の削除に一切の迷いがないように見える Google
  • サービスが大きくなると嫌でもデザイン変更からは逃れられない
  • だからなるべくユーザーに負担をかけない形で少しずつ改良を加えて行きたい

感銘をうけた話

• 「老舗」や「定番」はなぜスゴイのか。 - Books Apps
• サイレントアップデート

デザインと開発の協業

• 調査 → アイデア出し → ワイヤー制作 → デザイン制作 → 検証 → これを繰り返し
• サイクルが早いから実際にはアイデア出しからデザイン制作までの明確な分かれ目が存在しない
• 結局のところ人対人だから、お互いの領域に理解を持って歩み寄りたい
• 企画からデザイン・開発までの境界が無くなってきている
• 大きなサービスだとすべての分野に程よく理解がないと上手くデザインできない
• アイデアを出しやすい雰囲気にしたい

協業で使うツール

• Zeplin

  • Zeplin 上にアートボードを共有したら社内のメッセンジャーで共有

• Photoshop でガイドラインを書いていたよりは楽になっている

• デザイナーとしては Web ブラウザのデフォルトマージンが良くわからない

• Gallery

Galleryを試してみてるhttps://t.co/ExUm2e0Dpw pic.twitter.com/ygbOyyvnSG

— trkw (@trkw_) 2017年8月8日

• Abstract

アニメーション

• Principle - Animated Design
• ProtoPie - Prototype mobile interactions as easily as Pie
• Framer - Design, code, and collaborate.
• 色々試してみたんだけど、結局使ってるのは AfterEffects か Flash

興味のあるデザインの話

• オンボーディング
• パーソナライズ
• マジックナンバー 4±1
• ライティング

モバイルSuica...ライティング誰かなんとかしてくれーッ！！
わからんッ！！！ pic.twitter.com/KrtTEep0XC

— Skrt (@r_sakai_IM) 2017年8月9日