更新日:2022-01-10 /記事:WHSRGuest

サインアップしました WordPress、そしてあなたはする準備ができています 最初のウェブサイトを構築する。 The problem is, you have no idea how you want it to look like.問題は、どのように表示したいかがわからないことです。 You can't simply pick aあなたは単に選ぶことはできません テーマ そしてそれに固執します—完璧な配色を選択することも重要です。

Sounds scary?怖いですか? Don't worry.心配しないでください。 I've gathered some stunning examples of website color schemes that you can take inspiration from.私はあなたがインスピレーションを得ることができるウェブサイトの配色のいくつかの素晴らしい例を集めました。 We'll also discuss what to do to choose the perfect palette for your website.また、Webサイトに最適なパレットを選択するために何をすべきかについても説明します。




大きな企業名は通常、それらの色を使用します ロゴ ウェブサイト、広告、その他のブランディングの取り組みに。 たとえば、FedEx は紫とオレンジを使用しますが、PayPal は青のいくつかの色合いを選択します。 それらの色を一貫して使用することにより、一般の人々はその特定の配色をブランドに関連付けます。



あらゆる 人口統計グループ has its own color preference.独自の色の好みがあります。 Their taste could be influenced by their upbringing, culture, society, and many other factors.彼らの味は、彼らの育成、文化、社会、および他の多くの要因によって影響を受ける可能性があります。
たとえば、色は 異なる意味 in different cultures.異なる文化で。 Black typically means elegance, but in some cultures, it represents suffering.黒は通常、優雅さを意味しますが、一部の文化では、苦しみを表しています。

Companies have used the effects of colors for their own benefits.企業は、自社の利益のために色の効果を使用しています。 For instance, kids usually react more positively to bright colors.たとえば、子供たちは通常、明るい色に対してより積極的に反応します。 Thus, a website likeしたがって、次のようなWebサイト PBSキッズ 明るい配色で子供を惹きつけます。


最近の 研究 reveals that CTA buttons with high-contrast colors have high conversion rates.コントラストの高い色のCTAボタンのコンバージョン率が高いことがわかります。 This means that the button should be in a color that stands out against the website's color scheme.これは、ボタンがWebサイトの配色に対して目立つ色である必要があることを意味します。



The easiest way to select a good color scheme is by using color generators.適切な配色を選択する最も簡単な方法は、カラージェネレーターを使用することです。 Here are some tools you can use:使用できるツールは次のとおりです。

  • カラースパイア–Webサイトテンプレートで色をプレビューします。
  • パレットン–さまざまなレイアウトで配色がどのように見えるかを確認します。
  • クーラー–選択した画像から配色を生成します。


  1. ドミナントカラーを選択。 Webサイト全体でブランドの色を使用することをお勧めします。
  2. 二次色を選ぶ。 These colors complement or strengthen your dominant color.これらの色は、支配的な色を補完または強化します。
  3. 色を配置する場所を決定する。 Some people like to use the dominant color for emphasized features like buttons and links.ボタンやリンクなどの強調された機能にドミナントカラーを使用することを好む人もいます。 Others might use it for large visual elements, while the secondary colors are for texts.他の人はそれを大きな視覚要素に使用するかもしれませんが、二次色はテキスト用です。 Explore the options and find the best one for you.オプションを調べて、あなたに最適なものを見つけてください。
  4. 背景色を選択してください。 People typically choose a neutral tone to keep the website readable.人々は通常、ウェブサイトを読みやすくするためにニュートラルなトーンを選択します。


ウェブサイトの38%以上がWordPressを使用しています、インスピレーションとして使える8種類の配色を厳選しました WordPress サイト:


明るく鮮やかな色は、活気に満ちたエネルギッシュなトーンを設定したいWebサイトに最適です。 Climate Optimistのウェブサイトは、そのような色の良い使い方を例示しています。 気候変動組織として、彼らは人々をキャンペーンに参加させるために積極性と自信を刺激したいと考えています。 これは、黄色、ピンク、緑の配色で具体化されています。


Webサイトをエレガントに見せたい場合は、ミュートトーンの使用を検討してください。 They may not be as eye-catching, but the right color combination can appear stylish.それらは人目を引くものではないかもしれませんが、適切な色の組み合わせはスタイリッシュに見える可能性があります。

This website by Mosole, an Italian winery, aims for such a tone.イタリアのワイナリーであるMosoleによるこのウェブサイトは、そのようなトーンを目指しています。 They desaturate earthy colors like brown and green and create a classy effect that still represents their brand as a winery.ブラウンやグリーンなどのアースカラーの彩度を下げ、ワイナリーとしてのブランドを表す上品な効果を生み出します。

3。 ライト

If you want your website to look inviting, I recommend using lighter shades.ウェブサイトを魅力的に見せたい場合は、明るい色合いを使用することをお勧めします。 Like a comfortable home, a pleasant website makes visitors want to spend more time on your page.快適な家のように、快適なウェブサイトは訪問者にあなたのページにより多くの時間を費やしたいと思わせます。

Bosumhus, a home builder website, presents an excellent example of this color scheme.住宅建設業者のウェブサイトであるBosumhusは、この配色の優れた例を示しています。 While the texts are dark, other elements are mostly in light brown and beige with hints of earth green here and there.テキストは暗いですが、他の要素はほとんどがライトブラウンとベージュで、あちこちにアースグリーンのヒントがあります。 The website is also a good illustration of how your pictures can represent your color palette.このWebサイトは、写真がカラーパレットをどのように表現できるかを示す良い例でもあります。

4 ダーク

