ブログの見た目はパソコンの表示だけでなく、iPhoneやiPadの表示も確認しよう。

ブログを作成したときに気になるのが、各OSや、デバイス、ブラウザでどう見えるのか。私はMacをメインとしてブログを作成しており、基本的に標準ブラウザのSafariで表示を確認しています。SafariはFirefoxやChromeといった主要ブラウザの仲間(最近はちょっと違うけど)なので、Safariで問題がなければFirefoxとChromeでも大丈夫と判断しています。ちなみにこのスクリーンショットがMacのSafariでの見え方です。

 
りんごときららon Mac with Safari

 
固定ページや右のカラムの表示が私の狙った通りのスタイルになっています。もしこの表示と異なる場合、ブラウザをFirefoxかChromeに変更してください。そして問題はモバイルデバイスでどう見えているか。今回は私のiPad Air 2のSafariとiPhone 6 PlusのSafariのスクリーンショットをのせてみます。私のサイトはモバイルユーザーが40%近くもいるのでモバイルユーザーへの見え方もパソコンユーザー並に大切になっています。

 

☆iPad+Safariの見え方。

 
iPad Air 2(iOS8.1.1)のSafariです。MacのSafariとほぼ同じ表示となっており快適に読めています。タブレットでのブラウザは問題はなさそうです。

 
りんごときららoniPad with Safari

 
タブレットのユーザーはiPadが圧倒的に多く、iPadユーザーはSafariをメインに使用すると考えられるのでiPadで理想的に表示できているので問題無いと考えられます。

 
☆iPhone+Safariの見え方。

 
iPhone 6 Plus(iOS8.1.1)でSafariを使用したときの表示。モバイルテーマもデスクトップ向けののテンプレートと同じですが、カラムが縦に並ぶスタイルとなっています。そのためカテゴリやプロフィール等の情報は下に表示されるスタイルになっていますね。ページ上部に「メニューボタン」があるのでそこからサイトマップへ移動できるようにしています。

 
りんごときららon iPhone with Safari

 

ちなみに以前の記事の方法で、私のブログをデスクトップ向けの表示にリクエストしても効果がないようです。iPhoneのこの表示自体がデスクトップ向けの表示であるためと考えられます。

 
あとがき

 
ブログを4年以上やっていて面白いのは、徐々にiPhoneやiPad等のモバイルデバイスのユーザーが増えているということ。これに伴いそれらのユーザーに対する見え方も意識する必要があります。複数デバイスを持っている方は一度様々なデバイスでの表示を確認したほうがいいでしょう。

よろしければシェアお願いします!

2 件のコメント

  • いつも楽しく拝見しています。
    僕はiPadやiphoneを使用していますが、
    Androidタブレットも使用しています。
    私の検証方法は複数実機とエミュレーターになります。
    実機はiPadAir2からiPhone6+、iPhone5S、NEXUS7、NEXUS5、等です。それ以外にもMacでもAndroidのエミュレーターが動きますし、例えばiPhone4などであればiOSのエミュレーターも使用可能なので、(FirefoxOSもいけますよ!)そういったマルチデバイスで様々な方向からも検証し読者に快適に観覧して貰う努力が今後も必要でしょうね。
    なかなか考えさせられる良い記事ですね!

    • ゆうたん様はじめまして.

      仰るとおり,検証方法は本来あとWindowsとAndroidの各種ブラウザーが必要だとは認識しています.
      Google Analyticsの統計より,ユーザーのエージェントからMacとiOSデバイスのビジターが多いため今のところこのスタイルでいこうかと思っています.

      Macでもエミュレーターが動くのはお恥ずかしながら初耳です.アドバイスありがとうございます.
      読者にとって読みやすく快適なブログを作成するのもコンテンツのみならず必要な作業ですので検討します.
      コメントありがとうございました!