POSTD PRODUCED BY NIJIBOX

POSTD PRODUCED BY NIJIBOX

ニジボックスが運営する
エンジニアに向けた
キュレーションメディア

POSTD PRODUCED BY NIJIBOX

POSTD PRODUCED BY NIJIBOX

ニジボックスが運営する
エンジニアに向けた
キュレーションメディア

FeedlyRSSTwitterFacebook
Min Ming Lo

本記事は、原著者の許諾のもとに翻訳・掲載しております。

iOS 7の共有アイコンがアップローダと呼ばれる理由

上のアイコンに共通している点は何でしょうか? 実はどれも、まったく同じ動作を表したアイコンなのです。”共有(シェア)”です。ソーシャルネットワーキングサービス(SNS)やメールで情報を共有するのは近頃ではごく一般的ですが、共有することを表現する際にどんなシンボルを使うべきなのかという点について、デザイナー側の見解はいまだに一様ではありません。主要なプラットフォームでそれぞれ独自のアイコンが使われているだけでなく、年月とともにそのアイコンも変化しているのです。

私はこの問題についてしばらく考えているのですが、共有という意味を表していることがユーザに最もよく伝わるのはどのアイコンなのでしょうか。

アップローダ(iOS 7)

最初にこの共有アイコンを見たのは、Apple社がiOS 7を2013年のWWDC(Apple社製品開発者向けの国際会議)で発表した時です。すぐさまこのアイコンを 再現 して他の人たちに見てもらったところ、どうも評価はよくないようでした。

iOS 7の共有アイコンで気になるのは、まるでアップロードのアイコンのように見えることです。上のようにダウンロードのアイコンの隣に並べてみると、iOS 7の共有アイコンがかなり紛らわしいデザインであるとすぐに感じると思います。ダウンロードアイコンの矢印を上向きに変えただけのように見えるこのデザインでは、アップロードという意味に受け取られても無理はないでしょう。

トレーの外へ出る形(iOS 7より前)

iOS 7より前のバージョンの共有アイコンは長年使われていたもので、Mac OS X Mavericksでは現在も使われています(Mac OS X YosemiteではiOS 7と同じ共有アイコンが採用されるようです)。全体的に見て、うまくデザインされていると思います。トレーから外へ出ていく矢印が、共有することを表しているんですね。初代iPhone以来使われていたことで、ユーザにもなじみ深い形になっていったのでしょう。

3つの点(Androidの共有アイコン)

Androidの共有アイコンは、シンプルに3つの点とそれを結ぶ線でできています。なお同様のアイコンはShareThisでも採用されていますが、ShareThisは主なSNSのシェアに対応した開発者向けプラグインとして知られています。この共有アイコンの見た目は、頂点を結んだグラフに似ていますね。一見何を意味しているのかがよく分からないのですが、私の想像としては、左側の点が右側の2つの点に向けて広がっていく様子を表現しようとしているのかもしれません。全体的に考えると、デザインの意図が見ただけでは伝わりにくく、このアイコンを見て共有することを意味していると分かるのは経験的に知っているユーザに限られそうです。Apple社製品だけを使っているユーザにとっては、このアイコンの意味はなかなか分からないかもしれません。

まったく科学的でない実験ですが、Googleで”share icon”と入力して検索してみたところ、上位10件のうち7件がAndroidの共有アイコンを思わせる画像でした。

Yの字(以前のAndroid)

Honeycomb(Android 3.0)より前のバージョンのAndroid製品では、下の共有アイコンが使われていました。1つの点が2方向を指して広がっているような形です。このアイコンは現在あまり使われていませんが、私は今でもとても気に入っています。矢印が外へ向かう様子が共有するという行為のイメージにかなり近いと思いますし、左右に対称な形もいいですね。個人的には、共有という概念を表すアイコンとして、形状だけで言えばこれは最高レベルのデザインだと思います。

左側はAndroidのオリジナルの共有アイコン。他の2つはそのバリエーション。

輪の形(Windows 8)

Windows 8の共有アイコンは、見るとUbuntuのロゴを思い出しますが、この形はWindows 8とWindows Phoneで広く使われています。これもまったく抽象的なアイコンで、はっきりとした意味は分かりません。ラベルが付いていなければ、初めて見たユーザは、このアイコンが何の機能を表しているのかに悩んでしまいそうです。

プレゼント箱(Windows Phone 7)

Windows Phone 7の共有アイコンは、何とも変わったプレゼント箱の形で、楽しさがありますね。コンセプトは分かりやすくて、プレゼントとは共有できるものという考えから来ているのでしょう。ただちょっと違うのは、プレゼントは、実際には共有するものではなく、贈るものであるということです。

このアイコンは面白くて新鮮でもあるのですが、ユーザにとってはなじみが薄すぎる感じがします。最初に見た時は、これが何なのか見当がつきませんでした。このアイコンはわずか1年半ほどで、Windows Phoneが採用したWindows 8の新たな共有アイコンに取って代わられることとなりました。

手と手の形(Open Share Icon)

Shareaholic社は、デザイナーが使用できるユニバーサルな共有アイコンを作りたいと考えました。この「 Open Share Icon 」のデザインについては、次のように述べられています。

Open Share Iconは、手から手へ何かを渡すところを視覚的に表すことにより、共有するという行いを示しています。さらにこのアイコンは、「これを見て」という意味を込めて”目”の形も表現しています。

総合的に考えると、コンセプトや発想は興味深いですしかなり明確なのですが、ユーザの多くはこれが手の形だと一目では分からないでしょう。手を表すことがすぐに分からないのであれば、アイコンの意義が薄れてしまいます。残念ながら、このアイコンはそれほど受け入れられていないようで、一般のサイトではなかなか見かけることがありません。

