<制作実績>ジモコロ、オモコロのアイキャッチ(OGP画像)を作りました

WEB

本記事は、「制作実績」のお話です。

制作にあたるSNSでの発信はOKといただいており、大好きな会社さんとのお仕事でかなり頑張ったのでぜひ披露自慢したく・・!

オモコロへの想い

実はオモコロを運営しておりますバーグハンバーグバーグはWEB業界に入って間も無く知った会社です。

オモコロ あたまゆるゆるインターネット
暇つぶしにピッタリの漫画や記事を毎日のように配信しています。いくら読んでも無料、そしていくら読んでも頭がよくなりません。

当時は「偉人ブログというものにめっちゃハマっててその連載をしていたのがオモコロというサイトだったのです。

偉人ブログって?

偉人ブログ
偉人がブログを書いたりしています。

歴史上の人物が現代風にブログを書いているサイト。じわじわきます。

久々に掲載元のサイトさんを見に行ったら偉人LINEもあった。書籍化もされてます!

オモコロ自体のインパクトもすごい

引用:オモコロ(https://omocoro.jp/)

インパクトがすごいWEBメディアサイトなのですよ。。!

とにかく面白いことやってる会社だ!ほほーバーグハンバーグバーグって会社なのねー。すごいなあと思っていたのですが、まさかそんな風に思っていた会社と10年越しでお仕事できることになりました。

嬉しい!!!でも失敗しないように頑張らな!(プレッシャー)

実際に何を作ったか

今回制作したのは、バーグハンバーグバーグが手がける「オモコロ」とアイデムという求人の会社さんと2社で運用しているWEBメディアサイト「ジモコロ」にて記事のOGP画像(アイキャッチ画像)を作りました。

イーアイデムの地元メディア「ジモコロ」
どこでも地元メディア「ジモコロ」は、地元の求人に強い株式会社アイデムとゆる〜いWEBコンテンツ作りが得意な株式会社バーグハンバーグバーグによる新感覚のWebサイトです。

OGPってなに?どんなもの?

WEB業界の方ならわかるかもしれませんが、OGPってなんぞや!というお話ですね。

どんなものなの?

Open Graph Protocolの略で、FacebookmixiGoogle+などのSNS上でWebページの内容を伝えるために定められたプロトコルです。OGPを設定しておくと、URLが共有された際に、設定された画像やタイトル・説明文が表示されるようになり、ユーザーに対して、フィード上あるいはウォール上でWebページの内容を伝えることができます。

引用元:OGPとは – Content Hub(コンテンツハブ) | ナイル株式会社

簡単に言うと、SNSなどにシェアした時に出てくる画像ってことです。

おしゃれだったりインパクトのあるバナーだとつい押しちゃったりしませんか?

OGP画像とはその役割を果たすバナーとも言えます。

オモコロで作られているOGP画像

オモコロやジモコロはこのOGP画像(アイキャッチバナー)についても、記事と同じくらい力を入れていて、今まで作られたOGP画像も素敵なものばかりです。

特にお気に入りなのがこちら(※お気に入りなもので私の制作実績ではありません)

https://www.e-aidem.com/ch/jimocoro/entry/galaxy27

山の写真の濃いブルーの空に白フチフォントがすごくよく合ってる。

しかも山のラインアートもかわいい。バランスも完璧!

https://www.e-aidem.com/ch/jimocoro/entry/kanchi03

タイトル周りに雲があしらわれていているのが素敵。

高さをすごくよく表しててよいなーと思います。

https://www.e-aidem.com/ch/jimocoro/entry/mirai02

THE昭和歌謡ってかんじに作られていて好み!
ゆずの「恋の歌謡日」を思い出したよね。。


恋の歌謡日

こ、これは気合いれなくては!!ということで今回お仕事を紹介してくれた友人のディレクションの元、制作しました!

制作したOGP画像はまだですか?

制作物はこちら!

今回制作したものが14本に及ぶので、まとめてみました!

わかりづらいかと思うので、お気に入りをピックアップします!

1.ネオン風ロゴがお気に入り「三ツ寺会館」のOGP画像

ネオンサイン風にロゴを作ったのがお気に入り。最初の方に作ったからかなり時間がかかりました。

2.かわいいインスタグラマーのマダムOGP画像

素敵なファッションのマダムの記事です。インスタ風のカラーと写真をたくさん載せてあげたくて配置バランスに没頭しました。記事自体も素敵だから是非みてほしい。

オモコロのメンバーがラジオドラマをしたOGP画像

作っている最中はバーグハンバーグバーグの方のお写真だあああと震えました(ミーハー)

制作に関して

詳しい制作に関するお話が知りたい!

制作時間は?

やり始めは感覚がつかめず、半日くらいかけてしまったけど、慣れてくると2時間~3時間ほどで制作しました。

作る工程は?

お写真とブログ記事、タイトルを共有いただき、インスピレーションが湧くイラストやカラーを交えています。

    1. 写真の見せたい位置を決めて置く
    1. タイトルをざっと置く
    1. タイポグラフィを調整しながら整える
  1. 素材を配置して、全体的な微修正を行っていく

だいたいこんなかんじで作っていきました。

素材やロゴは素材サイト?自作?

シェイプなど一部は自作しましたが、実はほぼ有料のデザインフォントや素材サイトを活用しております。

制作期間が限られているのでかなり重宝いたしました!

ちなみにフォントはmojimoがかなり役に立ちました。。ありがてえありがてえ。

素材はイラストACというサイトのヘビーリスナーです。すごく使いやすい!(無料でも制限ありですが使えます!)

制作にあたってのひとこと

アイキャッチ画像って大事だなと思いました。前述もしましたが、写真やタイトルに惹かれると自然とクリックします。

写真だけでも素敵なものももちろんあります。
ただ、それに内容を端的に説明するようなキャッチがあれば、内容が想像できて興味を持つきっかけにもなる、という学びになりました。

そしてそして何より、この仕事を繋いでくれ、ディレクションをしてくれたデザイナーの友人に感謝です!本業があるのに本当にありがたかった。。!

よく注意された点(制作にあたり)

    • 同じデザイン表現だとバナーエリアに並んだ時にバランスが悪いので注意
    • 可読性は下げない
    • 写真を隠しすぎない
    • ぎりぎりまで文字は大きく見せる
  • OGPのエリアをきっちり守ること

OGPのエリアってなに?

実はシェアされるSNSによって、表示できるサイズが違います

制作の際には、OGPシュミレーターというサイトでチェックしながら作りました。一括で確認できるのでおすすめですよー!

OGP画像シミュレータ | og:image Simulator
デザインしたOGP画像をドラッグ&ドロップし、タイムライン上でどう見えるかシミュレートしてみよう!

実は自分のブログではあまりまもってないごにょごにょ。。

まとめ

2018年の8〜9月の間のメディア記事14本のOGP画像(アイキャッチバナー)を担当いたしました。

あらためて全部並べると壮観ですね!

今回のお仕事は期間限定だったけど、また機会に恵まれると良いなあ。

バナー制作に限らずサイトや、ページ制作なども行っています。

現在頑張って営業もしてるので、実績ができたらまた紹介していきます‼️

気になった方はぜひtwitterなどでお声がけくださいませー。

コメント

タイトルとURLをコピーしました