読者です 読者をやめる 読者になる 読者になる

Brian'z Imagination

ブライアンねこの、頭の中。

Brian'z Imagination

アイキャッチ画像作成に便利!MacやiPhoneにハメコミ合成ができる最強オンラインツール7つ

デザイン

f:id:x93mg:20160717090635j:plain

ブログって書いているときは非常に集中するものだけれど、1万字もの大作を書き終えてしまうとふぇぇっと腑抜けた感じになってしまう。けれどもそんな量の文字数(つまり文字ばかり)だと読みづらい。ぼくのブログの記事は基本的に長いので、アイキャッチ画像も入れるし、間にもなるべく画像を入れるようにして、読みにくさを極力減らしている。このあたりは「図版率」「ジャンプ率」も関係すると思うので、興味があるひとはこちらの記事を読んで欲しい。

ところで、アイキャッチ画像を調達する場合は、だいたい次のどれかだと思う。

  1. 一眼レフやスマホで自前で撮影する
  2. お絵かきツールで描いてみる
  3. IllustratorやPhotoshop、PowerPointで作成する
  4. Adobe StockやPixta、ぱくたそなどの画像配布サイトで探す
  5. ハメコミ画像を作る

一眼レフもかなり値段が下がってきたし、プライムデーを終えた今でもミラーレスなら2万円台で買えるので、自前で綺麗に撮影するのも以前よりカンタンにはなったとは思う。しかしながら、「文章書き」としてはわざわざお出かけしてそのブログエントリーにあった写真を撮ってくるというのは少々面倒くさいものである。

お絵かきでいうと、「何かのヒント」に出てくる謎のキャラクター「ママのライフは〜」あたりがすごい。もうなんというか、アイキャッチっていう次元ではなく絵がコンテンツになっている感がすごい。でもぼくは絵のセンスがきっとないので、このへんは諦める。

謎すぎて逆にファンになってしまう(笑)

IllustratorPhotoshopは、ブログを書くのであれば、デザイナーでなくても持っていて損はないと思う。旅行記やレビュー記事を書くのに写真は外せないけれど、一眼などを持っていない場合に、スマホの写真をこれらのソフトで加工すれば結構いい感じに映る。また、PowerPoint図解写真を入れるときに結構便利Office SoloならWordやExcelの最新版も使えて月々1,200円程度で利用することができる。お金をかけたくないひとはGimpのようなフリーソフトやPixlrのオンラインエディタを使う手もある。ただし、この手のものは書籍などまだまだリソースが少ないのが現状だ。

Adobe StockPixtaは有料だがさすがプロが撮っているだけあっていい写真が多い。最近では同じクオリティで無料で画像が使えるぱくたそPixabayPexelsあたりも、画像のストック数が増えて使い勝手がいい。ぼくもよく利用している。

もう9000枚突破したんだ…すごい。

だいたいこれくらいの手段を使えば素敵なアイキャッチ画像が調達できるのだけれど、今回はそうではない選択肢「ハメコミ画像」について、その概要とオススメツールを紹介していく。

こういうiPhoneの画面に画像を当て込むヤツ。

これを使えば簡単にMacやiPhoneでの合成画像が作成できる。特に最後に紹介する「Mockup Editor」ってやつがすごいので、少々語らせてもらうことにしよう。

1段上をいくアイキャッチ画像をハメコミ合成で作る3つの理由

f:id:x93mg:20160712003611p:plain 前回の記事で作った「Prime Day」のハメコミ

このブログの記事には必ずアイキャッチ画像を入れていて、なおかついくつかの記事にはいわゆる「ハメコミ合成画像」を使っている。まあ実際に正式な名称があるのかどうかは知らない。海外では「Mockup」とでも言うのだろうか、でもしかし「Mockup」の意味も広いので、とりあえずここでは「ハメコミ合成」とか「ハメコミ合成画像」っていうふうにでも呼んでおく

それで、ぼくはなぜわざわざ手間がかかる「ハメコミ合成」をアイキャッチで作るのか? 実はそこには3つの重要な理由が隠れていた。

