グラデーションの作り方
このツールには2つの使い方があり、上部のボタンで切り替えます。開いた直後は「手持ちの画像に重ねる」の状態で、アップロード欄がすぐ使えます。写真を1枚または複数ドラッグすると（JPG・PNG・WEBP・GIF・BMPに対応）、それぞれの上にグラデーションが描かれます。2枚以上読み込むと、プレビューの上にファイル名のタブが並び、クリックで切り替えられます。もうひとつの「ゼロから背景を作る」では、何もアップロードする必要はありません。色とグラデーションの種類、サイズを決めれば、その場で画像ができあがります。
グラデーションの種類は4つあります。線形は直線に沿って色が移り変わり、角度はスライダーで指定します。CSSと同じ考え方で、0度が上向きです。円形は中央から円状に広がります。円錐形は中心点のまわりを色が回り込み、扇のような、最近の背景でよく見かける見た目になります。「なし」を選ぶとグラデーションは切れます。写真に重ねるモードでは画像がそのまま残り、仕上げの効果だけが乗ります。背景を作るモードでは、最初の色がそのまま単色の背景になります。色の設定はそのすぐ下です。各行にカラーピッカー、位置をパーセントで指定する欄、削除ボタンが並びます。色の停止点は2つから6つまで置け、色を追加するボタンを押すと既存の停止点の間に新しい色が入ります。ゼロから決めるのが大変なときは、12種類の実績あるパレットから選べますし、ランダムボタンを押すたびに色と角度が振り直されます。
6種類のテクスチャはグラデーションの上に乗り、強さを調整できます。粒状はモノクロの粒を加えるもので、ピクセルの明るさだけを揺らして色は変えません。なめらかなグラデーションに出る帯を消す用途でいちばんよく使われます。カラーノイズはその逆で、色だけを揺らして明るさは保つため、高ISOで撮った写真のような質感になります。線は斜めの筋を、ドットは規則的な網目を描き、どちらも図案的な背景に向いています。紙は、やわらかな粒と縁のわずかな暗さを組み合わせて、印刷された紙の風合いを再現します。テクスチャとは別に、仕上げの効果が2つあります。周辺減光は四隅を少しずつ暗くして、視線を中央に集めます。片側グラデーションは同じことを1辺だけ、上・下・左・右のいずれかに行うもので、明るい文字を置くために暗くする、暗い文字のために明るくする、グラデーションの最初の色を使う、縁を透明に向けてぼかす、の4種類から選べます。範囲と強さのスライダーで、帯がどこまで伸びてどのくらい効くかを決めます。どちらも最後に描かれるため、2つのモードで同じように働き、描画モードの影響も受けません。重ね掛けモードにはさらに不透明度の調整と6つの描画モードがあり、下にある写真とグラデーションがどう混ざるかを決められます。
背景を作るモードでは、Full HD・正方形・ストーリーズ・サムネイル・OGP・壁紙という6つの既製サイズから選ぶか、幅と高さを自分で入力します。1辺あたり6000pxまで指定できます。CSSコードの欄には、いま作っているグラデーションに対応する記述が表示され、ボタンひとつでクリップボードにコピーしてスタイルシートに貼り付けられます。最後にPNG・JPG・WEBPのいずれかを選んで画像をダウンロードします。複数の写真に重ねているときは、すべてダウンロードのボタンで1つの.zipにまとめて受け取れます。
よくある質問
アップロードした画像はどこかに保存されますか？
いいえ。グラデーションはブラウザ内で描画され、重ね掛けモードで使う画像がインターネットに送られることはありません。サーバーには何も残りません。
使うには画像をアップロードする必要がありますか？
いいえ。ゼロから背景を作るモードでは、色とサイズを決めるだけでファイルが生成されます。画像のアップロードが必要なのは、写真の上にグラデーションを重ねるモードだけです。
画像をダウンロードするのとCSSをコピーするのは何が違いますか？
CSSは、サイトを見ている人のブラウザ側でグラデーションをその場で描くので、画像ファイルの読み込みが発生しません。通信量ゼロでいちばん軽く、セクションの背景やボタンに向いています。PNGやJPGの画像が必要になるのは、ストーリーズの背景、動画のサムネイル、プレゼンのスライド、壁紙のように、CSSを解釈しない場所に置くときです。なお、テクスチャは書き出した画像にしか乗りません。CSSのグラデーションに粒状感は付きません。
SNSや用途ごとに、どのサイズを使えばいいですか？
よく使われるサイズは一通り用意してあります。InstagramやFacebookの正方形の投稿は1080×1080、ストーリーズやリールは1080×1920、YouTubeのサムネイルは1280×720、メッセージアプリやLinkedInでリンクを共有したときに出るOGP画像は1200×630、スライドは1920×1080、壁紙は2560×1440です。ほかの寸法が必要なら、幅と高さの入力欄に直接指定できます。1辺あたり6000pxまで対応しています。
グラデーションに粒状のテクスチャを乗せる意味は？
8ビットの画面でなめらかなグラデーションを表示すると、色の境目が帯状に見えてしまうことがあります。バンディングと呼ばれる現象で、近い色どうしを並べたときに特に目立ちます。粒状を20〜40%ほど薄く重ねると、この帯が崩れて色の変化が連続して見えるようになります。さらに、粒の質感は印刷物のような手ざわりを与えるので、ブランドのビジュアルや作品集の表紙でもよく使われています。
写真の内容を消さずにグラデーションを重ねるには？
重ね掛けモードを選び、まずは不透明度40〜60%から試してください。描画モードによって仕上がりは大きく変わります。乗算は暗くなるので、明るい文字を上に置きたいときに向きます。スクリーンは明るくなります。カラーは元のコントラストを保ったまま色味だけを乗せるので、細部がいちばん残ります。タイトル入りの表紙を作るなら、下側に暗いグラデーションを乗算で重ねると、写真を隠さずに文字が読めるようになります。
グラデーションなしで、テクスチャや周辺減光だけ使えますか？
はい。いちばん上の「グラデーションの種類」で「なし」を選んでください。写真に重ねるモードでは、画像はそのまま残り、あとから有効にしたもの（粒状・周辺減光・片側グラデーション）だけが加わります。色を変えずにフィルムのような質感だけを足したいときに便利です。ゼロから背景を作るモードで「なし」を選ぶと、最初の色がそのまま単色の背景になります。粒感のあるベタ塗り画像を作りたいときに使えます。
粒状とカラーノイズの違いは何ですか？
どちらもピクセルにばらつきを加えますが、動かす軸が逆です。粒状は明るさだけを揺らし、色はそのままにするのでフィルムの粒子に近くなります。なめらかなグラデーションに出る帯を消すのはこちらです。カラーノイズは逆に色だけを揺らして明るさを保つため、高ISOで撮った写真のような色の細かい点が現れます。使い分けとしては、質感づけとバンディング対策には粒状、フィルム写真や古いモニターのような雰囲気を出したいときはカラーノイズです。
周辺減光は何のためにあり、どのくらいの強さがいいですか？
周辺減光は画像の四隅を少しずつ暗くして、視線を中央へ寄せる効果です。人物や商品が背景に埋もれがちな写真や動画の表紙で、昔から使われてきた手法です。30〜50%なら効果に気づかれない程度に自然で、たいていはこのあたりがちょうどいい塩梅です。70%を超えるとはっきり分かるようになり、演出色が強くなります。周辺減光はグラデーションのあとに最後に描かれるため、選んだ描画モードの影響を受けません。
タイトルを置くために写真の下側だけ暗くするには？
片側グラデーションを有効にし、文字を置く側の辺を選びます。種類は「暗くする」のままにしてください。初期設定は左側で、左にタイトル・右に写真というよくあるバナーの形に合わせてあります。動画の表紙のように下側にタイトルを置くなら「下」に変えます。範囲を35〜50%、強さを75%前後にすると、写真の主役を隠さずに白い文字が読める程度のコントラストになります。
同じグラデーションを複数の写真にまとめて適用できますか？
はい。重ね掛けモードなら、好きなだけ画像を読み込めます。色・テクスチャ・不透明度・描画モードがすべての画像に同じように適用され、.zipでまとめてダウンロードできます。ブログの見出し画像やチャンネルのサムネイルの見た目をそろえるには、いちばん早い方法です。