ロゴ作成

1. インスピレーションを得る

canva でデザイン検索

(stable difusion / dale-2 を試してみる)商用利用可能

- YouTube

https://www.youtube.com/watch?v=V1_x8w9fHbs&t=18s

syopify logo で検索

textデザインを得た

- YouTube

https://www.youtube.com/watch?v=KG-hWcIRgyc&t=10s

2. Figmaで作成

コミュニティで検索　土台をコピー

台形編集

コンポーネント、バリアント、マスク

カラーコードについて

白、黒はデザインの世界では使われない

ダークモードについて

アウトラインを入れる

文字編集

プラグイン　font picker

logo + text

auto layout

hug，fill

ERROR: The request could not be satisfied

https://www.figma.com/community/file/1030308171146621283

3. 出力

フレームサイズについて

適切な余白について

　1/3は確保

ソーシャルメディアのフレームサイズ

figma templates

ERROR: The request could not be satisfied

https://www.figma.com/community/file/779517575644450137/Social-Media-Templates

ERROR: The request could not be satisfied

https://www.figma.com/community/file/902612470789123675/Social-media-template

Figma help page

Social Media Size Guide: Dimensions for Every Platform | Figma

Get the latest social media size guides for posts, ads, and stories—optimize your images and videos for Instagram, Facebook, LinkedIn, and more.

https://www.figma.com/templates/social-media/

投稿するときはサイズにも気をつける日本語ページ

【2025年10月版】SNS投稿に最適な画像サイズ一覧！Instagram・X（Twitter）・TikTok・LINEなど

この記事では、Instagram・X（Twitter）・TikTok・LINE・YouTube Shorts・Facebook・Threads・Bluesky・LinkedInの適切な画像サイズ��画像の仕様をご紹介します。オーガニック投稿、キャンペーン投稿クリエイティブ、広告クリエイティブに活用できます。

https://www.comnico.jp/we-love-social/social-media-image-sizes-guide

png svg について

解像度

900x900のgifをエクスポートしてから、gif変換ウェブアプリでリサイズすることで解像度が良くなった

透明背景にしないで、黒背景にすることで、解像度が気にならない。

余白なしverも作った

Ezgif - free online animated GIF editor

Easy to use online animated GIF maker and image editor. Create, convert, crop, resize, reverse, optimize animated GIF, WebP, APNG files, images and videos.

https://ezgif.com/

4. アニメーション

プロトタイプ

- YouTube

https://www.youtube.com/shorts/OnRcu5rHgOE

Figmotion

Figmaを使ってみようーアニメーション作成ー | ソフトの操作.com

今回は番外編でFigmaでアニメーション作成の紹介になります。ただアニメーションを作るだけでなく動きをCSSアニメーションとして書き出せるのでWEB制作でも活躍できそうです。今までの記事とは内容が繋がっていませんがFigmaが使用できる

https://soft-no-sosa.com/2022/02/22/figma4/

Giffy canvas

FigmaでGIFを作成する！ - bagelee（ベーグリー）

この記事は新しい技術にチャレンジし続けるpalanのアドベントカレンダーDay21の記事です！今回は「FigmaでGIFを作成する！」という記事をご紹介します！

https://bagelee.com/design/figma-gif/

5. gif編集

無限ループさせる他、リサイズも可能

Change GIF loop count - add or remove endless loop from GIF online

Online tool that lets you change animated GIF loop flag. You can use it to add or remove endless loop from animated GIF or set it to repeat certain numer of times. Also works on APNG and WebP.

https://ezgif.com/loop-count/

ScreenToGifでgif画像の圧縮するときのオススメ設定 23MB→8MB ▲60%くらい圧縮できる。

背景を透過させる設定 Figmotionで出力するアニメgifだと背景がついてきてしまう。そこで白背景を透明にする。

6. favicon ファビコン作成

ファビコン作成 favicon.ico リアルタイム版 | 半透過マルチアイコンが作れます

ファビコン favicon.ico を作ろう! リアルタイム版。16x16,24x24,32x32,48x48,64x64ピクセルのマルチアイコンが簡単に作れます。プレビューはリアルタイムに確認できます。

https://ao-system.net/favicon/

Created by

EC maker

電機/自動車メーカ系エンジニア
→ フロントエンドエンジニア
- Flutter / スマホアプリ開発中。
- Next.js / TypeScript /
TailwindCSS を学習中。

- Contents -

1. インスピレーションを得る 2. Figmaで作成 3. 出力 4. アニメーション 5. gif編集 6. favicon ファビコン作成

公開: 2023-04-02

更新: 2025-03-23

いいね: 0 件

コメント: 0 件

カテゴリ:

カテゴリなし

タグ:

logo

figma

デザイン

画像生成

Created by

EC maker

電機/自動車メーカ系エンジニア
→ フロントエンドエンジニア
- Flutter / スマホアプリ開発中。
- Next.js / TypeScript /
TailwindCSS を学習中。