Wantedly 航海日誌

素人デザインのWantedlyが、一流デザイナーの手によって生まれ変わるまで

 今日の航海日誌は仲がお送りします。

本日、Wantedlyが新デザインによって生まれ変わりました。それまでのプロセスを振り返ってみたいと思います。まだ名は明かせないのですが、めちゃくちゃ優秀なデザイナーがWantedlyに参画してくれました。暫定的に、T君と呼びます。

そもそもWantedlyのデザインの何が問題だったのか？

ひとことでいうと、全体的に「筋が通っていなかった」というのが問題でした。旧デザインは、私が、「なんとなく、いいと思うから」という理由で、全体の整合性もとれないままにどんどん積み上げていったものでした。だから、ページごとにデザインの一貫性がなかったり、ところどころおかしいところも満載。

そこで、いつもチーム内では「プロのしっかりしたデザイナーにチームに入って貰いたい」という声がありました。そんなときに、CTO@kawasyの紹介でやってきたのがT君。

デザイナーT君の参画

T君がオフィスに遊びに来たのは、今年の3月頃。凄く有名な大手のデザイン事務所で、アートディレクションをしつつ、自分で手も動かせる、業界内でも有名なコで、私と同い年でした。

第一印象としては、「生きてる世界が違う！！」という感じ。発言ひとつひとつが斬新で面白い。もはや、何かいうたびに全力でジョジョ立ちしてる感じです。

「えっと、ピクセルの密度を詰めたいんです」

とか。今でも覚えている名言。

ただ最初は、「別に今のデザインのままでも十分いいのでは」と、そこまで期待していませんでした。しかし大いに裏切られた！！！次々とT君によって繰り出されるアウトプッツを見つつ、「やっぱりプロのデザイナーは次元が違う！！！！」と打ちのめされました。

少しずつ、彼の功績を振り返りたいと思います。

T君が最初にやったのは、まずはデザインに説明、すなわちアカウンタビリティをつける作業でした（と思っている）。この色はなぜこの色なのか、なぜこのスペーシングなのか。全てのデザインには、意味が、理由があるんです。

T君お手並み拝見、「デザインには全て意味があるんだッ！！」

バイザウェイT君もジョジョ好きです。

まずは、それまで私が作っていたロゴを刷新。

旧ロゴ：

旧アイコン：

これが、こうなりました！

新ロゴ：

新アイコン：

以下はT君からのコメントですが、様々なメッセージが込められています。

まず、明快なロゴタイプの意図はそのままにより現代的な形態にタイポグラフィを調整しました。WANTEDLY特有の、オリジナルの書体となります。Wという文字はそもそも「Double U」であることから、それを想起させやすい「U=V形状の二段重ね」としています。

キーカラーの青は「いつでもここがブルーオーシャン！」…ということで海の青をイメージし、印刷/画面で再現性の高い色彩をセレクトしました。

あらゆるキャラクターが混じるサービス、であることを表象するためにW以外のすべての要素は帯が交わり合うイメージで微妙に濃淡を付けています。この灰色はすべて純粋なグレーではなく、微妙に青味を入れたソリッド・グレーを用いる事でWの水色との調和を意識しています。

アイコンはWの文字を中央から右上に寄せています。また、それによりWの右端を隠しています。これは右肩上がりの成長という暗喩に加えて、「Double Uの片方＝ユーザの未来はこれから始まる」（未来はまだ、わからない）ことを示しています。

やはり、プロのデザイナーは、私のように行き当たりばったりでロゴを考えたりしない！素晴らしい！これらの意味を踏まえてもういちど。

新ロゴ：

新アイコン：

何度見てもいいですねー。それから、サイト本体。

T君爆進、「3徹でも4徹でもクオリティにブレはないんだッ！！」

T君はまだ本業があるので、いつもオフィス到着は平日夜8時頃。そこから、ほぼ毎回終電までのペースで、毎週2日ずつ、チームで揉みながらどんどん形にしていきます。T君は売れっ子なので、めちゃくちゃ多忙です。いつ寝てるのだろう、という感じです（多分寝てないのだと思います）けど、上げてくる仕事はどれもハイクオリティ、ぶれません。

T君お得意のkeynoteを凄い速さで操りながら、ライブプロトタイピング。

kawasy：サムネイルよりもリストレイアウトの方がいいんじゃない？

T君：（手を凄い速さで動かして）こんな感じ？

kawasy：そうそう、そっちの方がいいね

という感じのスピード感です。

最後はいつもこんな感じになりますｗ

Keynoteプロトタイピングの後は、ひとつひとつpsdに落としていきます。

トップページ

デザインをhtmlにして、こういう風に。

各プロジェクトページ

会社ページ

こんな風に

プロフィールページ

こんな風に

ディテールもつめる

ボタンもこんな風に色決めます

それから、ポップアップもかっこよくなりました。

「空白」から生まれる美と安心感

今回の一連のデザイン刷新プロジェクトを通じて私が一番学んだのは、スパース（空白）のとり方です。（なぜかスペースのことをスパースと呼ぶ？）

space is sexy, period.

生まれて初めて、空白にsexyness を感じました。そこを意識して全体で統一するだけで、シンプルな構造でも凄く洗練され、かつ今までのWantedlyのイメージを損なわないものが生まれる。

Wantedlyの新サイトは、主に40pxのスパースがとられています。それから、無駄にboldのfont-weightは使われていません。最初は、「空間開きすぎでは？」「boldにしないと目立たないのでは？」などなど懐疑的でしたが、組んでいくうちに、あえてシンプルにすることで強調されることが沢山あるのだと学びました。

これ読んで

それから最後に、T君の推薦でチーム（ほぼ）全員が読んだオススメ本を紹介。チームの働き方やデザインを考える上で、大きな指標になりました。

T君は、8月1日リリース予定の大型機能、コードネーム「ゴールド・エクスペリエンス」のデザインもがっつり作成中です。T君の躍進に、チーム一同大期待です。

それでは、デザインが新しくなった、新Wantedlyをお楽しみください。

ツイート