# デザイン設定とは

- サイト: SHELP
- カテゴリ: デザイン
- URL: https://shelp.jp/help/shelp-manual/about-design
- サービスサイト: https://shelp.jp
- 最終更新: 2026/07/21 18:28:00

> デザイン設定では、公開ヘルプページ・FAQとチャットボットの見た目を整えられます。色やテンプレート、アイコンなどを調整できます。あなたのサービスのブランド特徴に沿ったFAQやチャットボットにすることができます。

---

## 設定できるもの

-   FAQページの各種色・レイアウト
    
-   チャットボットの各種色・アイコン
    

公開ページ全体の配色を5種類のカラーで設定します。

| 項目 | 用途 |
| --- | --- |
| テーマカラー | サイト全体の基調となるメインカラーです。ヘッダーやボタンなど、目立つ部分に使われます |
| ベースカラー | ページの背景など、面積の広い部分に使われるベースの色です |
| コンテントカラー | FAQ本文などのコンテンツ領域に使われる色です |
| 文字カラー | 通常のテキストの色です |
| 反転文字カラー | テーマカラーの上に載る文字の色です。ボタンのラベルなどに使われます |

---

## 設定の場所

「デザイン」機能で、タブを切り替えて設定します。変更はプレビューや公開ページに反映されます。

![Screenshot from 2026-06-10 13-57-56](https://cdn.shelp.jp/01KTKA20PWNNXVQZ8Z5QQ4GVHP/contents/01KTQYA8R8KMSX17EDVXR2S2ZT/6a28eedc5ac93.jpg "Screenshot from 2026-06-10 13-57-56")

---

## 編集の進め方

1.  各カラーの項目を選ぶと、カラーピッカーで色を選択できます。カラーコードでの指定も可能です。
    
2.  色を変更すると、画面の**デザインプレビュー**に即時反映されます。
    
3.  プレビューは拡大・縮小や位置の移動ができるため、実際の公開ページに近い見た目を確認しながら調整できます。
    
4.  調整が終わったら保存し、次のステップへ進みます。
    

---

## 配色のコツ

### コーポレートカラーを活用する

自社のコーポレートカラーやサービスのブランドカラーがある場合は、**テーマカラー**に設定してください。それだけでヘルプサイト全体に統一感が生まれ、「自社サービスの一部」として自然な見た目になります。

### 読みやすさを優先する

-   **文字カラーと背景（ベースカラー・コンテントカラー）のコントラスト**を十分に確保してください。コントラストが低いと、FAQ本文が読みづらくなります。
    
-   **反転文字カラー**は、テーマカラーの上に置いたときにはっきり読める色を選んでください。テーマカラーが濃い色なら白、薄い色なら濃い色が基本です。
    
-   彩度の高い色を広い面積（ベースカラー）に使うと目が疲れやすくなります。背景は白やごく薄い色にし、テーマカラーでアクセントを付ける構成が読みやすくおすすめです。
    

### 迷ったら初期設定のままでよい

配色に迷った場合は、初期設定のまま進めても問題ありません。デザインはセットアップ完了後に「デザイン」機能からいつでも変更できるため、まずは公開まで進めて、実際のページを見ながら調整するほうが効率的です。

---

このヘルプページは SHELP で作成されています。
SHELP: https://shelp.jp