最近Reactなどを触っていて、サクッとWebページの作成から公開まで行える環境が身近になってきました
今回はそのお供としてフリーでサクッとヘッダーロゴやファビコン、アプリアイコンなどを作るツール紹介です
この記事の著者
こんな人におすすめ
- ページやアプリの中身は作ったけど、デザインは少し苦手
- とりあえず公開したいが、ロゴ等何もなしってわけには...
- しっかり作る時間もないし、外注するほどでもないし...
と悩む人を対象に、それなりのクオリティでサクッと作れる！を目指してます！
（もちろんブランディングを検討した上で、しっかり作り込んだほうがいいけどね）
ざっくり手順
- ロゴ生成：『Hatchful』でイメージやカラーを選択して生成
- その他生成：『Favicon Generator』にLOGO.png渡して生成
- 微調整：『CANVA』や『GIMP』で軽く整形
- 軽量化：『TinyPNG』に容量大きめファイル渡してデータ量削減
もう少し詳しく
詳しくとは言え、最近のサービスはどれも洗練されていて、雰囲気でわかるため、軽く補足程度
Hatchful
Free Logo Maker - Create a Logo in Seconds - Shopify
Free logo maker tool to generate custom design logos in seconds. This logo creator is built for entrepreneurs on the go with hundreds of templates, free vectors...
hatchful.shopify.com
無料のLogo Makerで簡単な選択肢からいい感じのロゴを作成してくれる
ポイントとしては少し横長なモノを選択したほうが、加工含め扱いやすい気がする
バックエンドで生成されてメールに送られてくるので、ダウンロードボタン押下後に少しだけ時間かかります
- アカウント登録して、Get Started
- 作りたいモノの分野に合うモノ（ファッションやテック等）を選びNext
- 作りたいモノの雰囲気に合うモノを（クラシックやクリエイティブ等）を最大３つ選びNext
- 名称とスローガンを入力（オプションなので未入力可）してNext
- 使用場所（WebやSNS等）を選びNext
- あとはお好みで選んで少し編集してダウンロード！
Favicon Generator
Favicon Generator for perfect icons on all browsers
The ultimate favicon generator. Design your icons platform per platform and make them look great everywhere. Including in Google results pages.
realfavicongenerator.net
Webに必要な基本セットを生成してくれる
ここまでで概ね完了あとはお好みで
- Hatchfulで作ったLOGO.pngをImageとして渡す
- なんやかんや表示イメージあるけど、一番下のGenerateボタン押す
- Favicon Packageボタン押してダウンロード
CANVA
Just a moment...
www.canva.com
- ブログのアイキャッチとかでもよく使う強い味方
- アカウント登録は必要
- 透過画像等々もっと使い倒したいならサブスク
- 簡単な文字入れや背景色、加工程度なら無料で十分
- デザイン作成 → W&Hを入れて少し加工
GIMP
GIMP
GIMP - The GNU Image Manipulation Program: The Free and Open Source Image Editor
www.gimp.org
無料版Photoshopとも言えるぐらい有名な高機能フリーソフト
ガッツリ使いこなすなら勉強して使わないとよくわからない...ってなってしまうが、
- 劣化なく上下左右比の調整・切り抜き
- 透過ファイルの出力
等々の少しの編集だったらそこまで難しくないので触ってみるのがいい
TinyPNG
TinyPNG – Compress WebP, PNG and JPEG images intelligently
Make your website faster and save bandwidth. TinyPNG optimizes your WebP, PNG and JPEG images by 50-80% while preserving full transparency!
tinypng.com
パンダさんかわいい！
とりあえず画像食わせておけばOK
いじょー！！
