noteやブログ用のグラデーションサムネイルメーカーを作りました。テキスト入力・色調整・画像からの色抽出まで、ブラウザだけで完結する無料の Web アプリです。
Gradient Thumbnail Maker とは
Gradient Thumbnail Maker は、メッシュグラデーションを使ったサムネイル画像をブラウザ上で作成できる無料ツールです。
もともと自分の note 用サムネイルとして、以下の「Photo Gradient」というサイトでグラデーションを生成し、Photoshop でテキストを載せて投稿する――という流れで運用していました。
ただ、Photo Gradient ではテキストを直接入れられなかったため、グラデーション生成からテキスト編集まで一括でできる Web アプリとして新たに開発しました。Photo Gradient は Figma プラグインとしても利用できるようです。
主な機能
- メッシュグラデーション生成 — ドラッグ操作でコントロールポイントの位置や色を自由に調整
- テキスト追加 — フォント・サイズ・色・位置をカスタマイズしてサムネイル上に配置
- 解像度設定 — note 推奨の 1280×670 をはじめ、任意の解像度を指定可能
- ノイズエフェクト — グラデーションにノイズを加えて質感をプラス
- 画像からの色抽出 — 手持ちの画像からカラーパレットを自動で取得
- ランダム生成 — 「Colors」「Positions」ボタンでワンクリックでランダムパターンを生成
- PNG エクスポート — 完成した画像をそのままダウンロード
使い方
操作は非常にシンプルです。好きな解像度を設定し、グラデーションのコントロールポイントの位置や色を自由に変えるだけで、美しいメッシュグラデーションが作れます。
全体の画面構成
メイン画面ではグラデーションのプレビューが中央に表示され、周囲のパネルから各種設定を行います。
解像度・ノイズの設定
出力する画像の解像度を変更したり、グラデーションにノイズテクスチャを加えたい場合はこちらのパネルで設定します。
テキストの追加
サムネイルにテキストを載せたい場合は、このパネルでテキスト内容・フォント・色・サイズなどを指定します。
カラーの調整
各コントロールポイントの色をここで細かく調整できます。「Colors」ボタンで色をランダムに、「Positions」ボタンで位置をランダムに変更できるので、いろいろ試してみてください。
画像からの色抽出
手持ちの写真やイラストからカラーパレットを抽出したい場合はこちらを使います。
アップロードした画像からピックアップする色の数や位置を指定できます。
画像のエクスポート
サムネイルが完成したら「Export PNG」ボタンをクリックするだけで、PNG 画像としてダウンロードできます。
まとめ
Gradient Thumbnail Maker は、note やブログのサムネイル作成を手軽にするために開発した無料の Web アプリです。Photoshop などの画像編集ソフトを開かなくても、ブラウザだけでグラデーションサムネイルが完成します。
基本的には自分用に作ったツールですが、誰でも自由に使えるので、ぜひ試してみてください。
