【アイキャッチ添削026】Aoirolife|正方形サムネイルに対応する

おはこんばんは!

どんぐりです。

今回のアイキャッチ添削は、今後のテンプレートにお悩みの…あおいろさんです!

よろしくお願いします!

あおいろさん
あおいろさん
どんぐり
どんぐり

こちらこそ、よろしくお願いします!

今回のお悩み
  • デザインに悩んでいて、アイキャッチをテンプレート化したい

あおいろさんのお悩みは、デザインを用意してテキストを入れるだけで完成するテンプレートが作りたいとのこと。

今回も気合いれて作っていきましょう~!

目次

あおいろさんが作成された作品

作者   …あおいろさん
掲載記事 …完璧主義なブログ初心者が疲れて自滅しないための方法
掲載サイト…Aoirolife
「Aoirolife」では、ブログに関してあおいろさんが経験してきた情報を、誰かの為になるよう発信されています!

掲載サイト・記事・アイキャッチは掲載した時点でのものです。現在は変更されている可能性があります。

どんぐり
どんぐり

非常にお上手ですね!

トップページで「正方形」のサムネイルを使用しているので、中央にテキストを配置しています。

あおいろさん
あおいろさん
どんぐり
どんぐり

ふむふむ。

最近は宇宙の背景に文字をいれるアイキャッチを作っています。

あおいろさん
あおいろさん
どんぐり
どんぐり

わかりました。では早速添削してきましょう!

余白を意識する

どんぐり
どんぐり

サムネイル化される時に画像が切り取られる場合は、「切り取られた後」をイメージするのが大切です!

ふむふむ。

あおいろさん
あおいろさん
サムネイルで切りぬかれた後に余白をイメージ
切りぬかれた後をイメージし余白を確保
どんぐり
どんぐり

正方形に切りぬかれた後にも、しっかりと余白を確保すると綺麗にみえます!

本当だ!テキストがはみ出してますね。

あおいろさん
あおいろさん
  • 切り取られた後の画像をしっかりとイメージする
  • 切りぬき後にも余白をしっかりと取る

テキストの横幅を合わせる

どんぐり
どんぐり

余白を取ったうえで、横幅をあわせるとすっきりとしますよ!

正方形に切りぬかれた後のイメージ

なるほど~。

あおいろさん
あおいろさん
どんぐり
どんぐり

テキストの位置を揃えるだけでも印象がガラリと変わります!

  • テキストの横幅はあわせる事ですっきりと配置できる!

テキストの選び方

どんぐり
どんぐり

メインキーワードは大きく、その他は小さく。フォントサイズ差をしっかりつけましょう!

テキストにはサイズ差をつける
テキストにはサイズ差をつける
どんぐり
どんぐり

テキストにサイズ差をつける事で優先順位を可視化できます。

あまり意識してなかったです!

あおいろさん
あおいろさん
  • テキストにはしっかりとサイズ差をつけて、キーワードの優先順位がみてわかるようにしよう。

テンプレートをつくる

どんぐり
どんぐり

テンプレートを作るうえで拘っている所はありますか?

青色が好きなので、青色でつくりたいです!あと、きっちりしたイメージが好きです。

あおいろさん
あおいろさん
どんぐり
どんぐり

なるほど!添削作品もすごくお上手でまるで教科書のようですもんね!

ただ、ちょっと堅苦しいかな~とも思っているので、案を頂けたら嬉しいです!

あおいろさん
あおいろさん
どんぐり
どんぐり

なるほどなるほど。では少し柔らかくなるように作っていきますね!

テンプレート完成!

どんぐり
どんぐり

作ってみましたよ~!

わくわく。

あおいろさん
あおいろさん
あおいろさんの作品

丸、すごくいいです!

あおいろさん
あおいろさん
どんぐり
どんぐり

丸を使うと一気に柔らかい印象になりますね。

カッチリし過ぎず、カワイ過ぎないので、すごくいいです!

あおいろさん
あおいろさん
どんぐり
どんぐり

あと、後ろに使用する写真によっても印象が変わりますので、色々試してみると良いですね!

テンプレートの概要
今回のテンプレート