In contrast to light colors, dark hues usually symbolize mystery.明るい色とは対照的に、暗い色合いは通常謎を象徴しています。 Additionally, it is used to represent modernity and futurism.さらに、それは現代性と未来派を表すために使用されます。
この例では、Critical TechWorksは暗い色を使用して、次世代のテクノロジー企業としてのアイデンティティを補完しています。

The website also illustrates how you can use dark colors while also being captivating.このWebサイトには、魅力的でありながら暗い色を使用する方法も示されています。 Although most of the colors are deep, the website also uses neon blue for highlights.ほとんどの色は濃いですが、ウェブサイトではハイライトにネオンブルーも使用しています。

5 パステル

Pastels have been a design trend for the past few years.パステルは、過去数年間のデザイントレンドです。 These colors are soft and washed out, and they aim to look soothing.これらの色は柔らかく、色あせており、落ち着いた印象を与えることを目指しています。

It's typically associated with infants as these colors are often found in nurseries.これらの色は保育園でよく見られるため、通常は乳児に関連しています。 However, many websites use these colors to appeal to the young demographic as well.ただし、多くのWebサイトでは、これらの色を使用して若い人口統計にもアピールしています。

Mont-RoucousのWebサイトは、パステルカラーを使用した優れた例です。 Since their products are intended for babies, they use soft pink and blue for their brand.彼らの製品は赤ちゃん向けであるため、ブランドには柔らかいピンクとブルーを使用しています。


If you don't know how to combine colors, try choosing one color and make your entire website monochromatic.色を組み合わせる方法がわからない場合は、XNUMXつの色を選択して、Webサイト全体を単色にしてみてください。 This means you will only use different shades of the same color throughout your page.これは、ページ全体で同じ色の異なる色合いのみを使用することを意味します。

Brightscoutは、同じページでさまざまな色合いの緑を使用する方法を示しています。 Although everything is predominantly green, using both light and dark shades prevent the page from looking flat.すべてが主に緑色ですが、明るい色と暗い色の両方を使用すると、ページが平らに見えなくなります。


Accent colors refer to those that are used to emphasize important elements.アクセントカラーは、重要な要素を強調するために使用される色を指します。 These colors are used sparingly, and some websites use their brand color as the accent color.これらの色は控えめに使用されており、一部のWebサイトではブランド色をアクセント色として使用しています。
For instance, Frakton uses a predominantly black and white color palette with pops of yellow here and there.たとえば、Fraktonは、主に白黒のカラーパレットを使用し、あちこちに黄色のポップがあります。 The black and white scheme helps draw all the attention to the yellow highlights, so the accent color is used for buttons, emphasized texts, and headers.白黒のスキームは、黄色のハイライトにすべての注意を引くのに役立つため、ボタン、強調されたテキスト、およびヘッダーにはアクセントカラーが使用されます。


Some websites like to employ two contrasting colors to create a striking visual impact.一部のWebサイトでは、XNUMXつの対照的な色を使用して、印象的な視覚的インパクトを作成しています。 These colors usually sit on the opposite ends of the color wheel.これらの色は通常、カラーホイールの両端にあります。

Turner Dairy utilizes red and blue to juxtapose their dairy products with their non-dairy goods.ターナーデイリーは、赤と青を利用して、乳製品と非乳製品を並置しています。 They maintain this contrast throughout their website.彼らはウェブサイト全体でこのコントラストを維持しています。 The buttons and headlines are mostly in red, while the visual elements are in blue.ボタンと見出しはほとんど赤で、視覚要素は青です。 They also use a white background for readability.また、読みやすくするために白い背景を使用しています。


Choosing the right color scheme isn't just about combining beautiful colors together.適切な配色を選択することは、美しい色を組み合わせるだけではありません。 It's about picking one that is right for your brand, audience, and user engagement.ブランド、オーディエンス、ユーザーエンゲージメントに適したものを選ぶことです。

If you want a fuss-free process in finding a good palette, use color generators.良いパレットを見つけるのに手間のかからないプロセスが必要な場合は、カラージェネレーターを使用してください。 Decide ones that would be your dominant, secondary, and background colors.ドミナント、セカンダリ、および背景色となるものを決定します。 You'll also need to think about how each color should be placed on your website.また、各色をWebサイトにどのように配置するかについても考慮する必要があります。

Although I've only listed 8 color schemes, there are endless color combinations you can try for your WordPress website.私はXNUMXつの配色しかリストしていませんが、WordPressWebサイトで試すことができる色の組み合わせは無限にあります。 So, don't be afraid to experiment, and good luck.だから、実験することを恐れないでください、そして幸運を。


著者について:Simon Dwight Keller

Simon Dwight Kellerは、クリエイティブで説得力のあるコンテンツを使用して、ウェブサイトへの大量のトラフィックを促進することを熱望しているデジタルマーケティング起業家です。 フリーランサーとしてXNUMX年間懸命に働いた後、彼はサービスを次のレベルに引き上げることを決意し、デジタルマーケティング会社PRableを共同設立しました。 最終的に、サイモンは、より多くのことを達成するために、彼自身の会社であるSDKマーケティングを立ち上げる必要があると感じました。 彼の小さなプロのチームで、彼は新しい挑戦に挑戦し、あなたのトラフィックを増やし、より多くの収入を生み出す準備ができています。 彼の燃える情熱に加えて SEO、彼はアイスホッケーと旅行に興味があります。 サイモンとつながる LinkedIn.

WHSR Guestについて

この記事はゲストの貢献者によって書かれました。 以下の著者の意見は完全に自分のものであり、WHSRの見解を反映していない可能性があります。