グラデーションの作り方と書き出し

GradientStudio の使い方と、グラデーションを作るときの考え方をまとめました。GradientStudio は、グラデーションを 作って PNG・CSS・SVG・動く画像（APNG / GIF）に書き出すブラウザ用の道具です。作ったグラデーションは1つのファイル （*.gradient.json）として保存でき、読み込んだ画像はブラウザの中だけで処理されます。

1. グラデーションを作る部品

グラデーションは、次の3つの部品でできています。

• ストップ。「この位置（0〜100%）に、この色（と不透明度）を置く」という点です。最低2つ、いくつでも 足せます。画面下の帯のつまみをドラッグして位置を動かし、帯の空いた所を押すとストップが増えます。
• 角度。グラデーションが流れる向きです。0°が下から上、90°が左から右です。
• 繰り返し。色の並びをグラデーションの線の上に何回並べるか（1〜100回）です。「折り返す」を入れると、 1回ごとに向きが返るので、つなぎ目で色が急に切り替わりません。

2. きれいに見せるコツ

• 2〜3色から始める。色数が多いほど派手になるのではなく、むしろ散らかります。まず2〜3色で、 きれいに見える組み合わせを探します。
• 色相を少しだけずらす。同じ色相で明るさだけ変えると単調に、遠い色相同士をつなぐと中間が濁ることが あります。色相を30〜60°ほどずらした色（たとえば、オレンジ → ピンク）は、自然につながります。
• 反対色を直接つながない。青とオレンジのような反対の色を直接つなぐと、真ん中が灰色っぽく濁ります。 間に明るい色や、片方に寄せた色のストップを1つ足すと、きれいに見えます。
• 明るさの差を付ける。色が違っても明るさが同じだと、グラデーションが平べったく見えます。 片方を明るく、片方を暗くすると、奥行きが出ます。
• 縞（バンディング）に注意。ゆるやかな変化を大きな画像に使うと、色の変わり目に縞が見えることがあります。 色の差を少し大きくする、ストップを足して変化をはっきりさせる、といった対処が効きます。GIF は256色しか使えないので、 特に目立ちます。

3. レイヤーで重ねる

いちばん下の「ベース」の上に、グラデーションのレイヤーを何枚でも重ねられます。画像ソフトのレイヤーと同じ考え方です。 各レイヤーに重ね方と不透明度を決められます。

• 普通。上のレイヤーが、下を覆います（不透明度を下げると透けます）。
• 乗算。下の色と掛け合わせるので、全体が暗く、深い色になります。影や陰影に向いています。
• スクリーン。明るく重ねます。光や、ふんわりした明るさを足したいときに向いています。
• オーバーレイ。明るい所は明るく、暗い所は暗く、コントラストを強めます。

たとえば、横に流れるグラデーションの上に、縦に流れる半透明のグラデーションを「乗算」で重ねると、 横の流れを残したまま、上から下へゆるやかに暗くなる、奥行きのある背景になります。レイヤーは表示・非表示を切り替えられ、隠したレイヤーは 書き出しにも入りません。

4. 柄（マスク）で形を付ける

レイヤーに柄を付けると、柄の所だけ、そのレイヤーのグラデーションが見えます（グラデーションそのものは 消えません）。ストライプ、ドット、チェック、格子、リング、放射の6種類で、太さ・すき間・角度などを変えられます。 「反転」を入れると、柄の外側が見えます。

• ストライプ + グラデーション → 縞の所だけに色が流れて、すき間は透明になります。
• ドット + 色を逆にしたグラデーション → 水玉模様が重なって、カラフルな背景になります。
• リング・放射 → 同心円や光の筋のような、中心から広がる模様になります。

5. 書き出しの形式の選び方

用途で形式を選びます。どれも画面下の書き出しバーから出せます。

• PNG（画像）。画像として使うときの基本です。大きさを 1〜8192px で指定できます。半透明にも対応します。 ゲームの素材として、色の変化だけを1行で持つ「ランプ画像」（たとえば 256×1）にも使えます。
• CSS（Webページ）。background-image: linear-gradient(...) の1行として出せます。画像と違って 大きさを持たないので、どんな大きさの要素にも合わせて伸び、ファイルも軽く済みます。ウェブサイトの背景ならこれが第一候補です。 たとえば次のような行が出ます。

background-image: linear-gradient(90deg, #ffc8a0 0%, #ff8fb1 50%, #8fb8ff 100%);

• SVG（ベクター）。拡大しても荒れない画像です。ロゴやイラストに混ぜて使うときに向いています。
• 動く画像（APNG / GIF）。色や柄を動かしたグラデーションを、動く画像として書き出します。 APNG は色も半透明もそのまま残ります。GIF は多くの環境で再生できますが、256色で半透明を持てないので、背景色を 決めて書き出します。ファイルが大きくなりやすいので、小さめの大きさで試すのがおすすめです。
• CSS でアニメーション。色や柄を動かした場合は、CSS のアニメーションとしても書き出せます （新しめのブラウザで動きます）。

SVG と PNG の静止画は、アニメーションを設定していても、動き始めの見た目のまま書き出されます。動きを残したいときは、 CSS か動く画像を選んでください。

6. 画像の色をグラデーションに置き換える

左の「画像」パネルに手元の画像を読み込むと、指定した色を、いま作っているグラデーションに置き換えられます。 元の画像は変わらず、結果は真ん中のプレビューにそのまま映ります。

• 置き換える色は、プレビューをクリックして選びます。何個でも追加できます。
• 「許容差」で、置き換える色の範囲を決めます。縁は、元の色となめらかに混ざります。
• 色ごとに、別のレイヤーのグラデーションを割り当てることもできます（赤はこのグラデーション、青はあのグラデーション、など）。
• グラデーションを動かせば、置き換えた画像も動かせます。PNG や動く画像として保存できます。
• 画像はブラウザの中で処理され、どこにも送られません。

7. 保存のしかた

「名前を付けて保存」（Ctrl+Shift+S）で、1つのグラデーションを1つのファイル（*.gradient.json）として 好きな場所に置けます。ファイル名がそのままグラデーションの名前になります。「開く」（Ctrl+O）か、ファイルを 窓へドラッグ＆ドロップで読み込めます。左上の「最近使ったもの」から、続きを再開することもできます。 保存場所を選べるのは Chrome と Edge で、ほかのブラウザではダウンロードの形になります。

GradientStudio を開く ・ もう1つのガイド: 模写練習の進め方 →