「ブログを始めてみたけど、記事どうこう以前にデザインが決まらない」という方!それ「ブロガーあるある」なので心配しなくて大丈夫ですよ。今となっては大して弄りまわすような箇所もありませんが、ブログ開設当初の私は「それっぽいデザイン」を整えるのに四苦八苦したものです。お陰でそれなりにデザイン(?)できるようにもなりました。悩ましいのが「配色」なんですよね。Color」は画面をクリックする度に、新しい配色を提案してくれるツール(サイト)です。特徴は「コントラスト」に重点が置かれているところですね。Color」のページ下部ですね。上段の7色はメイン2色の「グラデーション」、下段の5色はメイン2色と相性の良い「アクセントカラー」となっています。他のツールでもグラデーションやアクセントカラーを提案してくれるものがあるので、それらを組み合わせて使ってもいいのですが、これだけあれば不要でしょう。色数がちょうどいいのもポイントです。Colorの使い方」をご紹介していきたいと思います。Color」の使い方【私の場合】はとろひ全然関係ないけど、中学生の頃「バーミリオン」という色が好きでしたw「カラーコード」について(初心者向け)本題に入る前に、念のため「カラーコード」について触れておきましょう。カラーコードは「#1234ab」のように「#」以下6桁の英数字によって色を表現する記法のことです。「RGB(赤緑青)」の「色光の3原色」をそれぞれ「1バイト(256通り)」ずつ加法混色することで複雑な色を表現できます。そのため、使われる英数字は16進法の「0~9、a~f」です。「#」以下6桁の英数字のうち始めの2桁がR(赤)、真ん中の2桁がG(緑)、最後の2桁がB(青)を表していて、白色が「#ffffff」、黒色が「#000000」となっています。Webデザインではこのコードを使って色をやりとりします。Color」を見れば色ごとにカラーコードが表示されていることが分かりますね。気に入った色があれば、それをコピペしてWPテーマのカスタマイズに使いましょう。Color」を眺めてみて、インスピレーションでちゃちゃっと配色を選んでしまっても構いませんが、できれば気を付けてほしいポイントがあります。それが「ビビッドカラー&ネオンカラーは避ける」という点です。「ビビッドカラー」は鮮やかな色、具体的には「高明度・高彩度な色」のこと。「ネオンカラー」はネオンサインを想起させるような色、分かりやすく例えると「目がチカチカするような色」のことです。ビビッドカラーは上手く使えば「明るい印象」を与えることができますが、失敗すると「垢ぬけない印象」を強めてしまいます。デザインを修めていない私たちは無難に使用を避けるべき「難易度の高い色」なのです。ネオンカラーを避けるべき理由は分かりやすいと思います。当たり前ですが、ブログは心地よく見てもらうに限ります。眺めているだけで目の負担になるような配色は百害あって一利なし。避けるに越したことはありません。はとろひ鮮やかな色を避けつつ、好きな色を見つけましょう!「メインカラー」と「中間色」で全体を整えるお気に入りのコントラストが見つかったら、WPテーマのカスタマイズに反映させていきましょう。サイトの全体的なカラーリングは「ヘッダー」「フッター」「背景」で決まります。サイトの大枠となる「ヘッダー」「フッター」は、メインカラーとグラデーションで統一するとサイト全体が整った印象になるので◎!メイン2色のうち気に入っている方(とそちら側に近いグラデーション)を使いましょう。Color」のコントラストは重たいことが多いので、「背景」にもそのままもう一方のメインカラーを採用してしまうと、全体的に暗い雰囲気になってしまうことがあります。そんな時は、シンプルに色を薄めちゃいましょう。「中間色ジェネレーター」なんかが使いやすいですね。背景にしたいメインカラーと白「#ffffff」の中間色か、それを白でさらに薄めた中間色を「背景」にすることで、サイト全体の雰囲気が格段に明るくなると思います。このサイトでは「#2c4b82」のコントラストをそのまま使っていますが、そういった場合はサイトの背景ではなく、「投稿ブロックの背景」を「薄めに薄めた中間色」にするのがおすすめです。することで、メインカラーの「重いコントラスト」と「明るすぎる白」との違和感を中和することができます。ちなみに、このサイトの白は全部「#f9fafc」(メインカラー「#2c4b82」を白「#ffffff」で5回薄めた色)です。「アクセントカラー」で細かい装飾を攻めるブログは運営していくうちに、記事のサムネイルや広告で徐々に賑やかになっていきますが、それとは別に「もう少しだけ色味が欲しいポイント」が出てくるものです。そんな時に「アクセントカラー」は使えます。この記事でいえば「見出し」「カテゴリータグ」「アイキャッチ背景」に「#2c4b82」からアクセントカラーを採用しています。全色使う必要もありませんが、使っても問題ありません。アクセントはあくまでアクセントなので使うポイントを限定しましょう。透明度を上げたり、細いライン状の装飾に使ったりすると、よりスッキリした印象になると思います。コントラストを選ぶ段階でアクセントカラーのバリエーションを確認しておくと万全ですが、「コントラストは気に入ったのに良い感じのアクセントカラーがない」という問題の解決策もあります。「カラーコード」の項で触れましたが、「#」以下6桁の英数字は2桁ずつR(赤)G(緑)B(青)を表しています。分かりやすく表記すると「#RRGGBB」といった感じです。そこで、メインカラーかアクセントカラーのコード「#RRGGBB」を「#GGBBRR」や「#BBGGRR」のように入れ替えてみてください。(例:「#1234ab」→「#34ab12」)検索してみると、似たような味わいの色が見つかると思います。そちらの色も選択肢に入れることができるはずです。注意点としては、たとえば「RR」が「1e」という値だったとしたら、それを「e1」に変えてしまわないように!ということですね。2桁セットは崩さないようにしましょう。最後までご覧いただきありがとうございます。Color」を使ってみてくださいね。ここまでいって何ですが、「ベースとサブカラーは白灰、アクセントはビビッドカラー単色」という配色でも人気を博すブログはいくらでもあります。ブログの価値を決めるのはあくまで「コンテンツ」だからです。デザインやカラーリングも大切ですが、そればかりに気を取られ記事の更新を怠ってしまえば、せっかくのデザインも無意味になります。今回の内容でいえば「全体を整えた段階」で、記事執筆に注力し始めた方がいいと思います(と反面教師が語っています。細かい装飾や配色は、記事執筆の息抜きにすると効率が◎です。マンガ読み放題」その他サービスが利用可能です!詳細はこちら:Amazonプライム歴4年半の私が本気でおすすめしたい会員特典をご紹介まずは無料体験fa-arrow-circle-downHISTORYLIVINGLIVINGBOOKおすすめ記事HISTORY人類はいつから食べ物に火を通すようになったのか。して肉を焼くのか何とも美味しそうなお肉(アイキャッチ画像のやつです)。こんな贅沢なものにはあまりお目にかかれませんが、私たちは日々多くの食べ物を口にします。...PHILOSOPHYチャーハンの動画はなぜ荒れるのか。旅行、ランニング、スポーツにアウトドア、アニメや漫画、それにゲーム。「Amazonプライム」会員歴4年半の私がおすすめの「会員特典」をご紹介します。毎日を素敵にコーディネートする感覚を一度でも味わってしまえば...HISTORYなぜクリスマスにプレゼントを贈るのか。今年はどうも暖かい日が続きますが、気付けば12月。悲しいことに、人は誰しも、自分の外見に少なからずの不満があるものです。いつから食べ物に火を通すようになったのか。エコーと美少年ナルキッソス。Reserved.トップページ:HOMEブログ:BLOG暮らし:LIVING書籍:BOOK歴史:HISTORY社会哲学:PHILOSOPHYプライバシーポリシー:POLICYサイトマップ:SITEMAPお問い合わせ:CONTACT。