Skip to main content

絵文字で UI 部品を表現

またはその限界

やりたいこと​

  • 絵文字がせっかくあるので、UI 部品についても、これを活用したい
    • チェックボックス
    • ラジオボタン
  • Markdown のチェックリスト ( - [x], - [ ] ) を使うという手もあるが、これは不採用
    • 「済」と「Onにする」では表現したい意味が違ってくる
    • VSCode 拡張などで TODO として検知されてしまう

結論​

  • チェックボックス
    • GFM Emoji にしたい場合
      • ✅ :white_check_mark: ← 悪くないが、目立ちすぎる
      • ⬜ :white_large_square: ← 悪くないが、対になってる感がない
    • 諦めて Unicode にする場合
      • ☑ Google 日本語入力で「ちぇっく」で出す
      • □ Google 日本語入力で「しかく」で出す
  • ラジオボタン
    • GFM Emoji にしたい場合
      • 🔘 :radio_button: ← 悪くないが、対になるものが見つけられない
      • ⚪ :white_circle: ← 小さい
    • 諦めて Unicode にする場合
      • ◉ Google 日本語入力で「まる」または「じゃのめ」
      • ◎ Google 日本語入力で「にじゅうまる」

...

  • 👴 : 自分は どちらも 諦めて Unicode 文字にするとした
  • 🤖 : それだと、タイトルの要件は満たしていないね

候補​

絵文字ショートコード(or Unicode)メモ、感想
✅:white_check_mark:チェックボックス On に使えそう
✔️:heavy_check_mark:UI部品というより、強調したい箇条書きなどに良いか。最初にサマリ書くときとか
☑️:ballot_box_with_check:緑ほど目立たせたくないとき？
🗳:ballot_box:チェック Off となることを期待したが、意味が投票箱なら仕方がないか
⬜:white_large_square:チェックボタンOffとして使えるか。角丸ならなお良かったが
◻️:white_medium_square:サイズ違い
🔳:white_square_button:チェックボックスの中の記号まで四角いケースも何かの UI で見たことはあるが、これ、どっちが On か分かりづらいんだよね
🔲:black_square_button:同上
❎:negative_squared_cross_mark:これの使いどころはなんだ？
⭕:o:UI部品ではないが、これはこれで活用したい
❌:x:⭕ ❌ と並べると、❌ がちょっと大きく見える。環境による？
🔘:radio_button:ラジオボタンそのものズバリだった。Off も用意してほしかった。あと、直感的には中が黒では
🔴:red_circle:色違い
⚪:white_circle:white, black だけサイズ小さいの何なん。グレーもない
⚫:black_circle:ラジオボタンとして使うは意図は伝わりにくいかも
☑U+2611 Ballot Box With CheckGoogle 日本語入力で「ちぇっく」
□U+25A1 White SquareGoogle 日本語入力で「しかく」
◉U+25C9 FisheyeGoogle 日本語入力で「まる」または「じゃのめ」。 (英語だと蛇ではなく魚なのか)
◯U+25EF Large CircleGoogle 日本語入力で「まる」(「おおきなまる」と補足のついたもの)
○U+25CB White CircleGoogle 日本語入力で「まる」。小さい
⚪️U+26AA Medium White CircleGoogle 日本語入力で「まる」
◎U+25CE BullseyeGoogle 日本語入力で「にじゅうまる」。並べて書くなら、これが良いか
Last updated on