おしごと

[ブロガーにおすすめ]ワンポイントロゴを作ってアイキャッチ画像に統一感を出そう!

「レビュー記事を書いているけれど、なんだか物足りない・・・」

そんなことを思ったことがある方は最後まで読んでみてください ∠( ‘ω’)/
きっとお役に立てることがありますよ ( ˘ω˘ )

こんにちは、あいまいみー( @imyme_999 )です(´-`).。oO
いつも見てくださってる方、はじめましての方、よろしくお願いします ^^

今回は「さめって参る!」のさめはだ舞子(@samehada_maiko2)さんに記事を執筆していただきました ( ˘ω˘ )

あいまいみー
あいまいみー
読み応えあってとても参考になるからみんなブックマーク必須です!! 笑

はじめに

「きたろぐ」読者のみなさま、はじめまして。
さめはだ舞子(@samehada_maiko2)と申します。

今回は「きたろぐ」を運営しているあいまいみーさん(@imyme_999)からのお誘いで寄稿記事として書かせていただきます。

現在、わたしは「さめって参る!」という個人ブログを運営しています。

主にブロガー向けの情報を発信しているのですが、この度、あいまいみーさんにアイキャッチ画像用の「ワンポイントアイコン」を作成していただきました。
その経験をみなさまにシェアできればと思います。

こんな人に伝えたい

アイキャッチ画像をワンランクアップさせたい
シリーズ記事やレビュー記事をよく執筆する
アイキャッチ画像に統一感を持たせたい
アイキャッチがなんだか物足りないと感じている

ブログの拡散には欠かせないポイント、アイキャッチ画像。
そこにワンポイント加えるだけで統一感のある、より効果的なアイキャッチ画像をつくることができます。

「これまで何となくフリー素材を使ってきたけれど、もう少しデザインに力を入れたい」

「ちょっとしたオリジナル感を出してみたい」

と思っている方は、ぜひ最後まで読んでみてください。

ブログで大切な「トーン&マナー」と「統一感」

ブログの「トーン&マナー」考えていますか?

みなさんのブログは「統一感」が出ていますか?
企画やデザインなど、クリエイティブの世界では「トーン&マナー」が重要視されています。

トーン&マナーとは?

広告やデザイン、WEB制作において雰囲気やコンセプトに一貫性を持たせること
引用元「IT用語辞典 サバナビ

トーン&マナーの分かりやすい例は、

  • キーフォント
    → ブログのメインになる書体
  • キーカラー
    → ブログのメインなる色や配色
  • キービジュアル
    → ブログのイメージ写真やキャラクター

などがあります。

同じブログなのに記事によってメインの書体や配色が違ったり、登場するキャラクターが全く別のものだと

これは同じブログなの?

と読者に疑問を与えてしまいます。

トーン&マナーを考えることは、あなたのブログをブランディング化する(=読者にとっての価値を高める)大切な一歩なのです。

アイキャッチ画像に「統一感」を与えよう

とは言うものの、ブログ全体で「統一感」を出すのはいきなりだと結構ハードルが高いですよね。

デザインができる人ならサクッと出来るかもしれませんが、そうでない人は難しく感じるかもしれません。

そこでおすすめなのが、アイキャッチ画像から「統一感」を出していく方法です。

実際の例がこちら

例として、あいまいみーさんの「きたろぐ」を見てください。


出典:「きたろぐ

このブログではイラストは使わず、すべてのアイキャッチ画像が写真とスタイリッシュな文字で統一されています。

続いて、わたしの「さめって参る!」はこんな感じ。

出典:「さめって参る!

あいまいみーさんとは逆に、実写の写真はほとんど使わず、フリー素材とオリジナルイラストで統一しています。

このようにアイキャッチ画像で統一感を出す方法はいくつかあります。

  1. すべてのアイキャッチ画像を統一する
  2. カテゴリごとに統一する
  3. シリーズごとに統一する

この中でもおすすめが「シリーズごとに統一する」こと。
ちょっとした工夫で統一感を出すことができます。

「ワンポイントアイコン」でアイキャッチ画像に統一感を出そう

「シリーズごとに統一する」というのは一体どういうことでしょうか?
例を挙げてみましょう。

  • 「ブログの運営報告記事」など一定期間ごとにアップしている記事
  • 「〇〇体験談 第1話」など複数にわたる記事
  • 「レビュー記事」や「書評記事」など定期的にアップしている記事

などが挙げられます。
ここまで読むと、

「統一感を出すためにはフォントやカラーを決めなきゃいけない!」
「写真・イラストで合わせなきゃいけない!」

と思ってしまう方もいるかもしれません。ですが、いきなりそう考えるとちょっと難しいですよね。でも安心してください。

「ワンポイント」揃えるだけでも統一感を持たせることができます。
それが、シリーズごとに統一した『ワンポイントアイコン』を使用すること。

実際の例がこちら

あいまいみーさんのアイキャッチ画像では、Amazonのほしい物リスト関係の記事には決まって『あいまいみーのamazonほしい物リストからの贈り物』というアイコンが左上についています。

f:id:imyme_999:20180119145326j:plain
f:id:imyme_999:20171207210251j:plain

出典:「きたろぐ

アイキャッチ画像自体はそれぞれ違うデザインです。しかし、このアイコンが固定してつけられていることで、「同じシリーズ」であることが分かりやすくなりますね。

ちょっとした工夫で、アイキャッチ画像に統一感がでるのです。

さっそく「ワンポイントアイコン」を作ろう!

今回は「レビュー記事に使うワンポイントアイコン」を依頼しました。
内容として以下のことをあいまいみーさんにお伝えしました。

  1. 本や商品のレビュー記事に使うワンポイントアイコン
  2. 正方形ではなく、ロゴのような横長
  3. 「サメ」をイメージ、尻尾やヒレがあると嬉しい
  4. 文字は「SAME Review(さめレビュー)」
    ※ ブログタイトルが「さめって参る!」のため

参考資料として現在使っている「サメ」のアイコン画像をお渡しし、依頼は完了です。
数日すると、ラフ案が届きました。

初稿のラフ案

一番初めの案です。

見てください! これがデザイナーの完成度です!
まだ1度目のラフの段階なのにどれも素敵です。 送られてきた画像と一緒にコンセプトが伝えられました。

サメを意識した海を感じるアイコンに仕上げています。
遠目に見てもサメや海を感じ、フォントとしても特徴が出るように工夫しています。ニヤリとした口元が印象的なので、そちらも取り入れました。
あいまいみーさんコメントより

第一印象で気になったのが B,D,E,F の4点。

  • B:「タイトルが海に潜っている=深く潜るほど詳細までレビューをしていく」というイメージで提案してくれていて、そのメッセージ性も好き。
  • D:アルファベットAの部分がサメのキャラクターになっていて特徴的。
  • E:手書風のゆるっとした雰囲気で遠目で見てもサメのヒレが目に付く。
  • F:アイコン全体がサメの形で可愛い。しかし、上下の幅がありすぎて、ワンポイントアイコンにしては面積が広すぎるため断念。

悩みに悩み、下記のことをふまえ、もう一度どのデザインが良いのか考えてみました。

  1. あくまで「ワンポイントアイコン」ということを忘れない!
  2. メインの商品写真や文章より目立ってしまいそうなものは避ける!
  3. デザインが気に入っても最終的な見た目を優先しよう!

考え抜いた結果、

Bのロゴを基準に「B×D」→アルファベットAをサメにしたもの、「B×E」→手描きのヒレを加えたもの を見せてください!

とお願いしました。

[B]を基準にしたラフ案

お願いしたとおり「B×D」「B×E」で提案してくれました。

現段階で私がアイキャッチ画像に盛り込む予定なのは

  1. ワンポイントアイコン
  2. 商品のタイトルと一言
  3. 商品の写真

で、このワンポイントアイコンは「脇役」なので、あまり目立ってしまうのは良くありません。
できるだけシンプルかつ特徴的なものを選んでいきます。

「B×D」のC、「B×E」のA 2点に絞り、実際に使う画像に当てはめてもらいました。

実際の画像に当てはめて確認する

「B×D」のCのパターン

遠目で見ても「SAME Review」の文字がしっかりと読み取れますし、サメのシルエットが分かります。
上下の幅も最低限なので、余計なスペースをとりません。

「B×E」のAのパターン

こちらも遠目でも「SAME Review」の文字は読み取れますね。
しかし、ヒレ部分で上部のスペースがやや広めにとられてしまっています

また、全体的に見たときに「B×D」の方がサメの印象が強く感じました。
顏まで付いているからかもしれませんね(笑)

以上のようなことを考え、最終手的に「B×D」の形で決定しました!

納 品

最後に納品してもらい完了です!
さっそく実際にアイキャッチ画像を作ってみました。

実際に作成したアイキャッチ


出典:「オリジナル名刺が完成!職場以外の名刺は「個性」を出してみませんか?


出典:「【オーダーメイド制作】ワンランク上のグッズを手に入れよう!プレゼントにも!

そこまで目立つわけではありませんが、印象的なアイコンとなりました!
同じアイコンを使うだけでも『統一感』が出ますね。とても満足です。

全て自分でつくる必要はない!
デザイナーの力を借りてワンランクアップしよう

お伝えしてきたように、今回はあいまいみーさんに個人でお仕事を頼みました。

企業に頼まなくても「個人のデザイナーさんにお願いすることもできる」ということを知っていただけたら嬉しいです。

ブログ内すべてのデザインを自分だけでやろうとすると、時間もかかりますし、作業量も増えるのでかなり大変です。一部を自分以外の人に協力してもらうだけで、ワンランクアップすることができます

「外注」と聞くとなんだか敷居が高いように感じるかもしれませんが、個人で受注をしている方はお問い合わせページ以外にもTwitter上でのリプライ(またはDM)でもお仕事の依頼ができることが多いです。

「依頼ってどうすればいいの ⁉」と思っている方にもおすすめ。
一言「〇〇を作っていただきたいのですが…」と声をかけてみましょう。詳細を教えてくれるはずですよ。

まとめ

  1. ブログの「トーン&マナー」を意識しよう!
  2. アイキャッチは「ワンポイントアイコン」で統一感が出せる!
  3. 個人のデザイナーさんにお願いするのもおすすめ!
  4. ちょっとした工夫でワンランクアップしたアイキャッチができる!

以上「ワンポイントアイコンを作ってアイキャッチ画像に統一感を出そう!」でした。

みなさんもブログのワンランクアップを目指してみませんか?

執筆者のご紹介とウラバナシ

この記事を書いたひと

さめはだ舞子さん

サメキャラが好きな20代。2017年11月より個人ブログ『さめって参る!』を運営している。最近では、イラストを描くのが好きで、ブログ用のアイコン作成依頼も増えている。「無名の逆襲」「ゆうこす本編集チーム」メンバー。

◎ ブログ:さめって参る!
◎ Twitter:@samehada_maiko2

あいまいみーからのウラバナシ

実は最初、アイキャッチのご依頼だと勘違いをしておりました。笑
よくよく聞くとロゴのご依頼で、あわあわしながらお作りさせていただきました ^^

わたしとしても多くの気づきを得られたおしごとになり、お声かけくださったさめはだ舞子さんには、本当に感謝です(´-`).。oO

