2024年2月、Wantedlyの新しいプロダクトアイコンをリリースしました。
ウォンテッドリーは、「究極の適材適所により、シゴトでココロオドルひとをふやす」というミッションのもと、デザインにおいてもトレンドや市場の変化に常に対応するべきだと考えています。この想いは、わたしたちが提供するプロダクトの全てのタッチポイントに反映されており、アイコンのデザインもその重要なひとつです。優れたデザインのアイコンは、UI/UXデザインにおいて非常に重要な要素のひとつであり、情報の効率的な伝達やユーザーエクスペリエンスの向上に貢献します。それらは、適切に設計され、コンテキストに適合することが重要です。
この記事では、Wantedlyのアイコンがなぜリニューアルされたのか。そしてこのプロジェクトをどう進めたか、デザインの解説とともに振り返ります。
リニューアルの背景
190以上ある現状のアイコンは、Wantedlyのサービス開始当初から使用されているものも含まれており、いくつかの課題を抱えていました。
本来UI/UXデザインにおけるグラフィックアイコンは、テキストよりも短い時間で情報を伝達するための効果的なコミュニケーションであるべきなのですが、直感的に意味が伝わりづらい形状のものが散見されたり、OutlineとFillなど異なる表現が混在するなど、一貫性が欠如した状態でした。
制作面においては、ガイドラインが曖昧なため拡張性が低く、Wantedlyらしいアイコンであるか否かの判断は属人化されていました。
これらの課題を解決するため、リニューアルにあたり次の目標を設定しました。
1. ブランドアイデンティティが反映されたオリジナル性のあるデザイン
2. 再現性の高いアイコンデザインシステムの構築
我々独自のアイコンセットを使用することで、ブランドのアイデンティティを強化することができます。ブランドの色やスタイルに合わせたオリジナルのアイコンに触れることで、ユーザーはプロダクトをブランドと結びつけやすくなるメリットがあります。
また、どんなデザイナーでも一貫性のあるアイコンが量産できるよう制作ルールを再定義し、デザインガイドライン「Wantedly Graphic Standard」のアップデートも目指しました。
らしさと一貫性、拡張性の追求
検証段階で出されたデザイン案
アイデア開発フェーズでは、社内のデザイナーたちが様々な方向性のコンセプトデザインを持ち寄り、検討・検証を行いました。
その中から絞られたいくつかの案は、アプリなどのプロトタイプを制作し、プロダクト上での見栄えはもちろん、使用感も考慮しながらブラッシュアップを重ねた後に社内のステークホルダーにプレゼン、最終デザインのベースとなったデザインが採択されました。
アイデア
最終的に採用されたデザインは、Wantedlyらしさや、オリジナリティを表現するために、各アイコンのディテールに、VI/CIの造形から、線の太さや傾きの角度、角のRのサイズなどを抽出し反映させています。シンプルでモダンな形状のOUTLINE（線）のデザインをベースに、FILL（塗り）の仕様も用意しました。
プロダクトの機能を表すアイコンの一部は、実際のUIエレメントの形状をモチーフにした意匠に変更。Wantedly独自のサービスを表すものに関しては、既存のアイコンの形状を新しいルールに合わせてアレンジするのではなく、新たにデザインを描き起こすことで、わかりやすさとオリジナリティを両立させました。
また、アイコンは実装前にFigma上でプロダクトのUIに反映し、実際のプロダクト上にアイコンが並んだときの見え方や、OutlineとFillの切り替え時の印象など、細かな違和感がないか確認しています。手元でデザインしている時と、プロダクトに反映したときでは印象が変わるので、実際の見え方を確認しながら違和感があれば調整し、最終的にプロダクトへの実装を行っています。
今回のリリースは第一弾で、引き続き古いアイコンの置き換えをしながら、Wantedlyらしさ・一貫性をもつプロダクトに全体をアップデートしていく予定です。
このプロジェクトは、プロダクト全体に影響する大きな試みとなりましたが、社内のプロダクトデザイナー、コミュニケーションデザイナー、そしてエンジニアが協業しながら推進することが出来ました。
これからも変化を恐れず、Wantedlyならではのデザインを時代に合わせて追求していきます。
Creative Direction : Yusuke Mochizuki
Design Management : Takanori Shinmen
Art Direction / Design : Mayo Uchimura , Yuichi Tanaka
Tags