このサイトは記事内に広告を含む場合があります。広告や表現について

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

おはこんばんは!

どんぐりです。

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

よろしくお願いします!

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

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

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

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

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

目次

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

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

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

どんぐり所長
どんぐり所長

非常にお上手ですね!

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

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

ふむふむ。

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

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

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

余白を意識する

どんぐり所長
どんぐり所長

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

ふむふむ。

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

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

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

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

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

どんぐり所長
どんぐり所長

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

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

なるほど~。

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

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

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

テキストの選び方

どんぐり所長
どんぐり所長

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

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

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

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

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

テンプレートをつくる

どんぐり所長
どんぐり所長

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

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

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

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

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

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

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

テンプレート完成!

どんぐり所長
どんぐり所長

作ってみましたよ~!

わくわく。

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

丸、すごくいいです!

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

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

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

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

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

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

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

使用カラー

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

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

画像の見つけ方

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

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

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

ほうほう。

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

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

どんぐり所長
どんぐり所長

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

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

テンプレート作成 まとめ

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

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

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

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

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

では最後に…!

ん?

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

テンプレート追加

どんぐり所長
どんぐり所長

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

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

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

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

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

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

暖かい感じしますね~。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

赤い花のあるキッチン

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

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

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

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

ありがとうございます。

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

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

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

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

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

よかったです!

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

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

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

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

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

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

そうなんですね!

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

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

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

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

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

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

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

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

あおいろさんが記事にしてくれました!

今回のアイキャッチ添削を経験して、あおいろさんが記事にしてくれました。ぜひ、あわせて読んでみてくださいね!

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

どんぐり所長のおすすめツール

どこでも、どんなデバイスでも順位チェック

ブログ記事の順位を確認していますか?どんなキーワードが上下しているのか知る事はブロガーでは必須と言えます。

ほとんどの方がダウンロード型の順位チェックツールを使用されていますが、私はコレ。「Nobilista」。クラウド型のチェックツールです。

クラウド型とは、ネット上にあるサーバーにデータが保存されている順位チェックツールです。従って、お家のパソコン以外でも情報にアクセスできちゃうんです。これが想像以上に快適で、一度体験すると戻れなくなっちゃう。詳しい記事を書いていますので是非読んでみてください。

Nobilistaの詳しい記事はこちら >

実は私、Nobilistaの公式アンバサダーをさせて頂いています。使いだしたら超気に入ってしまって、気づいたらアンバサダーになっていました。そんな私が、おすすめする「Nobilista」。今なら7日間無料でお試しができます。クレジットカードなどの情報を入れなくても試せるので、ぜひあなたにも試してほしい。

\場所を選ばない快適さを体験して/

Nobilista公式サイト

当サイト推奨 デザインツール

当サイトでは、ブログ初心者でも簡単・無料で美麗なデザインが作成できる、オンライン画像作成フォーム「Canva」を推奨しています。数万点の素材やフォントが用意されていて、選ぶだけで簡単にプロ並みのデザインを作成する事ができます。これから先、会社員の仕事でも使用する事になるかもしれないほど普及が広まっています。覚えるなら早い方がいいですよ!

当サイトのデザインは、SWELLで再現可能

私はSWELLを2年使用してきました。現在4つのサイトでSWELLを使用しています。
SWELLを使用する理由は、簡単・綺麗・速い
実際このトップページも、SWELLの標準機能だけでデザイン。
お洒落なブログを作りたいあなたにピッタリのWordPressテーマです。
私が実際に使用して実感したSWELLの特徴は以下。

  • 完全ブロックエディタ対応
  • 直感で使える操作性
  • 便利な専用ブロックを多数用意
  • お洒落なトップページが簡単に作れる
  • 最速レベルのページスピード
  • 一度購入すれば複数サイトに何度でも使用可能
  • ユーザーの利便性を考える熱意の運営者
  • SWELLを紹介すればアフィリエイト報酬が貰える(購入者のみ参加可)
  • 販売価格 ¥17,600(税込)

唯一の欠点は価格の高さ。しかしそれは、SWELLがハイクオリティだから。
そして、運営者がとびきりの対応をしてくれる必要経費。

私が実際にSWELLを使用して感じた、本音レビューはこちら

SWELLにはアフィリエイトプログラムがあり、紹介すれば利益を得ることもできます。
よく、「アフィリエイトがあるから紹介しているんでしょ。」と言われますがこれは違います。
惚れ込んだWordPressテーマに、たまたまアフィリエイトがあっただけ。
あなたもSWELLを体験すれば、きっと紹介したくなります。

\圧倒的な操作性を体験せよ/

あなたも今日からSWELLER!

トップページへ戻る

お気軽にコメントください

コメントする

このサイトは reCAPTCHA によって保護されており、Google のプライバシーポリシー利用規約が適用されます。

reCaptcha の認証期間が終了しました。ページを再読み込みしてください。

目次