bingo!CMSニュースレター

配信:2021年7月21日

パートナー向けニュースレターのアーカイブです

 
bingo!CMSロゴ画像(ニュースレタートップ用)
こんにちは!bingo!CMS 広報担当の鈴木です。
 
皆さま、普段モックアップを作成することはありますか?
 
Web制作におけるモックアップとは、Webサイトの完成イメージを視覚的にわかりやすくするためのサンプルを指します。
 
多くの場合、パソコンやスマートフォン等の画像のスクリーン部分にWebサイトの完成イメージをはめ込む形でつくられますが、お客様の期待感を醸成する目的だけでなく、コミュニケーション不足による修正等のリスクを防ぐためにも作成しておくと安心ですよね。
 
ただ、あまり手間をかけたくないのが本音ではないでしょうか。
 
本日はそんなお悩みに役立つ(かもしれない)便利なツールをご紹介します!
 
 

デバイスのモックアップを簡単作成!「Mockup Generator」とは?

Free Mockup Generatorのトップページ画像
Mockup Generator by Pixeltrue

Mockup Generator by Pixeltrue」は、数回クリックするだけでデバイスのモックアップを作成してくれる無料ツールです。
 
プロダクトハントの概要によると、5つのデバイスタイプに30以上の異なるデザインが用意され、プロジェクトやマーケティングキャンペーン用の美しいモックアップが作成できるとのこと。
 
また、個人や商用利用を問わずロイヤリティフリーなのが嬉しいポイントです!
 
 

試してみた

画像:Mockup Generator by Pixeltrueの使い方(開始画面)

Mockup Generator by Pixeltrue」を開き、「Create Mockups!」をクリックします。
 
画像: Mockup Generator by Pixeltrueの使い方(モックアップ選択画面1)

モックアップの選択画面が開きます。
各項目は以下の通りです。
  1. デバイスの種類(スマートフォン、ノートPC等)を絞り込みます
  2. デバイスのスクリーンの数(デフォルトは1〜3画面)を選択します
  3. デバイスの質感(クレイっぽい感じ、リアルな感じ)を選択します
  4. 好みのモックアップのデザインを選択します
  5. 選択したデバイスが表示されます
     
画像: Mockup Generator by Pixeltrueの使い方(モックアップ選択画面2)

今回の検証では、「スマートフォン1台とタブレット1台」のモックアップを使ってみます。
 
画像: Mockup Generator by Pixeltrue(画像の編集画面1)

モックアップをクリックすると、タブが編集画面に切り替わります。
各項目は以下の通りです。
  1. モックアップのスクリーンにはめ込む画像をアップロードします
  2. モックアップの色を選択します(モックアップにより選択できる色数が異なります)
  3. モックアップを反転します

まずは「Upload」をクリックして、スクリーンにはめ込む画像をアップロードします。
 
画像: Mockup Generator by Pixeltrue(画像の編集画面2)

アップロードした画像は、拡大縮小等の編集はできません。
上下の調整のみ可能で、スクリーンのサイズにあわせて裁ち落としとなります。
 
画像: Mockup Generator by Pixeltrue(画像の編集画面3)

画像のはめ込みがうまくできないときは、「Upload」ボタンのそばにモックアップごとのスクリーンサイズが表示されているので、先にある程度調整しておくと操作がしやすいですよ。
 
調整ができたら「Confirm edit」をクリックします。
 
画像: Mockup Generator by Pixeltrue(画像の編集画面4)

すべてのスクリーンに画像をはめ込んだら、「Download」をクリックします。
 
画像: Mockup Generator by Pixeltrue(画像の編集画面5)

任意のサイズを選択し再度「Download」をクリックします。
これで操作は完了です!
 

完成画像

画像: Mockup Generator by Pixeltrue(完成したモックアップのサンプル)

画像はpng形式で作成されます。
 
gifでダウンロードできるとなお良いですが、無料かつ数クリックでこの完成度であれば、モックアップのバリエーションのひとつに加えても良さそうです。
ご利用前にはライセンスの確認もお忘れなく!
 
以上、お役に立てば幸いです。


それでは!
 

アーカイブに関するご注意

この記事はbingo!CMS広報担当独自の見解を元に執筆しています。
また、記事公開時点での情報に基づいているため内容が最新でない場合があります。

ページトップ