使いやすいUIを作る4つの基本｜Google Stitchで作って学ぶ

「なんとなく使いやすい画面」と「迷ってしまう画面」。何が違うのでしょうか？今回は、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

9月8日

このチャンネルの新着放送