Webサイトのスマートフォン対応化 2
―― なに？
「Webサイトのスマートフォン対応化を読んだけど面倒くさそうじゃん」
―― そう？ 全然面倒じゃないと思うけど？
「だけど確かに、今iPhoneで自分のサイトにアクセスすると、字が小さすぎて見られないんだよな」
―― 大体さあ、自分がiPhoneを持っているのに、それで自分のホームページがちゃんと見られないんでしょ。それって変すぎるよ。
「まあね」
§1 トップページ
―― トップページは前にも書いた方法だけど、とりあえずヘッダ部分に
<meta name="viewport" content="width=480">
と書いた1行を足しておけばいいよ。これで、iPhoneで見た時に字の大きさが文庫本並みになるんで、一応問題なし。
「うん」
―― それと、この際だから言っちゃうけど、Webサイトで字の大きさを小さく指定するのは良くないよ。考えてみ。デザイナーが村上春樹の小説本の装丁を任されたとして、『よーし！ おしゃれっぽくするために、本文の字の大きさを他の小説の80％の大きさにするぞ』とかする？
「しない」
―― しちゃ駄目なんだよ。字を小さくしたり薄いグレーにして『おしゃれになった』と思うのは大いなる勘違い。
「わかった」
―― あとは、トップページは気が向いたらいじってみるぐらいでいいんじゃないかな。まあ、トップページはコンテンツへの橋渡しがきちんと出来ればいいわけだからね。
§2 コンテンツ
「各コンテンツのページはどうするの？」
―― これはちょっと難しい。日記のところはいっそブログを利用したらどう？ seesaaのブログサービスはスマートフォンに対応していて、結構いいよ。
サンプル：seesaaブログ（たまプラーザ・あざみ野 ぶらり日記）
PC（幅1024px）で見たものの縮小
同ページにiPodTouchでアクセスした時
「日記が解決すれば他はなんとかなりそうな気がしてきた」
―― そうね。ホームページ（HP）は他へ誘導するための拠点のようにすればいいんじゃないかな。HP→ブログ、HP→ツイッター、HP→Webアルバム、HP→Youtube動画、のように。過去の日記ページは今のままでもいいよ。余力があったら各ページに
<meta name="viewport" content="width=480">
をつける。っていうか、手作業でやっても、1ページ5秒で修正できるから、100ページ直すのに500秒＝8分しかかからないんだぜ。
「よし。ちょっとやってみる」
[2011-03]
