iPhone・Mac・ウェブサービス・文房具について「生活に活かせる実用的な活用術」を提供するメディア

iPhone 6 PlusからiPhone 5の画面サイズを再現してサイトを確認する方法

この記事のURLとタイトルをコピーする

iPhone 6 Plusを使い続けていると、この大きさが標準なんじゃないかって錯覚するときがあります。でも、世の中的には全然少数派で、画面サイズがもっと小さいデバイスなんていっぱいあります。

ウェブディレクターとして働いている私としては、「制作したウェブサイトを画面サイズの小さいデバイスで見たら、どんな感じなんだろう」というのが重要だったりします。フォントの大きさとか、アイコンの配置など、不自然なほど窮屈になっていないかなど、確認しなければなりません。

ですが、個人で実機・検証機を持っているわけでもなくてですね。

そこでどうにかiPhone 6 Plusの画面で、iPhone 5の画面サイズを再現する方法はないかと探していたんです。

PCであればカンタンなんですけどね。でも、PCでスマホ用サイトの確認をしても、それは嘘になってしまいますから。やっぱり手元のスマホでどのように見えるかが重要なんです。

IPhone6plus to iPhone5 size

解決の糸口はブックマークレット

擬似的にiPhone 5を再現するような方法は、何か便利なアプリがあるんじゃあないかと期待していたんですけどね。そんなものは箸にも棒にもかかりませんでした。

そんな中で解決の糸口となったのが、ブックマークレットの「Viewport Resizer」でした。

このブックマークレットは、以前もこのブログで「レスポンシブウェブデザイン対応のサイトを、各種デバイスならどうやって見えるか、擬似的に再現できるブックマークレット」ということで紹介しました。

この時は、このブックマークレットが使えるのは当然パソコンだけだと勘違いしていて、iPhoneでの利用の可能性を考えたことはありませんでした。

ですがこのブックマークレット、iPhoneでも使用することができたんです。

登録しておいたブックマークレットをiPhoneの方で使ってみると、こんな感じに見えます。

IPhone6plus to iPhone5 size 01

画面上部にあるデバイスのアイコンをタップすると、その下にある表示画面の大きさが変化。それによって、擬似的に各デバイスで見たときに表示エリアを確認できます。

パソコンで使ったときに比べても、よりリアルに近い形でサイトの表示具合を確認できます。

ブックマークレットの設定はPCから

1点だけ面倒な所があるのです。それは、ブックマークレットの登録。

普通はブックマークレットというと、iPhoneのブックマークを編集して、その中にJavaScriptの起動コードを入力すれば完了です。

しかし、このViewport Resizerでは、そのJavaScriptをiPhoneからコピーできないのです。なので、ブックマークレットの登録自体はパソコンから行い、その内容をiPhoneに同期させて使うといいです。

もし「そんな面倒くさいことできるか!」という方は、以下のJavaScriptを使ってください。

上記のScriptをすべてコピーして、iPhoneのブックマーク編集画面のURL入力欄に貼り付けます。そうすれば、以降はそのブックマークをタップするだけで、Resizerが起動します。

IPhone6plus to iPhone5 size 02

あとがき

スマホから他のスマホの画面を確認する方法。ありそうでなかったことなんですよね。

デバイスが大きくなる傾向にあるなかで、小さい画面のデイバスではどうやって見えるのか。それを手軽に確認できる手段として、非常に有効です。

ぜひ活用してみてください。

この記事のURLとタイトルをコピーする
当ブログの管理人
ばんか (bamka)
ばんか (bamka)ウェブディレクター・ブログ運営
iPhone・iPad・Mac。Evernoteなどのウェブサービス。ときどき文房具など。これらを使った『生活に活かせる実用的な活用術』をご提供しています。
管理人は当ブログの運営の他に、ウェブディレクター・ライター・セミナー講師など、いろいろな分野で活動しています。詳細は当ブログのプロフィールページをご覧ください。
各種仕事のご依頼も承っておりますので、ご希望の方はお問い合わせフォームからご連絡ください。
執筆著書
    SNSでフォローする

    コメントを残す

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です