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

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

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

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

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

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

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

りょうへいの場合は、ブログ記事のアイキャッチ画像にフリー画像をよく愛用しているのですが、それに通じる感じのサービスで、フリー画像の中に任意の画像等をはめ込むちゃうサービスがいろいろありまして、いくつか試してみたなかで一番よかったのは↓こちらでした

https://smartmockups.com/

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

また、背景ありの写真もカフェだったり仕事場のデスクなどバラエティ豊富なのでいろいろと使えそうです。

りょうへいの場合は、当サイトのヘッダー画像として
「何かPCとかタブレットを使用しているシーン」を
勝手にイメージしていて、イメージに近いものを使いたいな~
なんて、当初から試行錯誤していたものですが
この利用シーンつきのモックアップがとてもりょうへいのイメージと
マッチしていたので、おもわずブログのヘッダー画像として作ってみました♪

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

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

SMARTMOCKUPSに辿り着いて、ぱっと見だと
ブラウザ上で選択して画像作成ができるサイトだと判ったのですが
なんと、Windows / Mac 用のスタンドアロンアプリも存在している!

とても目につくところにあるものだから、ウェブ上でのサービスよりも
真っ先に、提供されているアプリに飛びついてダウンロード&インストール!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

SMARTMOCKUPS素晴らしいです!

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

一気に使える度UP!!!

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

先にアプリ版で作ったら失望した画像も作り直した

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

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

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

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

当サイトではヘッダー画像としてけっこう解像度高いものが
設定できるのですが推奨サイズも結構大きいのですが

スマートモックアップで高解像度出力してしまえば
そこからさらにトリミングして表示させれば
十分なレベルの画像となるので、サクサクと複数作成してみました♪

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

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

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

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

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



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

 

コメントを残す

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

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