使用フォント
 UDモトヤシーダB

使用カラー

  • メインカラー(ブルー)|#1E65CF
  • サブカラー(ホワイト)|#FFFFFF

爽やかなブルーが映える画像を使用。また、丸形のテキストエリアとする事でやさしい印象に仕上げました。

画像の見つけ方

この写真はどこでみつけてきたんですか?

あおいろさん
あおいろさん
どんぐり
どんぐり

お洒落な写真は「O-DAN」で探していますよ!

ほうほう。

あおいろさん
あおいろさん
どんぐり
どんぐり

商用利用可のお洒落な画像が日本語で検索できるので便利です!

どんぐり
どんぐり

商用利用可」なので、ブログ運営にも安心して画像が使用できます。

  • ブログには必ず「商用利用可」の画像を使用しましょう。

テンプレート作成 まとめ

ありがとうございました!

あおいろさん
あおいろさん
どんぐり
どんぐり

気に入っていただけてよかったです!

とっても気に入りました!

あおいろさん
あおいろさん
どんぐり
どんぐり

では最後に…!

ん?

あおいろさん
あおいろさん

テンプレート追加

どんぐり
どんぐり

テンプレートが一つだと「マンネリ化」が発生するので他のも作ってみましたよ!

わわっ、ありがとうございます。

あおいろさん
あおいろさん

写真はすべて「O-DAN」にて商用利用可の画像を使用しています。

暖かい日差しのリビングイメージ

爽やかなリビングの写真を使用

暖かい感じしますね~。

あおいろさん
あおいろさん
どんぐり
どんぐり

写真の雰囲気がそのままアイキャッチの雰囲気になりますね!

ブルーなオフィスのイメージ

オフィスをイメージしたテンプレート
どんぐり
どんぐり

ちょっと近未来的なオフィスの写真を使用しました。

きっちりしながらも、爽やかな色使いですね!

あおいろさん
あおいろさん

モダンなリビングイメージ

モダンなリビングのイメージ
どんぐり
どんぐり

こちらはモノクロでモダンなイメージになっています。

おっ、こちらはきっちりしたイメージになりました。

あおいろさん
あおいろさん

イエローアクセントのリビングイメージ

イエローアクセントのリビングイメージ
どんぐり
どんぐり

アクセントカラーが違う写真を使っていく事で差別化しています。

写真の色で差別化していくんですね~。

あおいろさん
あおいろさん

赤い花のあるキッチン

赤い花をアクセントしたイメージ
どんぐり
どんぐり

ふう…これくらいあれば、しばらく大丈夫ですかね?

追加のテンプレート、すごく素敵です!

あおいろさん
あおいろさん
どんぐり
どんぐり

ありがとうございます。

記事の内容に合わせて変えられて、マンネリ化しない&メインの丸デザインはそのままなので統一感もあって!すごく気に入りました。

あおいろさん
あおいろさん
どんぐり
どんぐり

全部、説明されちゃった(笑)

背景+見やすい文字のテンプレートとアイキャッチの統一感が欲しかったので、悩みが全部解決されました!

あおいろさん
あおいろさん
どんぐり
どんぐり

よかったです!

中々自分のイメージを具現化ってできないので、添削をお願いして本当に良かったです。

あおいろさん
あおいろさん
どんぐり
どんぐり

今回はいろいろ試作品にご協力いただいてありがとうございました!

こちらこそ、たくさん作って頂いてありがとうございます。

あおいろさん
あおいろさん
どんぐり
どんぐり

作るのは画像を入れ替えるだけなので…それよりも画像を探すのが大変ですね!

そうなんですね!

あおいろさん
あおいろさん
どんぐり
どんぐり

写真を選ぶにも、構図だったり配色だったり、いろいろ考えて選んでます!

次から気を付けて選んでみます。

あおいろさん
あおいろさん
どんぐり
どんぐり

よいものができてよかった!

また記事楽しみにいしていますね!

あおいろさん
あおいろさん
どんぐり
どんぐり

ブログデザインラボではアイキャッチ添削を募集していま~す!

あおいろさんが運営する「Aoirolife

目次
閉じる