ポイントサイト・ニュース
ポイントサイトの評判・稼ぎ方・遊び方・攻略法をニュース形式で詳しく解説。主婦・サラリーマン・中学生・高校生でも月収1万円以上のお小遣い稼ぎ・副収入は容易に実現できます!!

画像をモバイルフレンドリーかつPCフレンドリーにする方法 ~ポイントサイトの対応状況~

本サイトの利用者のうち、約50%がスマートフォンからのアクセスで、そのうちさらに半分(つまり全体の25%)がiPhoneからのアクセスとなっています。このアクセス状況からわかる事は、モバイル機器からの閲覧に対応すること、Googleの言葉を借りればモバイルフレンドリー化は避けては通れない大変重要な事項であるということです。

モバイルフレンドリー化する方法は大きく分けて二つあります。ひとつはモバイル用のコードを用意すること、もう一つはウェブサイト全体の構成をレスポンシブ化することです。レスポンシブ化とは、簡単に言えば、閲覧しているデバイスの画面サイズに応じて、ウェブ画面を構成している要素の配置を柔軟に変更する事を指します。

本サイトもレスポンシブデザインなウェブサイトになっているのですが、ひとつだけ完全に対応しきれていなかった点があります。それが画像のモバイルフレンドリー化です。

画面の解像度が横320ピクセルとなっているiPhone3からのアクセスを考えて、これまでは横幅が300ピクセルを超えるサイズの画像の場合、一律300ピクセルに縮小して表示させていました。横幅300ピクセルの画像なら、iPhone3から見たとしても画像が画面からはみ出る事はありません。

しかしこれでは、さらに高解像度化が進んだ最近のモバイルデバイスやノートPC、デスクトップPCから見ると画像が逆に小さ過ぎてしまいます。例えば下の画像は、横幅300ピクセルの画像ですが、どうですか?画像の中の文字列読み取れてますか?

モバイルフレンドリーだが小さすぎる画像

解像度の低いモバイルデバイスに合わせたが為に、高解像度なPCや最新のモバイルデバイスでは逆に見えずらくなってしまうというのはなんだか本末転倒のような気がします。

画像をモバイルフレンドリーかつPCフレンドリーにする方法

この悩ましい画像サイズの問題を見事なまでに一発で解決してくれる方法があります。以下の画像を見てみて下さい。

モバイルフレンドリーかつPCフレンドリーな画像

二つ目の画像を見ると、PCでもモバイルデバイスでも画像は画面いっぱいに広がって細部までハッキリと見えるようになっていますよね?参考までにPCのスクリーンショットを以下に示しておきます。

PCから見たモバイルフレンドリーな画像

この様に画面の横幅いっぱいに画像を拡大させるには、imgタグに以下の一文を追加すればOKなのです。

<img src="..." style="max-width:100%; height:auto;">

ここで「max-width:100%」は「画像を画面の横幅一杯に縮小拡大して表示せよ、ただし拡大する場合、元の画像のサイズを超えて拡大してはならない」という意味です。つまり小さい画像は小さいままで、大きい画像は画面横幅一杯使って表示するということです。「height:auto」は画像のアスペクト比(縦横比)を保ったまま縮小拡大せよという意味になります。

なんと便利なスタイルなのでしょうか。これならまさしく「大は小を兼ねる」で、大き目の画像を貼っておけば、デバイスに合わせて自動で拡大縮小して画像を表示してくれます。

場合によってはdivタグで囲む必要あり

ところが、本サイトの場合、画面構成が本文と画面右側のメニューバーの2段構成となっており、この二つの要素をレスポンシブ化している関係もあり、imgタグにスタイルを指定しただけだと画像が横幅一杯に広がって、メニューバーがブラウザの外側に追いやられてしまいました。そこで、以下のようにdivタグでimgタグを囲ってあげることで、画像もメニューバーも適切に表示されるようになっています。

