Wix Harmony エディタ：グラデーションを操作する

この記事内

グラデーションの種類について
リニア、ラジアル、コニックのグラデーションを設定する
フルードグラデーションを設定する
よくある質問

グラデーションを使用すると、2色以上の色が互いに溶け合うようにして、背景に単色よりも豊かな表情を与えることができます。

グラデーションは、「リニア」、「ラジアル」、「コニック」、「フルード」から選択して、サイトにさまざまな表情を加えることができます。また、必要に応じて色を追加したり、各色の不透明度を変更したり、ブランドカラーとして保存したりして、後で再利用することもできます。

Wix Harmony エディタに、グラデーションを選択・調整するためのパネルが表示されている様子を示したスクリーンショット。

参考：

現在、グラデーションを使用した背景は、セクション、セクション内のセル、ヘッダー、フッター、ボタン、ボックスに利用することができます。

グラデーションの種類について

グラデーションは、4種類の中から選択することができます。それぞれのグラデーションでは独自の視覚効果を生み出すことができるため、背景に適したオプションを選択することが可能です。

リニア：色が一方からもう一方へと直線的に混ざり合います（角度は自由に調整することができます）。これは、シンプルな背景にして、その中で特定の方向を表現したい場合に適しています。
ラジアル：色が中心から外側に向けて放射状に広がります。これは、背景に柔らかな印象を与えて、中心や特定の領域に訪問者の視線を集めたい場合に適しています。
コニック：時計の針のように、色が中心から円を描くように回転して表示されます（角度は自由に調整することができます）。これは、色の境界をはっきりさせて、スポットライトのような陰影を生み出したい場合に適しています。
フルード：色が背景全体で自由に混ざり合います。これは、色の境界を曖昧にして、オーロラや水墨画のような柔らかな段調を生み出したい場合に適しています。

Wix Harmony エディタで、それぞれのグラデーションのオプションを切り替える様子を示したスクリーンショット。

リニア、ラジアル、コニックのグラデーションを設定する

リニア、ラジアル、コニックのオプションを使用すると、背景に分かりやすい色の変化を生み出すことができます。それぞれのオプションでは、色を追加したり、既存の色を変更したり、不透明度を調整したりして、思い通りの外観に仕上げることができます。

リニア、ラジアル、コニックのグラデーションを設定する方法：

エディタに移動します。
該当するパーツをクリックします。
アクションバーで「背景を変更」をクリックします。
「グラデーション」アイコンをクリックします。
上部のグラデーションの種類から、「リニア」、「ラジアル」、または「コニック」を選択します。
オプションを使用してグラデーションを設定します：
- 色を追加する：カラーバー上で新しい色を追加したい部分にマウスオーバーし、カーソルが「矢印」アイコンに変わったら色を選択します。
- 色を変更する：カラーバー上で該当する色の「円形」アイコンをドラッグし、別の色に変更します。
- 色の不透明度を変更する：カラーバー上で該当する色の「円形」アイコンをクリックし、不透明度スライダーをドラッグするか、パーセンテージを入力します（例：100% で完全に不透明になります）。
- 色を削除する：不透明度スライダー横の「色を削除」アイコンをクリックします。
  注意：グラデーションには最低でも 2色が必要となります。グラデーションに 2色しか含まれていない場合は、それ以上色を削除することはできないため、このアイコンは無効となります。
選択した種類に基づいてグラデーションを調整します：
- リニア：グラデーションプレビュー上で時計の針のような線をドラッグし、色が流れる角度を変更します。
- ラジアル：グラデーションプレビュー上の中央にある円をドラッグし、放射状の中心点を移動させます。
- コニック：グラデーションプレビュー上の時計の針のような線と円をドラッグし、色が流れる角度と位置を変更します。

ヒント：

「ブランドに保存」アイコンをクリックすると、作成したグラデーションを保存して、後ですばやく使用することができます。
「順序を反転」アイコンをクリックすると、色の順序をすばやく反転させることができます。

Wix Harmony エディタで、「コニック」グラデーションの位置と角度を変更し、不透明度を調整する様子を示した GIF。

フルードグラデーションを設定する

フルードグラデーションを使用すると、色の境界をより曖昧にして、オーロラや水墨画のような柔らかな段調を作成することができます。

フルードグラデーションを設定する方法：

エディタに移動します。
該当するパーツをクリックします。
アクションバーで「背景を変更」をクリックします。
「グラデーション」アイコンをクリックし、「フルード」アイコンを選択します。
オプションを使用してグラデーションを設定します：
- 色を追加する：グラデーションプレビュー上で新しい色を追加したい部分にマウスオーバーし、カーソルが「矢印」アイコンに変わったら色を選択します。
- 色を移動させる：グラデーションプレビュー上で色の円を任意の場所にドラッグします。
- 色を変更する：グラデーションプレビュー上で色の円を選択し、カラーバー上でその色の「円形」アイコンをドラッグして、別の色に変更します。
- 色の不透明度を変更する：グラデーションプレビュー上で色の円を選択し、カラーバー上でその色の不透明度スライダーをドラッグするか、パーセンテージを入力します。
- その他の設定を開く：「その他の設定」アイコンをクリックし、グラデーションのサイズ、広がり、背景色を調整します。
- 色を削除する：グラデーションプレビュー上で色の円を選択し、「色を削除」アイコンをクリックします。
  注意：グラデーションには最低でも 2色が必要となります。グラデーションに 2色しか含まれていない場合は、それ以上色を削除することはできないため、このアイコンは無効となります。