「なんとなく使いやすい画面」と「迷ってしまう画面」。何が違うのでしょうか？

今回は、UIデザインをこれから学ぶ方に向けて、画面を見る4つの基本を解説します。

・関連する情報を近づける
・位置をそろえる
・大事な操作を目立たせる
・同じ操作は同じ見た目にする

UIとUXの違いから、改善前・改善後の見比べ方まで紹介。
後半ではGoogle Stitchを使い、ToDoアプリの画面を作って、ボタンの色や情報の間隔を修正する様子を実演します。

AIが作った画面も、そのまま正解とは限りません。
「作る → 見る → 1つ直す」を繰り返しながら、自分の目で使いやすさを確かめていきましょう。

【チャプター】
00:00 はじめに｜まずは画面を見る目から
02:29 UIの基本・UXとの違い
08:54 使いやすい画面を作る4つの原則
14:13 AIで画面を作ってみよう
15:17 Google StitchでToDoアプリを作る・直す
21:45 AIの案を自分の目で見直す練習

家計簿、予約画面、習慣の記録など、作ってみたいアプリのアイデアがあれば、ぜひコメントで教えてください。

【無料ウェビナーのお知らせ】

「なんかダサい」アプリのUIデザインを、
Claude Codeに直させる60分

🔽 申し込みはこちら
既に364名の方が申し込み済です。
https://miraichi260915.peatix.com/

#UIデザイン #GoogleStitch #デザイン

【お問い合わせ先】
法人研修・顧問: https://kawai-business.pages.dev/
セミナー登壇、動画出演: https://lp-seminar.pages.dev/
月次1on1: https://kawai-1on1.pages.dev/
その他: https://kawai-official.pages.dev/

【メディア】
X: https://x.com/kawai_design
note: https://note.com/kawaidesign
NewsPicks: https://newspicks.com/topics/ai-design/
Voicy: https://voicy.jp/channel/820890
YouTube: https://www.youtube.com/@kawai_design
Threads: https://www.threads.com/@kawai_design_ig
Instagram: https://www.instagram.com/kawai_design_ig/
Facebook: https://www.facebook.com/profile.php?id=100094403012810
LINE: https://lin.ee/TrZG7ZN

【書籍・監修】
AIでゼロからデザイン
https://www.shoeisha.co.jp/book/detail/9784798193427

Google 画像生成プロンプト ガイド
https://cloud.google.com/resources/content/intl/ja-jp/imagenpromptguide?hl=ja

【出演実績】
NewsPicks「実践！仕事術」
https://newspicks.com/movie-series/124/?from=%2Fmovie-series%2F124%2F&movieId=6425

さらば森田のAI〇〇ラボ
https://youtu.be/Vsd2-nEzMWE?si=5ovF0-CroGpeNfTC
https://youtu.be/A0A72V4vi3g?si=QTj3_DNKy8Pq2s8l

ベイジTV（株式会社ベイジ 公式チャンネル）
https://youtu.be/lTzrUc7L3n0?si=Ron__YSOWX1-l9Tb

San Francisco Design Talk（btrax Brandon氏のPodcast）
https://open.spotify.com/episode/4vk0PiJzB0559g3InChcjl

ソフトバンクニュース
https://www.softbank.jp/sbnews/entry/20251217_02

SHE likes
https://x.com/she_officials/status/2025767572604588437?s=46