【Screely】画像をMacっぽいモックアップに変換できるサービス

2022年7月13日Webサービス

Screelyのアイコン

この記事では、アップロードした画像を、Macっぽいウィンドウのモックアップに変換できるウェブサービス「Screely」について書きます。

Screelyのスクリーンショット

画像を、Macっぽいウィンドウにはめ込んで、画像保存できるサイトです。

サイトにアクセスして、PC内にある画像をアップロードします。瞬時に、Macっぽい美しいデザインのモックアップに変換してくれます。

モックアップとは、「模型」という意味です。分かりやすく言うと、Macっぽいウィンドウ風の画像を作成できるということです。

「画像をそのままSNSにアップロードするのは、なーんか味気ない!おしゃれな枠組みをつけて、美しいデザインに仕上げたい!」という方におすすめです。

モックアップのデザイン、スタイルの変更機能、ダーク・ライトの切り替え、影のオンオフ、背景色の変更、背景色のサイズ変更などのオプションが用意されています。簡単な画像編集機能も利用できます。

利用しているOSや、ブラウザに左右されることなく利用できます。

ポイント

ウェブサイトをスクリーンショットして、自動的にScreelyにアップロードしてくれるChrome拡張機能もあります。あらかじめ用意した画像ではなく、ウェブ上をスクショしたい方におすすめです。

提供元:Jurn

アクセス方法

以下のリンクからアクセスできます。

また、Chrome拡張機能も用意されています。拡張機能単体で動作するものではなく、あくまでサポート用といった感じです。拡張機能アイコンをクリックすると、自動的に表示している画面をスクショして、Screelyサイトを表示してくれます。

使い方

画像のアップロード

サイトにアクセスしたら、「Browse files」をクリックして画像を選択するか、直接画像をドラッグ&ドロップして追加します。

Instantly Turn a Screenshot into a Browser Mockup

追加できたら、編集画面に切り替わります。既に、完成された状態でプレビューが表示されます。右側のサイドバーから外観を調整していきます。

Screelyに、愛媛&高知旅行にいった際に撮影した写真をアップロードした画像

ウィンドウの外観

「Window」項目で、上部のバーについてのデザインを変更できます。「Window Type」が、バー自体のデザイン、「Window Style」が左上の3つのボタンのデザインです。

Screelyの編集画面1 Window

例えば、「Window Type」を「Browser Window」にすると、ヘッダーがブラウザ風に変化します。アドレスバーと思われる白い図形が表示されます。

「Window Type」を「Browser Window」にした画像

右上の2つのアイコンから、影のオンオフ、ライトかダークか切り替えできます。

Screelyの編集画面2 影のオンオフ、ライト・ダークモードの切り替え

背景色の変更

「Background」の「Color」で背景色を変更できます。カラーパレットの中から直感的に好きな色を選択できます。

Screelyの編集画面3 BackgroundのColor

背景のサイズ

「Padding」で、背景部分のサイズを調整できます。「Vertical」が上下、「Horizontal」が左右です。スライダーになっているので、マウスで動かして調整します。

実際に調整しているGIF画像を貼っておきます。

Screelyの編集画面4 「Vertical」と「Horizontal」を調整しているGIF画像

画像編集

簡単ですが、画像の編集機能も実装されています。

画像の上にマウスを置くと、下部に鉛筆ボタンが表示されます。クリックで編集画面を開きます。その横のゴミ箱アイコンをクリックすると、画像を削除して、新規に追加できます。

Screelyの編集画面5 画像の編集ボタン

画像の切り抜き、描画、図形の挿入などができました。

Screelyの編集画面6 画像の編集画面

画像の保存

編集できたら、右側サイドバー内にあるDownloadボタンをクリックします。画像がPC内に保存されます。

実際に作成した画像を貼っておきます。

Screelyで、Macっぽいモックアップに変換した画像

僕は、Macを触ったことがないので分かりませんが、綺麗です。ただの写真が、一気におしゃれなプログラマーな方が公開しているような、美しい写真に早変わりです。

感想

以上、任意の画像を、Macっぽいウィンドウのモックアップに変換してくれるウェブサービス「Screely」についてでした。

似たようなサービスで、入力したコードを綺麗に画像化する「Ray.so」や「CodeZen」もあります。

Posted by ナポリタン寿司