35文字・コピー無料
テキストとしての図形記号
U+25A0からU+25FFまでの図形記号ブロックは、テキストベースのインターフェースの縁の下の力持ちです。円・四角・三角・ひし形のほとんどが、塗りつぶし版とアウトライン版のペアとして、2〜3種類のサイズで用意されています。このペア構成のおかげで、色に頼らずに2つの状態や2人のプレイヤー、2段階の優先度を表せます。以下の文字はクリックでコピーでき、それぞれにUnicode名とコードポイントが記載されています。
円
塗りつぶし、アウトライン、そして評価・段階・トグル状態に使われる部分的な塗りつぶしです。
四角
塗りつぶしとアウトラインがそれぞれ3サイズあります。小サイズのペアは、ただの点よりも優れた箇条書き記号になります。
三角
4方向すべてが2サイズずつ用意されています。大サイズの塗りつぶしセットは、メディア再生の操作ボタンとしても使えます。
ひし形とロゼンジ
ひし形は、うるさく主張することなく「特別感」を伝えられます。装飾的な区切りとして定番の選択肢です。
文字をクリックするとコピーされます。ダウンロードは発生しません——これらは画像ではなくテキスト文字です。
Unicodeブロック
- U+25A0–U+25FF 図形記号
- U+2756 装飾記号
図形記号の使い方
塗りつぶしとアウトラインをペアで状態を表す
ここにあるほぼすべての図形は、塗りつぶし版とアウトライン版のペアとして用意されています。オン/オフや完了/未完了を●と○で表せば、形の違いで区別できます。赤と緑の対比とは違い、グレースケール印刷でも色覚に特性がある人にとっても、その違いは変わらず伝わります。
小サイズを箇条書きに使う
小さい四角▪や白い点◦は、本文の中でフルサイズの■よりも収まりが良いです。入れ子のリストは、•、◦、▪の順で使うと読みやすくなります。
部分的な円を進捗表示に使う
○ ◔ ◐ ◕ ●を使えば、完了度合いを5段階、それぞれ1文字で表現できます。表のセルやログの行に収まる、コンパクトな進捗表示です。
CSSで色をつける
テキストなので、`color`がそのまま適用されます。5色の●を並べるのに、画像もSVGも不要で、どれだけ拡大してもくっきり表示されます。
図形記号について
図形記号ブロックは、Unicodeの中でも地味ながらもっとも実用的な範囲です。設計の根底にあるのは「ペア」という考え方です。ほぼすべての図形に塗りつぶし版とアウトライン版があり、それぞれ2〜3種類のサイズが用意されています。この重複は無駄に見えるかもしれませんが、ターミナルや印刷物、プレーンテキストのメールのようなモノクロの文脈で2つの状態を表す必要が出てきた時、色のコントラストが効かない場面でも、形のコントラストは変わらず機能することに気づかされます。
この特性こそが、これらの文字がインターフェースデザインのあらゆる場所に登場する理由です。塗りつぶしと中空の円はラジオボタンやカルーセルのドットに、三角形は開閉の矢印やメディア再生の操作ボタンに、小さい四角は箇条書き記号になります。テキストであるため、周囲のフォントサイズと色をすべて引き継ぎ、これらで組んだアイコンセットにはスプライトシートもアイコンフォントもSVGも不要です——読み込みが遅れることも、読み込みに失敗することもありません。
U+25D0からU+25D3までの部分塗りつぶしの円と、その近くにある4分の1塗りつぶしのバリエーションは、ほとんどの人が見つけることのない、小さなデザイン語彙です。空から満杯までの一連の変化は、ちょうど1文字分のセルに収まる進捗・評価表示を実現するため、横幅が限られたCLIダッシュボードやステータステーブルによく登場します。
このサイトは、このブロックに大きく依存しています。四目並べとオセロは2人のプレイヤーを●と○で表し、サイモンは大サイズの三角形を4つのパッドに使い、ライツアウトと神経衰弱は四角とひし形を使っています。色はCSSで補強的に重ねられているだけで、意味そのものは形が単独で伝えています——これが、色覚に特性があるプレイヤーにも盤面を読み取れるようにしている理由です。
これらの文字で描かれたゲーム
このサイトのボードはすべて、スプライトではなくUnicodeで作られています。ここに挙げるゲームは、上記の文字を使用しています。
よくある質問
●と○の違いは何ですか？
同じ円の塗りつぶし版と中空版です。Unicodeでは「black circle」「white circle」と名付けられていますが、これは色ではなく塗りの有無を表しているだけです。どちらもテキストなので、好きな色で表示できます。この2つを組み合わせれば、色にまったく頼らずに2つの状態を表せます。
箇条書きに向いている図形記号はどれですか？
標準は中黒点•（U+2022）で、入れ子レベルには白い点◦や小さい四角▪を使います。フルサイズの■や●は、本文と並べると重すぎることが多いです。よくある入れ子の順序は、•、◦、▪です。
アイコンの代わりに図形記号を使えますか？
シンプルな表示であれば使えます。実用的な利点も本物です——スプライトシートもアイコンフォントも追加のリクエストも不要で、テキストの色とサイズを自動的に引き継ぐため、読み込みが遅れたり位置がずれたりすることもありません。三角形は開閉矢印や再生ボタンに、円はラジオ状態やステータスドットに使えます。
同じフォントなのに図形の大きさが違って見えるのはなぜですか？
Unicodeは小・中・通常というサイズを明示的に別の文字として符号化しており、フォントによっても同じコードポイントを異なる見た目のウェイトで描くことがあります。図形の列が不揃いに見える場合は、▪（U+25AA）と■（U+25A0）のようにサイズの異なるバリエーションを混在させている可能性が高いです。1つの行の中では、1つのサイズクラスに統一しましょう。
これらの図形は絵文字として表示されることもありますか？
一部の文字には絵文字表示があり、一部のプラットフォームではあらかじめ色がついた状態で表示されることがあります。テキストバリエーションセレクタ（U+FE0E）を追加すれば、モノクロのテキスト字形が強制され、CSSの色を受け取れるようになります。このブロックの大部分はテキストのみで、そのような対処は不要です。
Support the arcade
ゲームを楽しんでいただけていますか？
UnicodeGamesは無料で、広告は一切なく、今後もそれは変わりません。コーヒー休憩が少しでも楽しくなったなら、恩返しをしていただけると助かります。
コーヒーを1杯おごるOne-off · No account needed · Handled by Buy Me a Coffee