peraichi.com
Open in
urlscan Pro
99.84.54.46
Public Scan
Submitted URL: http://url1184.peraichi.co.jp/ls/click?upn=KPyL9gQGyfTWlQfU-2F3e4JArUeGDw5m-2BWacDMwS3BFEL-2B6WZC1BVAOdemxHGSbmdT4ZquLaKNe-2BG...
Effective URL: https://peraichi.com/univ/20220207?mail=0215
Submission: On February 15 via api from US — Scanned from JP
Effective URL: https://peraichi.com/univ/20220207?mail=0215
Submission: On February 15 via api from US — Scanned from JP
Form analysis 1 forms found in the DOM
GET https://peraichi.com/univ/
<form method="get" class="searchform" action="https://peraichi.com/univ/" role="search">
<input type="text" placeholder="検索" name="s" class="s">
<input type="submit" class="searchsubmit" value="">
</form>Text Content
ペライチの作り方に関する知識やノウハウをシェアするメディア * HOME * ペライチ大学とは * ペライチ * インタビュー * ホームページ * ビジネス * サイトマップ * HOME * ペライチ大学とは * ペライチ * インタビュー * ホームページ * ビジネス * サイトマップ * ホーム * ホームページ * 【コピペOK】サイト背景配色パターン集 〜パステルカラーでかわいくおしゃれなサイトに〜 ホームページ デザイン 【コピペOK】サイト背景配色パターン集 〜パステルカラーでかわいくおしゃれなサイトに〜 2022年2月9日 2022年2月14日 * * ペライチ大学編集部 * Facebook * Twitter * Google+ * はてブ * Pocket * Feedly ペライチでブロックごとに背景色を設定できる新機能が登場しました！ Video Player https://peraichi.com/univ/wp-content/uploads/2022/01/DA139CE9-AF58-41E4-9DC6-784E410A3E96.mp4 00:00 00:00 00:06 Use Up/Down Arrow keys to increase or decrease volume. 前回は背景色の基本から本機能を使ったカラー別配色パターンをご紹介しましたが、今回は第2弾として「パステルカラーのおしゃれカラーセット」をご紹介♪ 女性向けや子供向けのサイトを作りたい方や、サイトに優しい雰囲気や柔らかさを出したい方はぜひ参考にしてみてください！ ▼前回の記事はこちら！ イメージの色別サイト背景配色パターン集 背景色でおしゃれなサイトに♪ 2022.1.27 ペライチでブロックごとに背景色を設定できる新機能が登場しました！ そこで今回は、ホームページの背景配色の基本から配色パターンまでお伝え！ ご自身の作りたいサイトのイメージに合わせてぜひご活用ください＾＾ ▼配色全般の基本を知りたい方はこちら！ 背景色の基本 まずは背景色を決めるときの基本をお伝えし... 目次 [閉じる] * 1 パステルカラーとは？ * 2 色別パステル背景パターン * 2.1 ピンク系 * 2.2 ブルー系 * 2.3 パープル系 * 2.4 グリーン系 * 2.5 イエロー系 * 2.6 オレンジ系 * 2.7 レッド系 パステルカラーとは？ パステルカラーとは、パステル（デッサンなどに用いられる画材の一種）に使われるような中間色のこと。赤・青・緑のような原色ではなく、白を混ぜたような淡い色合いであることが特徴です。 黒っぽい色はあまりなく、全体的に優しい色が多いです。 そのため、Web上で使われる際は、 * 柔らかい雰囲気のサイト * 女性向けサイト * 保育園や小児科など子ども関係のサイト におすすめできるカラーです。 ▲パステルカラーを使ったサイト例 色別パステル背景パターン 全体的に淡い色が多いパステルカラーは背景色にはピッタリ！ 今回はピンク系・ブルー系など色系統別の配色パターンをご用意。 おまけとしてメインカラーや文字色の色コードもご紹介しますので、それぞれコピペしてご利用ください＾＾ ※メインカラーや文字色の設定にはテーマカラーカスタマイズ機能が必要です ピンク系 かわいいカラーといえば！なピンク系はパステルでもよく使われるカラーの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/ * Facebook * Twitter * Google+ * はてブ * Pocket * Feedly この記事を書いた人 ペライチ大学編集部 「ペライチ」を利用するときに役立つ情報・活用方法などを発信します！ 関連キーワード デザイン ホームページの関連記事 * 【コピペOK】サイト背景配色パターン集 〜パステルカラーでかわいくおしゃれなサイトに〜 2022年2月9日 * イメージの色別サイト背景配色パターン集 背景色でおしゃれなサイトに♪ 2022年1月27日 * 【例文付き】ホームページのプロフィールの書き方！ビジネス成功に繋がるポイント11個 2021年12月16日 * 【例文付き】集客に効果的なホームページのサイト説明文の書き方 2021年10月6日 ホームページがかんたんに作れるペライチ おどろきの簡単さ、早さ、安心を提供！ だれでもあっという間に ホームページが作れます。 今すぐホームページを作ってみる！ * 【2022年1月】ペライチバージョンアップまとめ おすすめの記事 ホームページ 売れるLP（ランディングページ）の作り方！制作や改善のコツを解説 WEBマーケティングの成果を上げるために、LP（ランディングページ）を活用するケースはとても多いです。 しかし、なかなか思うような成果を上げ... ビジネス 個人事業主必見！スモールビジネスを開業する際の届出手続きについて 何か新しく個人事業主としてビシネスを始める時に提出しないといけない開業届。事業開始から１ヶ月以内に提出することが義務付けられていますが、実は... ホームページ Adobe Photoshop Express Editorの使い方は?ブラ… Photoshop Express Editorは、ブラウザから無料で使える画像加工サイトです。Photoshopで有名なAdobe社の公式... ホームページ ホームページ（Webサイト）はどう作ればよい？作成手順をご紹介 ホームページを使ってインターネットで集客したい、認知度を上げたいと行った事はありませんか？ 最近ではホームページを活用したいという法人や個人... ビジネス デスクトップを整理して仕事を効率化！壁紙を使ってファイルを管理 パソコンを使って仕事をしていると、どうしても気になってくるのがデスクトップの画面です。便利だからと何でもデスクトップに置いていると、あっとい... ホームページ Icons8の使い方とライセンスなど 商用利用OK・無料で使えるアイコン素材… Icons8は、3万点以上ものおしゃれなアイコンが揃ったアイコン素材サイトです。無料で利用するには、Icons8へのリンクが必要ですが、商用... インタビュー 【ペライチとイベント主催者】笹野様のインタビュー こんにちは、ペライチ編集部の長富です。 今回は、「ペライチとイベント主催者」ということで、働くなでしこというイベントを主催されている販促工房... ホームページ スマホ対応ホームページの作り方！ノーコードで誰でも簡単にできる方法をご紹介 ホームページを作ろうとすると、「ホームページをスマホに対応させる」といった言葉を目にしたことはありませんか？ 今やほとんどの方が持っているス... ページを検索 おすすめ記事 * ペライチ決済の使い方は?誰でも簡単に決済機能を追加できる! * ホームページを簡単に作れるおすすめツールをご紹介！メリットとデメリットも解説 * オンライン決済とは？サービスの種類や導入の方法を解説【保存版】 * ペライチの料金プラン、使い方を実際の画面を見ながらご紹介 新着記事 * 【コピペOK】サイト背景配色パターン集 〜パステルカラーでかわいくおしゃれなサイトに〜 * 【2022年1月】ペライチバージョンアップまとめ * イメージの色別サイト背景配色パターン集 背景色でおしゃれなサイトに♪ * 【新機能】ワンクリックでサイトを好きなデザインに変えられるテーマ変更機能がリリース！特徴や基本の使い方を解説 * ペライチの「ページ情報編集」まとめ│各項目の解説からおすすめ設定まで * 【2021年12月】ペライチバージョンアップまとめ * サービスサイトの作り方！多階層ホームページの構造とおすすめの構成もご紹介 * 【例文付き】ホームページのプロフィールの書き方！ビジネス成功に繋がるポイント11個 カテゴリー * インタビュー * ビジネス * ペライチ * ホームページ * HOME * ペライチ大学とは * ペライチ * インタビュー * ホームページ * ビジネス * 運営会社 * お問い合わせ * サイトマップ ペライチ大学 All Rights Reserved.