見出し画像

noteのロゴをリファインしました。

どうも、ピースオブケイクでデザイナーやってる佐賀野です。
突然ですが、本日noteのロゴをリファインしました。

リファイン、と一口に言ってもいろいろですが、今回はロゴの印象を大きく変えることはせずに、全体的な整合性を高める方向に注力しました。

リファイン前後の比較がこちら。ご覧の通り全体的な印象はほぼそのままです。

リファインの目的

さて、なぜ今回リファインに至ったかについてですが、大きく2つあります。

1. 以前から社内においてデザイン面で気になる点がいくつか指摘されていた
2. リアルイベントなどで配布するノベルティを作る前に、1つ目の問題を解決しておきたかった

特に2つ目については直近でcakes note フェスが控えているので、それに間に合わせたいというのが大きな理由です。

今回のリファインはロゴとしてのバランスを良くすることが最大の目的なので、ロゴの印象を大きく変えてしまうような修正は避けることにしました。

ロゴの修正点

では具体的にどこをどう修正したのか。
ぱっと見わかりにくいのでさらっと解説します。

今回手を入れたのは2点。「note」ロゴタイプのスペーシング調整とシンボルマークのバランス調整です。

まずロゴタイプについて。
o-t、t-e間が空き気味だったのでこちらを調整。tの線幅(以下x)を基準としてそれぞれxの5%、15%字間を詰めました。ちなみにアウトラインはそのままです。

次にシンボルマークについて。
以前のものはロゴタイプに対して線幅が細く、比べると貧弱な印象でした。また同時に、ロゴタイプとの相対的な位置や大きさも明確になっていなかったのでこれらを定義し直すことにしました。

まず線幅をxの75%に設定。ロゴタイプと同じ太さにしてしまうと重くなるので、いくつかバランスを検討しこの太さに落ち着きました。幅やロゴタイプとの距離もこの太さを基準に設定しています。

また、高さについてもロゴタイプを基準に定義しました。白抜き部分をロゴタイプの上下幅と一致させ調和をとっています。

これらの調整によって密度が高まり全体的なまとまり感が出ました。
ここからさらに手を加えることもできましたが、前述のとおりロゴの印象は変えたくなかったので、細かな部分はほぼそのままにしています。

以上、簡単ですが新しいロゴについて解説させていただきました。
ユーザーの皆さんにとって違和感の無いものに仕上がっていれば幸いです。

ではでは。

記事をご覧いただきありがとうございます。 もしよろしければサポートしていただけると嬉しいです。 記事の更新スピードや、ある日突然新しいフォントを公開したりする可能性が上がります。 いただいたサポートは書籍購入や作業環境の更新に使わせていただきます。