さまざまなプラットフォームにさまざまなバージョンの共有アイコンという状況を打破しようと、たくさんのデザイナーたちが”ユニバーサル”共有アイコン作りに挑戦してきました。以下に、私が見たことのあるアイコンをいくつかご紹介します。

拡散型

デザイナーの中には、共有という概念を拡散ととらえる人たちがいます。これはネットワーク効果の概念をとてもよく表しているのですが、アイコンとしては複雑で、雑然としすぎていると感じます。

グラフ図

共有アイコンの中には、大きさの異なる丸とラインで構成されるものがあります。まるでグラフ図のようですね。化学元素の結合を表すならいいのですが、共有のコンセプトをうまく表現しているとは思えません。

開いた手

何年も前ですが、開いた手のアイコンが共有ネットワークフォルダで使われていた時期がありました。古い企業ソフトウェアの中には、今でも共有の動作を表すために手のひらのアイコンを使っているものがあります。ただし、この場合の共有動作は通常、ローカルエリアネットワークの共有設定を表しており、ソーシャルプラットフォームでの共有を意味しません。

複数の人

複数の人を使ったアイコンは、通常、特定の共同開発者やチームメンバーとの共有を意味するために使われます。ソーシャルプラットフォーム上の共有の意味で使われているのを私は見たことがありません。

ミルクセーキ!

時に、デザインの問題を解決する最良の方法は、デザイナー以外の人の意見を聞いてみることだったりします。この問題についてデザイナーではない同居人にこう尋ねてみました。「共有と聞いて真っ先に何が頭に浮かぶ? 共有という行為をシンボルで表すとしたらどうなる?」すると彼は、ストローが2本入った飲み物の絵を描いて、これはミルクセーキだと説明しました。

友人が描いたスケッチ

このミルクセーキはすごく面白いアイデアです。共有という行為を実によく表しています。ただ、このアイコンには2つ問題になりそうなことがあります。1つは、ほかの一般的なアイコンの中では、このアイコンが少し浮いて見えそうなことです。そしてもっと重要なのは、このアイコンがとても限定的な共有の概念を伝える恐れがあることです。つまり、1つの物を2人の人間が共有するというイメージです。しかし、私たちが今問題にしている共有は、多くのプラットフォームでの共有の概念なのです。

面白いのでミルクセーキのベクターアイコンを作ってみました。

共有アイコン一覧

ここまで紹介した共有アイコンのまとめ

どのアイコンを使うべきか

今後、共有を表すアイコンが1つに統一されることはなさそうです。AppleがAndroidのデザイン言語を使うことはないでしょうし、GoogleがMicrosoft社のデザインを実装したり、Microsoftが別のプラットフォームの共有アイコンを使ったりすることもないでしょう。OSの3大企業がそれぞれ巨大な市場シェアを持っている以上、ユーザは同じ行為を表す異なるタイプのアイコンを少なくとも3つは使うことになるでしょう。

ベストなアイコンはユーザが最も慣れているアイコン。

一番いいアイコンは、最もシンプルなものでも、最も分かりやすいものでもありません。一番いいアイコンは、ユーザが既に慣れ親しんでいるアイコンです。効果的なアイコンとは、ユーザがシンボルと行為をできるだけすんなり結び付けることができるアイコンです。

アイコンが使われるプラットフォームに基づいて使用するアイコンを選ぶべき。

Apple iOS 7で開発しているのだったら、そのプラットフォームで既に使われているアイコン、つまり”アップローダ”を使うべきです。同様に、Androidアプリは”3つの点”を採用するべきなのです。

すべてのプラットフォームで同じアイコンを使うとしたら?

プラットフォームに関係なく、アプリやサイト用に共通の共有アイコンを1つだけ使いたいなら、”トレーの外へ出る形”または”3つの点”がベストでしょう。この2つは現在、最もよく受け入れられている共有アイコンですからね。とはいえ、私のお勧めは、”3つの点”より”トレーの外へ出る形”です。なぜなら、今までApple製品を使ったことがない人でも、このトレーの外へ出るアイコンを見れば共有を意味すると何となく分かるだろうからです。それに比べて”3つの点”は、あまりにも抽象的すぎます。

1年後には、iOS 7の”アップローダ”(iOS 8とMac OS X Yosemiteで使われる予定)とWindows 8の”輪の形”は、共有アイコンとしてもっと認知度を高めているでしょう。

コンセプトを一番よく表しているのは

共有アイコンを、ユーザの認知度やアプリでの採用度ではなく、純粋にデザインで選ぶなら、私は”Yの字”アイコンに一票です。このアイコンは最も抽象度が低く、共有のように、何かが外へ向かう行為を最もストレートに表していると思うからです。非常に分かりやすいし、左右対称なのもいいですね。残念ながら、まだあまり広く使われていないのですが。

現在、私はまだ”トレーの外へ出る形”をデフォルトの共有アイコンとして主に使っています。あなたのアプリやサイトではどのアイコンを使っていますか? 下の コメント欄 か、Twitterで教えてください。

監修者
監修者_古川陽介
古川陽介
株式会社リクルート プロダクト統括本部 プロダクト開発統括室 グループマネジャー 株式会社ニジボックス デベロップメント室 室長 Node.js 日本ユーザーグループ代表
複合機メーカー、ゲーム会社を経て、2016年に株式会社リクルートテクノロジーズ(現リクルート)入社。 現在はAPソリューショングループのマネジャーとしてアプリ基盤の改善や運用、各種開発支援ツールの開発、またテックリードとしてエンジニアチームの支援や育成までを担う。 2019年より株式会社ニジボックスを兼務し、室長としてエンジニア育成基盤の設計、技術指南も遂行。 Node.js 日本ユーザーグループの代表を務め、Node学園祭などを主宰。