Markuplint ロゴ

マークアップ言語のリンターである Markuplint の更なる躍進を目指して、ロゴのリニューアルをする際に参画しました。

最初に GitHub で公募されていたので３案を応募するもX（旧：Twitter）での投票の結果、落選しました。その後、オーナーであるゆうてんさん自らお声がけいただき、採用案からのブラッシュアップ〜完成までをお手伝いさせていただきました。

オーナーのモチベーションを支える

これまでの歩みを踏まえて、気持ちを新たに躍進する意志を示せるデザインになり、オーナーに高く評価いただけました。 またユーザーの混乱もなく移行でき、現在ではしっかりと定着したと考えています。

X（旧：Twitter）での投票で得票が最も多かった案をそのまま採用せず、さらに考える必要があるとゆうてんは判断されました。それは、足りない、または余分な要素があるということです。 それが一体何なのか、大切にしていることや迷いをヒアリングし、提案をしながらMarkuplintのマインドにフィットするロゴを探求しました。

柔軟で寛容、そしてアクセシブルに

既存ユーザーの意向や認知負荷を考慮し「M」と「チェックマーク」のモチーフはそのままに、Markuplintのコンセプトである「柔軟で寛容なリンター」を軸にデザインしました。角の丸いフォルムで、柔軟性・寛容性・とっつきやすさを感じる柔らかな印象にしつつ、直線でしっかりとコードとチェックするリンターとしての佇まいを表しました。

またM字はチェックマークと掛け合わせて右の山を高く右肩上がりにすることで、今後さらに発展させていく意志を込めました。

新しいロゴはアクセシブルにするために様々な背景で使用できるようカラーパターンを用意し、コントラスト比にも注意を払いました。

背景とのコントラスト比 4.5:1 以上

WCAG 達成基準 1.4.3 コントラスト（最低限）で定められているコントラスト比を担保してロゴを使用するよう規定しました。

ブランドカラーのブルーは背景が白でも黒でも 4.5:1 以上になるもの、且つ白背景と黒背景のときで印象の差が少ないブルーを選びました。 同じ色でも隣接する色によって違った色に見える錯視効果があり、背景色が変わると違った印象になってしまいます。 全く同じ色に見えないとしても水色や紺色に感じてしまわないように、可能な限り調整しました。

文字を判別しやすく

アクセシブルなロゴタイプにするため、使用する文字は１字のみで見たとしてもそれが何の文字であるか分かるように、文字のシェイプを調整しました。

大文字の「I（アイ）」と小文字の「l（エル）」や鏡文字など、はじめはフォントのグリフそのままで、それぞれの文字が判別のしやすいフォントを使おうと考えていました。しかし、コンセプトや思想の表現が難しく、最終的に表したいコンセプト・シンボルとマッチするフォントを使用し文字のシェイプをアレンジする形を選択しました。

応援する気持ちも込めて

個人で始めたOSSが長生きするのは簡単なことではありません。 気持ちが折れそうな時に支えになるロゴを作りたいと考えてながら、デザインしました。 様々な提案をし、細かい違いも確認していただきながら、最後はゆうてんさんの心に従って選んでいただきました。

私自身、Markuplintを応援している１ユーザーとして、微力ながら協力できたとこを嬉しく思っています。