短時間でブログに最適のアイキャッチ画像を作成する

短時間でブログに最適のアイキャッチ画像を作成する
■ 店頭より得で、予約しやすいオンラインショップ。
 → ドコモオンラインショップ
 → auオンラインショップ
 → ソフトバンクオンラインショップ

最新のiPhoneを得して乗り換えるなら、最大6万円のキャッシュバックがある
→ SMARTPHONE STORE

bitWaveの新規掲載は毎日1本。
各記事にはトップ画像が必要。
デザイナーにはとても楽しい作業になりますが・・・
・・・様々なルールもコツもあります。

ルール?コツ?なんで?

まず、ブログのトップ画像のミッションをちゃんと覚えましょう。
ブログのトップ画像は「ブログを綺麗にするため」だけじゃないですからね。

全体クオリティの証拠

トップ画像はブログのクオリティを一瞬で伝えるものです。
画像だけにビギナーっぽい印象が出ると、記事の内容も同じ風に見られてしまう。
それは人間の脳の仕組みです。

クリック数増加方法

「あ、この記事面白いかも!」ていう気持ちをビジターに思わせるのも大事です。
あの記事、クリックさせたいでしょう!

読んだ後、覚えていて欲しい

インパクトというのは、見た瞬間だけではなく、見た後の残った印象です。
そして、人間は言葉より画像を一番簡単に覚える。
ということは、画像の印象が頭に長く残れば、記事も長く残ります。

オリジナリティー

ブログサイトが山ほどあります。
そして、デイリー掲載の場合、似た画像が作られてしまう確率が増える。
インパクトとオリジナリティーは一体なので、他のブログにも以前の記事にも似た画像を使わないようにするしかない。

では、どうすればいいのを見てみましょう!

良い素材を使う

CC0(トラブルフリー)写真のサイト一覧はこちら:
https://github.com/neutraltone/awesome-stock-resources
Tony Phippsさんが頑張って作ったリストです。

一覧されたサイトは全部殆ど定期的に更新されていて、新しい画像が毎週ダウンロードできます。
私の写真のディレクトリー:

image31

テンプレートを使う

デザインのテンプレートを使うと、同じデザインルールがずっと守られています。
例えば、Photoshopで作ったbitWaveのテンプレートはこれ:

image35

グリッドはレスポンシブレイアウトの対応のため。
もっと細かく言うと、真中の四角はスマホサイズの画像のエリアですので、画像の一番大切な箇所をその四角の中に絶対入れないといけない。そうしないと、スマホユーザーが良く分からない画像を見てしまうでしょう!w

オリジナリティーを追加する

画像をそのまま使うのは楽だけど、オリジナリティーが中々出ないよね。
色んな方法で他のサイトに無い画像が作れるから、少しだけ工夫しようよ!
例えば・・・

色のレイヤーを使って

brinvest

レイアウト内で見る

フォントを使って

makeupdol

レイアウト内で見る

文言を使って

baskelse

レイアウト内で見る

アイコンを使って

coolchat

レイアウト内で見る

ロゴを使って

atomaim

レイアウト内で見る

パタンレイヤーを使って

image01

レイアウト内で見る

もちろん、2つ以降の方法をミックスするのも出来る!
例えば、グラディエントレイヤー+ロゴ:

hadoop-zookeeper

レイアウト内で見る

インパクトを出す方法

一般なルールに従い過ぎだと、面白さのレベルが壁に当たるといつも思う。
だから、ビジター側に「え?」になるため色んな方法を考えている。

画像外のホワイトスペース使用

ホワイトスペースを上手く使えば画像の形が矩形以外の形になるので結構面白印象が出ます。
例えば:

image07

レイアウト内で見る

hangcloth

レイアウト内で見る

角度使用

角度もインパクトを出す力あいます。
それも人間の脳の仕組みに関係あります。
簡単に言うと、ルールとして、デザインの決裂が非常に目立つ。

例えば:

image13

レイアウト内で見る

ios8devices

レイアウト内で見る

拡大風の使用

画像、ロゴ、文言等が拡大されると結構面白いエフェクトが出ます。
例えば、クロームのロゴを拡大すると:

execCommand

レイアウト内で見る

image12

レイアウト内で見る

パタン繰り返し使用

模様のようなものにはちょっと催眠的な力があります。
フラクタルと似た力ですね。

こんな感じのものが簡単に作れます:

mousegame

レイアウト内で見る

image01

レイアウト内で見る

無料のツールでクリエーティビティーUP!

PhotoshopとIllustratorは素晴らしいソフトだけど、そのままで使うと出来ないこともある。
出来ないことって?

数学的な幾何学

例えば、数学で幾何学的なシェープをランダム的に作ること: http://app.geokone.net/

image38

透明背景のPNGで保存出来る!

このツールのお蔭で、下記の画像が簡単に出来た:

appstoralgo

レイアウト内で見る

3Dオブジェクト使用

無料の3DオブジェクトがPhotoshopの中で使える!
まず、PixelSquidのプラグインをインストールする。

image30

で、https://www.pixelsquid.com/ で必要なオブジェクトを選択する:

image14

Photoshopの中でプラグインを開く:

image41

で、選んだオブジェクトのポジショニングとサイズをリアルタイムで調整する:

image07

BEFORE:

image43

AFTER:

image33

では、他の画像をそろそろ作らないといけないので・・・またねー!

■最新のiPhoneの購入・機種変更なら店頭より得で、予約しやすいオンラインショップ。
機種の頭金や使わないオプションパックをつけて年間何万円も損していませんか?
オンラインショップなら故障のサポートもしっかりしていて最低限の費用。待たされることもありません。
 → ドコモオンラインショップ
 → auオンラインショップ
 → ソフトバンクオンラインショップ

最新のiPhoneを得して乗り換えるなら、最大6万円のキャッシュバックがある
→ SMARTPHONE STORE
がお得です。