【Screely】サイトのスクショをMacっぽいウィンドウにする拡張機能

Chrome拡張機能,Webサービス

Screelyのアイコン

この記事では、ウェブサイトをワンクリックで、Screelyサービスに貼り付けられるChrome拡張機能「Screely: Instant Browser Mockups」について書きます。

Chrome拡張機能経由で作成したScreelyのスクリーンショット

ウェブサイトのスクリーンショットを、Macっぽいウィンドウに当てはめてくれるウェブサービス「Screely」で開いてくれるChrome拡張機能です。

SNSなどで画像を共有したい時に便利です。ただのスクショよりも、Macっぽい綺麗なウィンドウに当てはめた方が、見る人によっては綺麗と感じるかもしれません。

Screelyは、画像を、Macっぽいウィンドウにはめ込んで保存できるサイトです。サイトにアクセスして、PC内にある画像をアップロードすると、瞬時にMacっぽい美しいデザインのモックアップに変換します。

Screely自体の使い方については、下記記事を参考にしてみてください。

通常、ウェブサイトをScreelyで編集しようと思うと、ウェブサイトをスクリーンショット撮影、ドラッグ&ドロップでScreelyに追加…といった流れです。本拡張機能を使うと、スクショ撮影→Screelyにアップロードの作業を一気に処理してくれます。

Chrome拡張機能だけで、Firefoxアドオンはありません。

また、僕の環境だと、Chrome拡張機能が使えるはずのVivaldiで動作しませんでした。インストールはできましたが、アイコンをクリックしても、画像がスクショされませんでした。

Chromeブラウザでは、正常に動作しました。

提供元:Screely
記事執筆時のバージョン:1.1.1(2021年2月28日)

インストール方法

Chromeウェブストアからインストールできます。

「Chromeに追加」をクリックします。

Screely: Instant Browser Mockups - Chrome ウェブストア

拡張機能のオーバーフローメニュー内に、拡張機能ボタンが追加されればOKです。

使い方

スクリーンショットを撮影した場所を、ブラウザ(Chrome)で表示します。

ページを表示したら、インストールした拡張機能ボタンをクリックします。

インストールしたScreely拡張機能のアイコン画像

Screelyが新しいタブで表示されます。自動的に表示領域をスクリーンショット→アップロードしてくれています。ブラウザのタブやツールバーなどの余計な要素は、自動的に除外されています。

あとは、好きなようにサイドバーから編集するだけです。

Chrome拡張機能経由で、Screelyサイトを開いた画像

この時、Vivaldiブラウザだと正常に表示されませんでした。クリックしても、ただScreelyのトップページが表示されるだけでした。何か別の拡張機能が干渉している可能性もありますね。

Screely自体の使い方については、下記記事を参考にしてみてください。Chrome拡張機能は、スクショ→アップロードの作業を効率化するだけで、Screelyの操作自体は変わりません。

感想

以上、Screelyのサイトに、表示しているスクリーンショットをアップロードしてくれるサポート的な立ち位置のChrome拡張機能「Screely: Instant Browser Mockups」についてでした。

画像をモックアップにはめ込んでくれる系のサービスは色々あるので、探してみると面白いです。最近書いた記事だと、「TweetPics」とかですね。綺麗なグラデーションに埋め込めます。

Posted by ナポリタン寿司