Wix エディタ:カラースタイルをカスタマイズする
読了時間:4分
カラースタイルの作成は、サイトのデザインプロセスにおいて重要なステップです。一貫して使用することでブランドカラーを確立できます。
![カラースタイルパネルを示すスクリーンショット。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2022/10/12/7b1c3920-e0b0-452b-8012-3205309ff7b3/88f71a38-5e70-4395-b671-e6e4eed492dd.png)
カラースタイルは、サイト全体と「追加」パネルの「おすすめ」パーツで自動的に使用されます。また、カラースタイルをサイト上の任意のパーツに適用することもできます。
この記事では、次の項目について説明します:
カラースタイルをカスタマイズする
サイトに適用できるカラースタイルのプリセットはたくさんあります。これらのスタイルは、洗練されたパステルカラーから大胆で明るい色調まで、さまざまなスタイルを補完する色で慎重に作成されています。プリセットを確認し、ブランドに最適なオプションを選択してください。
カラースタイルのプリセットを選択したら、個々の色をカスタマイズすることもできます。
カラースタイルを選択・カスタマイズする方法:
- エディタ左側の「サイトデザイン」
をクリックします。
- 「色・テキストスタイル」にマウスオーバーして「編集」をクリックします。
- 「現在のスタイル」下の「色」をクリックします。
- 「カラースタイル」にマウスオーバーして「変更」をクリックします。
- プリセットを確認し、クリックして新しいプリセットを選択します。
![サイトデザインパネルを示すスクリーンショット。カーソルがサイトスタイルにマウスオーバーしています。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2022/10/12/bc8d0e1b-86b8-4108-a59f-64ee66c36f5f/7aa254d9-b549-4b85-b1d8-36a0ad692938.png)
- (オプション)スタイルの色をカスタマイズします:
- 「現在のスタイル」にマウスオーバーして「色」をクリックします。
- 該当する色の横で「カラーを編集」アイコン
をクリックします。
- カーソルを使用して新しい色を見つけて選択するか、HEX、RGB、または HSB 値に正確な色を入力して、新しい色を選択します。
![カーソルが新しい色を選択していることを示すスクリーンショット。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2022/10/12/df7aff24-0fdc-400e-ac08-ac3000e2cee5/d6baa86d-281a-46c6-a364-3fe30c465a63.png)
- (オプション)カラースケールの色合いをクリックし、彩度と明るさを設定して希望の色調に調整します。
![色合いの彩度と明るさを調整できるパネルのスクリーンショット。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2022/10/12/a9dbaff4-d91f-4290-964a-4520c46f4144/29a8650e-fc94-49c6-9247-f66644098e0b.png)
サイトのパーツにカラースタイルを適用する
カラースタイルは、サイト上の任意のパーツに適用できます。デザインパネルのカラーピッカーに保存されます:
![コンテナボックスのデザインから開いたカラーピッカーパネルのスクリーンショット。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2022/10/12/29c32b1b-90ab-4732-af5d-3ffd593c8505/b230f7b3-2457-4444-a1ba-d85d59a0af16.png)
ヒント:
スタイルに含まれないカスタムカラーをカラーピッカーに保存することもできます。「マイカラー」横の「+追加」をクリックして、新しい色を選択します。
さらに、エディタの「追加」パネル内のおすすめパーツには、すでにスタイルの色が設定されているため(おすすめボタン、ボックス、線など)、サイトに合わせて手動で調整する必要はありません。
![「追加」パネルから追加できるおすすめパーツを示すスクリーンショット。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2022/10/12/64ff7d89-4eda-42f9-957f-cdf23f7e3f2e/8497b9e6-aab7-4fe1-8d5d-120490fe81e9.png)
スタイルカラーがサイトでどのように使用されるかを理解する
カラーピッカーに表示されるだけでなく、スタイルカラーは次のようにサイト全体で使用されます:
色 1:背景とテキスト
色 1 は、サイト全体の背景とテキストに使用されます。サイトに Wix アプリ(Wix ストア、Wix ブログなど)を追加した場合、それらのページでは同じ背景色と文字色が使用されます。
通常、最も明るい色合い (1) は背景に使用され、最も暗い色 (2) はテキストに使用されます。サイトの情報を読みやすくするために、ハイコントラストな組み合わせを作成することをおすすめします。
![色 1 を示すスクリーンショット](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2020/10/26/2ca80824-4f9f-4524-a006-6e66ce8659e9/13bc1893-90fa-4c3e-b137-79e21181f4e4.png)
色 2:アクションカラー
目立つアクションカラーを選択して、訪問者にあなたが希望する選択を促します。この色はリンク、ボタン、メニューのようなアクションパーツに使用されます。ボタンやボックスなどのおすすめパーツや、Wix アプリに関連するページ(例えば Wix ストア、Wix ブログなど)にも表示されます。
真ん中の色合いは最も頻繁に使用されるので、背景と対照的な色合いを選択することをおすすめします。これにより、サイト内の最も重要なパーツがアクセスしやすく、目立つようになります。
![色 2 を示すスクリーンショット](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2020/10/26/e6de3ed8-a656-4155-89d2-d6a70872aa50/df24802f-326b-4f21-973d-1b5241cddfe4.png)
色 3、4、5:追加の色
さらに 3 色を選択して、配色を完成させます。これらはサイト全体のさまざまな場所に表示されるため、選択した他の色と一致し、補完する色である必要があります。
![色 3、4、5 を示すスクリーンショット。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2020/10/26/6d808fa0-4a54-4543-a1f3-4c3bc34fa2a3/d92ba79d-39d3-4fdb-be79-f36ca93b7b4d.png)