ShunNote 
こんにちは。シュンです。
今回は「mockup.photos」の使い方について紹介していきます。
『https://t.co/Zqwcc09cHz』
アイキャッチにも使えるし
URL指定するかファイルアップして
デザイン、イラストの確認なんかもできそう
試しにブログでやってみました#ブログ初心者 #webデザイン #おはよう戦隊1106 pic.twitter.com/dNRzN6VwrT— シュン@ShunNote (@2021_Shun) November 5, 2019
目次
MockupPhotosとは？
例えば、「PLACE IMAGE HERE」というところに、、、
この様にブログのページの画像を写してみました。
実際にスマホの画面に写っている訳ではないですが
好きな画像やイラスト、写真をスマホやパソコンの画面に合成できるサイトです。
アイキャッチとして活用できますし、モックアップにも使えます。
使い方
会員登録
サイト（https://mockup.photos/）へ移動しましょう。
会員登録が必要になるので画面右上の「Sign up」をクリック。
すでに登録してる人は「Log in」をクリック。
「Sign up」をクリックすると入力画面が出ます。
指示に従って「First name」「Last name」メールアドレスとパスワードを入力しましょう。
また、Facebookのアカウントで登録もできます。
背景画像選択
画面左上にある「Browse」「Freebies」から選択します。
「Freebies」は無料背景素材が選択できます。
「Pricing」は有料会員登録画面に飛びます。もちろん無料の画像を使います。
Browse all
「Browse all」をクリックすると写したい画面背景が選べます。
テレビ、スマホ、タブレット、iPhone、、などなどデバイス画面を選択してください。
背景画像の選択
背景の画像を選択します。
今回は無料の画像を使うので背景画像の右下に「FREE」とついてる画像を選択します。
画像の合成
無料画像の種類も非常に多いです。
利用目的によりますが
例えば、『どのデバイスからもサイトが見れます』ってことを画像でひと目でアピールしたいのでPC、タブレット、スマホが並んでる画像を選択しました。
URLを指定、またはファイルをアップすることで画面に表示できます。
URLは個別で指定できるので画像別で貼り付けれます。
URLを指定すると赤くなるので少し待ちましょう。
こちらが合成後。
これでPC、タブレット、スマホから見れるのがわかりますね。
ダウンロード
サイト下に行くとダウンロードボタンがあります。
サイズを選択してダウンロードも出来ますし、
好みのサイズに変更してダウンロードできます。
まとめ
こういった使い方も出来ます。
使い方として間違ってるかもしれませんが下の画像ならイラストや写真にしてもいいですね。
いかがでしたでしょうか？
最後までみていただきありがとうございます。是非共有をお願いします。
