アイキャッチを工夫したらサイト全体がよくなった話。

ワードプレス
アイキャッチ_いい感じのアイキャッチ意識したらサイト全体が良くなった

突然ですがみなさんアイキャッチに気を使っていますか?

 

私は初め全く気を使っていませんでした。

 

ですがぽんひろさんの記事をみてアイキャッチに気を使ってみようかなと思い、実際やってみたらサイト全体がいい感じになったので紹介したいと思います。

 

ぽんひろさんがプロっぽいアイキャッチの作り方を紹介しています。

アイキャッチ画像の簡単な作り方!プロっぽく作るコツ!【写真編】
アイキャッチ画像を簡単におしゃれにプロっぽく作る方法を紹介します。写真選びのポイント、文字組みやコツを例を元に解説していきます。一見難しそうにみえるアイキャッチ画像ですが写真選びを間違えなければ誰でもおしゃれに作ることができます。

 

改善前のサイト

改善前のサイト

改善前のサイト

 

改善前はこんな感じでした。

 

うーん、パッとしないというかなんというか。

アイキャッチを見てもなんの記事なのかわからなく、いちいちタイトルを読まなきゃいけません。

人は文字ではなく画像の方に目が行きやすいのでこれではクリックされる確率は低くなりがちです。

 

しかも、メニューバーしたのカルーセルは一番ダサいです。

 

ここはなんか直感的に、文字表示を無くしてバナーのような表示にしたいと思いました。

 

てことでcocoonでカルーセルの文字表記を消す方法と、アイキャッチのデザインを改善した方法を紹介して行きます。

改善後のサイト

やり方はひとまず置いといて、結果的にどう改善したのかお見せします。

 

こうなりました。

 

アイキャッチ改善後

アイキャッチ改善後

 

カルーセルは文字がなくなり、見やすくなって統一感が出て、印象もよくなったのではないでしょうか。

 

トラ吉
トラ吉

でも、こうして見ると、殺風景なサイトだな。

まだまだ改善の余地がありそうだ。

cocoonのカルーセルのタイトルをなくす方法

トラ吉
トラ吉

コピぺすることで同じようにタイトルをなくすことができるぞ。

 

ペーストする場所は「外観」→「テーマエディター」の「スタイルcss」という所のレスポンス表記の上です。


ペーストする場所

ペーストする場所

wrod press編集画面のサイドバーの
「外観」→「テーマエディター」をクリックして

ペーストする場所

ペーストする場所

スタイルcssにペーストしましょう。


 

スタイルcssにコードを追加するだけでこのようにタイトルが消えました。

抜粋文字を消す

タイトルを消す

 

さらにアイキャッチのダサさが目立ちますね。

しかもタイトルが無いのでなんの記事なのか一層わかりません。

アイキャッチの作り方。

参考にしたのはぽんひろさんの記事です。

アイキャッチ画像の簡単な作り方!プロっぽく作るコツ!【写真編】
アイキャッチ画像を簡単におしゃれにプロっぽく作る方法を紹介します。写真選びのポイント、文字組みやコツを例を元に解説していきます。一見難しそうにみえるアイキャッチ画像ですが写真選びを間違えなければ誰でもおしゃれに作ることができます。

 

詳しいやり方は上の記事を読んだ方がわかりやすいと思います。

これを自分流にアレンジして作りました。

  • 必ずサイズを合わせる。
  • アイキャッチを見ただけでなんの記事なのかわかるように意識して作る
  • なるべくタイトルと同じ文字を入れ、色は3色まで
  • 右左もしくは上下に文字が入れられる画像を使用して、目に優しい色を選ぶ
  • 文字の色は背景色と補色関係の色を使う

 

このルールをなるべく守って作ることを意識しました。

 

必ずサイズを合わせる

画像のサイズはかなり大事です。

前は気にせず保存した画像をそのまま使っていたのですが、もちろん1つ1つ大きさが違います。ですので改善前はこんな感じになっていました。

画像のサイズ改善前

画像のサイズ改善前

なんだこの余白!

って感じですね。よろしくないです。

 

ですので必ず画像サイズを編集することにしました、

サイズは黄金比にしました、人がもっとも美しいと感じる比率です。

黄金比は人がもっとも美しく感じる比率でいろんなデザインに生かされています。パルテノン神殿、ダビデ像、ミロのビーナス、アンモナイトの形、ひまわりなど
比率は1:1.618です。
なので縦を100、横を160に画像サイズを編集しています。

アイキャッチを見ただけでなんの記事がわかるように意識する

 

 

これなんの記事だかわかりますか?→

 

海や旅行関係かな?と思っちゃいますよね。

なんでこの画像を使ったのか自分でもわかりませんがこの記事実はword pressに関する記事なんです。

