Wix エディタ:カラースタイルをカスタマイズする

読了時間:4分
カラースタイルの作成は、サイトのデザインプロセスにおいて重要なステップです。一貫して使用することでブランドカラーを確立できます。
カラースタイルパネルを示すスクリーンショット。
カラースタイルは、サイト全体と「追加」パネルの「おすすめ」パーツで自動的に使用されます。また、カラースタイルをサイト上の任意のパーツに適用することもできます。
この記事では、次の項目について説明します:

カラースタイルをカスタマイズする

サイトに適用できるカラースタイルのプリセットはたくさんあります。これらのスタイルは、洗練されたパステルカラーから大胆で明るい色調まで、さまざまなスタイルを補完する色で慎重に作成されています。プリセットを確認し、ブランドに最適なオプションを選択してください。

カラースタイルのプリセットを選択したら、個々の色をカスタマイズすることもできます。

カラースタイルを選択・カスタマイズする方法:

  1. エディタ左側の「サイトデザイン をクリックします。
  2. 色・テキストスタイル」にマウスオーバーして「編集」をクリックします。
  3. 現在のスタイル」下の「」をクリックします。
  4. カラースタイル」にマウスオーバーして「変更」をクリックします。
  5. プリセットを確認し、クリックして新しいプリセットを選択します。
サイトデザインパネルを示すスクリーンショット。カーソルがサイトスタイルにマウスオーバーしています。
  1. (オプション)スタイルの色をカスタマイズします:
    1. 現在のスタイル」にマウスオーバーして「」をクリックします。
    2. 該当する色の横で「カラーを編集」アイコン  をクリックします。
    3. カーソルを使用して新しい色を見つけて選択するか、HEX、RGB、または HSB 値に正確な色を入力して、新しい色を選択します。
カーソルが新しい色を選択していることを示すスクリーンショット。
  1. (オプション)カラースケールの色合いをクリックし、彩度と明るさを設定して希望の色調に調整します。
色合いの彩度と明るさを調整できるパネルのスクリーンショット。

サイトのパーツにカラースタイルを適用する

カラースタイルは、サイト上の任意のパーツに適用できます。デザインパネルのカラーピッカーに保存されます:
コンテナボックスのデザインから開いたカラーピッカーパネルのスクリーンショット。
ヒント:
スタイルに含まれないカスタムカラーをカラーピッカーに保存することもできます。「マイカラー」横の「追加」をクリックして、新しい色を選択します。
さらに、エディタの「追加」パネル内のおすすめパーツには、すでにスタイルの色が設定されているため(おすすめボタン、ボックス、線など)、サイトに合わせて手動で調整する必要はありません。
「追加」パネルから追加できるおすすめパーツを示すスクリーンショット。

スタイルカラーがサイトでどのように使用されるかを理解する

カラーピッカーに表示されるだけでなく、スタイルカラーは次のようにサイト全体で使用されます:

色 1:背景とテキスト

色 1 は、サイト全体の背景とテキストに使用されます。サイトに Wix アプリ(Wix ストア、Wix ブログなど)を追加した場合、それらのページでは同じ背景色と文字色が使用されます。
通常、最も明るい色合い (1) は背景に使用され、最も暗い色 (2) はテキストに使用されます。サイトの情報を読みやすくするために、ハイコントラストな組み合わせを作成することをおすすめします。
色 1 を示すスクリーンショット

色 2:アクションカラー

目立つアクションカラーを選択して、訪問者にあなたが希望する選択を促します。この色はリンク、ボタン、メニューのようなアクションパーツに使用されます。ボタンやボックスなどのおすすめパーツや、Wix アプリに関連するページ(例えば Wix ストア、Wix ブログなど)にも表示されます。
真ん中の色合いは最も頻繁に使用されるので、背景と対照的な色合いを選択することをおすすめします。これにより、サイト内の最も重要なパーツがアクセスしやすく、目立つようになります。
色 2 を示すスクリーンショット

色 3、4、5:追加の色

さらに 3 色を選択して、配色を完成させます。これらはサイト全体のさまざまな場所に表示されるため、選択した他の色と一致し、補完する色である必要があります。
色 3、4、5 を示すスクリーンショット。

お役に立ちましたか?

|