たりぽすメインビジュアル2作目5月25日変更

たりぽすブログ

  • しのはら

  • このエントリーをはてなブックマークに追加

アイキャッチをそれっぽくするための改善案

しのはら

bi35

こんにちは、しのはらです。

いままで、30件以上の記事と、アイキャッチを作成してきました。
ですが、いまいち時間がかかっているのと、見返してみるとちょっと微妙かなというのが多い事に気がつきました。

今回は、今まで作ったアイキャッチを見直しつつ、アイキャッチの簡単かつ、それっぽく見える作り方について考えた記事です。
また、アイキャッチの制作方法を載せました。
よろしくお願いします。

今まで作ったものを見直す

とりあえず、過去のアイキャッチから反省点を探すことにしました。

1:目立たせたいところを大きな文字にする

bi8b

このアイキャッチには悪いところがあります。
それは、文字が読みづらいことです。また、何がメインかわかりずらいことです。
(そもそも記事の内容も何がメインかわかりづらいのですが)

アイキャッチは、小さいサイズで見たときにも文字が読みやすい必要がありそうです。

bi33b → bi33c

この『カッパの名称の由来について』は、もともと文字の大きさの差を付けたつもりでいたのですが、あまり差が無かったのと、あと位置がずれていたので修正してみました。
これでメインが少しわかりやすくなったと思います。

・文字は小さい画像でも読みやすいように大きく
・重要な部分の文字が目立つようにする

2:色のコントラストをつける

i魚肉 i30b

 

この二つでは、文字の大きさもありますが『抽象画複数制作記録』の方がタイトルが目立っているように感じます。
左も色のコントラストをつけたつもりでいたのですが、タイトル部分はもっとはっきりとした色のコントラストをつける必要がありそうです。

・重要部分はしっかりと色のコントラストを付ける

3:写真かイラストを使う

i魚肉 bi24

これはそれっぽくするための方法ですが、『写真やイラストがあったほうがそれっぽい』と私は思います。
どういうことかというと、『ペン画初心者の感想色々』の方が基本的に写真の周りを囲って、分割して文字を置いただけ、ですがこちらの方が豪華に見えると私は思います。

また

bi9

これも背景に写真をぼかしておいただけで随分それっぽくなっていると思います。
ということで、イラストか写真を使うと文字だけよりはそれっぽく見えます。

また、タイトルしか要素がなく、そのタイトルも短い時は内容の補足などを入れるのもアリかなと思います。

・写真かイラストを使うと楽

その他小手先の技メモ

その他、地味ながらそれっぽくする正しいのかどうかはわからない、今までに使った小手先の技を集めてみました。

i31 bi26

・フチ取りをする
・周りを線で囲う
・テクスチャを軽く入れてみる

文字にフチ取りだったり、イラストにフチ取りをいれる。
画面全体を囲ってしまうのもそれっぽくなる気がします。
また、ストライプやざらざらなどのテクスチャを入れるのも良さそうです。

bi28b i30b

・ボックスに入れる
それぞれ背景色だったり、線で区切って、ボックスのようにそれぞれの要素を入れる。

bi9 bi26

・線で区切る
文章内で、メインのところとそれ以外を線で区切る。
・吹き出しっぽくしてみる
これは3・9部分のことです。

bi21b bi11
・帯を作る
『ホワイトデーに関する話』の方の帯の色はもう少し濃くてもいいかなと思います。

bi7 bi33c

・丸など記号や線を使った装飾
・適当なものでもいいからイラストを入れてみる

丸や三角など記号を使って装飾をする方法があります。
点線なども使えそうです。

全体の色について

さて、迷いどころの全体の色についてですが、これは今までの記事で少し似たような内容を触れているのでそちらを紹介したいと思います。

bi21b
『色に関する8つの便利なサイトまとめ』

bi20
写真に重ねる文字色は『白か黒』がおすすめ

実際にアイキャッチを作ってみる

では、実際にこの記事のアイキャッチを反省点を生かしつつ作ってみたいと思います。

1 タイトルと使う素材を決める

実はいつも記事を書いた後に本タイトルとアイキャッチを作っています。
ということで、まずタイトルを決めました。
(アイキャッチをそれっぽくするための改善案』)

そして次に 写真かイラストを使うと楽 ということで使う写真・イラストについて考える事にしました。
ですが今回はアイキャッチがテーマなため悩んだのですが、改善案、というところから背景はノートの紙にすることにしました。

2 とりあえず配置してみる

B06181
とりあえず配置してみたのがこれです。
文章が長いので三行に分けることにしました。

3 フォントとフォントサイズを変えてみる

B06182
B06186
・文字の大きさをそれぞれ変更
・フォント変更
をしました。
また、文字を一部だけ回転させてみました。

そして使用フォントの『フォントポにほんご』と『源真ゴシック』はどちらもフリーフォントとして公開されているものです。
どちらも使い勝手が非常にいいフリーフォントで、いつも使わせていただいています。

フォントポにほんご | fontopo (http://fontopo.com/?p=89)
源真ゴシック (げんしんゴシック) | 自家製フォント工房 (http://jikasei.me/font/genshin/)

4 装飾を文字につけてみる

B06183
今回、メインのイラストや写真がないため(ノートの紙は地味なため)、目立たせるために文字に装飾を足すことにしました。
それっぽくする方法の『丸など記号や線を使った装飾』ですね。

5 背景を足し、色を決める

B06184
まず、背景にすると決めていたノートの紙を足しました。
また、色は白、水色、赤をメインにすることにしました。

6 色の変更、文字のフチ取りを追加。

B06185
それっぽくする方法の『フチ取りをする』をしました。
また、色のコントラストを付けるために影をつけてみました。

7 完成

bi35

最後に全体にもフチ取りをかけて完成です。

今回はどちらかというとロゴ作りに似た感じになりました。

おわりに

ところでこの記事、改善案というより改善方法というか、試行錯誤の方が言葉として近いような気がしてきました。
これからも頑張って見やすいアイキャッチ画像をつくって行きたいと思います。ありがとうございました。

Pocket

スポンサードリンク

スポンサードリンク

スポンサードリンク

スポンサードリンク