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
58
ポートフォリオサイトを作ろう!
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
[2025-09-30] Databricks Genie を利用した分析基盤とデータモデリングの IVRy の現在地
wxyzzz
0
400
入門 FormObject / An Introduction to FormObject #kaigionrails
expajp
2
1.4k
KAGのLT会 #8 - 東京リージョンでGAしたAmazon Q in QuickSightを使って、報告用の資料を作ってみた
0air
0
180
サプライチェーン攻撃に学ぶModuleの仕組みと セキュリティ対策
kuro_kurorrr
3
780
【新卒研修資料】LLM・生成AI研修 / Large Language Model・Generative AI
brainpadpr
21
13k
PLaMo2シリーズのvLLM実装 / PFN LLM セミナー
pfn
PRO
2
660
Goに育てられ開発者向けセキュリティ事業を立ち上げた僕が今向き合う、AI × セキュリティの最前線 / Go Conference 2025
flatt_security
0
260
DataOpsNight#8_Terragruntを用いたスケーラブルなSnowflakeインフラ管理
roki18d
1
280
コンパウンドスタートアップにおけるQAの成長戦略
matsu802
4
580
生成AIで「お客様の声」を ストーリーに変える 新潮流「Generative ETL」
ishikawa_satoru
1
220
stupid jj tricks
indirect
0
7.4k
AIコーディングとエンジニアリングの現在地 / A Snapshot of AI Coding and Engineering(Sept. 2025)
ar_tama
0
160
Featured
See All Featured
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
20k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Into the Great Unknown - MozCon
thekraken
40
2.1k
The Cost Of JavaScript in 2023
addyosmani
53
9k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
Music & Morning Musume
bryan
46
6.8k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Scaling GitHub
holman
463
140k
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 は「足し算」と言われる理由