理由1:かっこいいから

かっこいいから。以上!…っていうとこの記事が終わってしまうのだけれど、なんか「ハメコミ合成」ってカッコいいデザインのものがなぜだか多い。これは、「ハメコミ」自体がカッコいいというより、やっぱり当て込むiPhoneやMacのプロダクトがカッコいいからだということに最近気がついた。Apple製品カッコいいよね。プライムデーでMac Bookが即完売したのも分かる。逆にブラウン管やWindowsパソコンでのハメコミだと、まあモノにもよるけどApple的なかっこよさは出ないよね。

理由2:ハメコミすることで世界で1枚の画像になる

のちほど紹介するけれど、ハメコミツールの元の画像ってこんな感じになっている。

f:id:x93mg:20160715195819j:plain 画面の黒いところにハメコミを行うわけだ。

これ自体は再配布可能な画像ではあるのだけれど、これに画像をハメ込むと、こんな感じになる。

f:id:x93mg:20160715200402p:plain

2枚の画像の掛け算になるので、これだけで世界で1枚の画像になる。ねこがちょっとブサイクである。

さらに、無料画像編集ソフトの「Skitch」で簡単に文字入れわずか1分で、こんな感じになる。

f:id:x93mg:20160716005032j:plain

若干の手抜き感はあるけれど(笑)それなりにブログ記事に置いても恥ずかしくない程度にはなった。

そういうわけで、ハメコミ画像を作るとオリジナリティ溢れるクールなアイキャッチ画像が簡単に作れるのだ

理由3:そのまま使うよりオシャレ

上の例でいうと、別にネコの画像をそのまま使ってもいいのだけれど、MacやiPadなどの画面に映し出された写真は客観的な距離感もあり、そのまま使うよりもお洒落に見える。ありふれた画像も、ハメコミ合成を使うことで日常に溶け込み、スルメになる(味が出る)ものだ。

MacやiPhoneにハメコミ合成ができる最強オンラインツール7つ

ハメ込む画像を1枚用意すれば、その画像をアップロードするだけでハメコミ合成を作ってくれるオンラインツールは、実は巷に結構出回っている。そこで、ぼくがよく使っているハメコミ合成サービスを7つ紹介していくことにする。

1. Frame

f:id:x93mg:20160716010319j:plain

Frameはイギリス発の画像ハメコミツール。ハメコミ元の画像は執筆現在で35とそれほど多くはないけれど、無料でクールなハメコミ画像を作ることができるので重宝する

f:id:x93mg:20160716010603j:plain

Androidのハメコミも作成できるけれど、Apple製品のフレームは豊富。

リアルな生活を想像させるようなモックアップ画像がたくさんある。まだまだ素材は少ないけれど、画像をアップするだけでダウンロードしてすぐに使えるのでオススメ

2. Place it!

f:id:x93mg:20160716011750j:plain

Place it!も昔からある画像ハメコミサービスで、ご存知の方も多いだろう。ただ、ちょっと使わないうちにかなりバージョンアップしていて、Kindleや普通のTVまでハメコミができるし、動画のハメコミまで出来るようになった。これはすごい。

f:id:x93mg:20160716011810j:plain

完全無料のモノには「Free」マークがついているけれど、その他のものもウォーターマーク付(Place it!で作りましたよマーク付)なら無料でダウンロードすることができる。ウォーターマークを外したい場合には、月額12ドル支払うと取り外せる。余談だけどハメコミ画像をハメ込むとこれまた面白い。

3. MockUPhone

f:id:x93mg:20160716015831j:plain

MockUPhoneも同じくApple製品などに画像をハメコミ合成できるサービスだ。名前だけあってiPhoneシリーズのモックアップ素材が豊富だけれど、iMac系も少し揃っているのと、面白いのがなぜかサムスンのスマートTVのハメコミ合成が作れる。

f:id:x93mg:20160716084646p:plain

こちらのサービスでは余分な背景がつかず、透過のPNG画像で生成されるので、他の画像に合成するのも楽ちんだ。iPhoneだと、開発したアプリのスクリーンショット画像を作ったりするのに便利そう。

