はじめに

はじめまして、@yumemoyo と申します！私は文系出身・未経験からキャリアをスタートし、今はAIサービスのUI/UXデザイナーとして働いています。

この記事では、「デザイン未経験からUIを学びたい人」に向けて、UIデザインに必要な知識と勉強法を期間別（3か月以内・1年目・2年目以降）に整理しました。

私自身、小学生の頃から絵やデザインが大好きで、いつかはデザインの仕事に就きたいと思っていました。しかし初期配属は運用/保守エンジニア。そこから兼務でUI/UXデザイナーを経験し、独学で学び続け、やっと3年目にして本務としてUI/UXデザイナーになることができました。

「UIを学びたいけど、何から始めればいいの？」
「今の自分より少し先の人はどんなことを学んでるの？」

そんな方に、過去の自分へ向けて書くつもりでまとめました。
これからUIデザインを学ぶ仲間の参考になれば嬉しいです。

シリーズ

【第1回】未経験でも学べる！UIデザインに必要な知識と勉強法！
【第2回】未経験でも学べる！UXデザインに必要な知識と勉強法！
【第3回】未経験でも学べる！UI/UXを支える知識（PM、ビジネス戦略...）と勉強法！

🎨 対象読者

デザイン未経験からUIを学びたい人
エンジニアや学生で「デザインの基本」をキャッチアップしたい人
デザインリーダーを目指しているけど、どこから手をつければいいかわからない人

📕 まず最初の3か月以内（基礎固め）

ここではまず「UIとは何か？」という概要を理解し、基本的なガイドラインやツールに触れてみることを目標にしましょう。Figma（UIデザインツール）の操作に慣れてきたら、GoogleやAppleのUIガイドラインを参考にしながら、ログイン画面やプロフィール画面などのシンプルなUIを模写してみてください。

UI基礎

「UIとは何か？を理解し、学習の全体像をつかむために学ぼう！」

ユーザーインターフェース(UI)

「アイデアを形にする前に構造を整理するために学ぼう！」

ワイヤーフレーム

「情報をどう配置すればユーザーに伝わりやすいかを理解するために学ぼう！」

IA・情報アーキテクチャ

「ユーザーを迷わせない導線を設計するために学ぼう！」

ナビゲーションデザイン

「完成前に動きを体験し、課題を早く見つけるために学ぼう！」

プロトタイプ

「ユーザーの操作に応じた心地よい体験を設計するために学ぼう！」

インタラクションデザイン

iOSアプリガイドライン

「Apple公式ルールを知り、iOSアプリを直感的に使えるようにするために学ぼう！」

Apple HIG

Android、Webガイドライン

「Googleの設計思想を理解し、AndroidやWebで一貫した体験を作るために学ぼう！」

Material Design

ツール入門

「FigmaをDLしてみよう！」

Figma Learn

「Figmaの学習コースで基礎から実践まで体系的にUIデザインの作成を学ぼう！」

Figma Design / 学習コース

🎨 1年目（実務を意識する）

基礎を押さえたら「UIパターン」と「ツール活用」を通じて、実務を想定したUI設計力を身につけていきましょう。その際には、ギャラリーサイトで調査・模写したパターンを整理してポートフォリオ化し、小規模アプリをデザインして組み合わせ方を実践的に学ぶのがおすすめです。

ギャラリーサイト

「最新のアプリUIを観察して、トレンドを吸収するために学ぼう！」

Mobbin

「定番のUIパターンを整理して、基本的なデザインの型を理解するために学ぼう！」

pttrns

ポートフォリオ

「学んだUIパターンや作成したデザインをまとめ、実績として見せられる形にしよう！」

ポートフォリオ

UIパターン

入力系

「ユーザーにアクションを直感的に伝えるために学ぼう！」

Buttons
- Apple HIG
- Material Design

「限られたスペースでも意味を即座に伝えるために学ぼう！」

Icon Buttons
- Material Design

「複数の選択肢をシンプルに比較させるために学ぼう！」

Segmented controls
- Apple HIG

「選択肢を誤解なく提示するために学ぼう！」

Checkbox
- Material Design
Radio button
- Material Design

「オン／オフを直感的に操作させるために学ぼう！」

Switches
- Apple HIG
- Material Design

「量や範囲を感覚的に調整できるようにするために学ぼう！」

Sliders
- Apple HIG
- Material Design

「入力の基本体験をわかりやすくするために学ぼう！」

Text fields
- Apple HIG
- Material Design

「複雑な情報を簡単に正しく入力させるために学ぼう！」

Date & time pickers
- Material Design

表示系

「大量の情報を整理して見やすくするために学ぼう！」

Collections
- Apple HIG
Lists and Tables
- Apple HIG
- Material Design

「コンテンツを魅力的に並べるために学ぼう！」

Cards
- Material Design
Carousel
- Material Design

「情報のまとまりや重要度を一目で示すために学ぼう！」

