header-logo
Wix の使用方法を学び、サイトとビジネスを構築する。
直感的な Wix 機能でサイトをデザインして管理する。
定期購入、プラン、請求を管理する。
ビジネスを運営し、サイト会員とつながる。
ドメインの購入、サイトへの接続と移管方法を学ぶ。
ビジネスとウェブプレゼンスを成長させるツールを入手する。
SEO とマーケティングツールで知名度を上げる。
より効率的な作業を支援する高度な機能を利用する。
解決策や既知の問題について確認し、問い合わせる。
placeholder-preview-image
コースとチュートリアルでスキルを習得する。
ウェブデザインやマーケティングなどのヒントを得る。
検索エンジンからのトラフィックを増やす方法について学ぶ。
フルスタックプラットフォームでカスタムサイトを構築する。
あなたの目標達成をサポートするエキスパートを見つけましょう。
placeholder-preview-image
  1. ホーム
  2. サイトの作成
  3. Wix エディタ
  4. 背景
  5. Wix エディタ：カラーテーマを使用・カスタマイズする

Wix エディタ：カラーテーマを使用・カスタマイズする

5分
カラーテーマの作成は、サイトのデザインプロセスにおいて重要なステップです。カラーテーマを一貫して使用することでブランドカラーを確立できます。
カラーテーマは、サイト全体と「追加」パネルの「おすすめ」パーツで自動的に使用されます。また、カラーテーマをサイト上の任意のパーツに適用することもできます。

カラーテーマについて

カラーテーマを選択すると、それらの色がサイト全体の特定のパーツに適用されます。また、カラーテーマで選択した色は、カラーピッカーにも保存されるため、いつでもパーツの「デザイン」パネルからそれらの色を呼び出して、任意のパーツに適用することができます。

ベースカラー

ベースカラーは、サイト全体の背景とテキストに使用されます。サイトに Wix アプリ（Wix ストア、Wix ブログなど）を追加した場合、それらのページでは同じ背景色と文字色が使用されます。
通常、ベースカラーの暗い色がテキストに使用され、明るい色が背景に使用されます。ベースカラーを選択すると、下にグラデーションが表示され、必要に応じてそれらの色合いを調整することができます。
サイトの情報を読みやすくするために、ハイコントラストな組み合わせを選択することをおすすめします。
「カラーテーマを編集」パネルに、ベースカラーが表示されている様子を示したスクリーンショット。

アクセントカラー

アクセントカラーは、メニューやリンクなどといった、サイトで次に重要となるパーツに使用されます。また、「おすすめボタン」や「おすすめボックス」などの装飾パーツや、Wix ストアや Wix ブログなどの Wix アプリ内のパーツにも使用されます。
「カラーテーマを編集」パネルに、アクセントカラーが表示されている様子を示したスクリーンショット。

サイトテーマを選択する

Wix エディタには、サイト全体に適用できる豊富な種類のプリセットテーマが用意されています。各サイトテーマには、タイトルとイメージが記載されているため、初心者でも簡単にサイトを調和のとれた色合いに変更することができます。

サイトテーマを選択する方法：

  1. エディタ左側の「サイトデザイン」 をクリックします。
  2. 「サイトテーマ」下の「テーマを変更」をクリックします。
  3. プリセットを確認し、クリックして新しいプリセットを選択します。
「テーマを変更」パネルに、おすすめのテーマが表示されている様子を示したスクリーンショット。

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

カラーテーマは、サイトやブランドに合わせてカスタマイズすることができます。カラーテーマでは、サイト全体の特定のパーツに使用される「ベースカラー」と「アクセントカラー」を変更・調整することができます。

カラーテーマをカスタマイズする方法：

  1. エディタ左側の「サイトデザイン」 をクリックします。
  2. 「サイトデザインをカスタマイズ」下の「カラーテーマ」をクリックします。
  3. カスタマイズするカラーを選択します：
    • ベースカラーを変更する：
      1. パネル内で編集したい色をクリックします。
      2. カーソルを使用して新しい色を見つけて選択するか、HEX、RGB、または HSB 値に正確な色を入力して、新しい色を選択します。
      3. 「適用」をクリックします。
    • アクセントカラーを変更する：
      1. パネル内で編集したい色をクリックします。
      2. カーソルを使用して別の色を選択するか、HEX、RGB、または HSB 値を入力して新しい色を作成します。
      3. 「適用」をクリックします。
「カラーテーマを編集」パネルで、新しいアクセントカラーを適用する様子を示したスクリーンショット。

各パーツの既定の色を設定する

カラーテーマをカスタマイズしたら、サイトで使用する各パーツの既定の色を設定します。各パーツに、設定したカラーテーマと相性の良い色を選択すると、サイト全体の見栄えを良くすることができます。

各パーツの既定の色を設定する方法：

  1. エディタ左側の「サイトデザイン」 をクリックします。
  2. 「カラーテーマ」をクリックします。
  3. 「詳細設定」をクリックします。
  4. 該当するパーツ名横のカラーボックスをクリックし、使用したい色を選択します：
    • 一般：サイトのプライマリ背景とセカンダリ背景、およびライン・区切り線に使用する色を選択します。
    • テキスト：タイトルや本文のテキストなど、サイト全体に使用するテキストの色を選択します。
    • ボタン：プライマリボタンとセカンダリボタンに使用する色を選択します。通常時とホバー時の状態ごとに、個別に色を選択することができます。
「詳細設定」パネルで、ライン・区切り線の色を選択する様子を示したスクリーンショット。

パーツに手動でテーマカラーを適用する

テーマカラーは、サイト上の任意のパーツに適用することができます。テーマカラーは、パーツの「デザイン」パネルのカラーピッカーに保存されているため、簡単に呼び出して各パーツの色を統一させることができます。

パーツに手動でテーマカラーを適用する方法：

  1. エディタで該当するパーツをクリックします。
  2. 「デザイン」アイコン  をクリックします。
  3. 「デザインをカスタマイズ」をクリックします。
  4. 「色・不透明度」をクリックします。
  5. カラーボックスをクリックします。
  6. カラーピッカーからテーマカラーを選択します。
セクションの背景に、テーマカラーを適用する様子を示したスクリーンショット。
ヒント：
テーマに含まれないカスタムカラーをカラーピッカーに保存することもできます。「マイカラー」横の「＋追加」をクリックして、新しい色を選択します。
さらに、エディタの「追加」パネル内のおすすめパーツには、すでにテーマの色が設定されているため（おすすめボタン、ボックス、線など）、サイトに合わせて手動で調整する必要はありません。

お役に立ちましたか？

|
お探しの情報が見つかりませんか？次の記事はいかがですか？
Wix ストア：商品のリボンを管理する

お探しの情報が見つかりませんか？次の記事はいかがですか？

Wix ストア：商品のリボンを管理する
この記事では下記を説明します：
  • カラーテーマについて
  • サイトテーマを選択する
  • カラーテーマをカスタマイズする
  • 各パーツの既定の色を設定する
  • パーツに手動でテーマカラーを適用する

お役に立ちましたか？

|
「カラーテーマを編集」パネルに、ベースカラーが表示されている様子を示したスクリーンショット。
「カラーテーマを編集」パネルに、アクセントカラーが表示されている様子を示したスクリーンショット。
「テーマを変更」パネルに、おすすめのテーマが表示されている様子を示したスクリーンショット。
「カラーテーマを編集」パネルで、新しいアクセントカラーを適用する様子を示したスクリーンショット。
「詳細設定」パネルで、ライン・区切り線の色を選択する様子を示したスクリーンショット。
セクションの背景に、テーマカラーを適用する様子を示したスクリーンショット。