Icondle

GitHub
newt239/icondle
Period
2026.07
Tech Stack
ReactTanStack StartHeroUITailwind CSSCloudflare Workers

Tabler IconsやMaterial Symbolsなど、主要なUIアイコンセット15種を題材にした4択クイズのWebアプリです。フロントエンド開発者やデザイナーが普段見ているアイコンを、どこまで見分けられるかを試せます。

ゲームは2種類あり、「セット名を当てる」モードでは同じセットに属するアイコン群からセット名を、「アイコンを当てる」モードでは提示されたセット名に合致するアイコンを選びます。それぞれにeasy(5問・有名6セット)とhard(10問・全15セット)の難易度があります。さらに日付をシードにしたデイリー出題も用意しており、Wordleのようにその日の結果を共有して遊べます。

技術的な特徴

  • データベースを持たず、状態をすべてURLに持つ設計です。seedと問題番号から出題を決定論的に導出するため、同じURLを共有すれば全員が同じ問題を解けます
  • 正解はクライアントに渡さず、server functionがサーバー側で出題を再導出して判定します
  • 出題データはIconifyから機械的に選定・事前生成しています。出題対象は4セット以上が同名アイコンを持つ概念に限り、フォーク由来のSVGが完全一致するセット同士は同じ問題の選択肢へ同居させません
  • 視覚的識別がゲームの本質であることを踏まえてアクセシビリティを設計しています。解答前のアイコンには答えが漏れないaria-labelを付け、解答後に「どのセットの何のアイコンか」が分かる内容へ差し替えます。選択肢は数字キーでも回答できます

関連リンク