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

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

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

プラスアイコンが使われているUI

新規アイテムの追加

メール、連絡先、タスクなど新しい項目を追加する際によく使われます。
ブラウザやアプリケーションで新しいタブを開く際にも使用されます。

他にも、設定メニューで新しいオプションを追加するためのボタンとして使われることがあります。

リストやテーブルへの行の追加

データ入力画面やフォームで新しい行を追加するために使われます。

拡大表示

地図や画像などを拡大するためのボタンとして使用されることがあります。

セクションの展開

折りたたまれたメニューやセクションを展開する際に使用されることが多いです。

ショッピングカートへの商品追加

オンラインショッピングサイトで商品をカートに追加する際に表示されることがあります。

ソーシャルメディアの投稿作成

新しい投稿やステータスアップデートを作成するためのボタンとして使われることがあります。

ファイルのアップロード

ドキュメントや画像などのファイルをアップロードするためのボタンとして使用されます。

マルチメディアのコントロール

音声やビデオプレーヤーでボリュームを上げるためのボタンとしても使用されることがあります。

プラスアイコンが持つ意味

プラスアイコンは分かりやすく、何かを「追加」するときに使われています。

しかし単純な追加だけでなく、拡大時にも使われていたり、セクションの展開にも使われていたり、表示を広げる（表示領域の追加）といった広い意味でも解釈されていそうです。

そして、マイナスアイコンは、これらの逆で使われていて、プラスアイコンとセットのような扱いになっています。
今回紹介したUIはどれもプラスアイコンだけでなく、マイナスアイコンも必ず付いてきていて、プラスと反対の役割を持っていました。

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

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