ペライチでブロックごとに背景色を設定できる新機能が登場しました！
前回は背景色の基本から本機能を使ったカラー別配色パターンをご紹介しましたが、今回は第2弾として「パステルカラーのおしゃれカラーセット」をご紹介♪
女性向けや子供向けのサイトを作りたい方や、サイトに優しい雰囲気や柔らかさを出したい方はぜひ参考にしてみてください！
▼前回の記事はこちら！
目次
パステルカラーとは？
パステルカラーとは、パステル（デッサンなどに用いられる画材の一種）に使われるような中間色のこと。赤・青・緑のような原色ではなく、白を混ぜたような淡い色合いであることが特徴です。
黒っぽい色はあまりなく、全体的に優しい色が多いです。
そのため、Web上で使われる際は、
- 柔らかい雰囲気のサイト
- 女性向けサイト
- 保育園や小児科など子ども関係のサイト
におすすめできるカラーです。
▲パステルカラーを使ったサイト例
色別パステル背景パターン
全体的に淡い色が多いパステルカラーは背景色にはピッタリ！
今回はピンク系・ブルー系など色系統別の配色パターンをご用意。
おまけとしてメインカラーや文字色の色コードもご紹介しますので、それぞれコピペしてご利用ください＾＾
背景色の設定方法
ペライチで背景色を設定するには2通りの方法があり、両方を組み合わせることも可能です。
メインカラーや文字色の設定をする場合
「テーマカラー変更」＞「テーマカラーカスタマイズ」で設定ができます。
※こちらの設定をするためにはビジネスプランへの加入、もしくは「テーマカラーカスタマイズオプション」「デザインカスタマイズオプション」いずれかのご契約が必要です
特定のブロック背景のみを変更する場合
設定したいブロックの「背景設定」＞「背景色の設定」から設定ができます。
ピンク系
かわいいカラーといえば！なピンク系はパステルでもよく使われるカラーの1つです。
ベージュや茶色との相性も抜群なので、ベースをピンクにしつつ、文字色やポイント使いで別の色を合わせるのがおすすめです。
【色コード】
背景色：#FFF5F9
メイン：#EF858C
文字色：#6F4400
【色コード】
背景色：#FFFCF3
メイン：#EF7B7B
文字色：#DF8F8F
ブルー系
ピンク系と同じくパステルカラーでよく使われるのがブルー系です。
寒色のブルーですが、白が混じることにより柔らかさが増し、優しい雰囲気を出すことができます。
また、知的さや清潔さを演出することもできるのでキレイ系のサイトにもおすすめです。
【色コード】
背景色：#EEFAFF
メイン：#8FDCFF
文字色：#666666
【色コード】
背景色：（濃）#E1F6FD （薄）#F3FFFC
メイン：#F4A79C
文字色：#7C878F
パープル系
上品さを出せるパープル系は女性向けサイトにおすすめのカラー。
パステルのかわいらしさはありつつ、大人っぽい雰囲気も出すこともできます。
【色コード】
背景色：#E5E5F7
メイン：#5850B0
文字色：#5850B0
【色コード】
背景色：（濃）#A3AFD5 （薄）#F7F3FF
メイン：#D596AB
文字色：#B8A7BF
グリーン系
さわやかさと柔らかさのバランスが絶妙なグリーン系。
アロマやマッサージなど、癒しに関連するサイトに特におすすめできるカラーです。
【色コード】
背景色：（濃）#E0EFD0 （薄）#F0FFF0
メイン：#008B8B
文字色：#333333
イエロー系
サイト全体を一気に明るくしたいならイエロー系がおすすめ。
濃いイエローは目に負担がかかるため、淡いベージュような使い方をするとGoodです。
【色コード】
背景色：（濃）#FEF9BB （薄）#FAFAE6
メイン：#FFC000
文字色：#333333
オレンジ系
イエロー系と同じくサイトをパッと明るくできるオレンジ系。
ベージュや茶色とも近い色なので、明るさだけでなく、落ち着きも表現することができます。
【色コード】
背景色：（濃）#F0CC8E （薄）#FFFAE1
メイン：#E8A048
文字色：#B47020
レッド系
力強さやエネルギッシュさを表すレッド系はパステルにすると少しソフトな印象に。
子どもが対象のサイトなど、強すぎないカラーで元気さや活発さを表現したいサイトにおすすめです。
【色コード】
背景色：（濃）#FFE8E8 （薄）#FFFFFF
メイン：#E9717A
文字色：#A37058
パステルの背景色を活用しよう！
今回はパステルの背景色についてご紹介しました。
ペライチでは一括でもプロックごとでの背景色の設定が可能なので幅広いデザインが可能です。
ぜひ、記事を参考にペライチでサイトを制作してみてください＾＾
【30日間ビジネスプランが無料！ペライチに登録する】
https://peraichi.com/
【ペライチの操作で迷ったら全国のサポーターに相談できる！ペラナビはこちら】
https://navi.peraichi.com/
