サイボウズ開運冬まつり2025 フロントエンド&デザインクイズ大会

Slide 1

Slide 1 text

開運冬まつり2025 フロントエンド＆デザインクイズ大会 2025.02.04 1

Slide 2

Slide 2 text

フロントエンド＆デザインクイズ大会 Slack #開運冬まつりfeとdesign フロントエンド & デザインクイズ大会にようこそ 2 • この度はお集まりいただきありがとうございます • 16:30までの90分間ですが、どうぞよろしくお願いいたします

Slide 3

Slide 3 text

大会委員長挨拶 3 フロントエンド & デザインクイズ大会

Slide 4

Slide 4 text

大会の進め方 4

Slide 5

Slide 5 text

フロントエンド＆デザインクイズ大会 Slack #開運冬まつりfeとdesign フロントエンド & デザインクイズ大会について 5 • 概要 • チーム対抗のクイズ大会です • 正答数が最も多かったチームが優勝です • チーム分けはこの後ランダムに行います！ • フロントエンドエンジニア／デザイナー／デザインテクノロジスト混合です！ • 時間構成やること時間チーム分け 5分クイズ前半戦（No.1〜5） 30分途中経過発表 5分クイズ後半戦（No.6〜10） 30分最終結果発表と閉会式 5分

Slide 6

Slide 6 text

フロントエンド＆デザインクイズ大会 Slack #開運冬まつりfeとdesign チーム分け 6 • チーム分け方法 • 事前の出欠に「オフライン参加」と解答いただいた方 • →これからランダムに3〜4人程度のチーム（A〜Gチーム）に分けます • 人数の均衡を図るためcybot（人数降順で出力）の出力結果を上の通り組み合わせます • 事前の出欠に「オンライン参加」と解答いただいた方 • →「オンラインチーム」という1チームとします Aチーム Frontend 1 × Design 7 Bチーム Frontend 2 × Design 6 Cチーム Frontend 3 × Design 5 Dチーム Frontend 4 × Design 4 Eチーム Frontend 5 × Design 3 Fチーム Frontend 6 × Design 2 Gチーム Frontend 7 × Design 1

Slide 7

Slide 7 text

フロントエンド＆デザインクイズ大会 Slack #開運冬まつりfeとdesign チーム分け 7 • ① 同じチームのメンバーで固まってください！ → • ② 代表解答者を決めて、代表解答者は右のSlack投稿に絵文字を加えてください！ • Slackチャンネル： #開運冬まつりfeとdesign • ③ 全チームが②をしたのを確認したら始めます！ Aチーム Frontend 1 × Design 7 Bチーム Frontend 2 × Design 6 Cチーム Frontend 3 × Design 5 Dチーム Frontend 4 × Design 4 Eチーム Frontend 5 × Design 3 Fチーム Frontend 6 × Design 2 Gチーム Frontend 7 × Design 1 参考（チーム分けの出力例と組み合わせパターン） Aチーム Bチーム Cチーム Dチーム Eチーム Fチーム前方 …

Slide 8

Slide 8 text

フロントエンド＆デザインクイズ大会 Slack #開運冬まつりfeとdesign 出題と解答の方法 8 • 出題 • 全て四肢択一式です • 問題はスクリーンとSlackに表示します • 解答 • 司会が「せ〜の」と言ったら、代表解答者は Slackに「1️⃣ 〜4️⃣」の絵文字を加えましょう • その他 • PCやスマホで調べるのはご遠慮ください • チームメンバー間での相談は自由です • 雰囲気を見て、司会がヒントを出すことがありますここに絵文字を加える

Slide 9

Slide 9 text

クイズ前半戦一般的な技術・知識に関する5問 9

Slide 10

Slide 10 text

第1問 10

Slide 11

Slide 11 text

フロントエンド＆デザインクイズ大会 Slack #開運冬まつりfeとdesign 第1問 11 WCAGの4つの原則に当てはまらないものはどれ？ ① 知覚可能 ② 操作可能 ③ 堅牢 ④ 代替 ※WCAG：Web Content Accessibility Guidelinesの略で、ウェブのコンテンツを障害のある人に使いやすいようにするためのウェブアクセシビリティに関するガイドライン。

Slide 12

Slide 12 text

フロントエンド＆デザインクイズ大会 Slack #開運冬まつりfeとdesign 第1問 12 正解は…

Slide 13

Slide 13 text

フロントエンド＆デザインクイズ大会 Slack #開運冬まつりfeとdesign 第1問 13 WCAGの4つの原則に当てはまらないものはどれ？正解：④ 代替 WCAGの4つの原則は次の通りです。・知覚可能・操作可能・理解可能・堅牢：支援技術を含む様々なユーザエージェントが確実に解釈可能 [出典] https://waic.jp/translations/WCAG22/

Slide 14

Slide 14 text

第2問 14

