ブログデザインに個性をつけたい人
どうもブログ大好き人間の飛永（@chiritsumo_blog）です。
ブログのデザインに個性をつけるのってなかなか難しいですよね。
特にJINやSANGOといったWordPressの人気テーマを使用しているとあらゆるパターンが出尽くしているので差別化が難しいです。
このチリツモもSANGOを使用しています。
おしゃれなデザインに満足する一方、他のブログと似ているという点がちょっぴり残念であったりもします。
そんな中グラデーションを効果的に使用することで、個性的なデザインを演出することができるかも、ということに気づいたので紹介したいと思います。
グラデーション？古臭くない？という人へ
グラデーションというとダサいというイメージがある人もたくさんいると思います。
私は、なんとなくパワーポイントのワードアートをパッと想起してしまいますよね。
しかしグラデーションは最近のデザインのトレンドとしてブームになっているようです。
詳細はこちらの記事をご覧いただければと思いますが、
参考 ダサイと廃れた「グラデーション」が、おしゃれになってトレンドデザインに！エムタメ！グラデーションを用いることにより、他にはないオリジナリティのある色が出せるため、ブランドのカラーを強く推し出すことが可能になるのです。
引用：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ヘッダーがある
みなさんもぜひグラデーションを活用して、ブログデザインに個性をつけてみてください。