<div style="width:100%;">
<img src="..." style="max-width:100%; height:auto;">
</div>

モバイルフレンドリーのための実践した事

モバイルフレンドリーにするために実践した事は他にも沢山あります。

  • imgタグには必ずwidthとheightを指定する。
  • HTML圧縮(不要なスペースやタブを全て削除する)を行う。
  • CSSファイルや画像ファイルのキャッシュ期間の最適化を行った。
  • カテゴリ一覧のサイズを大きくしてタップし易くした。
  • viewportを適切に設定した。

これら様々な施策をまとめて評価してくれる非常に便利なサイトが存在するのをご存知でしょうか?

モバイルフレンドリーテストで点数化

モバイルフレンドリー度とPCフレンドリー度を点数化して評価してくれるウェブサービスをGoogleが公開しています。

https://testmysite.thinkwithgoogle.com/

さっそく本サイトを評価してみたところ以下のような点数が出ました。

  • ポイントサイト・ニュース
    MOBILE FRIENDLINESS
    98/100
    GOOD
    MOBILE SPEED
    82/100
    FAIR
    DESKTOP SPEED
    87/100
    GOOD

まずまずの点数が出ているようですね。

そこで各ポイントサイトの評価も行ってみました。結果は以下の通りです。

  • げん玉
    MOBILE FRIENDLINESS
    100/100
    GOOD
    MOBILE SPEED
    51/100
    POOR
    DESKTOP SPEED
    54/100
    POOR
  • ちょびリッチ
    MOBILE FRIENDLINESS
    99/100
    GOOD
    MOBILE SPEED
    35/100
    POOR
    DESKTOP SPEED
    46/100
    POOR
  • ハピタス
    MOBILE FRIENDLINESS
    89/100
    GOOD
    MOBILE SPEED
    44/100
    POOR
    DESKTOP SPEED
    58/100
    POOR
  • PONEY
    MOBILE FRIENDLINESS
    99/100
    GOOD
    MOBILE SPEED
    51/100
    POOR
    DESKTOP SPEED
    56/100
    POOR
  • ポイントタウン
    MOBILE FRIENDLINESS
    97/100
    GOOD
    MOBILE SPEED
    64/100
    POOR
    DESKTOP SPEED
    66/100
    FAIR
  • GetMoney!
    MOBILE FRIENDLINESS
    99/100
    GOOD
    MOBILE SPEED
    49/100
    POOR
    DESKTOP SPEED
    57/100
    POOR
  • モッピー
    MOBILE FRIENDLINESS
    99/100
    GOOD
    MOBILE SPEED
    45/100
    POOR
    DESKTOP SPEED
    49/100
    POOR
  • ポイントインカム
    MOBILE FRIENDLINESS
    99/100
    GOOD
    MOBILE SPEED
    56/100
    POOR
    DESKTOP SPEED
    41/100
    POOR
  • i2iポイント
    MOBILE FRIENDLINESS
    100/100
    GOOD
    MOBILE SPEED
    44/100
    POOR
    DESKTOP SPEED
    58/100
    POOR
  • Gポイント
    MOBILE FRIENDLINESS
    100/100
    GOOD
    MOBILE SPEED
    48/100
    POOR
    DESKTOP SPEED
    38/100
    POOR
  • ECナビ
    MOBILE FRIENDLINESS
    100/100
    GOOD
    MOBILE SPEED
    69/100
    FAIR
    DESKTOP SPEED
    58/100
    POOR

どこのサイトも似たような点数で、モバイルフレンドリーはほぼ満点。モバイルスピードとデスクトップスピードが50点前後と赤点取ってます。トップページにあれだけ大量のコンテンツを詰め込んでいるので仕方が無いのかもしれませんが、Google曰く「3秒以内に表示されなければ約半数の人がサイトを見るのを途中でやめてしまう」そうで、各サイトのデザイナーさん、コーディング屋さん、良い点数が取れるように頑張りましょう。

