無料・簡単・photoshop不要でパソコン画面へのはめ込み完成!おすすめモックアップサイト2選 ポートフォリオでのホームページの制作実績に使えます

webデザイン
スポンサーリンク
ゆーみー
ゆーみー

こんにちは。ままサポーターのゆーみーです。

「モックアップ」ってご存知ですか?

お恥ずかしながら、私は自分のポートフォリオを作るまで知りませんでした。

Instagramでいろいろな方がパソコンやスマホの画面に制作実績をはめ込んで載せていて、

「これはどのように作成しているのだろう?」と思い「ポートフォリオ パソコン画面 制作実績」など色々なキーワードで検索していました。

今回は過去の私のように「モックアップ」の存在を知らずに困っているWebデザイン勉強中の方向けに、ポートフォリオを作成する時に便利な無料のモックアップサイトをご紹介します。

【無料】【簡単】【photoshop不要】のドラックアンドドロップで作成できるものを紹介します。

スポンサーリンク

モックアップとは?!

モックアップとは、工業製品の設計・デザイン段階で試作される、外見を実物そっくりに似せて作られた実物大の模型のこと。ソフトウェアやWebサイト、印刷物などのデザインを確認するための試作品のこともこのように呼ばれることがある。

IT用語辞典

見るのが一番早く理解できると思います。

上の画像のように、パソコンの画面や、名刺のモックアップに自分の作成したデーターのスクショをはめ込んこんで、実物のように見せることのできるものです。

制作したデータをモックアップにはめ込むことによって、完成形に近いビジュアルで見てもらうことができるので、見栄え良く、イメージしやすくなります。

Webデザインの勉強をしている方が、ポートフォリオを作る際にも、制作実績をパソコンやスマホの画面にはめ込んで載せている方がたくさんいらっしゃいます。

無料・簡単・photoshop不要 おすすめのモックアップサイト2選と作成方法

今回は【無料】【簡単】【photoshop不要】ドラックアンドドロップで作成できる、モックアップサイトを2つご紹介します。

MockUPhone(モックフォン)

 


スマートフォン、タブレットといったあらゆるデバイスのはめ込み画像を作成することができます。

画像は画面上でイメージを確認することができ、問題なければ指定したメールアドレス宛に送信することが可能です。

背景が透過してあるのも、使いやすいポイントです。

shotsnapp(ショットスナップ)

こちらもドラックアンドドロップのみで作成できます。

作成方法は2ステップ

上記2つのサイトも使い方はほぼ同じです。

①作成したはめ込みたいデータをスクショする
②スクショした画像を該当箇所にドロップする

たったこの2つの作業だけで完成。

Photoshopが使える方には「Mockupworld」(モックアップワールド)がおすすめ

Photoshopが使える方は、「Mockupworld」(モックアップワールド)がおすすめです。

モックアップの種類が豊富なので、名刺のモックアップなども作成できます。

こんなにおしゃれなモックアップがたくさんあります。

今回は簡単・無料・Photoshop不要なモックアップサイトの紹介なので、Mockupworldの使い方はまた改めて記事にしたいと思います。

おわりに

最後までお読みいただきありがとうございます。

私自身が「モックアップ」という言葉を知らずに、ポートフォリオを作成する時に困った経験があるので、「モックアップ」を知らないWebデザイン勉強中の方にこの記事が届いたら嬉しく思います。

ポートフォリオを作成する際に「パソコン画面へのはめ込みどうやっているの?!」と困っているWebデザイン勉強中の方のお役に立てますように。

この記事を書いた人
ゆーみー

東京に住む男の子と女の子のママ。
正社員をやめてから、自分の人生について「もやもや」と考えることが多く、もやもやを解決すべく、色々なことに「チャレンジ」しています。
略して『もやチャレ!』
「子育て」・「学び」・「もやもや」などを書いています。

ゆーみーをフォローする
webデザイン 学び
ゆーみーをフォローする
もやチャレ

コメント

タイトルとURLをコピーしました