画像をアップロードするだけで、Macbookやスマートフォンなどのモックアップを作れるサイト「Dimmy.club」

SEROの嫁です。
夫とニコ生で喋ったり、ブログに投稿したりしています。
2級ウェブデザイン技能士。

この記事は2017年9月11日に書かれたものです。
現在は内容が古い可能性もありますのでご注意ください。

ウェブサイトやアプリを作成する際、「モックアップ」はイメージを掴むうえで重要です。

今は、多くのクオリティの高いモックアップ素材が無料で配布されているので、PhotoshopやIllustratorがあれば簡単にハイセンスなモックアップを作ることも可能です。

でも、もっと気軽にモックアップを試したい!という時に役に立つ、ありがたいサイトがありました!

Dimmy.club
→ Dimmy.club

この「Dimmy.club」は、ウェブサイトなどのスクリーンショットをアップロードするだけで、その画像を使ってモックアップを作ってくれるというサイトなんです。

使い方

使い方はとても簡単です。
まず、はめ込みたいサイトなどの画像を用意します。ページではなくサイト全体のキャプチャがおすすめです。

サイトのキャプチャ

次に、Dimmy.club のサイトで「UPLOAD」をクリックし、先ほどの画像を選択するだけ!

アップロード

すると、あっという間にモックアップが作成されました。

モックアップ作成

それぞれのデバイスの画像をクリックすると、個別に編集も可能です。

STYLE」では、デバイスのスタイルを「NORMAL(立体)」「FLAT(平面)」から選べます。
COLOR」ではデバイスの色、「BACKGROUND」では画像の背景色が選択できます。

編集画面

そして「DOWNLOAD」をクリックすると、モックアップ画像がダウンロードできます。
できあがったモックアップはこちら。

モックアップダウンロード

ラップトップのほか、デスクトップ・スマートフォン・タブレットのイメージも用意されています。
正面からのみではありますが、イメージを掴むのには十分ですよね。

その他デバイス

というわけで、気軽にモックアップが試せるサイト「Dimmy.club」の紹介でした。
→ Dimmy.club