PointSiteNews.com
作成日 2016年11月09日 06時16分
更新日 2016年11月26日 21時23分
3314文字
このエントリーをはてなブックマークに追加
ポイントサイト・ランキング
 1位 モッピー 
モッピーの評判・稼ぎ方・遊び方・攻略法利用者500万人を誇るポイントサイトの定番中の定番。換金額に上限が無く、何人ものポイント長者を今も産み出し続ける!!
評価5.0 評価: 4.95
 2位 げん玉 
げん玉の評判・稼ぎ方・遊び方・攻略法2005年から続く老舗ポイントサイトで会員数は440万人。運営会社の(株)リアルワールドは、安心の東証マザーズ上場企業。保有ポイントに利息がつくサービスも開始!!
評価5.0 評価: 4.85
 3位 PONEY 
PONEYの評判・稼ぎ方・遊び方・攻略法高還元率かつドットマネーへポイント交換できるサイトのひとつとして、ここ最近になって人気を集める。特に陸マイラー界では頭角を現しつつあり、3ティアの紹介制度も手伝って、ハピタスの座をおびやかす存在に。意外とその歴史は古く、旧称はぶたちょき。今なら登録で5,000ポイントプレゼント実施中!!
評価5.0 評価: 4.75
 4位 モバトク 
モバトク大手GMOが運営する利用者200万人の安心のポイントサイト。その洗練されたウェブサイトには、アンケートや各種ゲームの他に、モニタ・覆面調査もある。
評価4.5 評価: 4.72
 5位 ハピタス 
ハピタスの評判・稼ぎ方・遊び方・攻略法陸マイラーに絶大な人気を誇るサイト。クレジットカード発行やFX口座開設などの一撃1万円超の高額案件はハピタスの「みんなdeポイント」を狙え!!
評価4.5 評価: 4.58
 6位 ポイントタウン 
ポイントタウン大手GMOが運営する利用者200万人の安心のポイントサイト。その洗練されたウェブサイトには、アンケートや各種ゲームの他に、モニタ・覆面調査もある。
評価4.5 評価: 4.48
 7位 GetMoney! 
GetMoney!2001年サービス開始の最古参ポイントサイト。懸賞サイトとして有名なチャンスイットと同じ運営会社インフォニア(株)が運営。
評価4.5 評価: 4.45
 8位 ちょびリッチ 
ちょびリッチの評判・稼ぎ方・遊び方・攻略法ここ1、2年で急激に会員数をのばしている今注目のサイト。ショッピング、アンケート、モニター調査とポイントサイトのあらゆるコンテンツを提供。ドットマネーへの換金もスタートして利便性がさらに向上。注目すべきは楽天市場オープンAPIを駆使した楽天市場の商品ページ。今なら登録で500ポイントプレゼント実施中!!
評価4.5 評価: 4.28
 9位 ポイントインカム 
ポイントインカムショピングから覆面調査までポイントサイトの基本コンテンツをオールラウンドに提供しつつ、クレジットカード案件に強みを持つ会員数200万人のポイントサイト。
評価4.0 評価: 4.15
 10位 i2iポイント 
i2iポイントの評判・稼ぎ方・遊び方・攻略法「他サイトよりも1ポイントでも低ければご報告下さい」とどこぞの電機量販店のようなサービスベストポイント制度を開始。2014年にサービスインした今一番新しいポイントサイト!! グループでポイントを競い合うグループ機能が面白い!!
評価3.5 評価: 3.55
 11位 Gポイント 
Gポイントポイント交換サイトとして有名。しかしながら、ポイントサイトとしての機能も充実しており、ゲーム・アンケート・モニタ案件も豊富。
評価3.0 評価: 2.95
 12位 ECナビ 
ECナビポイント交換サイトPeXと同じ運営元のポイントサイト。会員数はその知名度とは裏腹になんと500万人超とポイントサイト業界最大級。
評価3.0 評価: 2.85