【Background Builder】美しいグラデーション画像を作成するサービス

2022年3月1日Webサービス

Background Builderのアイコン

この記事では、数回のクリックで美しいグラデーション模様の画像を、作成してくれるWebサービス「Background Builder」について書きます。

ブログのアイキャッチ画像や、YouTubeのサムネイルに使えます。

Background Builderのスクリーンショット

指定した色でグラデーション画像を作成してくれるWebサービスです。初期でいくつかグラデーションが用意されているので、サクッと綺麗な画像を作成できます。好きな色を指定することもできます。

好きなサイズを指定できます。Instagram(1200×1200)、YouTubeのサムネイル(1280×720)といったように、いくつかのテンプレートサイズの中から選ぶこともできます。

グラデーションの色は、好きなように追加できます。2色だけでなく、「青→赤→緑」といったように、3色以上のグラデーションの作成もできます。

グラデーションの上に、丸、四角、三角、星の図形をランダムに配置できます。配置する量などは調整できます。配置しないことも可能です。

PC上にある画像をアップロードして、その上にフィルターとしてグラデーションをつけることができます。作成した画像は、PNGで保存できます。アカウント登録は不要、透かしなどの制限もありません。

ブログのアイキャッチ画像や、YouTubeのサムネイルで迷った時におすすめです。

Canva Proなどのように、好きなフォントで文字入れ、素材画像の挿入など高度なことはできません。あくまでグラデーション画像を作成するサービスです。本サービスで作成したグラデーション画像を別のアプリで文字入れする…といった感じで利用するのがいいかなぁと思います。

提供元:hamlab.dev

アクセス方法

以下のリンクからアクセスできます。

Chrome拡張機能もあるよ

本サービスは、Chrome拡張機能もあります。

しかし、リンクとして機能しているだけであって、独自のメニューで作成できるわけではありませんでした。拡張機能ボタンをクリックすると、新しいタブで本サービスのサイトが開かれるだけです。

ブックマークに登録するよりも、Chrome拡張機能ボタンからアクセスしたい方は、インストールしてみましょう。

アクセスすると、自動的にランダムでグラデーション画像が生成されます。このままダウンロードするか、自分好みにカスタマイズできます。

サイトにアクセスすると、自動的にランダムで縦長のグラデーション画像が生成される

下にあるメニュー項目から、作成していきます。

使い方

Sizeサイズ

Sizeをクリックすると、サイズ調整画面が左から表示されます。

あらかじめ用意されているテンプレートサイズを選択するか、自分でサイズを入力します。サイズを入力した場合は、REFRESHをクリックすることで反映されます。

Size 好きなサイズを入力するか、テンプレートの中から選択する

例えば、当サイトのアイキャッチ画像は、1280×780で作成しています。ここでも同じサイズで作成してみます。

Backgroundグラデーション(背景画像)

Backgroundで背景のグラデーション(色)を設定できます。

Background グラデーションの色を選択

「Presets Multi tone(複数の色)」や「2 tone(2色)」など、いくつかテンプレートが用意されています。どれも綺麗な色ばかりです。

Background Builderで作成したグラデーション画像のサンプル

自分で好きな色を指定することもできます。色のパレットのポップアップが表示されるので、初心者でも直感的に好きな色を指定できます。上級者の方は、HTMLカラーコードで直接指定することができます。

ADDで色を追加できます。

ADDで色の変化点の追加

特に制限などはありません。追加した分、グラデーションの色を増やせます。虹色にする…といったことが可能です。

複数色を追加することで、虹色を作成することもできる

「ファイルを選択」で画像をアップロードすると、画像をレイヤーとして下に追加します。このままグラデーションをかけた状態で保存できます。

何かの画像の上にグラデーション追加したい時に活用するといいかなぁと思います。「Opacity」で透明度を調整できます。0にすると真っ暗、100にすると透過しない=グラデーションのみになります。

背景画像をレイヤーとして追加できる

Overlayオーバーレイ(図形)

Overlayで図形の挿入設定ができます。

Overlay Shapes(図形の挿入)

以下の4種類の図形が用意されています。複数組み合わせるといったことはできません。

  • Circles(丸)
  • Squares(四角)
  • Triangles(三角)
  • Stars(星)

配置した図形は、以下の3つのオプションを設定できます。そもそも図形を表示したくない場合は、「Quantity」のバーを一番左に持っていきます。

Quantity量(表示したくない場合は、0にする)
Min size最小サイズ
Max size最大サイズ

変更したら、REFRESHをクリックして反映させます。

挿入した図形は、自分で好きなように移動、拡大縮小できます。

不要な図形は、画像の画面外に持っていくことで非表示にできます。

不要な図形は端っこに追いやると非表示にできる

Downloadダウンロード

Downloadで画像を保存できます。

「Download image」をクリックします。

HamLab Background Builder Download image

画像(PNG)がPCに保存されます。SVGで保存するといったことはできません。

作成したグラデーション画像がPCに保存される

感想

以上、好きな色でグラデーション画像を作成して保存できるWebサイト「Background Builder」についてでした。

この手のサービスは色々あるのですが、本サービスは、サクッとグラデーション画像を作成できる、かつ4種類の図形の中から好きな図形を挿入できる点が特徴かなぁと思いました。

背景画像に困った方、ぜひ試してみてください。

Posted by ナポリタン寿司