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

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

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

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

大会の進め方 4

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

フロントエンド＆デザインクイズ大会 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

フロントエンド＆デザインクイズ大会 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チーム前方 …

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

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

第1問 10

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

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

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

第2問 14

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

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

第3問 18

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

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

第4問 22

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

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

第5問 26

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

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

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

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

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

第6問 33

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

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

第7問 37

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

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

第8問 41

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

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

第9問 45

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

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

第10問 49

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

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

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

最終結果集計中 54 フロントエンド & デザインクイズ大会

最終結果発表 55 フロントエンド & デザインクイズ大会

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

最後までご参加いただきありがとうございました！ 57

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

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

More Decks by おぐえもん

Other Decks in Education

Featured

Transcript