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

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

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

矢印アイコンが使われているUI

コンテンツがあることを知らせる

最近のウェブサイトでは、メインビジュアルが画面いっぱいに表示される場合が多いです。
非常にインパクトのあるメインビジュアルになりますが、その代わりに下にコンテンツがあると分かりにくくなってしまいます。

そこで、ユーザーに下にコンテンツがあることを伝えるために矢印アイコンが使われます。

参考:guntû|ガンツウ公式サイト

単にスクロールで下コンテンツに移動できる場合もあれば、サイトによっては画面クリックや矢印アイコンをクリックしないとしたコンテンツに移動しない場合があります。

普通にスクロールできる場合はアイコンがなくてもスクロールしてもらえそうですが、後者の場合はアイコンがないと気づかれない可能性もありそうです。

「進む」「戻る」ボタン

アプリで前の画面に戻るためのアイコンとして使用されます。
他にもブラウザの「戻る」「進む」ボタンや、ページネーションでもよく使われます。

ちなみにウェブサイトとしては珍しい使われ方だと思いますが、Amazonのナビゲーションは、大カテゴリを選択すると小カテゴリ一覧が表示されるアプリのようなUIになっています。

参考:Amazon | 本, ファッション, 家電から食品まで | アマゾン

ウェブサイトではアコーディオンメニューやポップアップメニューが一般的だと思いますが、おそらくAmazonは小カテゴリが多すぎるため、このようなUIになっているのだと思います。

ダウンロード

意外だったのが、ダウンロードボタンです。

昔は下向き矢印に直線や角括弧(])を横向きにしたものを合わせたアイコンをよく見かけましたが、最近たまに矢印オンリーのダウンロードボタンを見かけることがあります。

参考:Cocoatech | Path Finder

角括弧を横向きにした記号は、おそらくハードディスクなどの保存先に向かってデータが流れていく様子を表していたのだと思いますが、それがただの直線になり、それも簡略化されてただの矢印でも伝わるようになったと考えると少し面白いですね。

矢印アイコンが持つ意味

矢印アイコンは「方向」「流れ」といった意味を持っています。
使われているUIも、そこから連想されるため分かりやすいですね。

しかし、以前書いた記事に『踏切で電車が右から来るとき、点滅するのは右矢印?左矢印?|矢印が持つ意味』にある通り、扱う意味が「方向」なのか「流れ」なのかを意識しないと、ユーザーが混乱する可能性があります。

その辺りも考えながら、アイコンの使われ方を見たり考えたりしてみると面白いかもしれません。


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

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

同じテーマの記事

高橋 実玖高橋 実玖 / 2024年6月14日

アイスブレイクに最適!Good & New(グッド アンド ニュー)を実施してみた

山本 明子山本 明子 / 2024年5月17日

「LINE」について調べてみた

本田 顕本田 顕 / 2024年5月14日

Android Studio Jellyfishのバグについて

齋藤 公一齋藤 公一 / 2024年6月18日

学びを深めるため、ノート整理法に「Zettelkasten」を採用した話

お問い合わせ

BtoBサービスのデザイン・開発に関することならお気軽にご相談ください

一緒に働く仲間を募集しています

採用情報

デザイナー、エンジニア共に募集をしています。

パートナー募集

現在は主に開発領域に対して募集しています。