【Screely】サイトのスクショをMacっぽいウィンドウにする拡張機能
この記事では、ウェブサイトをワンクリックで、Screelyサービスに貼り付けられるChrome拡張機能「Screely: Instant Browser Mockups」について書きます。
ウェブサイトのスクリーンショットを、Macっぽいウィンドウに当てはめてくれるウェブサービス「Screely」で開いてくれるChrome拡張機能です。
SNSなどで画像を共有したい時に便利です。ただのスクショよりも、Macっぽい綺麗なウィンドウに当てはめた方が、見る人によっては綺麗と感じるかもしれません。
Screelyは、画像を、Macっぽいウィンドウにはめ込んで保存できるサイトです。サイトにアクセスして、PC内にある画像をアップロードすると、瞬時にMacっぽい美しいデザインのモックアップに変換します。
Screely自体の使い方については、下記記事を参考にしてみてください。
https://www.naporitansushi.com/screely/通常、ウェブサイトをScreelyで編集しようと思うと、ウェブサイトをスクリーンショット撮影、ドラッグ&ドロップでScreelyに追加…といった流れです。本拡張機能を使うと、スクショ撮影→Screelyにアップロードの作業を一気に処理してくれます。
Chrome拡張機能だけで、Firefoxアドオンはありません。
また、僕の環境だと、Chrome拡張機能が使えるはずのVivaldiで動作しませんでした。インストールはできましたが、アイコンをクリックしても、画像がスクショされませんでした。
Chromeブラウザでは、正常に動作しました。
リリース元：Screely
記事執筆時のバージョン：1.1.1（2021年2月28日）
インストール方法
Chromeウェブストアからインストールできます。
https://chromewebstore.google.com/detail/screely-instant-bro...「Chromeに追加」をクリックします。
拡張機能のオーバーフローメニュー内に、拡張機能ボタンが追加されればOKです。
使い方
スクリーンショットを撮影した場所を、ブラウザ（Chrome）で表示します。
ページを表示したら、インストールした拡張機能ボタンをクリックします。
Screelyが新しいタブで表示されます。自動的に表示領域をスクリーンショット→アップロードしてくれています。ブラウザのタブやツールバーなどの余計な要素は、自動的に除外されています。
あとは、好きなようにサイドバーから編集するだけです。
この時、Vivaldiブラウザだと正常に表示されませんでした。クリックしても、ただScreelyのトップページが表示されるだけでした。何か別の拡張機能が干渉している可能性もありますね。
Screely自体の使い方については、下記記事を参考にしてみてください。Chrome拡張機能は、スクショ→アップロードの作業を効率化するだけで、Screelyの操作自体は変わりません。
感想
以上、Screelyのサイトに、表示しているスクリーンショットをアップロードしてくれるサポート的な立ち位置のChrome拡張機能「Screely: Instant Browser Mockups」についてでした。
画像をモックアップにはめ込んでくれる系のサービスは色々あるので、探してみると面白いです。最近書いた記事だと、「TweetPics」とかですね。綺麗なグラデーションに埋め込めます。