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 株式会社は、神戸三宮オフィスまで週１出社（それ以外はリモートワーク）できる「デザイナー」「エンジニア」を募集しています。

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

saito

高校時代にIT・Web業界に興味を抱き、神戸電子専門学校で2年間デザインやWeb実装について知識を得た後、新卒でN′sCreates株式会社のデザイナーとして入社。ミッションである｢解で快を創る｣を実現するべく日々の業務に向き合い、より良い提案を心掛けています。また、学生時代からWeb制作に関わる方のためのセミナーイベント「CSS Nite in KOBE」のスタッフとして業界の最先端に触れ、自主的に学習してきた知識やスキルを武器に、常に成長を続けている。