手軽にモックアップ画像を作れる神ツール「shotsnapp」が凄すぎる！

こんにちは！ デザイナーの波塚です。
昨今、海外のWEBツールの進化が凄まじいです。どんどんいろんなことが簡単に便利にできるようになっていきます。　重要なのはそのツールを知り、どう使いこなしていくか？

今回はそんな便利なツールの1つ「shotsnapp」を紹介します。

Photoshopなしで、↓のようなモックアップ画像が簡単に作れます。

プレゼン資料やブログなどに、WEBサイトのキャプチャーを入れるなら大活躍間違いなしのツールです！

モックアップを簡単作成「shotsnapp」の使い方！

神ツールなだけあって、使い方も簡単です。

【モックアップ作成までの流れ】

［01］使いたい豊富なテンプレート（スマホ、パソコンなど）を選択
　↓
［02］WEBサイトのスクリーンショットをドラッグ&ドロップで挿入
　↓
［03］ダウンロード

まず手始めにサイトhttps://shotsnapp.com/にアクセスして「無料でお試しボタンを」クリック！

［01］使いたいテンプレートを選ぶ

左サイドバーに表示してあるテンプレートを選択しましょう。
鍵アイコンがついているものは有料アカウントのみ選択可能です。

［02］WEBサイトのスクリーンショットをドラッグ&ドロップで挿入

画像を入れたいアイテムをクリックします。
①入れたい画像をドラッグ&ドロップで追加（クリックでフォルダから追加）
②モデルの切り替えが行えます。（…ここの種類が豊富で嬉しい）

背景色を透明にするのがおすすめ！

「shotsnapp」は背景の色を変えることもできます。背景を透明にしておくと何かと便利なので、設定をおすすめします！

背景部分をクリック→カラー部分を「0%」に変更で完了です。

［03］ダウンロード

薄緑のボタン「Preview & download」を押すとプレビューとダウンロード画面へ進みます。

各種設定をしてダウンロードします。

①pngかjpgかの設定。背景を透明にしているなら必ずpngを選びましょう！
②画像のサイズの指定。使う用途に応じて設定してください。
WEBで使うなら大きくても2xくらいでいいと思います！　特別大きく使うなら3xで。

③クレジット表記。基本的に無しで大丈夫。
入れると作者は喜ぶと思います！　入れるか入れないかはあなた次第。

下のボタンでダウンロード！

「shotsnapp」の有料アカウントでできること

結論から言うと、「shotsnapp」の有料アカウントは結構すごいです。

• テンプレートが増える
• テキストやアイコンも追加できる
• フリー素材サイトから写真を引っ張って背景に設定できる
• もっとたくさんのモデルとバリエーションの追加
• 新機能への早期アクセス
• いい感じの値段設定（年間4000円前後）

ここで、特筆してすごいのが、複数のモデルを追加できること。

出典：https://shotsnapp.com/

↑の画像の様な感じです。

すごくないですか！？　もちろん各モデルに好きな画像を設定できますし、必要に応じて変更できます。
これができるツールは現状あまりないと思います。

まとめ

簡単にモックアップ画像が作れる神ツール「shotsnapp」を紹介しました。

これさえあれば、高度な画像編集ツールがなくても、インターネット一つでモックアップ画像が作れます。
無料の機能でも十分使えるレベルの完成度なので、是非一度ツールに触れてみてください。

この紹介記事があなたの資料作りや、ブログ記事の助けになれば幸いです。

海外ではこんなツールがゴロゴロと出てきています。今後も情報収拾して発信していきます！