Divider
- Material Design
Badges
- Material Design

「追加情報や操作をスマートに提示するために学ぼう！」

Modals
- Apple HIG
- Material Design
Popovers
- Apple HIG
Sheets
- Apple HIG

ナビゲーション (Navigation)

「ユーザーが迷わず移動できるようにするために学ぼう！」

Navigation bars
Tab bars
- Apple HIG
- Material Design / Tabs
Toolbars
- Apple HIG

「複雑な階層を効率的に整理するために学ぼう！」

Navigation drawer
- Material Design
Navigation bar
- Material Design

「必要な機能や情報へ素早くアクセスさせるために学ぼう！」

Menus
- Apple HIG
- Material Design
Search fields
- Apple HIG

「最も重要なアクションを強調し、すぐに実行できるようにするために学ぼう！」

Floating Action Button
- Material Design

フィードバック(Feedback)

「重要な情報を確実に伝えるために学ぼう！」

Alerts
- Apple HIG
Dialogs
- Material Design

「処理の状態を安心感を持って伝えるために学ぼう！」

Activity views
- Apple HIG
Progress indicators
- Apple HIG
- Material Design
Snackbars
- Material Design

状態表示

「情報がない状況でも意味を持たせ、次の行動を促すために学ぼう！」

Empty State
- Material Design
- 活用事例

言葉のデザイン

「言葉でユーザーを導き、体験をスムーズにするために学ぼう！」

UX Writing

⚙️ 2年目以降（システム思考へ）

ここからは「個別のUI」ではなく、一貫性と拡張性のあるUIデザインを作れることがゴールです。そのために、同じ画面をiOSとAndroidでデザインして違いを比較し、自分のプロジェクトにデザインシステムを導入、さらにコンポーネント管理（Atoms〜Pages）をFigmaで運用することを目指しましょう。

設計ルール

「共通ルールを定め、誰がデザインしても一貫したUIを作れるように学ぼう！」

デザインガイドライン

「コンポーネントを分解・組み合わせることで拡張性の高いUIを作るために学ぼう！」

アトミックデザイン

「誰にとっても使いやすい体験を提供するために学ぼう！」

ユニバーサルデザイン

「UIをオブジェクトとして整理し、直感的に操作できるように学ぼう！」

オブジェクト指向UI

運用・応用

「検索に強いUI設計を理解し、集客や成果につながるデザインを作るために学ぼう！」

WebデザインとSEOの関係性

「デザインをバージョン管理し、再現性を高めるために学ぼう！」

GitHubでのデザイン管理

ツール入門（任意）

※かつては Sketch が定番で、その後 Adobe XD が登場しました。現在はリアルタイム共同編集とクラウド性を強みにした Figma がUIデザインのスタンダードになっているため、学習任意とします。

補足

UI学習のステップはあくまで一例になります。実際の進み方は人それぞれなので、順序を入れ替えたり、必要なところだけを重点的に学んだりしても構いません。
大切なのは「目的を持って学ぶこと」です。記事中で紹介したリンクやガイドラインも、全部を一気にやる必要はなく、プロジェクトや興味に合わせて取捨選択してください。

そもそもの背景

私は文系大学出身で、新卒で配属されたのはプログラミング必須の運用/保守エンジニア職でした。当時は cd コマンドすら分からず、Git で何度もやらかすような状態からのスタートでした。それでも「絵やデザインが好き」という気持ちを軸に、兼務でUI/UXデザインを経験し、独学で学び続けて、やっと3年目にして本務としてUI/UXデザイナーになることができました。この記事は、そんな自分の経験をもとに「過去の自分へ」「これからUIを学ぶ仲間へ」向けて書いたものです。

仲間への願い

UIデザインを学ぶ過程では、「とりあえず動いたからOK」で終わらせたくなることが多いです。ですが、それでは再現性がなく、応用が効きません。「なぜそのUIなのか？」を理解し、ルールや原則を押さえることが、実務で活躍できるデザイナーになるための近道です。この記事を読んでいる人が、自分なりの学び方を見つけつつ、同じ志を持つ仲間とつながっていけたら嬉しいです。

最後に

ここではUI学習に必要な知識と勉強法をまとめましたが、デザインの学びはこれで終わりではありません。これから UXの勉強法、そして UI/UXを支える周辺知識（SEO、プロジェクトマネジメント、ビジネス戦略など）も整理していく予定です。

さらに今回まとめた内容をベースに、各トピックごとに1つずつ記事にして詳しく解説していきます。（例：ワイヤーフレームの作り方、UIパターンの調べ方、デザインシステムの導入手順など）

この記事は定期的にメンテナンスしていきますので、「ここをこうした方がいい」「このリソースもおすすめ」などアドバイスや追加補足があれば、ぜひコメントで教えてください。引き続き、学びの記録をQiitaで発信していきますので、フォローや交流をいただけると嬉しいです！🐇✨