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
ソースを読むプロセスの例
sat
PRO
15
9.9k
Zephyr(RTOS)にEdge AIを組み込んでみた話
iotengineer22
1
310
FinOps について (ちょっと) 本気出して考えてみた
skmkzyk
0
210
Okta Identity Governanceで実現する最小権限の原則 / Implementing the Principle of Least Privilege with Okta Identity Governance
tatsumin39
0
170
Introduction to Sansan Meishi Maker Development Engineer
sansan33
PRO
0
310
AI時代の開発を加速する組織づくり - ブログでは書けなかったリアル
hiro8ma
1
290
だいたい分かった気になる 『SREの知識地図』 / introduction-to-sre-knowledge-map-book
katsuhisa91
PRO
3
1.3k
Dylib Hijacking on macOS: Dead or Alive?
patrickwardle
0
460
ソフトウェアエンジニアの生成AI活用と、これから
lycorptech_jp
PRO
0
860
知覚とデザイン
rinchoku
1
480
様々なファイルシステム
sat
PRO
0
230
All About Sansan – for New Global Engineers
sansan33
PRO
1
1.2k
Featured
See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.6k
Docker and Python
trallard
46
3.6k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
34
2.3k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
Site-Speed That Sticks
csswizardry
13
920
Gamification - CAS2011
davidbonilla
81
5.5k
Practical Orchestrator
shlominoach
190
11k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
55
3k
Raft: Consensus for Rubyists
vanstee
140
7.2k
4 Signs Your Business is Dying
shpigford
185
22k
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 は「足し算」と言われる理由