4. Device Art Generator

f:id:x93mg:20160716085653j:plain

Device Art Generatorは、AndroidのDevelopersサービスが公式に公開しているモックアップ作成サービスだ。この手のサービスはどちらかというとApple製品が多くなってしまう中、Androidのハメコミ合成画像もバッチリ作成できる

f:id:x93mg:20160716090112j:plain

試しにAndroid Wearで作成してみたのだけれど、今まで紹介したようなリアルなハメコミというよりは、本当に取り急ぎの画像を作成する感じだ。PNGじゃないとダメ、画像縦横比は指定したものじゃないとダメなど、いろいろ制約が厳しかった。

5. iPhone Screenshot Maker

f:id:x93mg:20160716012756j:plain

iPhone Screenshot Makerは、その名の通りiPhoneにハメコミ合成をしてくれるのだけれど、iPhoneだけでなくMac BookやApple Watch、そしてなぜかゲームボーイのハメコミに対応している

f:id:x93mg:20160716012816j:plain

ゲームボーイでハメコミした結果がこちら。


…ちゃんと画面もレトロ風になっとる!!!

6. Mockup Editor

f:id:x93mg:20160716090835j:plain

Mockup Editorは最近登場したハメコミ画像サービスなのだが、これがメチャメチャすごい。ハメ込むのはiMacのほかポスターや木製フレームなどがあるのだけれど、何がすごいかというと、ハメ込む先のフレームや家具などを自由に配置したりカスタマイズしたりすることができるのだ。

f:id:x93mg:20160716091046g:plain

フレームの色や大きさを自由に変えたり…

f:id:x93mg:20160716091231g:plain

テーブルの長さを調整したり素材を変更したりできる。すごい。

f:id:x93mg:20160716091914j:plain

いろんなアイテムを置くこともできる。パソコン以外のアクセサリも執筆時点で231種類用意されている

f:id:x93mg:20160716092047j:plain

MacBookのほか、黒猫やスタバの紙袋、サボテン、ワインを置いてみた図…なんか独自の世界観を生み出せそうで好きなサービスだ。

f:id:x93mg:20160716092420j:plain

基本の構図はそのままで、背景を変えて男性の背面(?)を配置するだけでもだいぶ写真の雰囲気が変わる。ドラッグアンドドロップでいろんなものを置きまくれるのはメッチャ面白い。しかしながら、置きすぎると少々混雑しますな(笑)

7. PhotoFunia

f:id:x93mg:20160716013852p:plain

PhotoFuniaは今までに紹介したものとはちょっと違った視点でハメコミ合成を作成してくれるサービスだ。単なるパソコンやスマホへのハメコミではなく、街中のあらゆるシーンに溶け込ませたり、歴史上の人物とコラボレーションするようなオモシロ写真をつくることが出来る。

例えばこんな感じ。

f:id:x93mg:20160716013914j:plain

ねこ美術館…?

f:id:x93mg:20160716014327j:plain

このブログが街を飾る日はいつだ…?

とにかくクオリティがハンパない!まるで本当に街にあるような写真が、素材をアップロードするだけで簡単にできるのは超面白い。

まとめ

画像を用意しておきつつ、画像をハメ込むこれらのモックアップツールでは、世界で唯一無二のオリジナル画像を作成できるので、ブログを書く人間には非常に役に立つに違いない。ブログがまだ文字ばかりで簡素なのであれば、1枚くらいアイキャッチ画像を入れてみれはどうだろうか。

今日のつぶやき。

ねこのおすすめ。

インスタはじめました。

ブログ記事と関係なく私生活の画像を公開しています(笑) 超プライベートなのであんまりブログの内容と関係ないですが、ぜひフォローミー!

「実は草食系ネコ」

BRIAN CATさん(@thebriancat)が投稿した写真 -

B! 定期便をご利用ください。

このブログでは生産性・テクノロジー・ライフハックなどの記事を配信しています。見逃さないように読者登録をお忘れなく!