-
新米デザイナーが、テクノアートブログのアイキャッチの歴史を振り返ってみた
-
2016.09.28
-
投稿者： びすこ
-
こんにちは、びすこです。
アイキャッチを作り続けて早11ヶ月。
「びすこさん、ブログのアイキャッチ画像作って！」
という一言から始まったブログのアイキャッチ制作でしたが、
実は先日公開しました、
「イラストレーター必見！「そう、このポーズが欲しかった！」グラビア写真集」
で私の作成しましたアイキャッチ制作数が100を超えました。
というわけで、今回はアイキャッチ制作を通してどれだけ成長したのかを、
振り返ってみたいと思います。
また、せっかくのこの機会に最初の方に制作したアイキャッチをリデザインし、
昔のアイキャッチと比べてみようと思います。
ちょっとお恥ずかしいのですが、
新米デザイナーさんや、デザイナーを志している方へ向けて、
アイキャッチ第1号から公開し、
コツコツと制作物を増やしていけば、こんなに成長できるのか！
などなど励みになっていたら嬉しいです。
1.アイキャッチ作り始め期
アイキャッチ画像を作り始めて１〜２ヶ月くらいです。
とりあえず文字をデカデカドーン！打ってそのままターンエンドだ！
といった感じがなんとも初々しいですね。
自分で作っておきながら、
「どうしてこんなレイアウトにしたんだろう・・・？」
という疑問しか湧きません。不思議です。
この頃は、記事を書いた担当が「この画像を使って」と素材を持ってきてくださったので、
自分で素材探しもせずに、もらった写真をとりあえず貼り、
とりあえず記事のタイトルを入れて・・・といった具合に作っていました。
そう、まだこの頃の私は、アイキャッチがどれだけ大事なものなのかを知らなかったのだった・・・。
2.アイキャッチ作りにちょっと慣れてきた期
ところどころまだ打ちっぱなし感があるものの、
作り始めた時よりはレイアウトを考えるようになりました。
フォントも記事や写真の雰囲気に合わせてガラッと変えるようになっています。
素材も貰った写真だけでなく、ネットでフリー素材を探したり、
自作したりして文字を見栄え良くすることに重きを置いていました。
しかし、文字ばかりでせっかくの写真があまり生かされていないな、と今の私は思います。
この頃の私は、アイキャッチ＝バナーとも捉えていたのかもしれません。
3.アイキャッチに割と慣れてきた？期
タイトルをただ丸々入れるだけでなく、
少し抽象チックなデザインも取り入れるようになりました。
タイトルの文字数が多いと、どうしても文字ばっかりになってしまうので、
シンプルなデザインを目指しました。
こうして比べてみると、最初の頃の制作物と比べてだいぶ良くなったと思います。
しかし、おしゃれに見える一方で、どんな記事かまだ伝わりにくいのが課題点です。
それはこれからのアイキャッチ制作を通して、
もっともっとより良いデザインを作っていけたらと思います。
4.アイキャッチをリデザインしてみた
どのアイキャッチをリデザインしようか悩んだのですが、
ここはせっかくなので、一番初めに制作したこのアイキャッチをリデザインしてみることにします。
さっきのデカデカドーンです。
まずは最初にリデザインしたアイキャッチです。
悪くはないのかもしれませんが、少々抽象的すぎる気がしますね。
色数などもうまい具合にまとめられず、いっそ新しく作り直すことを決意。
そして、次に出来上がったものがこちら。
以前のアイキャッチに使用していた写真素材を再利用しました。
Illustratorのアイコンを模したものを配置することによって、
「デザイン関係の記事であり、Illustratorを使用していること」を表しています。
背景の写真も全体カラーのオレンジと合わせて、オレンジの色味に。
そして文字の大きさも以前より小さめに。
小さめにすることでダサさがなくなり、少しスタイリッシュになった気がします。
私を始め、新人さんあるある「文字を意味もなく無駄にでかくしてしまう」ですが、
画像が小さいからといって大きく文字を配置すればいい、というわけではないのです！
ついでに、TwitterやFacebook用にタイトルが書かれているものも作成。
TwitterやFacebook用では、タイトルを載せてバナーよりのデザインにすることで、
わかりやすさ＞デザインを重視。
もちろんデザインにも手を抜かず、バランス良く。
DESIGN HOW TOはこちらでは小さくし、タイトルの方を大きめに表示しました。
そして、TwitterやFacebookに載せるアイキャッチを作る上で重要なことですが、
伝えたいものは上下30px(300px*210pxで作成した場合)には配置しないようにしましょう。
というのも、TwitterやFacebookで画像つきリンクが載る時に、
アイキャッチの全体が表示されず、上下が切れてしまうのです。
伝えたいものを見えなくなってしまう位置に配置したら、
どんな記事なのかわからなくなってしまいますよね・・・
という注意点も踏まえて制作したので、
今回制作したアイキャッチも以下のようにバッチリ縦240pxに収まっています。
※赤い部分が切れてしまう部分にあたります。
そして、リデザイン前と後のものを並べてみると・・・
いかがでしょうか！？
こうして比べてみると、我ながら成長が感じられると思います・・・！
まとめ
アイキャッチというたったの300px*210pxの小さな画像ですが、
実は理想のアイキャッチを作るのはすごく難しいんです。
伝えたいことを小さな画像にぎゅっと詰め込まなければならないので、
新人デザイナーにはとってもいい勉強になります！
私もまだ勉強中の身ですが、今後もより良いアイキャッチを作れるよう頑張りたいと思います！
それでは、また。
The following two tabs change content below.
びすこ
現在修行中の新人デザイナー。 いつかビッグでスーパーなデザイナーになることを夢見て日々奮闘中。 洋服と音楽とキャラクターグッズに囲まれて暮らしていて、 二次元アイドルガチ勢。実はてっくんの生みの親。最新記事 by びすこ (全て見る)
- 【再掲載】テクノアートデザイナーも胸キュン！変わりダネのバレンタインチョコ7選 - 2023年2月1日
- 【再掲載】デザイナー志望者必見！デザインをより良くするための1UPプチ講座【part09】 - 2022年6月13日
- 【再掲載】デザイナー初心者必見！びすこのデザインブログまとめ！ part1 - 2022年5月19日
