ブログデザインにグラデーションを活用してみよう!【没個性なブログデザインに悩む人へ】

こんな人に読んでほしい

ブログデザインに個性をつけたい人

飛永けいご
飛永けいご

どうもブログ大好き人間の飛永(@chiritsumo_blog)です。

ブログのデザインに個性をつけるのってなかなか難しいですよね。

特にJINやSANGOといったWordPressの人気テーマを使用しているとあらゆるパターンが出尽くしているので差別化が難しいです。

このチリツモもSANGOを使用しています。

おしゃれなデザインに満足する一方、他のブログと似ているという点がちょっぴり残念であったりもします。

そんな中グラデーションを効果的に使用することで、個性的なデザインを演出することができるかも、ということに気づいたので紹介したいと思います。

グラデーション?古臭くない?という人へ

グラデーションというとダサいというイメージがある人もたくさんいると思います。

私は、なんとなくパワーポイントのワードアートをパッと想起してしまいますよね。

1Other201106-001.jpg
画像引用:https://www.crie.co.jp/chokotech/detail/106/

しかしグラデーションは最近のデザインのトレンドとしてブームになっているようです。

詳細はこちらの記事をご覧いただければと思いますが、

参考 ダサイと廃れた「グラデーション」が、おしゃれになってトレンドデザインに!エムタメ!

グラデーションを用いることにより、他にはないオリジナリティのある色が出せるため、ブランドのカラーを強く推し出すことが可能になるのです。

引用:https://mtame.jp/design/gradation/

とのとおり色の表現が多用となるグラデーションだとカラーのオリジナリティが出しやすい、というところが利点としてあるようです。

グラデーションを見つけるサイト

こちらの記事でグラデーションをダウンロードできるサイトが紹介されています。

参考 簡単に美しいグラデーションを作れる便利サイト4選

その中から、こちらの2サイトを使用するのがいいと思います。

pngまたはjpegでグラデーション画像をダウンロードできるからです。

参考 Web Gradients 参考 ui Gradients

まず、掲載されているグラデーションのパターンをザッと見てみましょう。

そして、自分のブログのイメージカラーと合うグラデーションを見つけましょう。

見つけ方のコツとしては、ブログのイメージをガラッと変えすぎないために、現在のブログのメインカラーを踏襲するのがよいかと思います。

SANGOを使用されている方ならカラーとしてメインカラーとアクセントカラーを設定されているはずです。

それに基づきメインカラーからアクセントカラーに変化していくようなグラデーションを探すといいかと思います。

私はメインカラーの緑から黄色っぽく変化していく115 Hidden Jaguarをダウンロードしました。

ブログにおける使用例

ブログにおける使用例としては以下のパターンが考えられます。

  • 記事アイキャッチへの使用
  • ヘッダーアイキャッチへの使用
  • SNSのヘッダー背景への使用

一つひとつ紹介していきます。

記事アイキャッチ

記事アイキャッチはSNS投稿した際に表示されるため、どれだけ目をひくか、印象付けられるかが肝になる部分です。

鮮やかなグラデーションは洗練された印象を与えるとともにタイムラインの中でも目が止まりやすいので効果的です。

Before

After

思わず目がとまり、リンクのクリックをしたくなりますね。

ヘッダーアイキャッチ

グラデーションの活用方法として、写真に重ねて(オーバーレイ)して使用することもできます。

訪れたユーザーのブログへの印象を左右するトップページのヘッダーアイキャッチを写真を使用して作成してみました。

Before

今までは設定していませんでした。

After

元画像はこちら

塵も積もれば山となるとかけて山を登りつめた人の写真を使用してみました。ちょっとわかりにくいかもですね。

写真とグラデーションを組み合わせることで独特の雰囲気を出すことができました。

SNSのヘッダー背景に使用する

SNSヘッダーもプロフィールを見た方にSNS+ブログトータルのイメージを与える重要な部分ですね。

今回は背景にグラデーションを使用し、タグライン(メッセージ)を添えて制作してみました。

Before

After

まとめ

本記事ではグラデーションの活用法をご紹介しました。

  • グラデーションはデザインの最新トレンド
  • グラデーション画像のダウンロード方法
  • ブログにおける使用例として、ヘッダーアイキャッチ・記事アイキャッチ・SNSヘッダーがある

みなさんもぜひグラデーションを活用して、ブログデザインに個性をつけてみてください。