Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
セキュリティとデザイン
Search
takumma
March 11, 2023
Design
2k
3
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
セキュリティとデザイン
セキュリティ・キャンプフォーラム2023 修了生講演 LT のスライドです。
takumma
March 11, 2023
More Decks by takumma
See All by takumma
seccamp_2022ブラウザ課題発表
takumma
0
110
鈴鹿高専 Advent Calendar 2021
takumma
0
70
togather
takumma
0
200
Other Decks in Design
See All in Design
いいUIとは?初心者向けに事例をもとにUIデザインを分解
yuichi_hara7
12
6.3k
図面資産×AI 眠れる資産を起こす挑戦
aonomasahiro
0
240
ポートフォリオ_あやの
ngyenmazt1412
0
1.8k
個人理念(自分の言葉)の言語化ワークショップ
kakukoki
1
220
JBUG大阪#9_登壇資料_引き継ぎで困らないためのBacklogWikiの整え方_ミスと属人化を防ぐために、 “次の人が動ける状態”をどう残すか
webnaut
2
250
Design dependencies
teba_eleven
0
170
1000人規模の組織でデザインハーネスを導入するための第一歩
pkshadeck
PRO
5
4k
デザイナーの判断をAIにつなぐ ── 審美眼をハーネスする試み
kotasaito_cnt
0
640
AI-Slopなデザインを生まないためのデザインプロセス戦略
takanorip
10
5.9k
富山デザイン勉強会_プレゼンテーション.pdf
keita_yoshikawa
0
150
つくり方を変えていく | change-how-we-build
mottox2
2
1.5k
LP制作のための熱量ハーネス -人の熱量を、AIとの制作につなぐ-
niccy
0
1.1k
Featured
See All Featured
ラッコキーワード サービス紹介資料
rakko
1
4.9M
Exploring the relationship between traditional SERPs and Gen AI search
raygrieselhuber
PRO
3
4.3k
The agentic SEO stack - context over prompts
schlessera
0
940
The Art of Programming - Codeland 2020
erikaheidi
57
14k
Hiding What from Whom? A Critical Review of the History of Programming languages for Music
tomoyanonymous
3
1.2k
Leadership Guide Workshop - DevTernity 2021
reverentgeek
1
370
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
2.2k
Redefining SEO in the New Era of Traffic Generation
szymonslowik
1
420
Ruling the World: When Life Gets Gamed
codingconduct
0
330
30 Presentation Tips
portentint
PRO
1
390
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
128
56k
The Curse of the Amulet
leimatthew05
3
14k
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