突然ですがみなさんアイキャッチに気を使っていますか？
私は初め全く気を使っていませんでした。
ですがぽんひろさんの記事をみてアイキャッチに気を使ってみようかなと思い、実際やってみたらサイト全体がいい感じになったので紹介したいと思います。
ぽんひろさんがプロっぽいアイキャッチの作り方を紹介しています。
改善前のサイト
改善前のサイト
改善前はこんな感じでした。
うーん、パッとしないというかなんというか。
アイキャッチを見てもなんの記事なのかわからなく、いちいちタイトルを読まなきゃいけません。
人は文字ではなく画像の方に目が行きやすいのでこれではクリックされる確率は低くなりがちです。
しかも、メニューバーしたのカルーセルは一番ダサいです。
ここはなんか直感的に、文字表示を無くしてバナーのような表示にしたいと思いました。
てことでcocoonでカルーセルの文字表記を消す方法と、アイキャッチのデザインを改善した方法を紹介して行きます。
改善後のサイト
やり方はひとまず置いといて、結果的にどう改善したのかお見せします。
こうなりました。
アイキャッチ改善後
カルーセルは文字がなくなり、見やすくなって統一感が出て、印象もよくなったのではないでしょうか。
でも、こうして見ると、殺風景なサイトだな。
まだまだ改善の余地がありそうだ。
cocoonのカルーセルのタイトルをなくす方法
コピぺすることで同じようにタイトルをなくすことができるぞ。
|
1 2 3 |
.carousel-entry-card-content{ display:none; } |
ペーストする場所は「外観」→「テーマエディター」の「スタイルcss」という所のレスポンス表記の上です。
ペーストする場所
wrod press編集画面のサイドバーの
「外観」→「テーマエディター」をクリックして
ペーストする場所
スタイルcssにペーストしましょう。
スタイルcssにコードを追加するだけでこのようにタイトルが消えました。
タイトルを消す
さらにアイキャッチのダサさが目立ちますね。
しかもタイトルが無いのでなんの記事なのか一層わかりません。
アイキャッチの作り方。
参考にしたのはぽんひろさんの記事です。
詳しいやり方は上の記事を読んだ方がわかりやすいと思います。
これを自分流にアレンジして作りました。
- 必ずサイズを合わせる。
- アイキャッチを見ただけでなんの記事なのかわかるように意識して作る
- なるべくタイトルと同じ文字を入れ、色は３色まで
- 右左もしくは上下に文字が入れられる画像を使用して、目に優しい色を選ぶ
- 文字の色は背景色と補色関係の色を使う
このルールをなるべく守って作ることを意識しました。
必ずサイズを合わせる
画像のサイズはかなり大事です。
前は気にせず保存した画像をそのまま使っていたのですが、もちろん１つ１つ大きさが違います。ですので改善前はこんな感じになっていました。
画像のサイズ改善前
なんだこの余白！
って感じですね。よろしくないです。
ですので必ず画像サイズを編集することにしました、
サイズは黄金比にしました、人がもっとも美しいと感じる比率です。
アイキャッチを見ただけでなんの記事がわかるように意識する
これなんの記事だかわかりますか？→
海や旅行関係かな？と思っちゃいますよね。
なんでこの画像を使ったのか自分でもわかりませんがこの記事実はword pressに関する記事なんです。
全く想像つきませんよね笑
改善前はアイキャッチについて全く意識していなかったのでword pressの記事にこんなアイキャッチを使っていました。
ではこちらの画像ではどうでしょうか→
wordpress
これなら、パソコンで何か書いているのかな。あ、よく見ると記事を書いているのか。
とある程度的をえた想像をすることができます。
そうすることでより読者につわりやすくなり、クリックされる確率が上がってきます。
タイトルと同じ文字を入れ、色は３色まで
記事の内容を想像しやすい画像を選びましたが完璧に伝わる訳ではありません。
ですので画像の中に文字を入れ、アイキャッチを見ただけでより正確に伝わるようにしていきます。
その時意識したことが、なるべくタイトルと同じ文字を入れて、色は３色までにすることです。
このアイキャッチの記事が何についての記事がわかりますか？→
サーバー
この記事はサーバーのレンタル方法を解説している記事なのですがタイトルがないと
サーバーが写っているからサーバー関連の記事と想像できますが具体的にサーバーをどうするのかはわかりません。
なのでなるべくタイトルと同じ文字を入れてあげます。
そして色は多くても３色まで、理由はたくさんの色があるとごちゃごちゃして見にくくなるからです。
真ん中のバーをドラックして左右に動かしてみてくれ。
右左もしくは上下に文字が入れられる画像を使用して、目に優しい色を選ぶ
背景がごちゃごちゃしていると、文字がとても見ずらくなります。
ビフォーアフターをみてください。
文字を入れるスペースがなく、被写体の上にそのまま文字を乗っけているのでものすごく文字が見えにくいですし、目がチカチカします。
パッと見で、入ってくる情報はなんでしたか？でっかく書かれた「グミ１０選」ぐらいだったのではないのでしょうか？
アフターの方は文字の大きさも色も変えてはないぞ。
背景の違いだけでこんなに見やすくなるんだな。
文字の色は背景色と補色関係の色を使う
色の関係性、意識してますか？
多くの人がしていないと思います。
背景と文字の色の関係は可視性をあげる上で大事です。
色には
- 同じ色：同色
- 近い色：近似色
- 真逆の色：補色
があります。
例えば以下のように青の背景に同色の青の文字だとどうでしょう。まぁさすがにこんな見にくいものを作る方はいないでしょうが、近似色の緑だとどうでしょうか。
普通に見えるし、緑なら作る可能性としてはありそうですよね。
アイキャッチ＿ドメインの設定方法＿同色
アイキャッチ＿ドメインの設定方法＿近似色
今度は。近似色の緑と、補色の黄色で比べてみよう。
アイキャッチ＿ドメインの設定方法＿近似色
アイキャッチ＿ドメインの設定方法
どうですか。ちょっと白とか足して、オシャレにしてますが。
見やすさが全然ちがいますよね。
ですが困ったことにどうしても使いたい画像の色がはっきりしなくて文字の色をどうしたらいいのかわからない時があります。
そんなときは画像に黒や白のフィルターをかけるという方法があります。
イラストレーターで同じ大きさの四角を用意し、黒もしくは白で塗りつぶします。そして透明度を落とし、画像の上に被せればオッケー。
他には文字に影を落として見たり。
その違いを見てみよう。
まとめ
いかがでしたか？
あなたも、少し工夫したら簡単にいい感じのアイキャッチを作ることができますよ。
私が意識したのはこちら
- 必ずサイズを合わせる。
- アイキャッチを見ただけでなんの記事なのかわかるように意識して作る
- なるべくタイトルと同じ文字を入れ、色は３色まで
- 右左もしくは上下に文字が入れられる画像を使用して、目に優しい色を選ぶ
- 文字の色は背景色と補色関係の色を使う
これだけです。これを守って入ればなんかいい感じのアイキャッチは簡単に作れます。
あんなにダサいサイトを作っていた私にもできたんですから、あなたにもできます。
コメント