40代から始める育毛・発毛・ハゲ対策と自重筋トレ - ハゲブロガー自己進化系ブログ

EVOREC

WordPress

WordPressテーマの配色に悩んだら参考にしたい配色パターン見本サイト4選

投稿日:

WordPressでブログをする際に、意外と悩むのがWordPressテーマの配色。

  • サンプルのWordPressテーマはすごく見栄えがよかったのに、いざ使い始めてみるとパッとしないブログになっていた
  • 自分で見てもなんでかはわからないがダサイブログだ

なんてことがありますよね。

その原因のひとつは配色にあるかも。

しかしながら、Wordpress初心者やド素人が知識のないまま配色をすると、ゴチャゴチャして落ち着きがなくなったり、自分がイメージしていたかっこいいブログやかわいいブログ、落ち着いたブログにはなかなかできなかったりするもの。

Webデザイナーと名乗っている人達の中にも配色のセンスがなくダサイWordPressブログを運営している方がいるくらいなので、僕達初心者は参考にできるサイトをしっかり見ながら、自分のイメージするブログに仕上げていきたいものです。

デックン
そこで今回はWordPress初心者&ド素人が配色を参考にできるサイトを集めてみました。

配色パターン見本サイト01 - COLOURlovers

COLOURlovers.com

Photo:COLOURlovers.com

COLOURlovers  http://www.colourlovers.com

COLOURloversは、色の組合せやパターンを様々な人々が投稿し、「これ大好き(いいね)」の投票数でランキングが見れたり、雑誌やウェブサイトで今どんな配色が多く使われているかを見ることができるコミュニティサイト。

メンバー登録もできますが、登録なしでも利用できます。

COLOURloversの使い方

メインで使いたい色が決まっていれば、メインの色から配色のパターンを探すこともできます。

例えば「」をメインで使いたい場合、ページ右上にある検索窓に「red」と入力し、必要であれば検索ボタン左にあるボタンから「パレット(Palettes)」「パターン(Patterns)」「パターンテンプレート(Pattern Templates)」「図形(Shapes)」「色(Colors)」「登録メンバー(Lovers)」を選択し、検索します。
」をメインとした配色パターンを知りたいのであれば、「パレット(Palettes)」のままで検索すればOKです。

COLOURlovers 検索方法

Photo:COLOURlovers.com

」「パレット(Palettes)」で検索した結果が、ズラッと出てきます。

COLOURlovers 検索結果

Photo:COLOURlovers.com

検索結果の中から気になった配色を選択しクリックすると、ページ中央部(画像では最下部あたり)にその配色パターンの各色のHEXカラーコードやRGBを見ることができます。

COLOURlovers 検索結果

Photo:COLOURlovers.com

WordPressのテーマ色を変える場合は、HEXカラーコードをコピー&ペーストしましょう。

ちなみに当ブログは、COLOURloversの中にあった「アメリカの馬鹿(american idiot)」という配色を使ってます。

配色パターン見本サイト02 - Color of Book

Color of Book

Photo:Color of Book

Color of Book  http://colorchart.jp/

Color of Bookは、男性誌・女性誌などの雑誌の配色を参考にできるサイト。

  • 「書籍全般から探す」はAmazonで取り扱っている書籍から検索をしてくれ、気になった書籍のカラーコードを判別してくれます。
  • 「ファッション誌から探す」は、「性別」「ジャンル」「雑誌名」で検索ができ、選択した雑誌のカラーコードを判別してくれます。
  • 「スポーツ誌から探す」は、「スポーツの種別」「スポーツ名称」「雑誌名」で検索ができ、選択した雑誌のカラーコードを判別してくれます。

気になった雑誌のカラーコードを判別後、Photoshop用のカラーパレットが用意されており、書籍のカラー情報をPhotoshopの「スウォッチの読み込み」で簡単に取り込むことができます。
Photoshopユーザーにとってはありがたいですね!

配色パターン見本サイト03 - Web Colour Data

Web Colour Data

Photo:Web Colour Data

Web Colour Data  http://webcolourdata.com/

Web Colour Dataは、Goole、Yahoo、Facebookなどの有名人気サイトの配色の他に、気になったサイトやブログのURLを入力するとカラー配色を解析してくれ、近似色のサイトも表示してくれます。

配色パターン見本サイト04 - design shack

design shack

Photo:design shack

design shack  https://designshack.net/gallery/

design shackは、ウェブデザイン情報サイト。design shack内の「GALLERY」ページで、配色パターンの検索が可能。
ウェブデザインのタイプ別での検索や、ブランディングのタイプ別、インターフェースデザインのタイプ別で検索ができる他、色でも検索ができます。
カラー配色の検索だけでなく、ウェブデザインに役立つ記事が多数あるので参考になりますね。
英語なのでGoogle翻訳必須ですが(笑)

あとがき

WordPressテーマのサンプルってほんと素敵に見えるんですよね。

いざ自分が使ってみると、ほんとダサくなることが多いですが、配色を正しく整えるだけでも見た目が随分変わります。

色の配色は奥が深く、知れば知るほど面白いんだとは思いますが、初心者には難しい。

今回紹介したサイトは、雑誌や人気サイトなどの具体的な配色を真似できるような見本サイトばかりですので、初心者でも比較的わかりやすいサイトを集めたつもりです。

是非活用してご自身のサイトやブログのレベルアップに役立てていただけると幸いです。

デックン
WordPressのサンプルが素敵に見える一番の原因は、アイキャッチ画像がかっこよかったり可愛かったりするからなんですがね^^;

おすすめ記事

M字ハゲとつむじハゲ 1

ハゲというのは日々の積み重ねである。 1本、また1本…いや…100本、また100本と抜けていったことだろう。 僕がどのように今のハゲっぷりに至ったのかを振り返ってみよう。 天パがイヤだった少年時代 あ ...

2

育毛・発毛にハゲむ前に、自分の頭皮の状態をよく理解しておくことが必要です。 自分の頭皮にあった育毛剤や育毛シャンプーを知る上でも事前に調べておきましょう。 このページでは、自宅で簡単にできる頭皮チェッ ...

筋トレ初日メニュー 3

筋トレを始めようとは思ったものの、どんなトレーニングをしたらいいのかわからない。 40代後半の筋トレなのでいきなりキツイと続かなそう。 そんなことを考えて迷った挙句、行き着いたのはYouTube。 Y ...

筋トレ芸能人 4

皆さんが「細マッチョ芸能人・有名人」と聞いて最初に思い浮かべるのはどなたですか? 中年でも細マッチョで同性でも憧れてしまう芸能人や有名人っていますよね。 今日は僕が目指している憧れの細マッチョ芸能人・ ...

-WordPress
-, , , , , , , , ,

Copyright© EVOREC , 2017 All Rights Reserved.