携帯電話やコンピュータのモックアップは、スクリーンショットを飾るのに最適な方法です。スクリーンショットをキャプチャしたのがモバイルか PC かに関係なく、デバイス フレームを簡単に追加できます。 Photoshop または Illustrator を知っている場合、これをダウンロードして画面にデバイス フレームを追加するのは非常に簡単です。ただし、これらのツールについて何も知らない場合は、一部の Web サイトを使用してモバイルまたは PC のモックアップを含めることもできます。お探しの場合は、デバイスフレームまたはモックアップジェネレーターデスクトップ、ラップトップ、Surface、Windows タブレット、Android Phone、iPhone、iPad などのデバイス フレームをスクリーンショットに追加するには、この投稿がきっと興味を引くでしょう。
スクリーンショットにデバイスフレームを追加する
スクリーンショットにデバイス フレームを追加するのに役立つ Web サイトをいくつか紹介します。画像の解像度が何であっても、それらを使用して簡単に作業を行うことができます。
1] プレイスイット
これは、美しいデバイスでスクリーンショットをフレーム化するのに最適な Web サイトの 1 つです。膨大な数のデバイス フレームが次の場所で入手できます。プレイスイトWebサイト。 Windows Phone、デスクトップ、Samsung モバイル、Mac、iPhone、あらゆるスマートウォッチなど、任意のデバイスを選択できます。次に大きな点は、任意の Web サイトのスクリーンショットを追加できることです。スクリーンショットをキャプチャする必要はありません。代わりに、URL または任意の Web サイトを入力するだけで、スクリーンショットが自動的にキャプチャされ、それに応じてフレーム化されます。ただし、ダウンロードできる画像サイズはそれほど大きくありません（600 x 212px）。これは無料でとても使いやすいです。
2] 魔法のモックアップ
MagicMockups.comPlaceIt と同じように機能します。これはとても面白くて役に立つウェブサイトです。 PlaceIt にすでに慣れている場合は、Magic Mockups が PlaceIt の古いバージョンとまったく同じに見えることをご存知でしょう。デバイスのモックアップのコレクションはそれほど多くありませんが、この Web サイトで必要な画像を確実に入手できます。 PlaceIt と同様に、デバイスのフレームに応じて画像をアップロードしたり、Web サイトの URL を入力してスクリーンショットをキャプチャしたりすることもできます。この Web サイトのもう 1 つの興味深い点は、生成されたすべてのスクリーンショットが無料で利用でき、画像の解像度が PlaceIt が提供するものよりもはるかに高いことです。
3]ダンンク
Dunnnk は、スクリーンショットにデバイス フレームを追加するもう 1 つの優れた Web サイトです。 Dunnnk のワークフローは、前述の Web サイトと非常によく似ています。ただし、提供されるオプションは 1 つだけです。つまり、このツールによってキャプチャされたスクリーンショットを自動的に追加するオプションは利用できません。デバイスの画面サイズに応じて、スクリーンショットなどを手動でアップロードする必要があります。 Dunnnk は、Android、Mac などのモックアップを多数提供しています。残念ながら、Windows Phone のモックアップはありません。 Dunnnkの使い方はとても簡単です。 Web サイト dunnnk.com にアクセスし、スクリーンショットをアップロードし、少し待って、完了後にダウンロードするだけです。
[4]フレーム
Frame も、プロ仕様のデバイス画像を使用して通常のスクリーンショットをカスタマイズできるシンプルな Web サイトです。 Frame は、上記の他の 3 つの Web サイトと同様に機能します。 Dunnnk とは異なり、Web サイトのスクリーンショットを追加するオプションが表示されます。モックアップのコレクションはそれほど多くありませんが、Frame では Windows デバイスのモックアップを確実に入手できます。 Frame Web サイトにアクセスし、カテゴリまたはモックアップを選択し、画像を選択してダウンロードするだけです。画像を手動で選択する場合は、推奨画像サイズに従っていることを確認してください。これは非常に重要です。そうしないと、スクリーンショットの見栄えが悪くなります。 Frame のすべての画像は CC 2.0 に基づいてライセンスされています。つまり、画像を共有したり編集したりすることはできますが、画像のクレジットを表示する必要があります。これは必須です。
5] モックフォン
モックアップフォンは、2 つの異なる方法でスクリーンショットにデバイス フレームを追加するのに役立ちます。他の Web アプリとは異なり、デバイス モックアップは 2 つの異なるビュー (横向きと縦向き) で使用できます。デバイスの膨大なコレクションがあります。最も興味深いのは、Windows Phone と SmartTV も入手できることです。一方、スクリーンショットを手動でアップロードする必要があります。スクリーンショットをアップロードする前に、画像が必要なサイズと一致していることを確認する必要があります。モックアップごとに異なる画像サイズが必要です。スクリーンショットや画像をアップロードする前に必ず確認してください。 Frame と同様に、MockUPhone のすべての画像は CC 2.0 に基づいてライセンスされています。これは、それを使用するときに元の作成者の名前を言及する必要があることを意味します。
6]モッカリー
膨大な数のモックアップがありますが、すべてが無料というわけではありません。ただし、イメージ デバイスのモックアップには次からアクセスできます。Mockerie.io。 Mockerie の使い方は非常に簡単で、メール ID と Web サイト名を入力して使用を開始する必要があります。その後、デバイスのフレームを選択できるようになります。 Mockerie のユニークな機能は、さまざまな色効果を追加できることです。どのモックアップを選択しても、カラー フィルターを常に使用できます。同時に、このツールで画面 (指定されたサイズに従って) をアップロードし、Web サイトのスクリーンショットをキャプチャすることもできます。
[7]デバイスアートジェネレーター
デバイスアートジェネレーターは主に、スクリーンショットに Nexus デバイスのフレームを追加するために設計されています。したがって、非常に少数のデバイスが付属しています。ただし、これは信頼できるものであり、モックアップを使用するには、画像の正確なサイズをアップロードする必要があります。興味深いのは、Android Wear デバイスも使用できることです。ただし、唯一の制限は、PNG 画像をアップロードする必要があることです。他の形式は Device Art Generator ではサポートされていません。
デバイスのモックアップをダウンロードする
Windows PC に Photoshop または Illustrator がインストールされている場合は、有利です。これらのツールを使用して、デバイスのフレームを好みに応じて装飾できます。ただし、デバイスのモックアップを無料で制限なくダウンロードできる他の Web サイトをいくつか紹介します。
1] 多彩なデバイスハンド
多彩なデバイスハンドは、GitHub でホストされている小さいながらも非常に便利な Web サイトで、手を使った美しいモバイル モックアップを提供します。すべてのモックアップをダウンロードし、Photoshop またはその他の画像編集ツールを使用して、モバイルのスクリーンショットをモックアップに含めることができます。前述したように、携帯電話のモックアップのみが提供されます。つまり、PC モックアップは入手できません。
2]ビハンス
あなたはそれを知っていますBehance.netはグラフィックデザイナーのためのポートフォリオメーカーです。したがって、Behance で美しいデバイス フレームを入手できる場合があります。デザイナーの中には、自分の作品を広めるために Behance をよく使用する人もいます。したがって、モックアップを検索する必要があります。この Web サイトからモックアップをダウンロードするための直接リンクはありません。
3]タッツプラス
TutsPlus は、デザイナーやその他の人材の優れた人材源である Envato によって管理されています。ただし、デバイスのモックアップは次からダウンロードできます。デザイン部門TutsPlus を無料でご利用いただけます。コレクションはそれほど大きくありませんが、この Web サイトでは見栄えの良いデバイス フレームが必ず見つかります。
4]ドリブル
すべてのグラフィック デザイナーは、ポートフォリオを作成し、デザインを学ぶための Web サイトを少なくとも 2 つ知っています。それらはBehanceとドリブル。したがって、Dribbble から多くの Photoshop ファイルをダウンロードできます。 Behance と同様に、直接的なリンクはありません。デバイス名でモックアップを検索する必要があります。ただし、画像を使用する場合は必ずクレジットを提供する必要があることを、使用する前に知っておく必要があります。
これらは、スクリーンショットにデバイス フレームを追加するための優れた使いやすい方法です。気に入っていただけると幸いです。
