【Screely】画像をMacっぽいモックアップに変換できるサービス
![Screelyのアイコン](https://www.naporitansushi.com/wp-content/uploads/2022/07/screely_09.png)
この記事では、アップロードした画像を、Macっぽいウィンドウのモックアップに変換できるウェブサービス「Screely」について書きます。
画像を、Macっぽいウィンドウにはめ込んで、画像保存できるサイトです。
サイトにアクセスして、PC内にある画像をアップロードします。瞬時に、Macっぽい美しいデザインのモックアップに変換してくれます。
モックアップとは、「模型」という意味です。分かりやすく言うと、Macっぽいウィンドウ風の画像を作成できるということです。
「画像をそのままSNSにアップロードするのは、なーんか味気ない!おしゃれな枠組みをつけて、美しいデザインに仕上げたい!」という方におすすめです。
モックアップのデザイン、スタイルの変更機能、ダーク・ライトの切り替え、影のオンオフ、背景色の変更、背景色のサイズ変更などのオプションが用意されています。簡単な画像編集機能も利用できます。
利用しているOSや、ブラウザに左右されることなく利用できます。
ウェブサイトをスクリーンショットして、自動的にScreelyにアップロードしてくれるChrome拡張機能もあります。あらかじめ用意した画像ではなく、ウェブ上をスクショしたい方におすすめです。
リリース元:Jurn
アクセス方法
以下のリンクからアクセスできます。
また、Chrome拡張機能も用意されています。拡張機能単体で動作するものではなく、あくまでサポート用といった感じです。拡張機能アイコンをクリックすると、自動的に表示している画面をスクショして、Screelyサイトを表示してくれます。
使い方
画像のアップロード
サイトにアクセスしたら、「Browse files」をクリックして画像を選択するか、直接画像をドラッグ&ドロップして追加します。
![Instantly Turn a Screenshot into a Browser Mockup](https://www.naporitansushi.com/wp-content/uploads/2022/07/screely_13.png)
追加できたら、編集画面に切り替わります。既に、完成された状態でプレビューが表示されます。右側のサイドバーから外観を調整していきます。
![Screelyに、愛媛&高知旅行にいった際に撮影した写真をアップロードした画像](https://www.naporitansushi.com/wp-content/uploads/2022/07/screely_01.jpg)
ウィンドウの外観
「Window」項目で、上部のバーについてのデザインを変更できます。「Window Type」が、バー自体のデザイン、「Window Style」が左上の3つのボタンのデザインです。
![Screelyの編集画面1 Window](https://www.naporitansushi.com/wp-content/uploads/2022/07/screely_02.png)
例えば、「Window Type」を「Browser Window」にすると、ヘッダーがブラウザ風に変化します。アドレスバーと思われる白い図形が表示されます。
![「Window Type」を「Browser Window」にした画像](https://www.naporitansushi.com/wp-content/uploads/2022/07/screely_03.png)
右上の2つのアイコンから、影のオンオフ、ライトかダークか切り替えできます。
![Screelyの編集画面2 影のオンオフ、ライト・ダークモードの切り替え](https://www.naporitansushi.com/wp-content/uploads/2022/07/screely_05.png)
背景色の変更
「Background」の「Color」で背景色を変更できます。カラーパレットの中から直感的に好きな色を選択できます。
![Screelyの編集画面3 BackgroundのColor](https://www.naporitansushi.com/wp-content/uploads/2022/07/screely_04.png)
背景のサイズ
「Padding」で、背景部分のサイズを調整できます。「Vertical」が上下、「Horizontal」が左右です。スライダーになっているので、マウスで動かして調整します。
実際に調整しているGIF画像を貼っておきます。
![Screelyの編集画面4 「Vertical」と「Horizontal」を調整しているGIF画像](https://www.naporitansushi.com/wp-content/uploads/2022/07/screely_12.gif)
画像編集
簡単ですが、画像の編集機能も実装されています。
画像の上にマウスを置くと、下部に鉛筆ボタンが表示されます。クリックで編集画面を開きます。その横のゴミ箱アイコンをクリックすると、画像を削除して、新規に追加できます。
![Screelyの編集画面5 画像の編集ボタン](https://www.naporitansushi.com/wp-content/uploads/2022/07/screely_07.jpg)
画像の切り抜き、描画、図形の挿入などができました。
![Screelyの編集画面6 画像の編集画面](https://www.naporitansushi.com/wp-content/uploads/2022/07/screely_08.jpg)
画像の保存
編集できたら、右側サイドバー内にあるボタンをクリックします。画像がPC内に保存されます。
実際に作成した画像を貼っておきます。
![Screelyで、Macっぽいモックアップに変換した画像](https://www.naporitansushi.com/wp-content/uploads/2022/07/screely_11.jpg)
僕は、Macを触ったことがないので分かりませんが、綺麗です。ただの写真が、一気におしゃれなプログラマーな方が公開しているような、美しい写真に早変わりです。
感想
以上、任意の画像を、Macっぽいウィンドウのモックアップに変換してくれるウェブサービス「Screely」についてでした。