Webサイトのスマートフォン対応化 - 「微ニ入ル」の場合
私がWebサイトのスマートフォン（以下「スマホ」）対応化で行なったことを書いておきます。
▼ スマホ未対応段階のiPodTouch画面キャプチャです。字が小さくて読めません（いちいち拡大しなければならない）。
▼ スマホ対応済みの画面です。メニューは上段へ。字の大きさは文庫本とほぼ同じ。
▼ スマホ対応済みの一般ページ。メニューは非表示。
「微ニ入ル」のスマホ対応作業の目的は「サイトの既存HTMLファイル（約1,000ページ）をiPhoneやiPodTouchでもラクに読めるようにすること」でした。
HTMLページの内容はそのままに、CSSだけでスマホ対応化をしました。（但し、HTML全ページのヘッダに手を加える必要があります。）
方法
- viewport
-
全ページのヘッダ部に
<meta name="viewport" content="width=480">
を貼りつけた。
→これにより可読性が飛躍的に向上します。蟻ん子のように小さかった文字が文庫本の字の大きさぐらいになって、ずんずん読めます。 - スタイルシート利用
-
全ページのヘッダ部にある一般スタイルシートへのリンク
<link rel="stylesheet" type="text/css" href="style/style-vinyl.css">
の後方にスマホ用スタイルシートへのリンク
<link rel="stylesheet" type="text/css" media="only screen and (max-device-width:480px)" href="style/without-menu.css">
を貼り付けた。
→これにより、画面の小さいスマートフォンは2枚のスタイルシートを読み込むことになります。 - スタイルシート記述
-
このスマホ用スタイルシートにスマホ特有の設定を色々書き込んだ。
→サイトの色彩などは一般スタイルシートの方で記述しているので、スマホ用スタイルシートでは主にレイアウト関係を記述することになります。
- 段組表示をしない（左段にあるメニューは非表示。但し、トップページでは上段に表示）
- コンテンツ幅は
指定しない100％幅を指定（文章は自動で折り返す）
- 作業の手間がかからない。
- 将来コンテンツの追加や手直しをする時にはPC用のページのみを修正すればOK。「スマホ向けのトップページ」などを別個に作ると後でメンテナンスが大変です。
- PCページと色づかいなどが同じなのでPC画面とスマホ画面の間に統一感がある。
基本的な考え方
スマートフォン向けにわざわざ専用ページを作るケースも多くありますが、個人のWebサイトは上記のようにPC用の既存のページを活用するのがいいと思います。
などがその理由です。
ちなみに、個人サイトでも文章中心ではなく写真やイラスト中心のサイトだと対応作業が面倒かもしれません。
[2011-02]
最終更新[2012-03]
