【便利サイト】スマホやパソコンへのはめ込み画像を作りたいとき

SNSやウェブサイト作成などでスマホの画面に画像を差し込んで 表示したり、パソコンの画面に好きな画像を表示したりして画像を作りたいことがあります。

こんな時にはめ込み画像を作る専門のサイトを利用しても良いのですが、もっと簡単に無料で作る方法があります。
画像処理の応用業として知っておくと時短になります。

もくじ

どんな画像を作れるか

MacBookPro16

こんな感じに画面へのはめ込みというのが可能です。
フルワイドにして、画面の横に置くと言うことで、画面を見ているような感じを出すことができます。

iPhone15

横に載せなくても、スマホのショットとしても出すことが可能です。
こちらはiPhone 15の画面にホームページのスクリーンショットを差し込んだ状態になっています。

背景のグラデーションも選ぶことが可能です。
比率は、Instagramに載せられるように1:1のサイズにしています。
16:9や4:3などいろいろ選べます。

また、iPhoneの側はピンクになっています。
機種等も選ぶことが可能です。


立体処理

こちらは16:9の画面で、 スクリーンショットを立体にしています。
スタックと言って何枚か重ねたような評価をつけています。
また、影を濃いめにしてみました。

こんなふうにちょっと小技を使ってみて、いつもの画像を変化させてみると言うのも面白いです。

やり方

次にやり方を見ていきましょう。
フリーで作ることが可能です。

まずはShots.soのサイトにアクセスしましょう。

アクセスするとこのような画面になります。
中央部分の「Drop or Paste」に 画像を投げ込むか、クリックして画像を選択します。

左側のモックアップ(Mockup)の部分 から、どのようなデバイスにはめ込みたいかと言うのを選ぶことができます。
また、右側の選択肢を選ぶことによって画面配置を選ぶことが可能です。

こんなふうにデフォルトで、3画面を合わせて用意するということも可能です。

細かくカスタマイズしたい場合は、左側にShadow(影)、Scale(大きさ)、Position(配置)を 選ぶところがあります。

また、Frame(フレーム)を選ぶところで、背景の色を変更できます。

完了したら左下にDownloadがありますので、そこをクリックしましょう。
ダウンロード可能です。

面白く、簡単に雰囲気のある画像を作れますので、少し遊びたい時などぜひ試してみてください。


【編集後記】
動画の研究をしていると、いろいろなことがあって参考になります。
競争が激しいのが難点ですが。

【運動記録】
ストレッチ○ ジム○

【子育て日記(6歳・3歳)】
共通テストのニュースがありましたが、最近の受験では、 この共通テスト利用した一般入試をするのは半分程度ですね。
時代が変わっていく感じを受けます。
受験は、昔とは少し異なる対策が必要でしょうから、その辺を早めに考えていきたいです。

もくじ