モックアップしたスクリーンショット内でブラウジングができる「Mockerie.io」

URLを指定するとMacBookなどにスクリーンショットを埋め込んでくれるサービスはよくありますが。例えば、次のサービスなど。

» Magic Mockups • Free real-life mockup generator

今日、ご紹介するサービスはそのスクリーンショット内で、ブラウジングできる、つまりスクリーンショット内のサイトのリンクで異動することができるサービスがあったので試してみました。

» Mockerie.io – Mockup your website or app

Mockerie_io_-_Mockup_your_website_or_app

Try Nowのボタンをクリックして作成開始。メールアドレスとスクリーンショットを撮りたいサイトのURLを入力。今回はこのブログのサイトを入れてみました。

Mockerie_io_-_Mockup_your_website_or_app

次に台紙となる画像を選択します。

mockerie_io_MockList_954391963cd64eba9b8433ca1bcfb922_8a5f80734c774ef2bac041111f9dfd46

すると、このブログのスクリーンショットが組み込まれた画像が作成されています。この画像にフィルターを掛けることもできます。

mockerie_io_mock_87_954391963cd64eba9b8433ca1bcfb922_8a5f80734c774ef2bac041111f9dfd46

細かい設定を終えたら、貼付用のコードを表示。こちらのコードをブログなどに貼り付ければ完了。

mockerie_io_mock_87_954391963cd64eba9b8433ca1bcfb922_8a5f80734c774ef2bac041111f9dfd46

コードを貼り付けてみました。Mockerieで作成したものはこんな感じ(うまく表示されていればいいのですが…うまく表示されていない場合にはリロードすると、大抵表示されるようになります)。

スクリーンショットだけでなく、YouTubeを再生させることもできます。この場合はサイトのURLの代わりに、YouTubeの貼付用のコードから以下のURLを抜き出し、URLの最後に「?enablejsapi=1」を付け足したものを指定します。

今回の例では「https://www.youtube.com/embed/wzpKIhJJ7XE?enablejsapi=1」と入力。

機動戦士ガンダムUC_episode_7_プロモーション映像02__HD___PlayStation®Store__-_YouTube

すると、このようにYouTubeの画像が表示されます。YouTubeの画像部分をクリックすると再生します。(こちらは、説明用の画像)

mockerie_io_mock_87_954391963cd64eba9b8433ca1bcfb922_01f2f9f77bb748989097e108e214b936

こちらがMockerieで作成したもの。こちらもうまく表示されるといいのですが。

モックアップで表示されるスクリーンショットが小さいサイズとなるので、ブラウジングさせる必要があるのか、と感じていますが、似たようなサービスがたくさんあるので、このような機能が付いていてもいいんじゃないかと思います。

スポンサーリンク