ブログ記事のヘッダーアイキャッチ画像にも使える高解像度おしゃれモックアップをsmartmockups.comで作ってみた

こんにちはりょうへいです♪

今年最初の投稿となりますがしれっと行ってみます♪
※今年も何卒よろしくお願いいたします。m(__)m

突然ですが、モックアップ画像って知っていますか?

りょうへい的には最近知ったのですが、スマホアプリなど説明画像やバナーなんかでよく目にするような、スマホとかPCなどのデバイスの画面の中にアプリの画像であったり、ウェブサイトの画像が写っているといった感じの画像です。

また、そういった画像は画面内に表示させたい内容を画像アップロードやURL指定で簡単に作れるサービスがいろいろとあったので試してみたのですが、とてもいい感じだったのでご紹介です♪

アプリやウェブのバナーに便利に使えるモックアップ画像無料簡単作成サービス

りょうへいの場合は、ブログ記事のアイキャッチ画像にフリー画像をよく愛用しています♪

それに通じる感じのサービスで、フリー画像の中に任意の画像等をはめ込むちゃうサービスがいろいろありまして、いくつか試してみたなかで一番よかったのは↓こちらでした

https://smartmockups.com/

https://smartmockups.com/

https://smartmockups.com/

けっこう素材の種類も多くて、スマートフォンが並んでいるだけの、シンプルなものから、デスクトップPCだったりラップトップだったり、はたまた、アップル製品だったりAndroidといったものを選択できます♪

また、背景ありの写真もバラエティに富んでいて、「カフェの風景」だったり、「仕事場のデスク」などなど、さまざまなシチュエーションのものがチョイスできるので、いろいろと使えそうです。

りょうへいの場合は、当サイトのヘッダー画像として、「何かPCとかタブレットを使用しているシーン」を勝手にイメージしていて、イメージに近いものを使いたいな~!

なんて、当初から試行錯誤していたものですが、この利用シーンつきのモックアップがちょうどあったのでした!
とても、りょうへいのイメージとマッチしていたので、おもわずブログのヘッダー画像として作ってみました♪

実際に試してみると落とし穴もあったので詳細の流れを解説してみます!

SMARTMOCKUPS Win/MAC用アプリ版は使っちゃダメだった!?

SMARTMOCKUPSに辿り着いて、ぱっと見だと、ブラウザ上で選択して画像作成ができるサイトだと判りました。

また、とても目立つところに表示されているから、Windows / Mac 用のスタンドアロンアプリも存在している!

なんてアピールがすごいのでw
ウェブ上でのサービスよりも真っ先に、提供されているアプリに飛びついてダウンロード&インストールしてみました!

しかし、これは結果的に有料版を利用しない限り使ってはいけないヤツでした(^^;

いちおう解説 アプリ版のSMARTMOCKUPSはこんな感じ♪

アプリ版があるならば!
と真っ先にダウンロード・インストールして試してみました。

セットアップして起動させてみると、ブラウザではなく単独起動してくれました。
メニューからモックアップのベース画像を選択!

なかなかシンプルでスマートな雰囲気….

アプリでの作成工程などは割愛しますが
結果的に作成した画像は↓こんな感じ

これ、ぱっと見だと、判らないかもしれませんが…
なんと画像の中に白いスカシが…www

これはあれですね「社外秘」とか透かしで入るようなアレ。

ウォーターマークというやつです。

超ショックwww!!
フリーとかサイトではうたっているけど、SMARTMOCKUPSはアプリをレジスト($69ナリ)しないと、まったく使えないヤツや!

なんて、思いました(そういうサービスも、まあ、よくあるし…)

ちょっと、そっと閉じて別なサイトを試してみようか….
とスルーしかけましたが、違いました!!

ウェブブラウザからの利用なら無料版でもウォーターマーク入らないよ!

なんとアプリではなくて、ウェブブラウザ上からサービスを利用するなら、ウォーターマーク入らなかったよ!!

しかも、アカウント作成もログインも不要で超簡単!便利!

素敵!無料でフル機能使えるよウェブブラウザ利用バージョン!

いきなりアプリ版でやる気失くしそうになりましたが違いました!

SMARTMOCKUPS素晴らしいです!

ウェブブラウザからの利用ならば、ウォーターマークなんて入らなかったんです。

一気に使える度UP! 高感度もUP! (^^;

さっそくウェブ版でモックアップ画像作ってみた!

モックアップ画像を作る場合は、まず最初にベースとなる画像を選択します。

画像の中の「YOUR DESIGN HERE」の部分に任意の画像だったり
URLの内容が表示できちゃいます!

画像選択後、URL指定してみる


こちらの画像のように、URLの中に表示させたいURLを入力します。

「Capture」ボタンをクリック!

URL(または画像アップロード)指定後は「Capture」をクリックするだけ!

画面の中に指定したURLで表示される画面が表示されました!

なんて、簡単。
でも、この時は保存した画像にはどーせウォーターマーク入るんでしょ!
なんて、やさぐれ気分でしたがw

画像を保存しようとすると解像度選択が出ました。

けっこう高解像度でも出力が可能です!!

今回はサイトのヘッダー画像に使いたいので、もちろん、一番大きい解像度を選択!

すると、画像を保存できました。

たったこれだけで、いい感じのモックアップ画像ゲット!

ダウンロードした画像をチェックしてみました!

たしかに高解像度でキレイ!

そして、ウォーターマークも入ってないよ!!

 

先にアプリ版で作ったら失望したw アノ画像も作り直してみた♪

アプリ版では無料利用に制限を感じたんですが、ウェブ版では、選べる画像が少ないとかあるんじゃね?

なんて思いもありましたが、ざっと見た感じ画像種類にも違いがなさそうです。

アプリ版で試したら吐き出した画像にウォーターマーク入っていて失望した例の画像も同じものがあったのでウェブ版で試してみたら普通に作成できた!

サクッといくつかヘッダー画像作っちゃった♪

当サイトではヘッダー画像として、けっこう解像度高いものを設定することができるのですが、推奨サイズも結構大きいのですが、スマートモックアップで高解像度出力してから、さらにお好みのサイズにトリミングして表示させれば、十分高画質なレベルの画像となるので、サクサクと複数作成してみました♪

現在は当サイトほぼゼロのトップページで複数パターンのヘッダー画像がランダムに表示されるようになっていますので、そちらもチェックしてみてくださいね♪

選択できる画像もけっこうバリエーションがあるので、いろいろな用途で便利に使えそうです。

自分のサイトを表示させたモックアップ画像を作成してみると結構楽しい!

簡単にお試しできるので、この記事を読んて興味が湧いたら、ぜひトライしてみていろいろ活用してみてください♪

ブログランキング参加中♪
応援よろしくお願いしますm(__)m



WordPressランキング
にほんブログ村 IT技術ブログ CMSへ
にほんブログ村

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

%d人のブロガーが「いいね」をつけました。