FRAME – 綺麗かつ簡単にキャプチャをフレームに収めるWebサービス

仕事でこんなことあるよね

私の仕事上、スマホやPCのイメージを載せた提案資料などを作成することがよくあります。

プロトタイプとかを作成するときに、Photoshopで画像パーツを作成して、そのパーツをiPhoneや他のスマートフォン、PC画面に収めた画像を、で上手に見せたいことがあります。こういう時に、時短でかつすごく美しくスマホでの表示イメージを作成できるサービスがあるので、シェアしておこうと思います。

その名の通りのサービス名

FRAMEというサービス名です。まんまです。

URLから察するにイギリスで誕生したWebサービスのようです。と書いたところで改めてフッタを見てみると、Made in Glasgow, UK by Lab25 と記載がありました。スコットランドですよね、グラスゴーって。

4ステップでラクラク作成

URLを開いてから美しいモックアップ画像が完成するまでに、たった4ステップで足りてしまうわけです、ただしすでにベースとなる画像もしくはキャプチャ画像があればの話。
それではさっそくこのサイトのトップページをもとに作成します。説明文（英文）も引用して、英語の勉強と画像作成のを行いたいと思います。していこうと思います。

Step 1｜フレームにしたいシーンを選択します。

8つのカテゴリから、まずどのようなデバイスシーンかを選択します。iPhoneも縦横白黒とかいろいろあります。デバイス的には5Sくらいまでだったでしょうか。MacだってAndroidだって有りますので、好きなフレームカテゴリを選択してください。

カテゴリを選択したら、どのような利用シーンにするかを選びます。今回はNotesを選びました。上の画像の中では、「一番下の段、右から2番目のもの」です。他にも背景の無いものもあります。シンプルにモックアップ、プロトタイプを作成したい時はそちらの方がいいかもしれません。

Step 2｜画像をアップロードします。

ドラッグ＆ドロップでキャプチャを登録することができます。些細なことですが、ドラッグ＆ドロップでファイルを出し入れできるのは本当便利ですよね。ユーザビリティですよね。他にも通常通り、ファイルを開いて登録することも可能です。

Step 3｜取り込んだ画像をトリミングして調整します。

良い感じに調整しましょう。画像の比率をピッタリにして登録すれば、トリミングをする必要はほぼないと思います。調整したら、Submit Crop のボタンをクリックしましょう。

Step 4｜完成。ダウンロードして終わり

完成です。ほんとあっという間ですね。Download ボタンで出力できます。

まとめ

• 今回は、ちょっとおしゃれなフレームを選択しましたが、シンプルにデバイスのみというのもあります。こういう方が提案資料とかには向いているかと思います。
• 実は、見つけたのはもう2年位前で久しぶりに引っ張り出しての紹介なので、最近のデバイスには未対応なのがちょっとネック。
• 完成した画像を下に貼っていますのでご覧ください。