スマホ対応サイトのデザインを、クライアントに確認してもらう際に使えるiPhone画面をイメージしたHTMLモックアップをダウンロードできます。
レスポンシブWebデザインも主流になり、Webサイトのスマホ対応が急速に進んでいる昨今、クライアントや代理店などに画像ベースでスマホ版のデザインを確認してもらう機会も多いと思います。
スマホサイトというからには実機で確認してもらうことがベストだとは思いますが、忙しいクライアントにサッと見てもらいたい場合などに便利なHTMLをダウンロードできるようにしました。
JPEGやPNGの画像を1枚ペタッと貼付ければ、iPhoneでの表示イメージを確認することができます。使えそうでしたらご自由にご利用ください。
Windows/MacのChrome39、Firefox35、WindowsのIE7〜11、MacのSafari6.1で動作確認をしています。ただし、CSS3を使用していますので、IE8以下ではiPhoneのボディ部分は単なる白い矩形として表示されます。
また、Macはスクロールしている間しかスクロールバーが表示されない仕様なのでよいのですが、Windowsでは表示領域右端に固定でスクロールバーが表示されます。
ベースとなるスマホの筐体は、iPhone5sのイメージです。
画面サイズは数値であわせていますが、筐体は目測ですので多少の誤差があります。
使用方法
320px幅の画像（Retina対応の場合は640px）を用意してください。
あとは以下の2行目、画像ファイル名・パスを変更すればOKです。
<div id="device">
<div id="wrapper"><img src="index.png" alt="" /></div>
<div id="button"></div>
<div id="earpiece"></div>
</div>
ローカル環境でも問題なく表示したい場合は、次の部分を、
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
以下のように書き換えてください。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
ご利用について
Zip形式でダウンロードできます。商用／非商用問わずご自由にご利用ください。
背景などお好みで変更してください。
ダウンロード（sp-preview.zip/11KB）
