$30 off During Our Annual Pro Sale. View Details »

UIデザインもできる◯◯になるには

Akinen
January 19, 2022

 UIデザインもできる◯◯になるには

本スライドは「第36回ゆるはち.it: ノンデザイナーのためのデザイン についてゆるく話す」の資料です。

Web製品におけるUIデザインは決してデザイナーだけによるものではなく、エンジニアやPMなど、いろんな方の意見を交えながら作っていくものです。今回は他職種の方が「UIデザインができる」と言える状態になるための3つの方法についてご紹介します。

Akinen

January 19, 2022
Tweet

More Decks by Akinen

Other Decks in Design

Transcript

  1. UIデザインもできる になるには 第36回 ゆるはち.it 登壇資料 ◯◯

  2. 小澤 晶徳 元フロントエンドエンジニア。2021年10月まで株式会社 ビルディットでデザイナーとして勤務。現在は大手損保グ ループでUI/UXデザインの導入・推進に携わっている。

  3. 「UIデザインも出来る◯◯」になりたい! 今回のテーマ

  4. UIとは ・機械と人間の間での情報をやりとりするための インタフェース ・ のこと ・Alexaも、 改札口も、 キーボードも広義のUI 「ヒト」 と

    「モノ」 の間をつなぐ接点 今回はデジタルプロダクト(主にアプリ)について お話します。 https://www.j-cast.com/2019/12/21375664.html
  5. Q.「UIデザインが出来る」と言えるようになるには? A. 手を動かそう プログラミングを学ぶ際に、聞くだけで理解するのは難しい →デザインも同じ 今回は主にノンデザイナーの方へ向けて、 手を動かすといっても何をすればいいのか、ご紹介します。 ここらへん

  6. ÅÃ トレース 難易度 ①自分がよく触る OR いいなと思うアプリをスクショ ②スクショを半透明にして、 同じデザインになるように    要素を置いていく ③サイズや位置、

    形などをトレースすることで、 UIのデ ザイン意図が見えてくる。 ★★★★★ トレース例 (ビルディット入社前)
  7. ♨効能 ① UIデザインのお作法や法則が身につく →観察眼、 UIを見た際に違和感に気づける 例: Sketchではじめて作ったUI(右図) ② ツール(Figma)の使い方も、 自然に覚えられる

    説明書を読まないタイプにおすすめ 騙されたと思って、 ぜひ一度やってみてください。 ・チャットとカレンダーがメニューとは 別に存在するのはなぜ? 押したらどうなる? ・画面内のオレンジ比率が高すぎる (なぜオレンジ・・・?) ・白文字読みづらいかも ・なぜそのアイコン? 月なのか時間なのか 縦軸の 最大値は・・・? AppBarでは見ないデザイン ・なぜハンバーガーメニューが左下? なんの数字? OS のステ ータス バー領域 は 考慮されて いるか・・・? m arginや日付 のサ イズ感
  8. 2. 新規サービスを考える 難易度 ・テーマは何でもOK ・ハッカソン的な感じで、 自分の作ってみたいアプリのUIを   考える ・まずは紙にアイデアを書いてみる →画面に起こす ★★★★★

  9. ♨効能 ① どんなUIが適切か、 考える力がつく 他アプリの事例を参考にしながらも、 サービスに最適なUIを 導き出す。 ② 情報設計を意識できる タブには何を出して、

    何を出さないか? サービスにおいてコアとなる機能はなにか? ③ あったらいいなを考えるのは楽しい モチベーション大事
  10. 3. プロトタイピング 難易度 ・画面ごとのデザインだけではアプリは完成しない。 ・ボタンを押したら画面遷移するなど、 実際に動くものを   つくる 最近のデザインツールは 、 が可能 ★★★★★

    プロトタイプを作成→実際に 手元のスマホでタップして確認 https://bootcamp.uxdesign.cc/figma-needs-these-3-prototyping-features-5847e32c2367
  11. ♨効能 ① 画面単位ではなく、 導線を意識できるようになる 画面遷移した際の挙動、 いまの画面の現在地がわかるか? ② ユーザビリティや、 サービス全体の体験を考えるようになる ボタンが押しづらい、

    コンテンツが隠れて見えないなど、 実際に手元で触ってみると気づくことがある
  12. まとめ ・「UIできない」→「UIできる」はグラデーション(0/1ではない) ・実際に手を動かしてみることが第一歩! Point rp トレーe bp 新規サービスを考えg Sp プロトタイピング

  13. おまけ① おすすめツール Figma ・無料で使える(個人利用) ・URLひとつでシェア→Webブラウザで閲覧・編集が可能 ・2021年の調査では77%のUIデザイナーがFigmaを使っている 非公式キャラクター「Figmaたん」 https://www.figma.com/@012

  14. おまけ② おすすめサイト Mobbin アプリのスクリーンショット集。 カテゴリやUIの種類でも絞りこめる。 最近有料化されつつあるのが悩み DRAWER (自作) イラストやアイコン、UI Kitといった 便利サイトをまとめたChrome拡張。

    ぜひDLしてみてください。 consim.β 同じアプリ・画面をiOSとAndroidで 比較できる。ありがたやありがたや
  15. ご清聴ありがとうございました より良いアイデアがありましたら この後教えていただけると幸いです。