ブログのカラー！おススメ配色！。Webサイトやブログを構築する際、それに見合ったカラーを選ぶようにしましょう。今回は、ブログのカラー！おススメ配色！について書いていきます。参考にして貰えると幸いです。
Webサイトやブログの色を決める時に大事なのが、商材のイメージと合っているかと言うことです。この章では、メインに「ブログのカラー」と「ブログの配色」方法を学んでいきます。カラー選定に悩んでいる人は参考までに。
| 結論を先に話ししておきます |
| Webデザインにおける「ブログのカラー」と「ブログの配色」に悩んだ時、どんな色を使うべきかと悩んだことはありませんか？「ベースカラー」「見出しの色」「背景色」「文字色」など、様々あると思います。
ワードプレステーマのデフォルト設定では、何となく❝パッとしない❞感が出てしまうのではないでしょうか。そんな時、雰囲気が良く、オシャレなブログに仕上げる為にも、どの色にするのかはとても大事なことだと言えます。
ですが、デザインの知識がなければ漠然としたイメージだけで、良い色の組み合わせを知ることはほぼ不可能と言えます。そんな悩みを解決する為に、カラーパターンや配色の参考になるであろうWebサイトの紹介もしていきます。
関連する投稿記事があるので、良ければ覗いて見て下さい。 |
| 圧倒的SEOに強く、上位表示されやすいWordPressテーマ！「ザ・トール」。 |
目次はコチラ
【ブログのカラーや配色のポイント(動画付き)】
ブログのカラーや配色を決める場合、大きな面積を使う「ベースカラー」、ベースカラーを補完する「サブカラー」、ブログの差し色になる「アクセントカラー」をまず最初に決めていきます。
ブログで使う色を予め決めておくことによって、デザインに統一感を持たせることができます。これは大体の目安ですが、ブログで使う色は3～4色ぐらいがベストであり、色の使い過ぎは良くないので気を付けましょう。
「白」「薄いベージュ」「黒」「グレー」など、色味のない色や彩度の低い色のことを指します。比較的、面積の広い背景などに使われることが多いです。
ベースカラーより、やや鮮やかな色と言っても良いでしょう。ベースカラーを補完する色として使われることが多いです。
鮮やかで性格の強い色と言っても良いでしょう。比較的少数使いで全体を引き締める役割があります。アクセントカラーと呼ばれることもあります。 |
ではここで動画を視聴してみて下さい。題して「配色の基本【誰もが知っておくべき知識】」です。
扱う商材のイメージは、ブログの配色を決める際に大切な要素と言えます。ブログに載せる商材を決めたのなら、その商材のイメージを書き出してみることが大事です。その際、難しく考える必要はなく、色の選定をしていきましょう。
色の種類とイメージ(動画付き)
選ぶ色によって、ブログの持つ印象が「ガラッと」変わることは言うまでもありません。例えばですが、水を使った商材であれば、青色が妥当だと思いますし、淡いピンクであれば、赤ん坊や小さな子供を連想させます。
こうした色が持つイメージを活用し、配色の選定をすることが大切だと思うのです。またブログのカラー設定やデザインを考える時は、多数のブログを見てみて、参考にするのが美しい配色にする近道と言えます。
| 色の種類 | 色が持つイメージ | ブログに使えるのは |
| 赤色。 | 「情熱」「パワフル」「興奮」「元気」「購買意欲」。 | 「ゲーム」「投資」「求人」「スポーツ」。 |
| 黄色。 | 「注意」「警告」「希望」「好奇心」。 | 「サービス業」「アパレル」。 |
| オレンジ色。 | 「美味」「明るい」「爽やか」「健康」。 | 「子供」「クリニック」「レストラン」。 |
| 緑色。 | 「癒し」「優しい」「新鮮」「安らぎ」。 | 「介護」「病院」。 |
| 青色。 | 「信頼」「安心」「冷静」「清潔」。 | 「金融」「仕業」「教育」。 |
ではここで動画を視聴してみて下さい。題して「色彩心理学を活かすテクニック」です。
【配色に悩んだ時に見る参考Webサイト7選】
ブログのカラーや配色に悩んでしまったら、この章で紹介するWebサイトを例に参考としてみて下さい。但し、あなたが持つブログの特徴や扱う商材によっては、食い違うところも出てくるかも知れません。
下記7つの項目全てに於いて、動画を載せてますが、そのほとんどが「英語版」もしくは「英語版以外」の言語です。言葉は分からなくても、視聴するだけでも勉強になると思うので、是非、視聴してみて下さいね。
NIPPON COLORS(動画付き)
突然ですが、この色、可笑しくないですか？何か変？無機質じゃないですか？急に驚かせてしまいすみません。正にコンピューターの言葉って言う感じがしませんか？この色はどんな色なんだろうと思ってしまうほどです。
そう言う人にオススメしたいのが「NIPPON COLORS」です。日本の伝統色とカラーコードを対応させています。その特徴は、何と言ってもオシャレなページでしょう。一度覗いて見る価値は十分にあるかと思います。
ではここで動画を視聴してみて下さい。題して「日本語の語彙｜色」です。
WebGradients(動画付き)
Webで利用可能なバリエーションの豊富さ、美しいグラデーションカラーのCSSコードを180種類も配布しているWebサービスです。CSS3クロスブラウザ対応のコードをワンクリックするだけでコピーし、使用することができます。
CSSでのグラデーション設定が分からない人やグラデーションの配色って難しいと思っている方には嬉しいサービスと言えます。ですが「WebGradients」は、ブログ内でカラーの微調整など、おこなうことはできないようです。
ではここで動画を視聴してみて下さい。題して「綺麗なグラーデーションはWebGradientsで見つけよう！」です。
Color Hunt(動画付き)
様々な配色パターンを提供している「Color Hunt」のカラーパレットツールです。「Color Hunt」は、様々な配色パターンを公開しているツールであり、どのように色を使うのか、どんな色を組み合わせるのかを紹介しています。
紹介する際、4色の組み合わせで紹介してくれているようです。「Color Hunt」は、種類が豊富なので色のパターンが固定化しません。また配色のインスピレーションを受けられるので、おススメと言えます。
ではここで動画を視聴してみて下さい。題して「私たちはカラーハントに行きます！｜ケイティの教室」です。
| Google広告対応・最適化WordPressテーマ！「まねきねこPPC」。 |
Coolors(動画付き)
美しいカラーパレットを生成できるツールは沢山ありますが、配色を探している時など、役立つ便利なオンラインツールが「Coolors」です。「Coolors」は、人気トレンドのオシャレな配色カラーパレットの確認や編集ができます。
写真から、色を抽出したコラージュの作成、色覚障がい診断ツールの他、配色の明るさや彩度、色温度なども調整できるなど、配色に必要なあらゆるツールが揃っています。是非「Coolors」を使ってみて下さい。
ではここで動画を視聴してみて下さい。題して「Coolors.coを使用して色を選択する方法」です。
Ultimate CSS Gradient Generator(動画付き)
グラデーションのカラーパターンを積極的に採用したい人は、こちらの「Ultimate CSS Gradient Generator」を使うのもおススメです。1つのグラデーションの中に、複数の色を追加することができます。
また複雑な色味を作ることも可能で、色の選択は、バーを選ぶだけでOKです。CSSとしても誰でも簡単にコピペすることができるので、理想形のグラデーションを作ることが十分可能となっています。
ではここで動画を視聴してみて下さい。題して「Ultimate CSS Gradient Generator」です。
ColorSupply(動画付き)
「ColorSupply」は、フラットなカラースキームに適していると言えます。カラーホイールのカラーピッカーをドラッグすると、その横に表示されるカラーカードスキームがカラーホイールの値に応じて変化します。
またタイルパターンとカラーバリューカードをオンラインでプレビューしたり、様々なカラーグラデーション効果をプレビューしたりすることも可能です。広大なカラーチャートで1つずつ試す必要もありません。
ではここで動画を視聴してみて下さい。題して「パワーポイントのスライドに適した色を選ぶ方法」です。
FLAT UI COLORS(動画付き)
フラットなデザインに最適な色を探せるWebサイトが「FLAT UI COLORS」です。使い方はとても簡単で、好みの色をクリックするだけです。カラーコードやRGBなどの色数値をコピーすることができます。
またフラットなデザインにぴったりな色を見つけられるWebサイトでもあります。色数は全20色と少ないですが、使い方がとても簡単且つ直感的に色を選んでクリックするだけ。また色数値をコピーすることもできるのが特徴です。
ではここで動画を視聴してみて下さい。題して「FLAT UI COLORS？」です。
今回は以上となります。今回のブログのカラー！おススメ配色！については、理解して頂けたでしょうか？ブログを構築する上でカラーや配色はとても大事な作業の一つと言えます。ブログに見合った色を見つけ出して見て下さい。
関連する投稿記事があるので、良ければ覗いて見て下さい。
