URLを指定するとMacBookなどにスクリーンショットを埋め込んでくれるサービスはよくありますが。例えば、次のサービスなど。
» Magic Mockups • Free real-life mockup generator
今日、ご紹介するサービスはそのスクリーンショット内で、ブラウジングできる、つまりスクリーンショット内のサイトのリンクで異動することができるサービスがあったので試してみました。
» Mockerie.io – Mockup your website or app
Try Nowのボタンをクリックして作成開始。メールアドレスとスクリーンショットを撮りたいサイトのURLを入力。今回はこのブログのサイトを入れてみました。
次に台紙となる画像を選択します。
すると、このブログのスクリーンショットが組み込まれた画像が作成されています。この画像にフィルターを掛けることもできます。
細かい設定を終えたら、貼付用のコードを表示。こちらのコードをブログなどに貼り付ければ完了。
コードを貼り付けてみました。Mockerieで作成したものはこんな感じ(うまく表示されていればいいのですが…うまく表示されていない場合にはリロードすると、大抵表示されるようになります)。
スクリーンショットだけでなく、YouTubeを再生させることもできます。この場合はサイトのURLの代わりに、YouTubeの貼付用のコードから以下のURLを抜き出し、URLの最後に「?enablejsapi=1」を付け足したものを指定します。
今回の例では「https://www.youtube.com/embed/wzpKIhJJ7XE?enablejsapi=1」と入力。
すると、このようにYouTubeの画像が表示されます。YouTubeの画像部分をクリックすると再生します。(こちらは、説明用の画像)
こちらがMockerieで作成したもの。こちらもうまく表示されるといいのですが。
モックアップで表示されるスクリーンショットが小さいサイズとなるので、ブラウジングさせる必要があるのか、と感じていますが、似たようなサービスがたくさんあるので、このような機能が付いていてもいいんじゃないかと思います。