サクッと作るロゴ＆ファビコン＆アイコン

この記事は約3分で読めます。

最近Reactなどを触っていて、サクッとWebページの作成から公開まで行える環境が身近になってきました

今回はそのお供としてフリーでサクッとヘッダーロゴやファビコン、アプリアイコンなどを作るツール紹介です

この記事の著者
のら

お家大好きSE

soratsm

プロフィール

都内で働くシステムエンジニア
素早く家に帰るために日々技術を磨いています。
学んだ技術をわかりやすく紹介します！ プロフィール詳細

スポンサーリンク

こんな人におすすめ

  • ページやアプリの中身は作ったけど、デザインは少し苦手
  • とりあえず公開したいが、ロゴ等何もなしってわけには...
  • しっかり作る時間もないし、外注するほどでもないし...

と悩む人を対象に、それなりのクオリティでサクッと作れる！を目指してます！

（もちろんブランディングを検討した上で、しっかり作り込んだほうがいいけどね）

ざっくり手順

  1. ロゴ生成：『Hatchful』でイメージやカラーを選択して生成
  2. その他生成：『Favicon Generator』にLOGO.png渡して生成
  3. 微調整：『CANVA』や『GIMP』で軽く整形
  4. 軽量化：『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で簡単な選択肢からいい感じのロゴを作成してくれる

ポイントとしては少し横長なモノを選択したほうが、加工含め扱いやすい気がする

バックエンドで生成されてメールに送られてくるので、ダウンロードボタン押下後に少しだけ時間かかります

  1. アカウント登録して、Get Started
  2. 作りたいモノの分野に合うモノ（ファッションやテック等）を選びNext
  3. 作りたいモノの雰囲気に合うモノを（クラシックやクリエイティブ等）を最大３つ選びNext
  4. 名称とスローガンを入力（オプションなので未入力可）してNext
  5. 使用場所（WebやSNS等）を選びNext
  6. あとはお好みで選んで少し編集してダウンロード！

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に必要な基本セットを生成してくれる

ここまでで概ね完了あとはお好みで

  1. Hatchfulで作ったLOGO.pngをImageとして渡す
  2. なんやかんや表示イメージあるけど、一番下のGenerateボタン押す
  3. 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

いじょー！！

スポンサーリンク