iOSやMacアプリの紹介に使える、HTML5デバイスモックアップ

Pixelsign html5mockups 01

Pixelsign」は、iPhoneやiPad、iMacやMacBook Proなどの画面部分に、スクリーンショットなどの画像やYouTubeなどの動画を貼り付けることができるモックアップです。HTML5で作られており、フリーで配布されています。

アプリの使用方法などを紹介する動画を貼り付けてアプリ配布ページに使用したり、イラストや写真などの公開などにも使うことができます。

Pixelsign html5mockups 02

使い方は、zipを解凍してフォルダごとサーバーにアップロードして、ヘッダーにdevice-mockupsのcssを読み込むタグを追記。

<link rel="stylesheet" type="text/css" href="device-mockups/device-mockups.css" />
<link rel="stylesheet" type="text/css" href="device-mockups/device-mockups2.css" />

ジェネレーターでデバイスを選択してコピーして、コードの <!-- PUT CONTENTS HERE --> の部分に動画や画像を貼り付けるタグを入力するだけ。

関連するエントリー

dtv