【Screely】画像をMacっぽいモックアップに変換できるサービス
この記事では、アップロードした画像をMacっぽいウィンドウのモックアップに変換できるウェブサービス「Screely」について書きます。
画像をMacっぽいウィンドウにはめ込んで画像保存できるサイトです。
サイトにアクセスしてPC内にある画像をアップロードします。瞬時にMacっぽい美しいデザインのモックアップに変換してくれます。Macっぽいウィンドウ風の画像を作成できます。
「画像をそのままSNSにアップロードするのはなーんか味気ない！おしゃれな枠組みをつけて美しいデザインに仕上げたい！」という方におすすめです。
モックアップのデザイン、スタイルの変更機能、ダーク・ライトの切り替え、影のオンオフ、背景色の変更、背景色のサイズ変更などのオプションが用意されています。簡単な画像編集機能も利用できます。
利用しているOSやブラウザに左右されることなく利用できます。
アクセス方法
以下のリンクからアクセスできます。
https://www.screely.com/Chrome拡張機能も用意されています。
拡張機能単体で動作するものではなく、あくまでサポート用です。拡張機能アイコンをクリックすると自動的に表示している画面をスクショして「Screely」サイトに飛んでくれます。
https://www.naporitansushi.com/screely-chrome-extensions/
https://chromewebstore.google.com/detail/screely-instant-bro...使い方
画像のアップロード
「Browse files」をクリックして画像を選択するか、直接画像をドラッグ&ドロップして追加します。
編集画面に切り替わります。既に完成された状態でプレビューが表示されます。右側のサイドバーから外観を調整していきます。
ウィンドウの外観
「Window」項目で上部のバーについてのデザインを変更できます。「Window Type」がバー自体のデザイン、「Window Style」が左上の3つのボタンのデザインです。
例えば「Window Type」を「Browser Window」にすると、ヘッダーがブラウザ風に変化します。アドレスバーと思われる白い図形が表示されます。
右上の2つのアイコンから影のオンオフ、ライトかダークか切り替えられます。
背景色の変更
「Background」の「Color」で背景色を変更できます。カラーパレットの中から直感的に好きな色を選択できます。
背景のサイズ
「Padding」で背景部分のサイズを調整できます。「Vertical」が上下、「Horizontal」が左右です。スライダーになっているのでマウスで動かして調整します。
画像編集
簡単ですが、画像の編集機能も実装されています。
画像の上にマウスを置くと下部に鉛筆ボタンが表示されます。クリックで編集画面を開きます。その横のゴミ箱アイコンをクリックすると画像を削除して新規に追加できます。
画像の切り抜き、描画、図形の挿入などができました。
画像の保存
編集できたら右側サイドバー内にある
ボタンをクリックします。画像がPC内に保存されます。
実際に作成した画像を貼っておきます。
僕はMacを触ったことがないので分かりませんが、綺麗です。ただの写真が一気におしゃれなプログラマーな方が公開しているような、美しい写真に早変わりです。
感想
以上、画像をMacっぽいウィンドウのモックアップに変換してくれるウェブサービス「Screely」についてでした。
似たようなサービスで入力したコードを綺麗に画像化する「Ray.so」や「CodeZen」もあります。デバイスのモックアップは「PostSpark」や「MockupBro」あたりが便利です。