Slide 15

Slide 15 text

フロントエンド＆デザインクイズ大会 Slack #開運冬まつりfeとdesign 第2問 15 次のHTMLタグのうち実在するものはどれ？ ① ② ③ ④

Slide 16

Slide 16 text

フロントエンド＆デザインクイズ大会 Slack #開運冬まつりfeとdesign 第2問 16 正解は…

Slide 17

Slide 17 text

フロントエンド＆デザインクイズ大会 Slack #開運冬まつりfeとdesign 第2問 1️⃣7 次のHTMLタグのうち実在するものはどれ？正解：③ タグを使うと、文字にルビ（読み仮名）を振ることができます。文字に添えるふりがなを「ルビ」と呼ぶのは宝石のルビーに由来します。英国の印刷業界では文字サイズをさまざまな宝石名で読んでおり、ふりがなに使われていた文字は「ruby」と呼ばれるサイズに近いものでした。

Slide 18

Slide 18 text

第3問 18

Slide 19

Slide 19 text

フロントエンド＆デザインクイズ大会 Slack #開運冬まつりfeとdesign 第3問 19 縦横比（アスペクト比）の名称として実在しないものはどれ？ ① 黄金比 ② 白銀比 ③ 青銅比 ④ 赤銅比

Slide 20

Slide 20 text

フロントエンド＆デザインクイズ大会 Slack #開運冬まつりfeとdesign 第3問 20 正解は…

Slide 21

Slide 21 text

フロントエンド＆デザインクイズ大会 Slack #開運冬まつりfeとdesign 第3問 21 正解：④ 赤銅比 ① 黄金比は縦横比が「1:1.618」となる割合で、人間が最も美しいと感じるバランスの比率として知られています。 ② 白銀比は「1:1.414」で、東京スカイツリーの第二展望台までの高さと全長の比がこれに相当します。 ③ 青銅比は「1:3.303」ですが、他より詳細な歴史は乏しく知名度も低いです。縦横比（アスペクト比）の名称として実在しないものはどれ？

Slide 22

Slide 22 text

第4問 22

Slide 23

Slide 23 text

フロントエンド＆デザインクイズ大会 Slack #開運冬まつりfeとdesign 第4問 23 UIパーツ「ラジオボタン」の命名の由来はどれ？ ① ラジオのスピーカーみたいな見た目をしたボタン ② 昔のラジオの選局ボタンと同じ動きをするボタン ③ アメリカの往年の人気ラジオ番組のノベルティーに似た見た目をしたボタン ④ ラジオの電波のようにあまねく拡がってほしいという願いをこめたボタン

Slide 24

Slide 24 text

フロントエンド＆デザインクイズ大会 Slack #開運冬まつりfeとdesign 第4問 24 正解は…

Slide 25

Slide 25 text

フロントエンド＆デザインクイズ大会 Slack #開運冬まつりfeとdesign 第4問 25 UIパーツ「ラジオボタン」の命名の由来はどれ？正解： ② 昔のラジオの選局ボタンと同じ動きをするボタン昔のラジオ（特にカーラジオ）の選局ボタンは、各ボタンに特定の周波数が割り当てられており、あるボタンを押すとそれまでに押された他のボタンが元に戻ることで、押されているボタンの数が常に1つになる作りをしていました。ラジオボタンが発明されたのが日本ならば、「扇風機ボタン」と名付けられても不思議でなかったわけです。

Slide 26

Slide 26 text

第5問 26

Slide 27

Slide 27 text

フロントエンド＆デザインクイズ大会 Slack #開運冬まつりfeとdesign 第5問 27 デザインツールとして今もサービスが継続しているものはどれ？ ① Prott ② Sketch ③ inVision ④ Adobe Muse

Slide 28

Slide 28 text

フロントエンド＆デザインクイズ大会 Slack #開運冬まつりfeとdesign 第5問 28 正解は…

Slide 29

Slide 29 text

フロントエンド＆デザインクイズ大会 Slack #開運冬まつりfeとdesign 第5問 29 正解：② Sketch ① Prott → 2024年8月31日でサービス終了 ③ inVision → 2024年12月31日にサービス終了 ④ Adobe Muse → 2020年3月26日にサービス終了 Sketchは今もサービスを継続しています！サイボウズも昔はinVisionやProttを使っていた時期がありましたねぇ…。デザインツールとして今もサービスが継続しているものはどれ？

Slide 30

Slide 30 text

途中経過集計中 30 フロントエンド & デザインクイズ大会

Slide 31

Slide 31 text

途中経過発表 31 フロントエンド & デザインクイズ大会

Slide 32

Slide 32 text

クイズ後半戦製品や社内のアレコレに関する5問 32

Slide 33

Slide 33 text

第6問 33

Slide 34

Slide 34 text

