Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
UI/UXはスライドにも宿る
Search
Tkoya
September 23, 2025
Technology
0
7
UI/UXはスライドにも宿る
Tkoya
September 23, 2025
Tweet
Share
More Decks by Tkoya
See All by Tkoya
Marpで学ぶCSS/HTML
ayanoyuki
0
200
ポートフォリオサイトを作ろう!
ayanoyuki
0
38
沖縄高専ICT委員会技術継承 Git/GitHub編 #03-応用編
ayanoyuki
0
120
沖縄高専ICT委員会技術継承 Git/GitHub編 #02-基礎編
ayanoyuki
0
84
高専キャリアのフォトモザイクアートを作る!
ayanoyuki
0
29
最凶のマルウェアEmotetを倒したテイクダウン作戦「Operation LadyBird」
ayanoyuki
0
40
Other Decks in Technology
See All in Technology
MCP ✖️ Apps SDKを触ってみた
hisuzuya
0
360
AIプロダクトのプロンプト実践テクニック / Practical Techniques for AI Product Prompts
saka2jp
0
110
ViteとTypeScriptのProject Referencesで 大規模モノレポのUIカタログのリリースサイクルを高速化する
shuta13
3
200
【SORACOM UG Explorer 2025】さらなる10年へ ~ SORACOM MVC 発表
soracom
PRO
0
130
IBC 2025 動画技術関連レポート / IBC 2025 Report
cyberagentdevelopers
PRO
2
120
現場の壁を乗り越えて、 「計装注入」が拓く オブザーバビリティ / Beyond the Field Barriers: Instrumentation Injection and the Future of Observability
aoto
PRO
1
380
AI時代、“平均値”ではいられない
uhyo
8
2.5k
物体検出モデルでシイタケの収穫時期を自動判定してみた。 #devio2025
lamaglama39
0
280
OTEPsで知るOpenTelemetryの未来 / Observability Conference Tokyo 2025
arthur1
0
200
HonoとJSXを使って管理画面をサクッと型安全に作ろう
diggymo
0
180
AI駆動で進める依存ライブラリ更新 ─ Vue プロジェクトの品質向上と開発スピード改善の実践録
sayn0
1
290
ブラウザのAPIで Nintendo Switch用の特殊なゲーム用コントローラーを体験型コンテンツに / IoTLT @ストラタシス・ジャパン
you
PRO
0
120
Featured
See All Featured
Build The Right Thing And Hit Your Dates
maggiecrowley
38
2.9k
Building a Scalable Design System with Sketch
lauravandoore
463
33k
Facilitating Awesome Meetings
lara
57
6.6k
BBQ
matthewcrist
89
9.9k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
The Cult of Friendly URLs
andyhume
79
6.6k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Writing Fast Ruby
sferik
630
62k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
21
1.2k
Embracing the Ebb and Flow
colly
88
4.9k
Transcript
合同会社DMM.com 25 新卒FE 平良昂也 1 / 19 UI/UX はスライドにも宿る
2 / 19 自己紹介 合同会社DMM.com (2025 新卒) 戦略開発本部 DMMTV 開発部
Web アプリケーション開発グループ 趣味 アニメ、読書、技術 平良 昂也(@__ayanoYuki__)
UI(user interface) ユーザーがWEB アプリを操作する画面 フロントエンドが主に担当する領域 UX(user experience) ユーザーがWEB アプリの利用を通じて得る体験 フロントエンド、バックエンド等の全てが担当する領域
3 / 19 Web アプリにおけるUI/UX の話
UI(user interface) ユーザーが直接触れる「画面」 (見た目・操作性に直結する部分) レイアウト、配色、フォント、ボタンやフォームのデザイン UX(user experience) フロントエンドを通してユーザーが「どう感じるか」につながる体験 UI を使った結果、快適に目的を達成できるかどうか
体感速度、違和感のない動き、直感的な操作のしさすさ エラーメッセージやバリデーションが分かりやすいか 4 / 19 Web アプリにおけるフロントエンドのUI/UX の話
UI/UX は、センスと経験(模倣)で作る 色んなサービスを使ってみる 良いUI/UX を真似して、 「なぜ、良いのか」を分析する 良いUI/UX を完コピで実装してみる 自分だけのUI/UX のメモ帳を作る
5 / 19 UI/UX の勉強方法
UI (見た目・操作部分) スライドのレイアウトや色、フォントサイズ、余白 読みやすいか、見やすいか 情報の「引き算」 UX (体験・感覚部分) 聴衆が「理解しやすい」 「頭に入りやすい」と感じる体験 情報の流れが自然か、内容が伝わりやすいか
理解度を上げるための「足し算」 6 / 19 LT は「小さなUI/UX デザイン」
7 / 19 スライド作成はハードル低く UI/UX が学べる
8 / 19 僕たちはエンジニアですよw
9 / 19 スライドを作るだけでは、 技術力が鍛えられないって...
Marp は、 Markdown でスライドを作れるツール エディタ上だけでスライドを作成できる Markdown なので、HTML/CSS が使える 類似ツール(Reveal.js 、Slidev
、Pandoc )と比べて、学習コストが低い プログラムベースなので、生成AI と相性が良い 10 / 19 Marp ってツールがありまして...
Marp はMarkdown なので、HTML/CSS が使える! 技術 役割・用途 Markdown 基本的なレイアウトを設定する CSS スライドのデザインを設定する
HTML 細かなレイアウトを設定する 11 / 19 HTML/CSS 次第でデザインが無限大
デフォルトのテーマ+Markdown only では、デザイン・レイアウトに限界がある 12 / 19 HTML/CSS の腕試し・練習に使えそう
13 / 19 HTML/CSS の腕試し・練習に使えそう
14 / 19 おすすめのMarp の学習サイト
UI/UX は、センスと経験(模倣)で作る スライド制作 = 小さなUI/UX デザイン レイアウト・余白(UI ) 、理解の流れや体験(UX )
つまり発表準備そのものがUI/UX 練習の場になる Marp で学べること Markdown で気軽に作れる HTML/CSS の練習になる UI/UX の勉強の第一歩に、Marp はいかがでしょうか? 15 / 19 まとめ & Tips
16 / 19
おまけ 17 / 19 「UI は引き算で、UX は足し算」と 言われる理由を考えてみた
人間の認知負荷(認知心理学) 人は一度に処理できる情報量が限られています(Miller の法則:7±2 など) 余計なボタンやメニューがあると、ユーザーは迷い、操作性が下がる ミニマリズム的な設計思想 UI は「ユーザーとシステムの接点」なので、目的達成に直接関係しない要素 を排除するのが基本 余計な色、装飾、機能を削ることで直感的に使えるインターフェースにな
る。 18 / 19 おまけ:UI は「引き算」と言われる理由
体験は積み重なる(サービスデザイン) UX は単なる見た目や操作性ではなく、購入前から利用後までの体験全体を扱 う 例えば「便利さ」+「安心感」+「楽しさ」が合わさって「良いUX 」になる 感情価値の付加(行動経済学・感性工学) 人は機能的価値だけでは満足せず、情緒的価値(ワクワク感、信頼感、楽し さ)を積み重ねることでポジティブな体験が形成される UX
は線形でなく複合的 ちょっと便利、ちょっと安心、ちょっと楽しい → それらの総和(場合によっ ては相乗効果)がUX の良し悪しを決める 19 / 19 おまけ:UX は「足し算」と言われる理由