Googleのアイコンデザイン思想を学ぶ

SHARE:

visualthinking編集部注:本稿はインフォグラフィック・エディターである櫻田潤氏が運営するブログ「ビジュアルシンキング」からの転載記事。同氏に許可を頂き、こちらに掲載させてもらった。櫻田氏は著書に『たのしいインフォグラフィック入門』があり、Wiredやニュースアプリ「NewsPicks」などメディア向けに、ビジュアルコンテンツの制作を行っている。


Googleが公開しているデザイン・ガイドラインのアイコンに関するところを読みました。
Icons – Style -Google design guidelines

アイコンのデザイン・ガイドラインの対象は、「プロダクト・アイコン」と「システム・アイコン」の2つがあり、デザインする上で注意を払うことや、原則がまとめられています。

プロダクト・アイコン

「プロダクト・アイコン」はGmailやGoogle Mapなどサービスそのものに用いられ、サービスの特性や違いを伝えるものです。

image by Google
image by Google

システム・アイコン

一方「システム・アイコン」は、ユーザインタフェースに用いられるもの。
「プロダクト・アイコン」と比べて、小さいサイズでの使用、単色での使用の想定が必要。

image by Google
image by Google

作りの違い

「システム・アイコン」がフラットな作りなのに対し、「プロダクト・アイコン」の方が複雑で、五層のパーツが重ね合ってできています。

image by Google
image by Google

紙のプロトタイプで、質感や影を検証しているそう。(ペーパープロトタイピングは、デザインを単純化するのにも役立っていると思う)

image by Google
image by Google

両アイコンに共通するコンセプト

「プロダクト・アイコン」「システム・アイコン」で見た目と構造の複雑さに違いはありますが、共通するコンセプトもあります。

両方のアイコンの解説文に登場するキーワードが、「Simple」「Bold」「Friendly」の3つ。

google_design_guidelines_5

僕が思う「Bold」のイメージは、力強くも温もりのある「太さ」。
存在感を感じさせる「太さ」。

image by Google
image by Google

デザインの原則「グリッド」と「キーライン」

デザインする上の細かいキーワードには、「Geometry(幾何学)」「Consistency(一貫性)」が挙がっています。

このデザインを実現するために「グリッド」と「キーライン」という考え方が基本原則としてあります。

アイコンのデザインは、48×48のマス目(グリッド)と、対角線や矩形などいくつかのキーラインと呼ばれる線に沿って行います。

google_design_guidelines_7

特にアイコンの土台になる形状は、4つ「Keyline shapes」として定められていています。

google_design_guidelines_8

このようにルールに基づいてデザインパーツが配置されることで、アイコン同士のデザインに一貫性/統一感が生まれます。

「Google design guidelines」は彼らのデザインのアルゴリズムが学べるので貴重な資料。

僕がアイコンをデザインする上でも、使うデザインパーツを限定したり、グリッドに従ってデザインするので、自分のやり方に自信がつきました。その一方で、「キーライン」の設定がまだ甘かったと気がつくことができました。

公開後、数ヶ月経っていますが、見てよかった!

(参考)アイコンデザインの参考に。GoogleのUIパーツ・ガイドライン資料

BRIDGE Members

BRIDGEでは会員制度の「Members」を運営しています。登録いただくと会員限定の記事が毎月3本まで読めるほか、Discordの招待リンクをお送りしています。登録は無料で、有料会員の方は会員限定記事が全て読めるようになります(初回登録時1週間無料)。
  • 会員限定記事・毎月3本
  • コミュニティDiscord招待
無料メンバー登録