「アイコン」にまつわる「アレ」や「コレ」

連載 [第5回] :

2024年11月15日(金)

第5回の今回は、世の中にあふれるさまざまな物事をイラストで表現する「アイコン」について、アレコレ疑問の種を植えていきます。

IT技術とは日進月歩の世界です。IT業界に身を置くと、IT技術を意欲的にキャッチアップしていく姿勢が求められますが、この姿勢の原動力は、案外「好奇心」だったりします。「これってなんでこうなるんだろう?」「どうしてこんな作りになっているんだろう?」といった具合です。

でも、こういった疑問の種をゼロから生み出すのは案外大変ですよね。「何が分からないのか分からない」なんて状況は、IT業界に入ってからもよくありますし、IT業界を目指したいと思っている方は、そもそもそこまで技術に興味がない(!)なんてこともあるかもしれません。

本連載は、そんな疑問の種を見つけられていないアナタのために作りました。ただし、疑問は載っていますが、答えは載っていません。この記事を読んで「もっと知りたい」と思ったら、ぜひご自身で調べてみてください。きっと答えはあちこちに転がっています。また「今さら聞けなかったけど、これってそういうことだったんだ!」「IT技術ってちょっと面白いかも…?」と思ってもらえるきっかけになれば嬉しいです。

はじめに

スマートフォンという小さな画面で、操作をできる限り分かりやすくするために必要なのが「アイコン」です。画像1つで、そこをタップすればどんな情報にアクセスできるか示すアイコン。実はアイコンには「その形」をしている画像が、アクセスできる情報と密接に結びついている必要があるのです。

例えば、歯車の画像を見て、みなさんは何を思うでしょうか。工場? 機械? いろいろ思いつくものもあるでしょうが、ひとたびこれがアイコンに使われていると「設定」という言葉と紐づく人も多いのではないでしょうか。

このように、アイコンとはその画像が示す意味を皆さんの共通認識に強く依存しているのです。

さて、ここからが本題です。皆さんがよく見るアイコンの中で、画像のモチーフはよく分からないけど、なんとなくそのアイコンならこの情報にたどりつく、と思っているアイコンはありませんか?

今回は、皆さんが知っていそうで知らない、アイコンのモチーフについて、疑問の種を植えていきましょう。

ギモン1：「保存のアイコンにある四角はなに?」

アイコンは小さい画像で情報を伝えるという性質上、モチーフを極限まで抽象化して描かれることが多いです。特に「保存」という作業は情報を残すために画面上に必ずと言ってもよいほど必要な要素でありながら、何か便利になる機能というわけでもありませんから、アイコンが小さくなりがちです。今筆者がこの原稿を書いているWordでも、保存の機能が画面の左上に小指の爪よりも小さいアイコンで置かれています。目を凝らしてそのアイコンを観察してみると、正方形に近い四角形の上の辺に長辺を内接する形で小さな長方形が描かれていて、左下にはペンのようなものが斜めに描かれています。

なるほど、ペンには情報を記録するという役目がありますから、保存のアイコンにはマッチしています。しかし後ろの四角形は何でしょう。

実は、これは「フロッピーディスク」というものだそうです。「だそうです」というのは、実は筆者、本物のフロッピーディスクというものを見たことがないのです。フロッピーディスクと検索すれば画像で見られるので、どのような見た目をしているのかは分かりました。ぜひ皆さんも画像検索してみてください。きっと、フロッピーディスクというものが何をするための機械だったのか、知りたくなると思います!

ギモン2：「データベースのアイコンが円柱形なのはなぜ?」

システムの中身に触れる機会が増えると、システム構成図という形でシステムの路線図のようなものを目にすることがあります。この図では、ネットワークに接続された様々な機器がアイコンで記載されていることが多いです。アイコンを使う目的としては、システム構成図自体の可読性を高める、というものがあります。システム構成図で伝えたい情報とは「各機器がどのような形で」「どのような機器と接続しているか」というものであり、機器自体の情報としては「その機器がどのような働きをするものか分かる」程度で構いません。そのため、すべての機器を文字で表現しようとすると、構成図に記載されている情報の濃淡がおかしくなってしまうのです。

さて、そんなシステム構成図によく登場する機器が「データベース」です。データベースの役割は、Webサイトやアプリに表示するデータやシステムへのアクセスによって得られる情報を蓄積し、必要に応じてデータを呼び出せるようにすることです。

そんなデータベースですが、システム構成図ではしばしば円柱型のアイコンで示されることがあります。筆者としてもデータベースといえば何層かに区切られた円柱のイメージがあるのですが、では反転して考えてみると、円柱にデータベースのイメージはないことに気づきます。「データベースといえば円柱」これはどこから来たものなのでしょうか。

疑問の種が生まれましたね。データベースはなぜ円柱をアイコンにするのか。2つの関係性を調べてみれば、きっと面白い世界が広がっていますよ。

ギモン3：「ハンバーガーメニューは見た目のこと?」

ハンバーガーと言えば、知らない人はいないほど有名な料理の1つです。ご存じの通りハンバーガーは肉や野菜をバンズで上下から挟んで重ねたものですが、このハンバーガーを抽象化したようなアイコンを皆さんは見たことがあるはずです。Webサイトやアプリの画面で右上や左上に設置されるこのアイコンは、その見た目と機能から名前をとって「ハンバーガーメニュー」と呼ばれています。

ハンバーガーメニューは、特にスマートフォンでの利用が予想されるWebサイトやアプリにおいて有効なUI(ユーザーインターフェース)です。想像してみてください。皆さん、人生に一度はハンバーガーメニューをクリックした、ないしはタップしたことがあると思いますが、そのとき、画面はどのように変化しましたか? ハンバーガーメニューのアイコンによって「隠されていた」いろいろなリンクが現れたのではないでしょうか。

実際、ハンバーガーメニューにはWebサイトの階層構造をひと足飛びにして別のWebページを閲覧できるリンクだったり、アプリ利用者がよく使うであろう機能にアクセスできたりするボタンを複数表示させる機能が搭載されていることが多いです。もし、このようなハンバーガーメニューで表示される重要度の高い情報群をWebページに常時表示させていたらどうなるでしょうか。ただでさえ狭いスマートフォンの画面の中で、今アクセスしているWebページの情報を表示するために使える画面のサイズが狭くなってしまいますよね。そこで小さなアイコン1つに情報を畳んでおいて「いつでも見られるけど、表示されていない」状態を作っています。このような見えない気遣いが、皆さんの快適なスマートフォンライフを支えているのです。

さて、ここからが疑問の種です。ハンバーガーメニューは、果たしてハンバーガーから着想を得てつくられたアイコンなのでしょうか? もしそうでないならば、このアイコンはどのようにハンバーガーメニューと呼ばれるようになったのでしょうか。調べるといろいろな説がでてくるかもしれません。どれが一番正しそうか、知人と相談してみるのも面白いですね。