オンライン線形グラデーション画像生成ツール

機能と使い方の詳細

線形グラデーションの仕組み

このツールは、キャンバスの左上隅 (0,0) を起点とし、指定された角度とスケールに基づいて終点を計算します。終点の座標は (幅 × cos(角度) / スケール, 高さ × sin(角度) / スケール) です。角度はキャンバス座標系に従い、正のY軸は下向きです。例えば、デフォルト設定（1200×630、135度、100%）では、終点は約 (-848.53, 445.48) になります。角度0度では、グラデーションは (0,0) から (1200,0) へ水平に進みます。

スケールの効果

スケールを200%に設定すると、ベクトルの長さが半分になるため、グラデーションの遷移が早く完了し、残りの領域は終了色で塗りつぶされます（繰り返しはありません）。

透明度の設定

透明度を有効にすると、各色の透明度を個別に設定できます。透明度25%はアルファ値0.75、透明度100%はアルファ値0に対応します。このツールは正確に2つのカラーストップ（位置0と1）のみを作成し、追加のストップや繰り返しモード、色空間セレクター、ディザリング、テクスチャ、画像アップロード機能はありません。

生成の制限と注意点

生成はブラウザ内で行われ、画像のアップロードは不要です。大きな寸法はピクセル予算（2400万ピクセル）に合わせて比例的に縮小されます。テキストのコントラストや、使用目的のアスペクト比に注意してください。

よくある質問

グラデーションの方向を正確に制御するには？

角度を0〜360度の範囲で指定します。0度は右向き、90度は下向き、180度は左向き、270度は上向きです。負の角度も指定できます（例：-45度は315度と同じ）。

スケールを変更するとどうなりますか？

スケールを大きくすると、グラデーションの遷移が早くなり、終了色が広い領域に適用されます。スケールを小さくすると、遷移が遅くなり、中間色が広がります。スケールは1〜500%の範囲で設定できます。

透明度を有効にすると、どのような効果がありますか？

透明度を有効にすると、各色の透明度を個別に設定できます。透明度100%は完全に透明（アルファ0）になり、透明度0%は完全不透明（アルファ1）です。これにより、背景とブレンドする画像を作成できます。

チェックリスト

• 色を選択する
• キャンバスサイズを設定する
• 方向（角度）を設定する
• スケールを設定する
• 必要に応じて透明度を有効にする
• 生成してプレビューを確認する
• PNGをダウンロードする