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
4
UI/UXはスライドにも宿る
Tkoya
September 23, 2025
Tweet
Share
More Decks by Tkoya
See All by Tkoya
Marpで学ぶCSS/HTML
ayanoyuki
0
54
ポートフォリオサイトを作ろう!
ayanoyuki
0
31
沖縄高専ICT委員会技術継承 Git/GitHub編 #03-応用編
ayanoyuki
0
110
沖縄高専ICT委員会技術継承 Git/GitHub編 #02-基礎編
ayanoyuki
0
77
高専キャリアのフォトモザイクアートを作る!
ayanoyuki
0
28
最凶のマルウェアEmotetを倒したテイクダウン作戦「Operation LadyBird」
ayanoyuki
0
39
Other Decks in Technology
See All in Technology
KAGのLT会 #8 - 東京リージョンでGAしたAmazon Q in QuickSightを使って、報告用の資料を作ってみた
0air
0
180
OCI Network Firewall 概要
oracle4engineer
PRO
1
7.7k
コンパウンドスタートアップにおけるQAの成長戦略
matsu802
4
580
避けられないI/O待ちに対処する: Rails アプリにおけるSSEとasync gemの活用 / Tackling Inevitable I/O Latency in Rails Apps with SSE and the async gem
moznion
2
1.8k
業務自動化プラットフォーム Google Agentspace に入門してみる #devio2025
maroon1st
0
170
新卒QAエンジニアの成長戦略
qatonchan
0
300
5年間のFintech × Rails実践に学ぶ - 基本に忠実な運用で築く高信頼性システム / 5 Years Fintech Rails Retrospective
ohbarye
9
3.3k
PLaMo2シリーズのvLLM実装 / PFN LLM セミナー
pfn
PRO
2
630
PythonとLLMで挑む、 4コマ漫画の構造化データ化
esuji5
0
120
入門 FormObject / An Introduction to FormObject #kaigionrails
expajp
2
1.4k
【新卒研修資料】LLM・生成AI研修 / Large Language Model・Generative AI
brainpadpr
20
13k
FastAPIの魔法をgRPC/Connect RPCへ
monotaro
PRO
0
460
Featured
See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
For a Future-Friendly Web
brad_frost
180
9.9k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
How GitHub (no longer) Works
holman
315
140k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
GraphQLの誤解/rethinking-graphql
sonatard
72
11k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
950
A Modern Web Designer's Workflow
chriscoyier
697
190k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
560
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 は「足し算」と言われる理由