ITエンジニア/デザイナ向けにオープンソースを毎日紹介

自分のWebサービスがスマートフォンやタブレットをサポートしている場合、それを全面に打ち出したいですよね。そんな時には通常、スマホやタブレットのモックアップをサイトに表示して、その中にWebサービスのコンテンツを表示します。

そんな感じの表示を簡単に実現してくれるのがHTML5 device mockupsです。多種多様なデバイス、向き、カラーリング選択にも対応しています。

HTML5 device mockupsの使い方

HTML5 device mockupsのデモです。こちらはiPhone。
HTML5 device mockupsのデモです。こちらはiPhone。

iPadにもできます。
iPadにもできます。

iMac。こちらは枠が大きいです。
iMac。こちらは枠が大きいです。

MacBook Pro。
MacBook Pro。

Galaxy S3。
Galaxy S3。

Nexus 7。
Nexus 7。

Lumia 920。カラーリングや向きを変更しています。
Lumia 920。カラーリングや向きを変更しています。

このデバイスモックアップは画像で、Webコンテンツが埋め込める形になっています。HTMLはもちろん、画像も埋め込めます。色々と使い道が多そうですね。

HTML5 device mockupsはHTML5製、MIT Licenseのオープンソース・ソフトウェアです。

HTML5 device mockups

pixelsign/html5-device-mockups

 

MOONGIFTの関連記事

コメント

  • MOONGIFTプレミアム
  • Mobile Touch