キーワードから配色パターンを生成【ColorMagic】の使い方|サイトデザイン
![](https://omochi-style.com/wp-content/uploads/2023/10/f6984d34b9454f6eb2f8fa831f3d5655.jpg)
こんにちは。おもち(@omochibigaku)です。
こちらの記事では、キーワードから配色パターン(カラーパレット)を生成してくれるAIサービス『ColorMagic』の使い方についてわかりやすく解説していきます。
![おもち](https://omochi-style.com/wp-content/uploads/2023/08/haha.png)
サイトのメインカラーやアクセントカラーを探しちゃおう!
大まかな手順
![](https://omochi-style.com/wp-content/uploads/2023/11/a6af10060dd92a5090be4c8f78b7f5f3.jpg)
- ほしい色のイメージを入力
- 生成するボタンをクリック
- 生成されたカラーコードをコピー
- サイトの主要パーツにあてはめる
![おもち](https://omochi-style.com/wp-content/uploads/2023/08/haha.png)
とっても簡単にイメージどおりのサイトが作れちゃうよ!
ColorMagicの使い方
![](https://omochi-style.com/wp-content/uploads/2023/10/color-mag1.jpg)
ColorMagicをひらきます。
![](https://omochi-style.com/wp-content/uploads/2023/10/color-mag2.jpg)
サイトがひらいたら、画面左下にある『パレットをつくる』ボタンをクリック。
![](https://omochi-style.com/wp-content/uploads/2023/10/color-mag3.jpg)
理想的な色の雰囲気やイメージをあらわすキーワードを入力してください。
![](https://omochi-style.com/wp-content/uploads/2023/10/color-mag4.jpg)
入力できたら『生成する』ボタンをクリック。
![](https://omochi-style.com/wp-content/uploads/2023/10/color-mag5.jpg)
AIが生成してくれたカラーパレットが表示されました。
![おもち](https://omochi-style.com/wp-content/uploads/2023/08/haha.png)
使い方はとっても簡単だね!
![](https://omochi-style.com/wp-content/uploads/2023/10/color-mag12.jpg)
参考までに『明るい 元気 おしゃれ』と入力すると、こんなパレットが生成されます。
![](https://omochi-style.com/wp-content/uploads/2023/10/color-mag11.jpg)
『パステルカラー 心地よい 優しい』と入力すると、こんな感じの配色パターンでした。
![](https://omochi-style.com/wp-content/uploads/2023/11/ffa192660db4d3cadfc85dc2c65c9bcc.jpg)
『シック 大人 カッコいい スマート』と入力すると、こんな感じの配色パターンでした。
![おもち](https://omochi-style.com/wp-content/uploads/2023/08/basic.png)
いろいろなカラーパレットを作ってみよう!
生成された色の調整方法
![](https://omochi-style.com/wp-content/uploads/2023/10/color-mag6.jpg)
生成された色を調整したい場合は『色の調整』ボタンをクリック。
![](https://omochi-style.com/wp-content/uploads/2023/10/color-mag7.jpg)
そうすると、色を調整するためのレバーが表示されます。
![](https://omochi-style.com/wp-content/uploads/2023/10/color-mag8.jpg)
表示されたレバーを左右に動かすことで、色の調整ができます。
![](https://omochi-style.com/wp-content/uploads/2023/10/color-mag9-2.jpg)
調整がおわったら『×』マークをクリック。
![](https://omochi-style.com/wp-content/uploads/2023/10/color-mag10.jpg)
つかいたい色のカラーコードをメモしてつかってください。
ColorMagicでアカウントを作成する方法
![](https://omochi-style.com/wp-content/uploads/2023/10/color-mag13.jpg)
こちらが表示されたら、アカウントを作成していきましょう。『無料ではじめる』ボタンをクリック。
![おもち](https://omochi-style.com/wp-content/uploads/2023/08/basic.png)
アカウントをつくると1日5回まで無料で生成してくれるよ!
![](https://omochi-style.com/wp-content/uploads/2023/10/color-mag14.jpg)
『Googleでログイン』ボタンをクリック。
![](https://omochi-style.com/wp-content/uploads/2023/10/color-mag15-3.jpg)
利用するアカウントを選択。
![](https://omochi-style.com/wp-content/uploads/2023/10/color-mag14.jpg)
再度、こちらが表示されるので『Googleでログイン』ボタンをクリック。
![](https://omochi-style.com/wp-content/uploads/2023/10/color-mag17.jpg)
料金解説のページがひらきました。
![](https://omochi-style.com/wp-content/uploads/2023/10/color-mag18.jpg)
無料でつかいたい場合は『今はやめておく』をクリック。
![](https://omochi-style.com/wp-content/uploads/2023/10/color-mag19.jpg)
これでColorMagicがつかえるようになりました。
![おもち](https://omochi-style.com/wp-content/uploads/2023/08/haha.png)
お好きなカラーパレットを見つけちゃおう!