「誰かに仕事を依頼する」って自分で全てやるより勇気がいることだと思います。それも、自分にはわからない分野での仕事なら尚更ですよね。

本当に尊敬だなと、改めて感じさせていただきました ( ˘ω˘ )
またいつでもご相談くださいませ ^^

個人受注はこちら

 

 

作品集はこちら

 

 

おわりに

今回はワンポイントアイコンを作ってアイキャッチ画像に統一感を出そう!というお話でした(´-`).。oO

「外注ってハードル高いよな・・・」そう思っている方にとって少しでも安心感を持っていただけたらうれしいです ( ˘ω˘ )
ロゴのプロセスなども、いつかご紹介できたらいいなぁ。笑

「トーン&マナー見直してみようかな」とか「ワンポイントロゴいいね!」や「さめはだ舞子さん最高!!!」という方は、読者登録、はてなブックマーク、コメントお待ちしております ^^

また、Twitterもしていますので、よろしければお声掛けください ‪( ˘ω˘ )‬
とっても素のわたしでつぶやいています。笑


それでは、本日はこのへんで。
お付き合いいただきまして、有難うございました ^^

あいまいみー
あいまいみー
そんなことより、さめさん人形かわいすぎる件!!!!(興奮)
おしごと依頼について

Webデザイン・ランディングページ(LP)・ロゴデザイン・名刺・リンクバナー・カラー設計・ライティング(寄稿)など、グラフィックデザイン、DTP、Web まで幅広くお受けしております。

 まずは作品がみたい ◎まずは相談してみる ◎

まずはお気軽にご相談くださいませ ( ˆoˆ ) ✧*。