ウェブサイトの色 – カラーパレットの使用

適切な Web サイトの色を選択することは、ブランドのメッセージを効果的に伝え、ユーザー エクスペリエンスを向上させる、視覚的に魅力的で統一感のあるデザインを作成するために非常に重要です。

 

ここで扱われる内容:

  1. 現在のカラーパレット
  2. カラーパレットのプリセット
  3. 高度な編集
  4. カスタム設定をリセット

ウェブサイトの色は、デザイン(1)セクションから管理できます。

デザインセクションに入ったら、「色(2)」タブをクリックします。


現在のカラーパレット

  • 選択した カラーパレット ここでは(1)が表示されます。
  • また、ご購読はいつでも停止することが可能です カスタマイズ (2) パレット内の各オプションを選択し、好みに応じて色を選択します。
  • 背景 (3)、ニュートラル (4)、アクセント (5)、ダーク アクセント (6)、およびテキスト (7) の XNUMX つの色のオプションが表示されます。 これらのオプションはパレット全体を定義します。

注:カラーパレットオプションまたは詳細編集でカスタム調整を行うと、「変更済み」(8) ボタンが表示されます。

以下は、個々のパレット オプションを変更する際に影響する項目のリストです。


カラーパレットのプリセット

カラーパレットプリセット(1)は、ウェブサイトに特定の外観を素早く簡単に与えるために慎重に選択された、あらかじめ定義された色の組み合わせです。

プリセットを変更することで、Web サイトの色を簡単に変更できます。 ウェブサイト全体にグローバルに適用されます。

リストをフィルターするには、(2)「すべて」、「明るい」、「暗い」、「太字」のプリセットを選択します。フィルターを選択すると、関連するパレットのみが表示されます。

カラーパレット(3)を選択するには、それをクリックして変更を公開(4)するだけです。

先端

カラーパレットオプションをカスタマイズするか、詳細編集からデフォルトのパレット設定を上書きできます。


高度な編集

詳細編集では、Web サイトのあらゆる要素の色をカスタマイズして、Web サイトの外観を手動で完全に制御できます。[詳細編集] には、次のオプションがあります。


サイトの色のオプション

  1. ウェブサイト名: サイトタイトルのテキストの色を選択します。
  2. サイトの背景: Web サイトのベースカラーを設定します。
  3. ヘッダーの背景: Web サイトのヘッダーの基本色を設定します。
  4. ヘッダーの境界線: Web サイトのヘッダーの枠線の色を設定します。
  5. フッターの背景: Web サイトのフッターの基本色を設定します。
  6. フッターの境界線: Web サイトのフッターの境界線の色を設定します。
  7. フッターサイトタイトル: ウェブサイトのフッターに表示されるサイトタイトルのテキストの色を選択します。
  8. フッターテキスト: Web サイトのフッターのテキストの色を設定します。
  9. フッターメニューホバー: カーソルを置いたときのフッター メニュー項目の色を設定します。


ライトボックスのカラーオプション

  1. 背景: 画像をライトボックス モードで表示するときに表示される背景色 (オーバーレイ) を設定します。
  2. テキスト/要素: フルイメージビューのナビゲーション矢印、アイコン、その他の要素の色を設定します。


カードカラーオプション

  1. 背景: Web サイト上に存在する動的リスト項目 (テキスト/画像リストなど) のカードの色を設定します。 カードの色は、リスト項目のアウトラインおよび背景として適用されます。
  2. 境界: カードの枠線の色を設定します。 個々のセクションに対してデフォルト色またはカスタム色を選択できます。


  1. メニューテキスト: ナビゲーション メニュー項目のテキストの色を設定します。
  2. メニューテキストのホバー: メニュー項目の上にカーソルを置きながら、メニュー項目のテキストの色を選択します。
  3. メニューテキストがアクティブ: アクティブなメニューのテキストの色を選択します。
  4. ドロップダウン メニューのテキスト: ドロップダウン メニュー項目のテキストの色を指定します。
  5. ドロップダウン メニューのテキスト ホバー: ドロップダウン メニュー項目のホバーの色を選択します。
  6. ドロップダウン メニューのテキスト ベース: ドロップダウン メニュー項目の基本色を選択します。


テキストの色のオプション

  1. 見出し (H1): 見出し(H1)の文字色を選択します。
  2. 見出し (H2): 見出し(H2)の文字色を選択します。
  3. 見出し (H3): 見出し(H3)の文字色を選択します。
  4. 見出し (H4): 見出し(H4)の文字色を選択します。
  5. 段落テキスト: すべての段落テキストのフォントの色を選択します (P Normal、P Small、P Large)。


  1. ボタン: ボタンの背景色をここから選択します。
  2. ボタンのテキスト: ボタンのテキストの色を選択します。
  3. リンクテキスト: ウェブサイト上のすべてのリンクのリンクテキストの色を設定します。
  4. リンクテキストホバー: Web サイト上のリンクのリンク テキストのホバー色を設定します。


カスタム設定をリセット

パレットを編集したり、詳細編集からカラー設定をカスタマイズしたりしてアクセントカラーを変更した場合は、簡単にデフォルトのパレット設定にリセットできます。

「変更済み」ボタンが表示されます。 ボタンの上にカーソルを置くと、ボタンが [リセット] に変わります。 ここから変更を元にリセットできます。


お探しのものが見つかりませんか?

Pixpaエキスパートに連絡してください。

Pixpa Studioがリニューアルされました。現在、ヘルプ記事のスクリーンショットをすべて更新中です。