こんにちは。COO事業推進本部制作部の青柳です。

「そういえば、ヤフーのアイコンなんか変わった？」とお気づきの方、いらっしゃるでしょうか。
2013年6月、PC版トップページに表示する「サービスアイコン」が大幅リニューアルしました。

サービスアイコンとは、サービスの機能などを視覚的にお伝えするもので、そのサービスのシンボルとなるものです。
現在ヤフーには約100種類のサービスがあり、サービスアイコンも同じ数存在します。

今回はそんなサービスアイコンのリニューアルについて書かせていただきたいと思います。

アイコン総リニューアル！

2013年6月、ヤフーのPC版トップページがリニューアルしました。
コンテンツファーストを掲げ、よりシンプルで装飾要素の少ないデザインへ変更となり、
合わせてサービスアイコンもこれまでのリッチな表現とは逆のシンプルなデザインに変更することになりました。

装飾要素を削る

画面領域の限られたスマートデバイスでは主コンテンツに集中できるよう、それ以外の装飾要素を削ることが重要です。
サービスアイコンも視覚的に受ける情報量を減らすべく、要素のそぎ落としから進めました。

1.モチーフの見直し
モチーフが説明的であったり形状が複雑なものは見直し、単純な形状のものに置き換える。
2.構成要素の見直し
モチーフを表現するパーツを幾何学図形で構成し複雑な形を排除する。
3.色の見直し
グラデーション表現を廃止し色数を減らす。
（グラデーション表現を廃止したことで画像容量が減り表示速度改善につながるメリットもあります）

削るバランスの検討

要素を削れば削るほど、そのアイコンが何を表しているのか受け手の想像に委ねられます。
サービスを最少要素で表し、これまで慣れ親しんだ形状を変えてしまうことで認知の再学習が必要になってしまうことからも、変更のバランスが難しくいくつもパターンを作り、社内でヒアリングをし検討を重ねました。

Y!天気、ヤフオク！の改修検討例
A:改修前
B：立体表現をやめ、アウトラインをなくす。
C：Bからさらに質感表現をなくす。
D：Cまで要素を削るとサービス間の差がなくなりユーザーが認知しづらいため、各サービスに即した表現が可能になるよう半立体表現を採用。

色の選択

これまでのアイコンのカラーコンセプトは「楽しい、親しみやすい、ポップ、元気な」というアクティブなイメージで展開していましたが、ページ上あくまで補足的な役割で扱うよう、彩度が低めのカラーパレットを設定し、色数を制限しました。
アプリのランチャーアイコンで扱う場合は、ホーム画面での視認性を担保できるよう元の色より濃く彩度をあげるなどの調整をしています。

ルールの策定

全体の統一感を出すことを目的として、スタイルにルールを設け表現に制限を持たせています。

シンプルな図形で構成し、ルールを設けることで、改修作業を数人で手分けして行うことも可能となりました。
数人で同時に作業を進めてもテイストやクオリティに差が出ないというのはサービスを運営する上で大きなメリットです。

最後に

アイコンのリニューアルは現在も進行中です。
コンテンツファーストが進行し、UIがシンプルになっていく中で、アイコンの役割が重要になってきているように思います。
ユーザーコミュニケーションを円滑にするべく、今後もアイコンスタイルの改善を続けていきます。

• 青柳 麻紀
• デザイナー
• スタートページユニット