見出し画像

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

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

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

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

リファインの目的

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

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

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

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

ロゴの修正点

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

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

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

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

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

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

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

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

ではでは。

この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

note.user.nickname || note.user.urlname

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

🍎
346
株式会社ピースオブケイクでデザイナーやってます。

コメント6件

ありがとうございます。自然に見えているようで嬉しいです!

FAQの画像については先ほど新しいものに差し替えておきました。
これからもよろしくお願いします!
はじめまして。
最近NOTEを始めさせて頂きました!

企業やお店のロゴなどを見るのが好きで、FAQのロゴも拝見致しました。

きゅっと締まって、全体的な整合性が向上している思います!文字間のホワイトバランスが絶妙です!

アイコンは以前からスマホのホーム画面に置いてもかわいいので好きです(*´ω`*)
新しいロゴ、気に入っていただけたようで嬉しいです!
元のデザインも素敵だったので、その良さを維持できるように頑張りました。
これからもnoteをよろしくお願いします!
門外漢ですが、こういう、職人的微調整のハナシを読むの楽しいです。
きっと、見る人の無意識のデザイン上のひっかかりを緩和したり、初めて見る人への取っ付きやすさが向上してるんだろなー、と想像します。素敵っす!
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。