bingo!CMSニュースレター
配信:2021年7月21日
パートナー向けニュースレターのアーカイブです
|
こんにちは!bingo!CMS 広報担当の鈴木です。 皆さま、普段モックアップを作成することはありますか? Web制作におけるモックアップとは、Webサイトの完成イメージを視覚的にわかりやすくするためのサンプルを指します。 多くの場合、パソコンやスマートフォン等の画像のスクリーン部分にWebサイトの完成イメージをはめ込む形でつくられますが、お客様の期待感を醸成する目的だけでなく、コミュニケーション不足による修正等のリスクを防ぐためにも作成しておくと安心ですよね。 ただ、あまり手間をかけたくないのが本音ではないでしょうか。 本日はそんなお悩みに役立つ(かもしれない)便利なツールをご紹介します! |
|
デバイスのモックアップを簡単作成!「Mockup Generator」とは? |
Mockup Generator by Pixeltrue |
「Mockup Generator by Pixeltrue」は、数回クリックするだけでデバイスのモックアップを作成してくれる無料ツールです。 プロダクトハントの概要によると、5つのデバイスタイプに30以上の異なるデザインが用意され、プロジェクトやマーケティングキャンペーン用の美しいモックアップが作成できるとのこと。 また、個人や商用利用を問わずロイヤリティフリーなのが嬉しいポイントです! |
|
試してみた |
「Mockup Generator by Pixeltrue」を開き、「Create Mockups!」をクリックします。 |
モックアップの選択画面が開きます。 各項目は以下の通りです。
|
今回の検証では、「スマートフォン1台とタブレット1台」のモックアップを使ってみます。 |
モックアップをクリックすると、タブが編集画面に切り替わります。 各項目は以下の通りです。
まずは「Upload」をクリックして、スクリーンにはめ込む画像をアップロードします。 |
アップロードした画像は、拡大縮小等の編集はできません。 上下の調整のみ可能で、スクリーンのサイズにあわせて裁ち落としとなります。 |
画像のはめ込みがうまくできないときは、「Upload」ボタンのそばにモックアップごとのスクリーンサイズが表示されているので、先にある程度調整しておくと操作がしやすいですよ。 調整ができたら「Confirm edit」をクリックします。 |
すべてのスクリーンに画像をはめ込んだら、「Download」をクリックします。 |
任意のサイズを選択し再度「Download」をクリックします。 これで操作は完了です! |
完成画像 |
画像はpng形式で作成されます。 gifでダウンロードできるとなお良いですが、無料かつ数クリックでこの完成度であれば、モックアップのバリエーションのひとつに加えても良さそうです。 ご利用前にはライセンスの確認もお忘れなく! 以上、お役に立てば幸いです。 それでは! |
|
その他のアーカイブ
-
2022年07月06日
-
2022年06月01日
-
2022年05月11日