UX / UI のデザインに強いWebシステムの開発と、BtoB Webマーケを支援するWeb制作を提供する
N's Creates (エヌズクリエイツ) 株式会社 フロントエンドエンジニアの齋藤 (@31mskz10) です。

最近のウェブサイトやアプリには、アイコンがよく使われています。
「アイコン」というシンプルなマークを見るだけで、ユーザーはどんな意味や機能なのか理解できるのは面白いなと感じます。

今回の記事では、数あるアイコンの中から「三角」アイコンがどのようなUIに使われているのかと、アイコンが持つ意味について考えてみます。

三角アイコンが使われているUI

再生ボタン

動画や音楽プレイヤーで当たり前のように使っている再生ボタンは、右向きの三角形で表現されています。

右方向には「進む」というイメージがあるため、「動画を進める」ということで再生ボタンなのかもしれません。

理由について調べてはみたのですが、明確な理由は見つかりませんでした。
しかし、ソニーがオープンリールテープレコーダーで使ったのが最初のようです。

参考：Quora｜▶ ←この三角記号ですが、動画や音楽の再生ボタンとして使われることが定番となっています。ただの三角記号がこのような使われ方をされはじめたのは何がきっかけなのでしょうか？

スライドの切り替えボタン

スライドショーなどで、左右の切り替えのために使われます。

ただ、最近はアクセシビリティの観点から、スライドショーで自動再生をさせる場合は、再生・停止ボタンを付けて停止できるようにするケースが増えてきました。

再生ボタンは三角形で表現されるため、左右の切り替えも三角形を使っているとアイコンが被ってしまいます。

「そんなの位置で分かるだろう」と思うかもしれませんが、あえて被せる必要はありませんし、今後再生・停止ボタン付きのスライドは増えてきそうなので、三角形ではなく矢印（→）やシェブロン（>）にしておくのがよさそうです。

三角形は矢印より意味が狭い？

ちなみに、似たような機能にブラウザの「戻る・進む」ボタンがありますが、確認した全ブラウザで矢印アイコンを使っていました。

あくまで三角形には「左右の切り替え」という意味しかなく、戻る・進むといった「前後の切り替え」といった意味が備わっていない（もしくは薄い）んじゃないかと思います。

逆に矢印アイコンは、スライドショーなどの左右の切り替えでも使われる事例を見かけたので、三角形は矢印に比べて意味が狭いと言えそうです。

開閉ボタン

ボックスの開閉のために使われます。
一般的に上向き矢印だと開いている状態、下向き矢印だと閉じている状態を表します。

ソートインジケーター

データテーブルやリスト内で使われ、列のソート順（昇順、降順）を示します。

参考：TanStack Table

三角アイコンが持つ意

やはり特徴的なのが、動画や音楽などの「再生」という意味で定着していることですね。

それ以外は矢印と同じように、「方向」「流れ」といった意味を持っていそうですが、矢印ほど汎用的ではなさそうです。

開閉ボタンやソートなど、よく使われる場所に適切に配置することで、矢印だらけになってしまいそうなところをうまく使い分けていきましょう。

UX / UI のデザインに強いWebシステムの開発と、BtoB Webマーケを支援するWeb制作を提供する
N's Creates 株式会社は、神戸三宮オフィスまで週１出社（それ以外はリモートワーク）できる「デザイナー」「エンジニア」を募集しています。

興味のある方は、カジュアル面談しますので気軽にお問い合わせください！