著名 OSS にあって自作 OSS に無いものの一つにロゴがあります。
OSS において README の出来不出来はユーザへのリーチを高める重要な要素であり、詳細な Description や GIF によるデモはもちろん、ロゴがあればより魅力的な README になるでしょう。
また、SNS でシェアされる際もロゴがあればより良いでしょう。
はじめに
ソフトウェアエンジニアの多くはデザイナーではないためロゴを作るコストは低くなく、テキストだけ作るのであればまだ簡単ですが、自作アイコンを作ることはかなりの労力を要することでしょう。 僕も同様で、デザイナーではないため、結論として非デザイナーでも出来る戦略を考えることになりました。
今回は、micnncim 流の、出来るだけ低コストで低くないクオリティの OSS のためのロゴの作成方法について解説します。
慣れれば上の画像のようなロゴが 5 分もかからず作成することが出来ます。
用意するもの
- Sketch 等のデザインツール
- Flaticon 等の SVG でのフリーアイコン (もちろん、お金に余裕があれば有料でも良いです) が手に入るサイト
- 好きなフォント
アイコンを作る
まずはアイコンを作ります。 アイコンが必要ない人はこのセクションはスキップしてください。 ただ個人的にはやはりアイコンがあったほうがロゴが「洗練されている」ように見えると思います。
基本的にシンプルなフリーアイコンの色をグラデーションに変更するだけです。 実際にやってみるとわかりますが、シンプルでないアイコンを使ったり、シンプルなアイコンをそのまま使うと、「洗練されていない」印象がかなり高くなると思います。 前者はモロに「他人の作ったアイコンを拝借している感」が出る、後者はシンプルにダサくなる可能性が高いからです。
最初に、フリーアイコンサイトから好きなアイコンを SVG でダウンロードします。 SVG でダウンロードする理由は色の変更など編集がしやすいからです。
次に、ダウンロードしたアイコンの色を変更します。
僕は Sketch を使いますが、有料であるため無料で行いたい人は Figma など無料での利用が可能なツールを使うと良いでしょう。
デザインツールの使い方を知らないという人でも、実質画像にマスクを掛ける方法だけ調べれば作ることが出来ます。
やることはシンプルで、アイコンにグラデーションのマスクを掛けるだけです。 グラデーションは自分で作るか、WebGradients のようなデザイナーが作成したグラデーションの例を紹介しているサイトからそのまま拝借しましょう。
それっぽいですね。
ロゴを作る
ロゴをいい感じにつくるには、アイコンだけでなくソフトウェアの名前や簡単な Description なども記載されていると良いと思います。
したがってフォントが必要になるので、これも好きなフォントを選びましょう。
僕は Google Font から選んでいます。
Lato や、Kubernetes のロゴに使われている Ubuntu を使っています。
デザインツールでアスペクト比 2:1 (1280 x 640px くらい) の枠を作り、アイコンと文字を配置します。 Bold フォントと Light フォントを併用すると見やすくなります。
完成形は以下のようになります。
かなりそれっぽいですね。
ライセンスを遵守する
Flaticon などのフリーアイコンサイトでは、利用が無料である代わりに、営利目的での利用を禁止していたり、クレジット表記などが必要なライセンス形態を取ることが多いです。
今回の用途は OSS なので、
- ソフトウェアでの利用が可能かどうか
- アートワークの変更利用が可能かどうか
- クレジットはどのように記載すべきか
の 3 点を確認すれば十分です。
例として、Flaticon で多く使われる Flaticon Basic License を見てみると、
- ソフトウェアでの利用が可能かどうか
Where you can use Flaticon contents:
• Website
• Software, applications, mobile, Multimedia
- アートワークの変更利用が可能かどうか
What you CAN DO:
• You may alter and create derivative works
- クレジットはどのように記載すべきか
How to attribute contents?
• Uses different to web: If possible, the text “designed by {Author’s Name} from Flaticon” must be written next to Flaticon Contents, if it’s not possible, the attribution must be placed in the credits or acknowledgements section
のように確認でき、問題なく利用できることがわかります。
当然、フォントでも同様にライセンスを確認しておきましょう。 基本的に Google Font で手に入るフォントであれば問題ないと思います。
実際に使う
実際に作成したロゴを利用している例は micnncim/action-label-syncer などで見ることが出来ます。
ロゴが完成したら README の H1 の代わりに配置しましょう。 Markdown であれば以下のように記載できます。
また、GitHub には Social preview という機能があり、以下のように Setting から画像を設定すると、OGP 画像として設定されるので、SNS でシェアされたときもロゴが反映されます。
実際に反映されているかどうかは、たとえば Twitter であれば Card Validator などで確認することが出来ます。
まとめ
いい感じのロゴを作るようになることで OSS 開発のモチベーションも上がると思います。
興味が出た人はぜひ作ってみてください。
また、もっと良い方法があれば Twitter などで教えていただければ嬉しいです。
あとはこの方法で作った方がいれば教えていただければモチベーションになります…！
Note
Icon made by Freepik from www.flaticon.com