Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
セキュリティとデザイン
Search
takumma
March 11, 2023
Design
3
1.9k
セキュリティとデザイン
セキュリティ・キャンプフォーラム2023 修了生講演 LT のスライドです。
takumma
March 11, 2023
Tweet
Share
More Decks by takumma
See All by takumma
seccamp_2022ブラウザ課題発表
takumma
0
96
鈴鹿高専 Advent Calendar 2021
takumma
0
57
togather
takumma
0
160
Other Decks in Design
See All in Design
プロダクトデザイナーに学ぶ、『見る気が起きる』ダッシュボードの作り方 / Creating Engaging Dashboards: Lessons from Product Designers
yamamotoyuta
0
280
デザインシステムの「種」を使って、受託開発を加速させる
akane___ui
0
12k
Memory Man v3 (WIP)
storybychad
PRO
0
2.9k
Findyのプロデチームの 歩みとこれから
satty9556
0
350
第4回関東Kaggler会LT HCD-Net人間中心設計スペシャリストが語るNotebookメダルの取り方
utm529f
0
1.7k
maki setoguchi
maki_setoguchi
0
590
見栄えと使いやすさの先にある 特別感 をデザインする / Designing a Sense of Specialness Beyond Aesthetics and Usability
bitkey
PRO
0
210
【MIXI MEETUP!ー TECH & DESIGN DAYー】【工数98%削減】Xでモンストを話題にせよ!生成AIの活用で日本トレンド6位を獲得した企画の設計&デザイン術
mixi_design
PRO
0
170
Liquid GlassとApp Intents
touyou
0
550
ドルちゃん
design_dolphins
0
500
【Designship 2025|10.11】デザイン組織と事業貢献、その挑戦と結果。
payatsusan213
1
840
不確実性の時代にみんなで試したFigma × MCP × Cursor ハンズオン
techtekt
PRO
7
1.3k
Featured
See All Featured
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.3k
The Power of CSS Pseudo Elements
geoffreycrofte
80
6.1k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
34
2.6k
Making the Leap to Tech Lead
cromwellryan
135
9.7k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.8k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
31
3k
Building a Modern Day E-commerce SEO Strategy
aleyda
45
8.3k
Reflections from 52 weeks, 52 projects
jeffersonlam
355
21k
Large-scale JavaScript Application Architecture
addyosmani
515
110k
How to Think Like a Performance Engineer
csswizardry
28
2.4k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
9
1k
Transcript
セキュリティとデザイン セキュリティ・キャンプフォーラム2023 - 3.11 (sat) 2022年度修了生 市川 拓磨 (@_takumma) 1
自己紹介 市川 拓磨(@_takumma) seccamp’22 Web セキュリティクラス修了 4月からは某社へ新卒入社 SecHack365’22 プログラミングしたり、デザインしたりしてます。猫派。 2
今日話すこと Design 3
今日話すこと 設計 デザイン Design 審美性を根源にもつ計画的行為 の全般 計画や仕様 “Secure by Design”
はこっち 4 ユーザー体験、課題解決、表現
今日話すこと 設計 デザイン Design 審美性を根源にもつ計画的行為 の全般 計画や仕様 “Secure by Design”
はこっち 5 ユーザー体験、課題解決、表現
今日話すこと デザイン 心理学 ユーザー体験 アクセシビリティ 6
アクセシビリティ “Accessibility” 製品・サービスを利用できること・その達成度。 「障害者の方のために」という視点になりがちですが、 実際は「全ての人」が使えるようにしていくという観点からアクセシビリティに取り組むことが求められています。 7
アクセシビリティの恩恵を受ける人 428.7 万人(平成28年時点) 画像引用元:ウェブアクセシビリティ導入ガイドブック - デジタル庁 https://www.digital.go.jp/assets/contents/node/basic_page/field_ref_resources/08ed88e1-d622-43cb-900b-84957ab87826/17f279b9/20221205_introduction_to_weba11y.pdf 8
どのようにアクセスしている? 視覚障害者の方の場合 点字ディスプレイ スクリーンリーダー (30万円くらい) 画面中の要素を読み上げる 9
例:CAPTCHA 画像を見る必要があるため、視覚障害 者の方が利用することができない。 (勿論 alt 属性も指定できない) 10 最近は reCAPTCHA などが出てきて画像を選んだりする手間が省けるようになりました。
ちなみに、CAPTCHA でも音声での認証を選択することもできます。(図中のヘッドホンのアイコン)
アクセシビリティをちゃんとしないと... セキュリティ機能にアクセスできない セキュリティ機能を実装しても、 ユーザーはセキュアにならない! 利用できないユーザーは離れていってしまう... 11
どうすればいい? アクセシビリティを向上させる w キーボードだけで全ての機能にアクセスできるようi w 操作に時間制限を設けない(回避手段を用意s w 文字と背景に十分なコントラスト比を保つ 12 デジタル庁の出しているウェブアクセシビリティ導入ガイドブックがとても参考になります。
より「利用しやすい」ものにするための視点は、SmartHR の辻さんの「俺の」シリーズが面白いです。(参考文献を参照) 指標として、ウェブアクセシビリティの規格が存在します。 あたりまえ
どうすればいい? 代替手段を用意する ! 別の認証方法を用意す0 ! サポートする窓口・方法を用意する 代替手段に対しても、セキュリティが担保できているか?という視点が必要 13 あるいは... 製品・サービス自体だけで無く、その周辺のコンテンツ(ヘルプ・カスタマーサービス)もデザインの対象になります。
ユーザー体験 “User Experience” ユーザーが製品やサービスを使用するときに感じる感覚や印象 14
よく言われる言説 セキュリティを担保しようとした結果 ユーザー体験が損なわれることは、仕方がない? ? 15
例:セッションタイムアウト セッションタイムアウトはサービスの利用を遮り、ユーザー体験 を損ねる3 長いフォームを埋めて Submit したのに、タイムアウトでやり直 し...(最悪
イライラした経験がある人もいるんじゃない...? 16 セッションタイムアウトが発生しました。 再度ログインしてください。 ログインページへ ログインページへ
例:iOS での二段階認証 “メッセージ” アプリに届いた認証コード をキーボードに表示 「アプリ切替 → コピー → ペースト」という煩雑な流れが
簡略化され、2段階認証のハードルを下げた。 → シームレスな入力が可能に! 17 GitHub の認証画面
例:GU アプリ 会員証のバーコードは、 アップデートせずに提示できる! レジで会員証を出すときに邪魔しない & その他の機能へは、アップデートを促す。 18
心理学 “Accessibility” 製品を取り巻く人々の心理を考える 19
心理学 今年のセキュリティ・キャンプの講義でも! 20
「人」を狙った脅威 21 情報セキュリティ10大脅威 → 約半数が人に起因 ... 人に起因するもの 漏れたり間違ったりしてたらすみません... 引用元:情報セキュリティ10大脅威 -
IPA
攻撃者の視点に立ってみると? デザイン 騙す を使って、人を 22 偽 URL 偽サイト 偽リンク・ボタン example-com.jp
PLAY PLAY PLAY PLAY もはや見分けが つかないものも サイトのデザインを 模倣して騙す フィッシング ユーザーを誘導 クリックジャッキング a
心理学を踏まえて、どうデザインしていく? 23 セキュリティ機能を と思ってもらう 利用したい なるべく簡単なフローをデザインす 機能のメリット・効果を伝えU
インターフェースの見た目を綺麗にして、信用を得る * *「インターフェースの心理学」より、「079:人はまず「見た目」と「感じ」で信用するか否かを決める」
まとめ “Conclusion” 24
25 デザインの本質 人 ユーザー体験 とは、 に寄り添い、 より良い を提供すること。 まとめ
まとめ < Thanks ! セキュリティとデザインは、対立関係ではない! より でより良い を 提供することができる! セキュア
ユーザー体験 互いに手を取り合うことで、 26
参考文献など § ウェブアクセシビリティ導入ガイドブック - デジタル庁 https://www.digital.go.jp/assets/contents/node/basic_page/field_ref_resources/08ed88e1- d622-43cb-900b-84957ab87826/17f279b9/20221205_introduction_to_weba11y.pd § 平成28年生活のしづらさなどに関する調査(全国在宅障害児・者等実態調査) https://www.mhlw.go.jp/toukei/list/seikatsu_chousa_b_h28.htmr
§ アクセシビリティvsセキュリティ ~こんな対策はいらない!~ - Yoshinori OHTA https://www.slideshare.net/yoshinoriohta18/vs-7679859 § デジタルで年調を提出!SmartHRで「俺の年末調整」を開催した話し - Katsutoshi Tsuji https://note.com/debugon/n/n168934ac69bU § 情報セキュリティ10大脅威 - IPA https://www.ipa.go.jp/security/vuln/10threats2023.htmr § インターフェースの心理学 - Susan Weinschenk 著、武舎 広幸、武舎 るみ、阿部 和也 訳 https://www.oreilly.co.jp/books/9784873115573/ 27