全く想像つきませんよね笑

改善前はアイキャッチについて全く意識していなかったのでword pressの記事にこんなアイキャッチを使っていました。

 

 

ではこちらの画像ではどうでしょうか→

wordpress

wordpress

これなら、パソコンで何か書いているのかな。あ、よく見ると記事を書いているのか。

とある程度的をえた想像をすることができます。

そうすることでより読者につわりやすくなり、クリックされる確率が上がってきます。

 

タイトルと同じ文字を入れ、色は3色まで

記事の内容を想像しやすい画像を選びましたが完璧に伝わる訳ではありません。

ですので画像の中に文字を入れ、アイキャッチを見ただけでより正確に伝わるようにしていきます。

その時意識したことが、なるべくタイトルと同じ文字を入れて、色は3色までにすることです。

 

 

このアイキャッチの記事が何についての記事がわかりますか?→

 

サーバー

サーバー

 

この記事はサーバーのレンタル方法を解説している記事なのですがタイトルがないと

サーバーが写っているからサーバー関連の記事と想像できますが具体的にサーバーをどうするのかはわかりません。

なのでなるべくタイトルと同じ文字を入れてあげます。

そして色は多くても3色まで、理由はたくさんの色があるとごちゃごちゃして見にくくなるからです。

 

トラ吉
トラ吉

真ん中のバーをドラックして左右に動かしてみてくれ。

アイキャッチ_サーバーをレンタルする方法_カラフルアイキャッチ_サーバーをレンタルする方法

右左もしくは上下に文字が入れられる画像を使用して、目に優しい色を選ぶ

背景がごちゃごちゃしていると、文字がとても見ずらくなります。

ビフォーアフターをみてください。

文字を入れるスペースがなく、被写体の上にそのまま文字を乗っけているのでものすごく文字が見えにくいですし、目がチカチカします。

パッと見で、入ってくる情報はなんでしたか?でっかく書かれた「グミ10選」ぐらいだったのではないのでしょうか?

トラ吉
トラ吉

アフターの方は文字の大きさも色も変えてはないぞ。

背景の違いだけでこんなに見やすくなるんだな。

アイキャッチ_背景の違い2
アイキャッチ_背景の違い1

 

文字の色は背景色と補色関係の色を使う

色の関係性、意識してますか?

多くの人がしていないと思います。

背景と文字の色の関係は可視性をあげる上で大事です。


 

色には

  • 同じ色:同色
  • 近い色:近似色
  • 真逆の色:補色

があります。

色相環


例えば以下のように青の背景に同色の青の文字だとどうでしょう。まぁさすがにこんな見にくいものを作る方はいないでしょうが、近似色の緑だとどうでしょうか。

普通に見えるし、緑なら作る可能性としてはありそうですよね。

 

アイキャッチ_ドメインの設定方法_同色

アイキャッチ_ドメインの設定方法_同色

アイキャッチ_ドメインの設定方法_近似色

アイキャッチ_ドメインの設定方法_近似色

 

トラ吉
トラ吉

今度は。近似色の緑と、補色の黄色で比べてみよう。

アイキャッチ_ドメインの設定方法_近似色

アイキャッチ_ドメインの設定方法_近似色

アイキャッチ_ドメインの設定方法

アイキャッチ_ドメインの設定方法

 

どうですか。ちょっと白とか足して、オシャレにしてますが。

見やすさが全然ちがいますよね。

 

ですが困ったことにどうしても使いたい画像の色がはっきりしなくて文字の色をどうしたらいいのかわからない時があります。

そんなときは画像に黒や白のフィルターをかけるという方法があります。

イラストレーターで同じ大きさの四角を用意し、黒もしくは白で塗りつぶします。そして透明度を落とし、画像の上に被せればオッケー。

 

他には文字に影を落として見たり。

 

トラ吉
トラ吉

その違いを見てみよう。

アイキャッチ_サーバーにwordpressを設置する方法ノーマル
アイキャッチ_サーバーにwordpressを設置する方法改善後

 

 

まとめ

 

まとめイメージ

いかがでしたか?

あなたも、少し工夫したら簡単にいい感じのアイキャッチを作ることができますよ。

私が意識したのはこちら

  • 必ずサイズを合わせる。
  • アイキャッチを見ただけでなんの記事なのかわかるように意識して作る
  • なるべくタイトルと同じ文字を入れ、色は3色まで
  • 右左もしくは上下に文字が入れられる画像を使用して、目に優しい色を選ぶ
  • 文字の色は背景色と補色関係の色を使う

これだけです。これを守って入ればなんかいい感じのアイキャッチは簡単に作れます。

あんなにダサいサイトを作っていた私にもできたんですから、あなたにもできます。

コメント

タイトルとURLをコピーしました