UIデザインの勉強方法を蒐集してみました。
みんなどうやってUIデザインを勉強しているのか、ふと気になりました。
そして、それらをコレクションしたらちょっと楽しいし、役に立つかもしれない。という訳でこの記事ではUIデザインの勉強方法を蒐集してみました。（蒐集という漢字、かっこいいんで使ってみました）
特段、この方法を推奨します！といった想いはないのですが、自分の経験談も少しだけ添えています。
UIデザインに関する知識を知る
UIデザインをするうえ知っておきたい知識はたくさんありますが、まずはベーシックな所から固めていくのが良いのではと思います。（ストック型の知識）
並行してXやnoteなどでトレンド感のある知識を学んでいきたいですね。（フロー型の知識）
情報の入手元
書籍
Udemy
各社のデザインガイドライン（Material Design Guideline, Human Interface Guidelineなど）
デザイン組織のブログ
X
note
テーマ
UIとはなにか
GUI（Graphical User Interface）の歴史
人間中心設計
デザイン4原則
デザインガイドライン
一般的なコンポーネント
デザインシステム
デザインツールの習得
2024年現在、UIデザインするためのデザインツールといえば、Figmaがダントツなのではないでしょうか。使い方の基礎だけざっくり学んでおけば実務の中で徐々に覚えていくと思います。
もちろん、Illustrator・Photoshop等でグラフィック・画像編集もできるに越したことはありません。
情報の入手元
書籍
Udemy
UIトレース
世の中にすでに存在しているアプリ・サービスのUIをトレース（模写）する方法です。実際に手を動かすことでデザインツールの扱いも慣れてきますし、コンポーネントのサイズ感や余白の取り方などを身体で覚えられるような気がしています。
一方、ただ単にトレースするだけでなく、なぜこのUIなのか？という風に考えながら取り組めるとより一層学びが増えるかもしれません。
また、Figmaで精緻にトレースするのではなく、手書きでワイヤーフレームのようなレベル感で模写する事例もありました。
事例
UIリデザイン
世の中にすでに存在しているアプリ・サービスのUIをさらに良くするためにはどうすれば良いか？を考えてリデザインする、というアプローチです。
なぜ現状のUIだと良くないのか？そして、なぜ変更後のUIが良いのか？といったことを考えて取り組みつつ、誰かにフィードバックをもらえると楽しそうです。
事例
UI観察
世の中にすでに存在しているアプリ・サービスのUIを観察するという方法です。ただ単に観察するだけではなく、スクリーンショットやテキストで自分が感じた・思ったことを記録しておけると学びが深くなりそうです。
また、観察と一口に言っても様々な下記のように様々なアプローチがありそうです。
1つのアプリ・サービスでの体験を掘り下げる
様々なアプリ・サービスのUI・デザインパターンを比較
アップデート前後のUIの変化を比較
事例
プロダクトを作る
もう、自分でプロダクトを作ろうというアプローチです。実際に配信しなくてもFigmaのプロトタイプなどで作ってフィードバックを得る方法もあるかもしれません。
さいごに
現時点で自分が観測している方法を蒐集してみました。
みなさん、本当にストイックで背筋がスッと伸びる気持ちになりました…。
引き続きコレクションは続けていきたいと思います。ありがとうございました。