矢印・特殊文字・記号一覧｜コピペ・標準フォントで使用可能

今日は、Webページのデザインにおけるアクセントとして、画像を一切使わずに、フォントだけで表現できる手法を、実例付きで455個まとめて紹介します。

一昔前は、アスキーアートを作るのに罫線やギリシャ文字を使っていましたが、それはEUCやShift JISの時代の話。

今はみなさんWebサイトを作るときに文字コードはUTF-8にしていますよね？ となると、そのままでアイコン的に使える文字や絵文字がけっこうあるのです。

その中から、独断と偏見で選んでグループ分けした455個を、まとめて紹介します！

矢印系

細い矢印系

（ちょっと）太い矢印系

ブロック矢印（的なものを含む）系

ちょっと変わった矢印系

矢印的に使える系

矢印的に使える系と組み合わせるといいかも系

手で矢印系

いろいろなアイコン系

マーク系

天気・地形アイコン系

星・アスタリスク・花柄系

動物・植物・食べ物アイコン系

その他モノ系

その他アイコン系

いかがでしょう。特に、矢印やマーカー的に使えるものは、CTAボタンや見出し、区切り線などの装飾にうまく使えば効果を出せそうです。

しかも、画像を使わず、標準フォントだけで大丈夫なので、ページ表示が重くならないし、変更も楽というメリットがあります。

これ、機種依存文字じゃないの？ と気にする方もいるでしょう。でもこれは、文字コードで定められているものなのです。実際のところは「UTF-8の機種依存文字」なのですが、メールなどと違ってWebページではどの文字コードで表示するかをこちらで指定できるので、気にする必要は少ないですね。

注意点

ただし、注意点があります。

まず、Webサイトの文字コードがSJISやEUCの場合、ここで紹介する文字をアイコン的に使うことはできません。

また、デバイスや環境（ブラウザで設定しているフォント）によっては、表示されない文字がある場合があります。

また、アイコン的に使う以外の本来の意味をもつ文字は、装飾用には使わないほうがいいです。というのも、視覚障碍者さんがスクリーンリーダーで読むときに、混乱してしまうからです。

ちなみに、アイコン的な使い方をできる専用のフォントもありますが、それも同様にアクセシビリティの観点から使わないほうがいいです。

ここで紹介したのは、Unicodeで定義されている絵文字や文字の、ごく一部です。ほかにもいろいろありますので、これらの文字コードを探せるページのURLを紹介しておきますね。お好きなものを探してみてください。

• Unicode Characters in the 'Symbol, Other' Category
• Full Emoji Data