フロントエンド＆デザインクイズ大会 Slack #開運冬まつりfeとdesign 第6問 34 kDSの運営理念「kintone Design Systemは、利用者と〇〇し、 kintone開発全員で一緒に育てていくデザインシステムです。」の〇〇に入る文言はどれ？ ① 一緒に成長 ② 対話と共創 ③ 全力で対峙 ④ わいわい

Slide 35

Slide 35 text

フロントエンド＆デザインクイズ大会 Slack #開運冬まつりfeとdesign 第6問 35 正解は…

Slide 36

Slide 36 text

フロントエンド＆デザインクイズ大会 Slack #開運冬まつりfeとdesign 第6問 36 正解：① 一緒に成長 kDS（kintone Design Systems）のチームミッションや運営理念などは、全てkDSのStorybookを通じて確認することができます。 kDSの運営理念「kintone Design Systemは、利用者と〇〇し、 kintone開発全員で一緒に育てていくデザインシステムです。」の〇〇に入る文言はどれ？

Slide 37

Slide 37 text

第7問 37

Slide 38

Slide 38 text

フロントエンド＆デザインクイズ大会 Slack #開運冬まつりfeとdesign 第7問 38 ① c → レコードを追加する ② / → 検索キーワードを入力する ③ o → 選択したレコードの詳細を表示する ④ d → レコードを削除する kintoneレコード一覧画面のショートカットキーに含まれていないものはどれ？

Slide 39

Slide 39 text

フロントエンド＆デザインクイズ大会 Slack #開運冬まつりfeとdesign 第7問 39 正解は…

Slide 40

Slide 40 text

フロントエンド＆デザインクイズ大会 Slack #開運冬まつりfeとdesign 第7問 40 正解：④ d → レコードを削除する kintoneの一部の画面で「?」を押すと、その画面で使えるショートカットキーの一覧を見ることができます。 kintoneレコード一覧画面のショートカットキーに含まれていないものはどれ？

Slide 41

Slide 41 text

第8問 41

Slide 42

Slide 42 text

フロントエンド＆デザインクイズ大会 Slack #開運冬まつりfeとdesign 第8問 42 ① #3498db ② #0072bf ③ #14a565 ④ #a254ff kintoneのレコード保存ボタンなどで使用される青色（curiousBlue）ですが、この新バージョンの色はどれ？

Slide 43

Slide 43 text

フロントエンド＆デザインクイズ大会 Slack #開運冬まつりfeとdesign 第8問 43 正解は…

Slide 44

Slide 44 text

フロントエンド＆デザインクイズ大会 Slack #開運冬まつりfeとdesign 第8問 44 正解：② #0072bf 旧バージョンと比べて、白色とのコントラスト比が上がりました。 ① #3498db ② #0072bf ③ #14a565 ④ #a254ff kintoneのレコード保存ボタンなどで使用される青色（curiousBlue）ですが、この新バージョンはどれ？

Slide 45

Slide 45 text

第9問 45

Slide 46

Slide 46 text

フロントエンド＆デザインクイズ大会 Slack #開運冬まつりfeとdesign 第9問 46 ① 掲示板 ② 報告書 ③ ToDoリスト ④ アドレス帳サイボウズOfficeにありGaroonにない機能はどれ？

Slide 47

Slide 47 text

フロントエンド＆デザインクイズ大会 Slack #開運冬まつりfeとdesign 第9問 47 正解は…

Slide 48

Slide 48 text

フロントエンド＆デザインクイズ大会 Slack #開運冬まつりfeとdesign 第9問 48 正解：② 報告書「報告書」は、商談報告や打ち合わせの議事録などを事前設定した独自の様式で作成・共有できる機能です。 Garoonには「レポート」という似た機能があります。サイボウズOfficeにありGaroonにない機能はどれ？

Slide 49

Slide 49 text

第10問 49

Slide 50

Slide 50 text

フロントエンド＆デザインクイズ大会 Slack #開運冬まつりfeとdesign 第10問 50 ① 癒し ② ボウズマン ③ ハロウィン ④ Global 現時点で、サイボウズOfficeとGaroonの両方にあるデザインテーマはどれ？

Slide 51

Slide 51 text

フロントエンド＆デザインクイズ大会 Slack #開運冬まつりfeとdesign 第10問 51 正解は…

Slide 52

Slide 52 text

フロントエンド＆デザインクイズ大会 Slack #開運冬まつりfeとdesign 第10問 52 正解：④ Global ① 癒し → Garoonのみ ② ボウズマン → Garoonのみ ③ ハロウィン → サイボウズOfficeのみ両方にあるデザインテーマとして他には「花火」があります。現時点で、サイボウズOfficeとGaroonの両方にあるデザインテーマはどれ？

Slide 53

Slide 53 text

フロントエンド＆デザインクイズ大会 Slack #開運冬まつりfeとdesign 問題は以上です！ 53 お疲れ様でした！