PCサイトを見やすく調整するには

iPhone4の解像度は、960x640という3.5インチの割に高解像度なんですが、私のようにアラフォーになってくると、あの小さな画面では見にくい?PC用のサイトを見やすくするには

 
 

Home  About this site  BBS  Mail  Link

 
 

PCサイトを見やすく調整するには

Last update 2010/12/19 12:57

 

 

iPhoneの魅力は、豊富なアプリをインストールできることや、日本語入力がしやすい。というのがありますが、インターネットの利用しやすさと、見やすさがあると思います。
iPhoneではモバイルサイトの一部は見られなかったり、パソコン用の表示で表示されてしまったりしますが、パソコン用の表示でも意外と見やすいです。

iPhoneで文字が読みやすい理由

iPhone 4は、3GS(480x320)に比べ、倍の960x640という超解像度になっています。
そのため、たいていのWebサイトは横幅全体を画面に表示させることができます。
私のデスクトップパソコンは、17インチで1240x1024なので、だいたい15インチ並の高解像度という事になります。

モニターの解像度とは、簡単に言ってしまうとモニター上の点の数で、1240x1024なら、横に1240個、点が表示でき、縦に1024個、点が表示できるという事になります。
(高解像度=高画質という意味ではありません)
iPhone4は、3.5インチで960x640だからいかに高解像度かがわかります。
ただ、その分一個一個の「」自体が小さくなるので、当然文字も小さくなります。

いくら高解像度でも文字が小さければよ見ずらいのではないか。と思っていたのですが、iPhone4は二つの点で、上手にクリアしています。

Retinaディスプレイ

アップiPhone4のディスプレイは「Retinaディスプレイ」と呼ばれる非常にきれいなディスプレイで、文字のギザギザがほとんどありません。
デスクトップパソコンや、ノートパソコンで文字をよく見ると、ギザギザがあるのがわかります。
Retinaディスプレイは、一個一個の点が小さく、そして密度が高いため(1インチ当たり326個)小さなフォントもくっきり表示されます。

デスクトップパソコンで表示されるフォントも、滑らかに表示されているものがありますが、よく近くで見てみると淵をぼやけさせて疑似的に滑らかに見せているだけですが、Retinaディスプレイはドット自体が小さいので近くで見ても、フォントのふちがくっきりしています。

googleの検索画面そのため、3.5インチ上に表示された小さな文字でも、意外ときちんと読めることが多いです。
Googleは、特に拡大しなくてもきちんと読めます。

フォントが大きい

当サイトをデスクトップパソコンとiPhoneの両方で表示してみるとわかるんですけれど、1行当たりの文字数がiPhoneの場合ずっと少ないです。
つまり、ページあたりのフォントの大きさが大きいんですね。
そのため、パソコン用のサイトとして作られたWebサイトでも、iPhoneでは拡大しなくても読めることが多いです。

パソコンで表示させた場合の拡大パソコンで表示させた場合。1行目が1行に収まっている。

iPhoneで表示させた場合の拡大iPhoneで表示させた場合。1行目が2行にわたって表示されている。
つまりその分文字が大きい。

読みやすく拡大するには

さて、とはいっても携帯サイトならまだしも、パソコン用のサイトはiPhoneでは見にくい場合があります。

ピッチイン・ピッチアウト

2本の指で画面を指を開いていくように動かす(ピッチイン)と、その指の動きに合わせて画面の一部が拡大します。
この拡大が意外とスムーズなので、細かいサイトでも意外と読みやすいです。が、もっと簡単に読みやすく拡大する方法を紹介します。

読みたい部分をダブルタップする

iPhoneで表示されたWebサイトの読みたい場所をダブルタップ(2回たたく)してみて下さい。
その場所の行の端から端までを画面いっぱいに合わせて拡大してくれます。
これで横スクロールせずに、縦スクロールのみで読むことができるでしょう。

iPhoneで表示させたところ2回タップしたところ左がiPhoneのSafariで普通に表示させたところ。
ページ全体が表示される。

右は読みたい文章の場所をダブルタップ(2回画面を素早くタッチ)したところ。
その文章の行の端から端までが画面いっぱいになるように拡大される。

普通に表示させたところ拡大させたところ普通に表示させたところ。

右はダブルタップした場面。

サイドバーの文章も読みたい文章がサイドバーにあっても、ダブルタップすると左のように拡大される。

横に傾けると

横向きにさせたところiPhoneを横に傾けると、左の画像のようにページも横向きになり、画面にあわせて拡大されます。
意外とほとんどのサイトは、これで十分読めてしまいます。

 

カテゴリー

同じカテゴリーの記事

Yahoo!ブックマークに登録 Yahoo!ブックマークに登録 にほんブログ村 携帯ブログ iPhoneへ 2010/08/21 20:03 | このページのトップへ | コメントを書く | 管理