System,IT

【備忘録】慌てて真剣にモバイル対応を考えてみました

私のケータイは少し古いドコモのN。i-modeで時々サイトチェックをする程度で、モバイル機器からというとiPadからのアクセスがほとんど。
ためしにドコモのスマホを使っている妹に表示チェックをしてもらうと、かなりレイアウトが崩れているとのこと。
慌てて真剣にモバイル対応を考えてみました。
結果、ケータイからはデータを軽く!iPhoneとiPadからは軽くてデザインを考慮したレイアウトに、と変更できたはずです。
遅くなりましたが、これまで見にくくてすみません。不具合があったら、教えてください!

先に参考にしたサイトを上に掲載させてもらいました。私はこれから設定される方にヒントになるかな?というメモだけ。↑設定の方法などの詳細は達人たちのサイトをご覧下さい。

1.ケータイからのアクセス
現象:タイトルヘッダーに使用している画像が大きいので、レイアウト崩れしている。
原因:使っているテンプレートは、タイトルヘッダーの画像を縮小表示しない設定。

対策:ケイタイからのアクセスの場合、テキスト中心の画面に自動的に表示を変更してくれるプラグインをインストール

ツール:Ktai Style
*設定のポイント:「iPhone, Android 用」を「Ktai Styleを使わない」にする。

2.iPhone iPadからのアクセス
現象:iPhoneの場合もケータイからと同様の状況。
iPadの場合はパソコンブラウザと同じ表示なので特に問題はないが、モバイルとして外から見ていただく方にはもっと簡素化されたiPad対応の画面表示があった方がベター。

対策:自動的に表示を切り替える有料ブラグインをインストール

ツール:WPtouch Pro 
*注意点:無料版もありますが、iPad対応はしていません。無料版と有料版は機能制限でしっかり差別化されています。勉強の意味も含めて有料版を購入しました。
$49!結構高いですが、オプションでかなり細かい設定ができるようなので使い込むつもりです。

3.レイアウトチェックに使える便利なツール

・ブラウザ「FireFox」のツール FireMobileSimulator

主要3キャリア(DoCoMo/Au/SoftBank)の携帯端末ブラウザをシミュレートして、モバイルサイト開発を容易にするために作成されたFirefoxのアドオン。
携帯機種ごとの表示をPC上のブラウザで確認できます。
初期設定にある数機種の携帯にプラスして最新機種の設定をダウンロードできるので、いちいち他の方に確認してもらう必要がなくなりました。←こんなことを人に頼むなんてなんとも迷惑ですからね~!

コメントを残す