【Screely】画像をMacっぽいモックアップに変換できるサービス
この記事では、アップロードした画像を、Macっぽいウィンドウのモックアップに変換できるウェブサービス「Screely」について書きます。
画像を、Macっぽいウィンドウにはめ込んで、画像保存できるサイトです。
サイトにアクセスして、PC内にある画像をアップロードします。瞬時に、Macっぽい美しいデザインのモックアップに変換してくれます。
モックアップとは、「模型」という意味です。分かりやすく言うと、Macっぽいウィンドウ風の画像を作成できるということです。
「画像をそのままSNSにアップロードするのは、なーんか味気ない！おしゃれな枠組みをつけて、美しいデザインに仕上げたい！」という方におすすめです。
モックアップのデザイン、スタイルの変更機能、ダーク・ライトの切り替え、影のオンオフ、背景色の変更、背景色のサイズ変更などのオプションが用意されています。簡単な画像編集機能も利用できます。
利用しているOSや、ブラウザに左右されることなく利用できます。
ウェブサイトをスクリーンショットして、自動的にScreelyにアップロードしてくれるChrome拡張機能もあります。あらかじめ用意した画像ではなく、ウェブ上をスクショしたい方におすすめです。
https://www.naporitansushi.com/screely-chrome-extensions/リリース元：Jurn
アクセス方法
以下のリンクからアクセスできます。
https://www.screely.com/また、Chrome拡張機能も用意されています。拡張機能単体で動作するものではなく、あくまでサポート用といった感じです。拡張機能アイコンをクリックすると、自動的に表示している画面をスクショして、Screelyサイトを表示してくれます。
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」が左右です。スライダーになっているので、マウスで動かして調整します。
実際に調整しているGIF画像を貼っておきます。
画像編集
簡単ですが、画像の編集機能も実装されています。
画像の上にマウスを置くと、下部に鉛筆ボタンが表示されます。クリックで編集画面を開きます。その横のゴミ箱アイコンをクリックすると、画像を削除して、新規に追加できます。
画像の切り抜き、描画、図形の挿入などができました。
画像の保存
編集できたら、右側サイドバー内にある
ボタンをクリックします。画像がPC内に保存されます。
実際に作成した画像を貼っておきます。
僕は、Macを触ったことがないので分かりませんが、綺麗です。ただの写真が、一気におしゃれなプログラマーな方が公開しているような、美しい写真に早変わりです。
感想
以上、任意の画像を、Macっぽいウィンドウのモックアップに変換してくれるウェブサービス「Screely」についてでした。