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

サイボウズでは、2025年2月4日に社内イベント「サイボウズ開運冬まつり2025」を開催し、その中で「フロントエンド&デザインクイズ大会」という企画を行いました！
本資料は、そこで投影された資料に一部編集を加えたものです。

クイズはフロントエンド領域・デザイン領域混合で、全10問で構成されています。みなさんは全ての問題を正解することができますか？
後半はサイボウズ製品の事情やある程度の裏側を知らないと答えられない高難度な問題となっています！

前回のイベントにあたる開運夏祭り2024で行ったクイズ大会のスライドはこちら↓
https://speakerdeck.com/yotahada3/hurontoendokuizuda-hui

Transcript

1. 開運冬まつり2025 フロントエンド＆デザイン クイズ大会 2025.02.04 1
2. フロントエンド＆デザイン クイズ大会 Slack #開運冬まつりfeとdesign フロントエンド & デザインクイズ大会にようこそ 2 • この度はお集まりいただきありがとうございます • 16:30までの90分間ですが、どうぞよろしくお願いいたします
3. 大会委員長挨拶 3 フロントエンド & デザインクイズ大会
4. 大会の進め方 4
5. フロントエンド＆デザイン クイズ大会 Slack #開運冬まつりfeとdesign フロントエンド & デザインクイズ大会について 5 • 概要 • チーム対抗のクイズ大会です • 正答数が最も多かったチームが優勝です • チーム分けはこの後ランダムに行います！ • フロントエンドエンジニア／デザイナー／デザインテクノロジスト混合です！ • 時間構成 やること 時間 チーム分け 5分 クイズ前半戦（No.1〜5） 30分 途中経過発表 5分 クイズ後半戦（No.6〜10） 30分 最終結果発表と閉会式 5分
6. フロントエンド＆デザイン クイズ大会 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
7. フロントエンド＆デザイン クイズ大会 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チーム 前方 …
8. フロントエンド＆デザイン クイズ大会 Slack #開運冬まつりfeとdesign 出題と解答の方法 8 • 出題 • 全て四肢択一式です • 問題はスクリーンとSlackに表示します • 解答 • 司会が「せ〜の」と言ったら、代表解答者は Slackに「1️⃣ 〜4️⃣」の絵文字を加えましょう • その他 • PCやスマホで調べるのはご遠慮ください • チームメンバー間での相談は自由です • 雰囲気を見て、司会がヒントを出すことがあります ここに絵文字を加える
9. クイズ前半戦 一般的な技術・知識に関する5問 9
10. 第1問 10
11. フロントエンド＆デザイン クイズ大会 Slack #開運冬まつりfeとdesign 第1問 11 WCAGの4つの原則に当てはまらないものはどれ？ ① 知覚可能 ② 操作可能 ③ 堅牢 ④ 代替 ※WCAG：Web Content Accessibility Guidelinesの略で、 ウェブのコンテンツを障害のある人に使いやすいようにするための ウェブアクセシビリティに関するガイドライン。
12. フロントエンド＆デザイン クイズ大会 Slack #開運冬まつりfeとdesign 第1問 12 正解は…
13. フロントエンド＆デザイン クイズ大会 Slack #開運冬まつりfeとdesign 第1問 13 WCAGの4つの原則に当てはまらないものはどれ？ 正解：④ 代替 WCAGの4つの原則は次の通りです。 ・知覚可能 ・操作可能 ・理解可能 ・堅牢：支援技術を含む様々なユーザエージェントが確実に解釈可能 [出典] https://waic.jp/translations/WCAG22/
14. 第2問 14
15. フロントエンド＆デザイン クイズ大会 Slack #開運冬まつりfeとdesign 第2問 15 次のHTMLタグのうち実在するものはどれ？ ① <diamond> ② <pearl> ③ <ruby> ④ <sapphire>
16. フロントエンド＆デザイン クイズ大会 Slack #開運冬まつりfeとdesign 第2問 16 正解は…
17. フロントエンド＆デザイン クイズ大会 Slack #開運冬まつりfeとdesign 第2問 1️⃣7 次のHTMLタグのうち実在するものはどれ？ 正解：③ <ruby> <ruby>タグを使うと、文字にルビ（読み仮名）を振ることができます。 文字に添えるふりがなを「ルビ」と呼ぶのは宝石のルビーに由来します。 英国の印刷業界では文字サイズをさまざまな宝石名で読んでおり、ふりがな に使われていた文字は「ruby」と呼ばれるサイズに近いものでした。
18. 第3問 18
19. フロントエンド＆デザイン クイズ大会 Slack #開運冬まつりfeとdesign 第3問 19 縦横比（アスペクト比）の名称として 実在しないものはどれ？ ① 黄金比 ② 白銀比 ③ 青銅比 ④ 赤銅比
20. フロントエンド＆デザイン クイズ大会 Slack #開運冬まつりfeとdesign 第3問 20 正解は…
21. フロントエンド＆デザイン クイズ大会 Slack #開運冬まつりfeとdesign 第3問 21 正解：④ 赤銅比 ① 黄金比は縦横比が「1:1.618」となる割合で、 人間が最も美しいと感じるバランスの比率として知られています。 ② 白銀比は「1:1.414」で、 東京スカイツリーの第二展望台までの高さと全長の比がこれに相当します。 ③ 青銅比は「1:3.303」ですが、他より詳細な歴史は乏しく知名度も低いです。 縦横比（アスペクト比）の名称として 実在しないものはどれ？
22. 第4問 22
23. フロントエンド＆デザイン クイズ大会 Slack #開運冬まつりfeとdesign 第4問 23 UIパーツ「ラジオボタン」の命名の由来はどれ？ ① ラジオのスピーカーみたいな見た目をしたボタン ② 昔のラジオの選局ボタンと同じ動きをするボタン ③ アメリカの往年の人気ラジオ番組の ノベルティーに似た見た目をしたボタン ④ ラジオの電波のようにあまねく拡がってほしいという 願いをこめたボタン
24. フロントエンド＆デザイン クイズ大会 Slack #開運冬まつりfeとdesign 第4問 24 正解は…
25. フロントエンド＆デザイン クイズ大会 Slack #開運冬まつりfeとdesign 第4問 25 UIパーツ「ラジオボタン」の命名の由来はどれ？ 正解： ② 昔のラジオの選局ボタンと同じ動きをするボタン 昔のラジオ（特にカーラジオ）の選局ボタンは、各ボタンに特定の周波数が 割り当てられており、あるボタンを押すとそれまでに押された他のボタンが 元に戻ることで、押されているボタンの数が常に1つになる作りをしていま した。ラジオボタンが発明されたのが日本ならば、「扇風機ボタン」と名付 けられても不思議でなかったわけです。
26. 第5問 26
27. フロントエンド＆デザイン クイズ大会 Slack #開運冬まつりfeとdesign 第5問 27 デザインツールとして 今もサービスが継続しているものはどれ？ ① Prott ② Sketch ③ inVision ④ Adobe Muse
28. フロントエンド＆デザイン クイズ大会 Slack #開運冬まつりfeとdesign 第5問 28 正解は…
29. フロントエンド＆デザイン クイズ大会 Slack #開運冬まつりfeとdesign 第5問 29 正解：② Sketch ① Prott → 2024年8月31日でサービス終了 ③ inVision → 2024年12月31日にサービス終了 ④ Adobe Muse → 2020年3月26日にサービス終了 Sketchは今もサービスを継続しています！ サイボウズも昔はinVisionやProttを使っていた時期がありましたねぇ…。 デザインツールとして 今もサービスが継続しているものはどれ？
30. 途中経過集計中 30 フロントエンド & デザインクイズ大会
31. 途中経過発表 31 フロントエンド & デザインクイズ大会
32. クイズ後半戦 製品や社内のアレコレに関する5問 32
33. 第6問 33
34. フロントエンド＆デザイン クイズ大会 Slack #開運冬まつりfeとdesign 第6問 34 kDSの運営理念「kintone Design Systemは、利用者と〇〇し、 kintone開発全員で一緒に育てていくデザインシステムです。」の 〇〇に入る文言はどれ？ ① 一緒に成長 ② 対話と共創 ③ 全力で対峙 ④ わいわい
35. フロントエンド＆デザイン クイズ大会 Slack #開運冬まつりfeとdesign 第6問 35 正解は…
36. フロントエンド＆デザイン クイズ大会 Slack #開運冬まつりfeとdesign 第6問 36 正解：① 一緒に成長 kDS（kintone Design Systems）のチームミッションや運営理念などは、 全てkDSのStorybookを通じて確認することができます。 kDSの運営理念「kintone Design Systemは、利用者と〇〇し、 kintone開発全員で一緒に育てていくデザインシステムです。」の 〇〇に入る文言はどれ？
37. 第7問 37
38. フロントエンド＆デザイン クイズ大会 Slack #開運冬まつりfeとdesign 第7問 38 ① c → レコードを追加する ② / → 検索キーワードを入力する ③ o → 選択したレコードの詳細を表示する ④ d → レコードを削除する kintoneレコード一覧画面のショートカットキーに 含まれていないものはどれ？
39. フロントエンド＆デザイン クイズ大会 Slack #開運冬まつりfeとdesign 第7問 39 正解は…
40. フロントエンド＆デザイン クイズ大会 Slack #開運冬まつりfeとdesign 第7問 40 正解：④ d → レコードを削除する kintoneの一部の画面で「?」を押すと、 その画面で使えるショートカットキーの 一覧を見ることができます。 kintoneレコード一覧画面のショートカットキーに 含まれていないものはどれ？
41. 第8問 41
42. フロントエンド＆デザイン クイズ大会 Slack #開運冬まつりfeとdesign 第8問 42 ① #3498db ② #0072bf ③ #14a565 ④ #a254ff kintoneのレコード保存ボタンなどで使用される 青色（curiousBlue）ですが、この新バージョンの色は どれ？
43. フロントエンド＆デザイン クイズ大会 Slack #開運冬まつりfeとdesign 第8問 43 正解は…
44. フロントエンド＆デザイン クイズ大会 Slack #開運冬まつりfeとdesign 第8問 44 正解：② #0072bf 旧バージョンと比べて、白色との コントラスト比が上がりました。 ① #3498db ② #0072bf ③ #14a565 ④ #a254ff kintoneのレコード保存ボタンなどで使用される 青色（curiousBlue）ですが、この新バージョンはどれ？
45. 第9問 45
46. フロントエンド＆デザイン クイズ大会 Slack #開運冬まつりfeとdesign 第9問 46 ① 掲示板 ② 報告書 ③ ToDoリスト ④ アドレス帳 サイボウズOfficeにありGaroonにない機能はどれ？
47. フロントエンド＆デザイン クイズ大会 Slack #開運冬まつりfeとdesign 第9問 47 正解は…
48. フロントエンド＆デザイン クイズ大会 Slack #開運冬まつりfeとdesign 第9問 48 正解：② 報告書 「報告書」は、商談報告や打ち合わせの議 事録などを事前設定した独自の様式で作 成・共有できる機能です。 Garoonには「レポート」という似た機能 があります。 サイボウズOfficeにありGaroonにない機能はどれ？
49. 第10問 49
50. フロントエンド＆デザイン クイズ大会 Slack #開運冬まつりfeとdesign 第10問 50 ① 癒し ② ボウズマン ③ ハロウィン ④ Global 現時点で、サイボウズOfficeとGaroonの 両方にあるデザインテーマはどれ？
51. フロントエンド＆デザイン クイズ大会 Slack #開運冬まつりfeとdesign 第10問 51 正解は…
52. フロントエンド＆デザイン クイズ大会 Slack #開運冬まつりfeとdesign 第10問 52 正解：④ Global ① 癒し → Garoonのみ ② ボウズマン → Garoonのみ ③ ハロウィン → サイボウズOfficeのみ 両方にあるデザインテーマとして 他には「花火」があります。 現時点で、サイボウズOfficeとGaroonの 両方にあるデザインテーマはどれ？
53. フロントエンド＆デザイン クイズ大会 Slack #開運冬まつりfeとdesign 問題は以上です！ 53 お疲れ様でした！
54. 最終結果集計中 54 フロントエンド & デザインクイズ大会
55. 最終結果発表 55 フロントエンド & デザインクイズ大会
56. 大会委員長挨拶 56 フロントエンド & デザインクイズ大会
57. 最後までご参加いただき ありがとうございました！ 57
58. ©️ Cybozu, Inc. 58