2016.2.8

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

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だって有りますので、好きなフレームカテゴリを選択してください。

frame01

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

frame02

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

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

frame03

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

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

frame04

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

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

frame05

まとめ

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

8b644e30-52d2-4df8-8ea4-c41bae8cef02

 

カテゴリ : Web

タグ :

雑記日記 zakki-nikki.net all rights reserved.