こんにちは。
Webサイトやアプリのスクリーンショットを、見栄えの良いモックアップ画像として作成できるモックアップ作成アプリ「Mockup Generator」を公開しました。
ポートフォリオに使えるアプリだと思います！
モックアップ作成アプリとは
モックアップ作成アプリは、ブラウザ上で簡単にモックアップ画像を作成できるWebツールです。
表示したいWebサイトやアプリのスクリーンショット画像やURLを入れて、任意のサイズを選択すると、そのサイズに合わせたプレビュー枠を生成できます。
URLからモックアップを生成する方法に関しては、少し手こずり時間がかかりました。（後述します）
きっかけ
きっかけは、自分がポートフォリオを作成した際にモックアップを作るツールに困ったからです。
Canvaでモックアップ用のフレームがあるのでそれを使っていましたが、有料会員ではないので背景透過は自分でやる必要がありました。
海外のモックアップが作れるウェブサイトがありましたが、それはpng保存できず、スクショをとって保存していました。
どれもサイズがバラバラ、透過もイマイチな仕上がりで悩んでいました。
アプリ開発に没頭していた時、ちょうどポートフォリオを修正していたので、「いっそのこと自分で作っちゃおう！」と思い、作成するに至りました。
一番つけたかったのがURLから画像を作成するコンテンツで、これを入れられればより簡単にモックアップを作成できると思ったからです。
こだわり
簡単に透過モックアップが保存できること！
これにつきます。
クリック数が多くなるとめんどくさくなるので、シンプルで、かなり楽に仕上がることを心がけました。
機能
より使いやすくするために、以下の機能を搭載しています。
- URLから画像取得
- デスクトップ・タブレット・スマートフォンそれぞれのスクショ画像選択（URLの場合は選択できません）
- デスクトップ・タブレット・スマートフォンの出力デバイス選択
- 画面へのはめ方設定
- 出力サイズ指定
- フレーム色選択
- プレビュー背景色選択、ダウンロード時の背景追加設定
- 影設定
- PNG形式での書き出し
デザインツールに慣れていない方でも、手軽にモックアップ画像を作れることを目指して開発しました。
実際の完成図
自分のポートフォリオに使ったので、それの一部をみていただきたいのです。
スマホと一緒バージョンと、デスクトップのみのバージョンです。
統一感があり、みやすくなっていると思います。
デザイン
デザインは、自分が作った他のアプリPhoto TimelineとImage-Crop-Studioに合わせて作成しました。
統一させることで、自分のブランド化のような感じにできるかと思ったからです！
URLから画像を作るのに手こずった話
イメージとしては、URLを入力するとサイトを読み込み、そのままデスクトップやスマートフォンのモックアップに合成できる。
そんなアプリを目指していました。
スクリーンショットを撮る手間もなく、すぐに画像を作れるようにしたかったのです。
CORSという制約にぶつかった
しかし、実際に調べてみるとブラウザにはCORS（Cross-Origin Resource Sharing）というセキュリティの仕組みがあります。
この制約により、他のサイトの内容を自由に取得したり、そのまま画像として扱ったりすることはできません。
「ブラウザだけで実現するのは難しい」ということが分かり、この機能は最初見送ることにしました。
解決したのが自分のサーバーを間にはさむ方法
他のサイトから直接もらうのをやめて、自分のサーバーを経由して画像を出力する方法を使いました。
それについては別で詳しく紹介しているのでご参照ください！
ご利用はこちら
ぜひ、ポートフォリオや制作実績、ブログ記事、SNS投稿などにご活用ください。
この記事のカテゴリー
開発ブログ の記事をもっと見る →