さくらのクラウドのサービスアイコンをデザインの観点から分析してみた

サーバー・ネットワーク・ストレージ・データベースなど、クラウドにはたくさんのサービスがあります。これらを文字だけで説明しようとすると、どうしても情報量が多くなります。

そこで役立つのが、サービスの特徴を視覚的に伝えるアイコンです。

今回は、さくらのクラウドで公開されているサービスアイコンに注目し、Webデザイナーの視点からデザインを分析してみます。「なぜこの色・この形なのか？」「なぜたくさん並べても統一感があるのか？」。

普段何気なく見ているアイコンを、色・形・情報量という3つの視点から読み解いていきます。

そもそも、クラウドサービスにアイコンはなぜ必要？

クラウドサービスには、非常に多くの機能があります。例えば、サーバーを用意するだけでも、ネットワークやストレージ、データベース、セキュリティなど、複数のサービスが関係してきます。これらをすべて文字だけで並べてしまうと、ユーザーはひとつずつサービス名を読んで、自分が探しているものを判断しなければなりません。

そこでアイコンが役立ちます。アイコンには、以下４つの役割があると考えます。

サービスの種類を視覚的に伝える
一覧の中から目的のサービスを見つけやすくする
サービス同士の違いを識別しやすくする
システム構成を視覚的に理解しやすくする

さくらのクラウドの公式ガイドラインでも、サービスアイコンは「サービスの列挙または例示」「サービス紹介のWebコンテンツあるいは文書のアイコン」「サービスを用いたシステム構成図」などで利用することを想定して公開されています。

つまり、アイコンは単なる装飾ではありません。サービスの情報を整理して、ユーザーに伝えるためのUIパーツとして考えることができます。

まず注目したいのは「色」だった

サービスアイコンを一覧で眺めてみると、まず目に入るのがカラフルな背景です。そしてよく見ると、色はバラバラに設定されているわけではありません。今回のアイコンデータを確認すると、サービスは大きく7つのカテゴリに分かれ、それぞれに異なる色が設定されています。

さくらのクラウドのサービスアイコンの色分け

例えば、コンピュート系のアイコンにはピンク、ネットワーク系にはパープル、データベース系にはグリーンが使われています。

このようにカテゴリーごとに色を分けることで、アイコンを見たときに、「このアイコンは、どのグループに属しているのか」を視覚的に判断しやすくなっています。ここが、このアイコンセットを分析するときの大きなポイントです。

色は「カテゴリーを伝えるナビゲーション」

サービスごとに色を変える目的。それはカラフルにすることで見た目を華やかにする効果もありますが、UIデザインでは情報のグルーピングという重要な役割があります。

例えば、ネットワーク関連のサービスを探す場合、すべて同じ色だとサービス名やモチーフを一つずつ確認する必要があります。一方、ネットワーク系を同じ色でまとめれば、「紫のアイコンを探す」という視覚的な探索ができます。

つまり、色を見る → カテゴリーを把握する → サービスを探すという情報探索の流れをつくることができます。これはWebデザインでもよく使われる考え方です。ECサイトで「ファッション」「家電」「食品」などを色やアイコンで整理するのも、その一例です。

ただし、ここで重要なのは、「ピンク＝コンピュート」という色そのものに意味があるわけではないということ。同じカテゴリーに同じ色を使うことで、カテゴリーのまとまりを視覚的に生み出しています。色の意味は、単体ではなく他の色との関係によって生まれる。これはデザインを考えるうえで重要なポイントです。

色だけではない。「形」にも意味がある

もちろん、サービスの違いを伝えているのは色だけではありません。もうひとつ重要なのが、アイコンの「形」です。

例えば、ネットワークを表現する場合には、複数の要素が線でつながったようなモチーフが使われています。データベースであれば、データベースを連想させる形。サーバーであれば、サーバーやコンピューティングを連想できる形。このように、サービスの特徴を象徴するモチーフが組み込まれています。

ここで面白いのが、リアルなものをそのまま描いているわけではないということです。

アイコンは写真ではありません。「何を描くか」よりも、「何を残せば、そのサービスだと認識できるか」が重要です。例えばサーバーをリアルに描こうとすると、機器の細かなパーツや質感など、たくさんの情報が必要になります。
しかし、アイコンとしてはそこまでの情報は必要ありません。サービスを想起するために必要な特徴だけを残して、その他の情報を削る。この「情報の引き算」が、アイコンのわかりやすさにつながっています。

「モチーフ → 意味」を見せる

たくさん並べてもバラバラに見えない理由

ここまで見ると、「色がカテゴリーごとに違うなら、むしろバラバラに見えそう」と思うかもしれません。ところが、実際にアイコンを並べてみると、全体としてまとまって見えます。その理由のひとつが、共通するデザインルールです。サービスによってモチーフは異なります。

それでも、アイコンのサイズ・背景の形・線の表現・白を基調としたモチーフ・余白・全体の情報量などに共通したルールがあります。

つまり、サービスごとに「違うもの」を描きながら、デザインとしては「同じもの」に見えるように設計されています。ひとつのアイコンだけを見て完成度を判断するのではなく、「全部並べたときに、ひとつのグループとして成立するか」が重要になります。

アイコンの「抽象度」を揃える

もうひとつ重要なのが、アイコンの抽象度です。

例えば、Aのアイコンだけ非常にリアル、Bのアイコンはシンプルな線画、Cのアイコンは細かなイラストという状態では、一覧にしたときに視線がバラバラになります。一方で、すべてのアイコンを同じくらいの抽象度で表現すれば、異なるサービスでも仲間として認識できます。これはアイコンだけでなく、Webサイト全体にも当てはまります。

「好きなアイコンをひとつずつ選ぶ」のではなく、「並べたときに仲間に見えるものを選ぶ」ことが大切です。