WEB制作コーディングの営業用にポートフォリオサイトを作っとるんじゃけど、おしゃれに制作物を載せるにはどうしたらええんかなー？？
コーダーにとって、ポートフォリオはとても大事ですよね。あのおしゃれなPC画面やスマホ画面風に制作物を載せるの、『モックアップ』と言います。それでは簡単なモックアップの作り方を紹介します。
しまさん、いつもありがとうやで
結論！：簡単、パソコン画面＋スマホ画面風モックアップの作り方
色々試した結果、「Works Thumbnail Generator」が最速！で簡単！で無料！です。
作る画像のパターンは2つしか選べませんが、背景色は調整できるので、自分のポートフォリオサイトのカラーと合わせて、ちゃちゃっと作ってみましょう！！
簡単5Step！パソコン画面＋スマホ画面風モックアップの作り方
それでは、詳細な手順を紹介していきます。
Step1 Works Thumbnail Generatorのサイトにアクセス
こちらのサイトにアクセス↓
Step2 つくる画像のタイプを選ぶ
2パターンの中から、つくる画像のタイプを選びます。どちらもPC画面とスマホ画面、両方あるモックアップです。
Step3 つくりたいサイトのURLを入力する
今回は既に作った実績サイトや架空サイト、サンプルサイトのURLを入力してつくるCaseの紹介です。URL入力以外でも、画像からつくることも可能です。
Step4 背景色を選ぶ
背景色を選べるのがこのWorks Thumbnail Generatorの魅力の一つです。
自分のポートフォリオの雰囲気や、テーマカラーに合った背景色を選びましょう。
RGB or HSL or HEX のどれかで指定できいます。
Step5 つくる→データダウンロード
つくる画像のタイプ、サイトURL、背景色を入力したら、『これでつくる』をクリック。
しばらくすると、画像ができますので、ダウンロードします。
無事に完成しました！今回は自分のポートフォリオサイトでモックアップを作ってみました。
簡単にモックアップができるので、非常に便利です。フォトショやイラレ、Canvaに慣れていないコーダーさんでもすぐにできるのでお勧めです。
その他のポートフォリオ制作物用のモックアップの作り方
Works Thumbnail Generatorで作ると非常に便利ですが、『ちょっと画像の質が…』とか『他の人と被るー』という方に、他のモックアップの作り方を簡単に紹介します。
WEBサービスでモックアップを作る
Works Thumbnail Generator以外のWEBサービスでも、パソコン画面風、スマホ画面風のモックアップの作成が可能です。
MockuPhone
・形式：画像のアップロードによる作成
・背景：なし。スマホの画面のみやパソコン画面のみがドーンとできます。
・費用：無料！
・アカウント登録：なし！
・選べるデバイス：スマホやタブレット、パソコン画面など多数。
※ただし、それぞれ個別の作成となるため、スマホ画面とパソコン画面をセットの画像は作れない。個別で画像を作成後、Canvaなどで合体させるなどの対応が必要。手間。
自分のポートフォリオサイトで作ってみました。画像の質はいいと思います。
MockupPhotos
・形式：画像のアップロード or URL入力
・背景：あり。いろいろな背景写真などがあります。
・費用：無料
・アカウント登録：必要（メールアドレスとパスワード、名前）
・選べるデバイス：スマホやタブレット、パソコン画面など多数。1375種類！！（23年5月時点）
※ただし、それぞれ個別の作成となるため、スマホ画面とパソコン画面をセットの画像は作れない。個別で画像を作成後、Canvaなどで合体させるなどの対応が必要。
こんなのも作れちゃいます。少し楽しいです。
Canvaで作る
スマホ画面やPC画面のモックアップは、Canvaで作ることも可能です。
素材で「モックアップ」と検索して、スマホなどを選択して、画像と組み合わせます。
有料会員だと、もっとおしゃれなモックアップ素材が使えます。
無料会員でも頑張って作っていました↓
パソコン画面とスマホ画面のセットは、無料素材ではありませんでした（23年5月時点）
まとめ
スマホ画面とパソコン画面、セットのモックアップを無料で簡単に作るときは、Works Thumbnail Generatorがおすすめ！パソコン画面のみとか、スマホ画面のみであれば、MockupPhotosやMockuPhoneもおすすめです。
皆様のWEB制作ライフがより良いものになれば幸いです。
以上、ありがとうございました。
