ADI:サイトの色をカスタマイズする
読了時間:3分
ADI では、サイトのデザインをさらに簡単にするために、補完的なカラーパレットを多数用意しています。パレットをカスタマイズしたり、独自のパレットを作成することもできます。
注意:
サイトにロゴを追加すると、ADI はメインカラーを抽出し、使用できる特別なパレットを作成します。
この記事では、次の項目について説明します:
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/5c3e602a-8647-41f7-bb22-686374bf97ce/2021/09/23/d13cc7fb-8aef-480b-97e4-b946483fae35/0700bb30-d608-4176-a116-4da30d63c905.png)
カラーパレットを変更する
ワンクリックでサイトのカラーパレットを変更できます。
カラーパレットを変更する方法:
- ADI 内のトップバーにある「デザイン」をクリックします。
- 「カラー」を選択します。
- 新しいカラーパレットを選択します。
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/5c3e602a-8647-41f7-bb22-686374bf97ce/2021/09/22/e5290777-0892-4050-a102-067261285f82/bd16dfdb-ac59-4f3b-ba5c-32cee4bd241e.png)
パレットのメインカラーを変更する
サイトのメインカラーを変更し、推奨カラーパレットの新しいリストを作成しましょう。
パレットのメインカラーを変更する方法:
- ADI 内のトップバーにある「デザイン」をクリックします。
- 「カラー」を選択します。
- 上部にある「メインカラー」ボックスでデザインアイコン
をクリックします。
- 提案された色を選択するか、「追加」アイコン
をクリックして、カスタムカラーを選択します。
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/5c3e602a-8647-41f7-bb22-686374bf97ce/2021/09/22/05e4d472-4c61-4d7b-aa5a-0737179e2c3f/b0c8336c-d30b-416b-b2a8-b09da8b043e6.png)
カラー設定をカスタマイズする
使用する色の濃さ(カラーレベル)やパレットのカラーモードを制御して、サイトの色をさらにカスタマイズしましょう。
カラーモードとカラーレベルをカスタマイズする方法:
- 「カラーモード」下の「編集」をクリックします。
- カラー設定をカスタマイズします:
- モード:サイトの背景色を暗くするか明るくするか(ライト、ダーク、ミックス)を選択します。
- カラーレベル:サイトをどの程度カラフルにするか(プレーン、ティント、カラフル、鮮やか)を定義します。
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/5c3e602a-8647-41f7-bb22-686374bf97ce/2021/09/22/909bc9db-62fc-46fe-98e7-e76f8abdf442/91c6398b-08e9-4821-8623-0718b4f0edea.png)
独自のカラーパレットを作成する
カスタムカラーパレットをデザインして、サイトのカラーストーリーを作成しましょう。
独自のカラーパレットを作成する方法:
- ADI 内のトップバーにある「デザイン」をクリックします。
- 「カラー」をクリックします。
- 「カラーパレットを編集」をクリックします
- 変更したい色の上でデザインアイコン
をクリックします。
- 新しい色を選択します。
- 「適用」をクリックします。
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/5c3e602a-8647-41f7-bb22-686374bf97ce/2021/09/23/6a31f10f-3c35-4037-a665-5b841c3a06fb/4ecc2f35-7127-4338-b593-eefeea0e5f7e.png)
注意:
ADI のカラーパレットは、サイトのデザインやお互いを引き立たせるように丁寧に作られています。パレットのメインカラーを変更すると、ADI は新しいメインカラーに合ったパレットの組み合わせを提案します。
ヒント:
テキストカラーと ADI パーツの色のコントラストが低すぎる場合、ADI はパレットの色を調整するよう提案します。「パレットのカラー」パネルの下部にある「カラーを調整」をクリックすると、ADI は問題のある色を自動的に適切な色に変更します。
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2022/03/21/c7f48177-55d1-4fb4-b881-00e1bca7eeb7/da8c36e2-dd29-47aa-a0ce-7f4bc2df86b4.png)
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2022/03/21/c7f48177-55d1-4fb4-b881-00e1bca7eeb7/da8c36e2-dd29-47aa-a0ce-7f4bc2df86b4.png)
お役に立ちましたか?
|